Loop WordPress Dijelaskan: Apa Itu dan Bagaimana Cara Kerjanya

Loop adalah bagian sentral dari WordPress. Tanpa itu, Anda tidak akan melihat konten di situs web WordPress mana pun. Ini bertanggung jawab untuk memastikan bahwa artikel muncul di halaman blog dan di arsip serta konten statis di satu halaman.

Jika Anda seorang desainer tema, Anda tidak akan belajar cara menggunakannya. Namun, sebagai pengguna WordPress biasa, Anda mungkin tidak menyadari bahwa itu ada.

Untuk mengatasi itu, dalam posting ini, kami akan menjelaskan loop WordPress secara rinci. Kami akan membahas apa itu dan bagaimana cara kerjanya, dan di mana menemukannya di WordPress. Anda juga akan belajar cara membuatnya sendiri dan melihat beberapa contoh loop WordPress untuk memperkuat pemahaman Anda tentangnya.

Apa itu Loop WordPress (Dan Di Mana Anda Menemukannya)?

Jika Anda menjelaskan secara singkat apa itu loop WordPress, itu hanyalah markup yang mengambil dan menampilkan konten pada halaman di situs WordPress. Baik itu halaman statis, posting, halaman blog, atau arsip – di mana pun WordPress menarik konten dari database dan menampilkannya di halaman, loop terlibat.

Namun, mengapa ini disebut loop?

Karena itu akan berjalan berulang kali. Plus, seperti yang akan Anda lihat di bawah, secara harfiah terdiri dari loop PHP.

Seberapa sering WordPress loop berjalan?

Sampai tidak ada yang tersisa untuk ditampilkan. Bahkan pada halaman statis, ia mengulang konten yang tersedia. Namun, dalam hal ini, berhenti setelah satu pass.

Seperti Apa Bentuk Loop WordPress?

Untuk memperjelas apa yang sedang kita bicarakan, mari kita lihat sebuah contoh dan membahasnya selangkah demi selangkah. Berikut ini contoh tampilan loop WordPress sederhana:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Jika Anda sudah mengetahui PHP atau merupakan pengembang WordPress, Anda seharusnya tidak memiliki masalah untuk memahaminya. Namun, untuk semua orang, mari kita bahas satu per satu.

• if ( have_posts() ) : — Ini adalah pernyataan if yang menggunakan fungsi have_posts(). Jika pernyataan umum dalam pemrograman, mereka hanya mengatakan "jika kondisi berikut berlaku, lanjutkan". Dalam hal ini, kondisinya adalah have_posts() , yang hanya memeriksa apakah ada postingan yang dapat ditampilkan.
• while ( have_posts() ) : — Baris ini adalah while -loop dan menandai awal dari loop WordPress. Ini akan mengeksekusi kode yang dikandungnya selama kondisinya benar. Sekali lagi, syaratnya adalah apakah WordPress memiliki posting di toko. Seberapa sering akan mengembalikan true ditentukan oleh jumlah posting yang diatur dalam pengaturan WordPress di antarmuka admin.
• the_post(); — Ini adalah kode yang dijalankan oleh loop. Ini adalah fungsi WordPress yang memanggil semua data yang tersedia untuk posting berikutnya dan menyimpannya untuk siap ditampilkan. Untuk itu, kami memiliki banyak tag template yang akan kami bicarakan di bawah ini.
• // Display content here — Di sinilah kami menempatkan markup yang menentukan bagian konten mana yang akan ditampilkan dan dengan cara apa. Ini biasanya campuran dari PHP dan HTML. Kami tidak menunjukkannya di sini karena lebih kompleks dan kami akan membahasnya nanti.
• endwhile; — Potongan kode yang menutup while -loop setelah melakukan apa yang kita perlukan.
• endif; — Sama seperti di atas tetapi untuk pernyataan if .

Jadi, pada dasarnya strukturnya adalah sebagai berikut: periksa apakah ada posting, lalu tarik data yang diperlukan dari database dan tampilkan dengan cara yang telah ditentukan, ulangi ini selama ada posting yang valid untuk ditampilkan.

Sintaks Alternatif

Satu hal yang cepat, Anda juga terkadang melihat loop yang ditulis seperti ini:

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

Ini persis sama dengan contoh di atas, hanya dalam sintaks PHP alternatif. Yang mana yang Anda gunakan benar-benar terserah Anda. Demi konsistensi, kami akan melanjutkan dengan variasi pertama.

Di mana Menemukan Loop WordPress?

Fakta bahwa loop selalu bekerja setiap kali konten muncul di halaman sudah menjawab di mana menemukan loop WordPress. Jawabannya ada di setiap file template tema Anda yang menampilkan konten.

Atau, tergantung pada arsitektur tema Anda, itu mungkin juga di bagian template. Ini adalah file template yang berisi potongan kode yang sering digunakan (seperti loop). Mereka dapat ditarik ke file lain alih-alih menggunakan kembali potongan kode yang sama setiap kali.

Misalnya, jika Anda membuka file page.php dari tema Twenty Twenty-One, Anda dapat melihat bahwa, di sini, loop dibagi menjadi beberapa bagian. Saat dimulai di dalam file itu sendiri, bagian yang menentukan bagaimana mengeluarkan data berada di bagian template yang disebut content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

Hirarki template WordPress menentukan file mana yang digunakan sistem untuk menampilkan jenis halaman dan setiap file harus berisi loop atau referensi ke tempat Anda dapat menemukannya.

Ini juga berarti bahwa loop dapat terlihat berbeda di file individual, artinya pada halaman yang berbeda. Misalnya, dalam arsip Anda mungkin hanya ingin menampilkan kutipan postingan, sedangkan di halaman blog utama, Anda mungkin ingin menampilkan seluruh postingan (hingga tautan “baca selengkapnya”). Untuk itu, Anda memerlukan berbagai jenis markup, itulah sebabnya loop tidak akan terlihat sama di dalam home.php dan archive.php .

Cara Membuat Lingkaran

Untuk membuat loop, pada dasarnya Anda dapat memulai dengan kode sederhana yang kami uraikan di atas. Itu benar-benar loop standar. Ini dia lagi:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Bagian yang sulit adalah apa yang kami tinggalkan: bagian yang menentukan tampilan konten. Untuk itu, seperti yang disebutkan, Anda biasanya menggunakan campuran HTML dan PHP. Misalnya, berikut adalah bagaimana Anda akan memberi tahu WordPress untuk memuntahkan posting yang dibungkus dengan tag <article> dengan kelas dan id khusus, judul sebagai heading h1 , ditambah gambar dan konten unggulan.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Satu hal yang menonjol di atas adalah ada banyak tag yang ditulis dengan garis bawah. Ini adalah tag template WordPress, yang menawarkan pintasan untuk memanggil bagian umum dari konten. Di sini, kami menggunakan the_title() untuk menampilkan judul posting, the_post_thumbnail() untuk gambar unggulan, dan the_content() untuk konten utama. Ada banyak lagi, seperti the_excerpt() atau the_category() . Anda dapat menemukan daftar opsi di sini.

Hal lain yang penting untuk loop WordPress adalah tag kondisional. Anda melihat mereka banyak menggunakan markup terkait loop untuk menampilkan sesuatu hanya dalam kondisi tertentu. Misalnya, sangat umum untuk membungkus the_post_thumbnail() menjadi pernyataan bersyarat agar WordPress tidak mencoba menampilkannya di halaman saat tidak ada gambar unggulan.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Kami memiliki lebih banyak contoh di bawah ini. Untuk mempelajari lebih lanjut tentang tag bersyarat, periksa Codex WordPress.

Contoh Loop WordPress

Sebagai bagian terakhir dari tutorial ini, kita akan membahas beberapa contoh cara menggunakan loop WordPress.

Tema Dua Puluh Dua Puluh Satu

Saat melihat tema Twenty Twenty-One, hal pertama yang menonjol adalah penggunaan bagian template yang berat. Semua file template standar seperti page.php , single.php , dan bahkan index.php memulai loop di dalam file tetapi kemudian gunakan get_template_part untuk memindahkan tampilan konten ke file lain. Dalam hal ini, masing-masing adalah content-page.php , content-single.php , dan content.php . Berikut adalah versi singkat dari single.php sebagai contoh:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Ini juga terlihat di file lain. Misalnya, header dan footer juga memiliki bagian template sendiri. Anda dapat melihat referensi yang ada di dalam loop di tempat lain. Misalnya, jika Anda melihat content-single.php , Anda dapat melihat panggilan ke bagian template author-bio.php di bagian akhir.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

Selain itu, ini relatif adil standar:

1. Buka elemen HTML <article> dengan id dan kelas khusus
2. Buat elemen header artikel yang menampilkan judul yang dibungkus dengan heading h1 dan menampilkan gambar unggulan dengan fungsi yang disesuaikan untuk Twenty Twenty-One
3. Lanjutkan dengan elemen entry-content yang berisi tag template the_content() untuk menampilkan konten postingan tunggal
4. Sertakan markup untuk pagination dan footer entri dengan fungsi Dua Puluh Dua Puluh Satu lainnya untuk menampilkan informasi meta pos
5. Akhirnya, ada panggilan yang disebutkan di atas ke bio penulis di bagian templatnya sendiri

Tema Default Dua Puluh Sepuluh WordPress

Jika Anda kembali ke tema default WordPress pertama, Twenty Ten, dan menggunakan repositori Subversion untuk melihat file dari versi 1.0, Anda dapat melihat bagaimana penanganan file loop dan template telah berkembang dari waktu ke waktu. Saat itu, banyak file template berisi loop WordPress lengkap mereka sendiri alih-alih mengalihdayakannya ke bagian template yang dapat digunakan kembali. Anda dapat melihat ini dengan jelas di page.php tema.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

Hal yang sama juga terlihat di onecolumn-page.php , yang merupakan file yang mengontrol template halaman kustom yang ditawarkan tema. Yang juga perlu diperhatikan adalah ia menggunakan panggilan lama ke loop yang ditulis dalam satu baris saat itu.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

Dalam tema modern, Anda paling sering melihatnya tersebar di beberapa baris seperti yang terlihat sebelumnya untuk meningkatkan keterbacaan kode.

Tema Twenty Ten juga memiliki file loop.php mandiri yang terlalu panjang untuk disertakan di sini tanpa melebihi batas kata saya. Ini dibagi menjadi tiga bagian yang mengontrol tampilan beberapa jenis posting (galeri gambar, posting dari kategori Selain , semua posting lainnya). Masing-masing dirinci lebih lanjut oleh pernyataan if dan else untuk menjelaskan kasus yang berbeda seperti halaman arsip dan pencarian.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

Semuanya mengandung logika yang cukup berbelit-belit, itulah sebabnya ia keluar agak panjang dan rumit. Saya senang kami memiliki cara lain untuk menangani ini hari ini dan saya sarankan Anda melihatnya untuk melihat contoh loop WordPress yang tidak ingin Anda tiru.

Omong-omong, jika Anda berpikir saya terlalu keras pada pengembang sejak saat itu, yakinlah, mereka setuju dengan penilaian saya. Lihat saja komentar pengembang di mana loop.php menutup loop.

 <?php endwhile; // End the loop. Whew. ?>

Blok Loop Kueri WordPress

Anda mungkin tidak menyadarinya karena merupakan fitur Gutenberg yang relatif baru tetapi editor blok (dan dengan ekstensi, pengeditan situs lengkap) sekarang juga memiliki blok yang berisi loop WordPress. Ini disebut Blok Loop Kueri dan Anda dapat menambahkannya ke situs Anda seperti blok lainnya. Cara termudah adalah dengan menambahkan garis miring dan ketik namanya seperti /queryloop . Tekan enter dan itu akan muncul di halaman.

Blok memungkinkan untuk membuat loop PHP tanpa harus menulis kode. Ini akan secara otomatis menampilkan posting terbaru di situs Anda. Selain itu, ia memiliki beberapa opsi penyesuaian. Pertama-tama, blok dilengkapi dengan sejumlah tata letak yang telah ditetapkan. Anda dapat menggilirnya melalui panah atau mengklik opsi Grid untuk melihat semuanya sekaligus.

Pilih mana yang Anda suka atau klik Pilih jika Anda telah tiba di opsi favorit Anda untuk menyelesaikan pilihan. Penting untuk dicatat bahwa tata letak terdiri dari pola blok, jadi kelompok blok tunggal yang telah diatur sebelumnya. Ini juga berarti Anda dapat mengaturnya secara berbeda sesuai kebutuhan, mereka masih blok biasa. Gunakan panah atau klik dan tahan opsi Seret untuk memindahkannya ke tempat yang Anda inginkan.

Selain itu, setiap blok (dan seringkali setiap grup blok) juga dilengkapi dengan opsi biasa di layar editor utama dan di bilah sisi. Di sini, Anda dapat mengubah warna, ukuran font, format, dan lainnya.

Setelah puas, jika Anda mempublikasikan atau mempratinjau halaman, Anda akan melihat loop kueri WordPress kustom Anda muncul di sana. Jadi, bahkan jika Anda bukan pengembang WordPress dan tidak mengerti PHP, Anda masih dapat memanfaatkan apa yang ditawarkan loop.

Penjelasan Ringkasnya Loop WordPress

Loop adalah sesuatu yang harus diketahui oleh setiap profesional WordPress. Namun, bahkan jika Anda adalah pengguna yang lebih santai, memahami cara kerjanya bukanlah ide yang buruk. Mungkin akan lebih mudah untuk memecahkan masalah atau membuat templat halaman khusus jika Anda menginginkannya.

Dalam posting ini, kami telah membahas apa itu loop, di mana ia berada, dan memecahnya secara rinci. Kami juga telah melihat bagaimana Anda dapat membuat loop dan contoh Anda sendiri dari tema default dan blok kueri baru. Sekarang, Anda tahu semua yang Anda butuhkan untuk membuat dan menyesuaikan loop WordPress.

Apa penggunaan favorit Anda dari loop WordPress? Silakan bagikan pemikiran Anda di komentar di bawah!

Gambar: Jonny Gios/Unsplash, Tine Ivanic/Unsplash