Cara Membuat Theme WordPress (Part 3): Query Looping Index

Setelah melewati step ke-2 pembuatan theme WordPress, yakni membuat file functions, header, dan footer, di step ke-3 ini kita belajar membuat Query Loop dan menggunakan filter hook.

Query Loop merupakan serangkain kode yang berfungsi untuk menampilkan list post yang telah kita inputkan ke dalam WordPress.

Selain itu, file index merupakan file default jika file template yang lain tidak ada, seperti archive dan single post. Maka, secara otomatis wordpress akan merender tampilan di file index.php.

Selain Menampilkan konten kita juga menampilkan atribute seperti judul, konten link ke single artikel dan fungsi fungsi kustom seperti menampilkan tanggal post tersebut dibuat serta durasi membaca artikel.

Langkah 1: Membuat Query Loop

Untuk memulai membuat query loop, Anda perlu mengganti code pada file index.php yang telah dibuat sebelumnya. Berikut langkah-langkah membuat query loop:

1. Kunjungi file index.php.
   
2. Ganti dengan code* yang dapat Anda copy seperti berikut ini:
   
3. Jika sudah, simpan code tersebut (Ctrl + S).

*Berikut code untuk query looping baru yang bisa Anda salin ke file index.php:

<?php
/**
 * The main template file
 *
 * @package Tutorial
 */

get_header();
?>

    <?php if ( have_posts() ) : ?>
        <section class="blog-list px-3 py-5 p-md-5">
            <div class="container single-col-max-width">
                <?php while ( have_posts() ) : ?>
                    <?php the_post(); ?>
                    <div class="item mb-5">
                        <div class="row g-3 g-xl-0">
                            <div class="col-2 col-xl-3">
                                <?php the_post_thumbnail( 'thumbnail', array( 'class' => 'img-fluid post-thumb' ) ); ?>
                            </div>
                            <div class="col">
                                <h3 class="title mb-1"><a class="text-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                                <div class="meta mb-1">
                                    <span class="date"><?php tutorial_publish_date(); ?></span>
                                    <span class="time"><?php tutorial_reading_time(); ?></span>
                                    <span class="comment"><?php comments_popup_link( false, false, false, 'text-link' ); ?></span>
                                </div>
                                <div class="intro"><?php the_content(); ?></div>
                                <a class="text-link" href="<?php the_permalink(); ?>">Read more &rarr;</a>
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//item-->
                <?php endwhile; ?>

                <?php tutorial_posts_navigation(); ?>

            </div>
        </section>
    <?php endif; ?>

<?php
get_footer();

Pada code di atas, ada beberapa fungsi yang berguna untuk memanggil atribut dari post tersebut agar sebuah konten menjadi lebih informatif untuk para pembaca. Berikut fungsi  – fungsi untuk memanggil:

• if ( have_posts() ) :berfungsi untuk memeriksa apakah ada artikel untuk di-looping.
• the_post(); berfungsi untuk inisiasi agar fungsi seperti <the_title(); berjalan pada looping tersebut.
• the_post_thumbnail(); berfungsi memanggil featured image artikel.
• the_permalink(); berfungsi memanggil url single artikel.
• the_title(); berfungsi untuk memanggil judul artikel.
• tutorial_publish_date(); fungsi kustom berfungsi untuk menampilkan kapan artikel tersebut dibuat.
• tutorial_reading_time() fungsi kustom berfungsi untuk menampilkan lama waktu membaca.

Dengan atribut di atas, konten akan lebih menarik dan informatif. Selain itu, konten yang ada akan terlihat lebih profesional. Selanjutnya kita akan mencoba membuat fungsi kustom.

Langkah 2: Membuat Fungsi Kustom

Fungsi Kustom adalah fungsi yang kita buat sendiri tanpa memanggunakan fungsi dari WordPress itu sendiri. Di sini kita akan belajar membuat fungsi sendiri.

Ada 2 fungsi pertama yang kita buat yaitu fungsi tutorial_publish_date(); . Sedangkan fungsi kedua adalah tutorial_reading_time(); .

a. Menampilkan Publish Date

Agar dapat menampilkan publish date atau tanggal dipublikasikannya artikel, sila masukkan fungsi berikut ke file functions.php. Paste di bawah code yang sebelumnya sudah dibuat.

/**
 * Display publish date.
 */
function tutorial_publish_date() {
    echo sprintf(
        /* translators: %s: time */
        esc_html__( 'Published %s ago', 'tutorial' ),
        esc_html( human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) )
    );
}

Code di atas menggunakan fungsi human_time_diff(); dan current_time() dari WordPress sebagai pembanding sehingga selisih tersebut menampilkan kapan artikel dipublikasikan, contohnya seperti 5 menit yang lalu yang ada di sosial media.

Berikut gambaran penerapan code publish date pada file functions.php:

Code untuk menampilkan publish date.

b. Menampilkan Durasi Membaca Artikel

Durasi membaca artikel ini adalah informasi yang dapat ditangkap pembaca terkait seberapa panjang artikel tersebut. Sehingga target pembaca bisa memperkirakan.

Nantinya durasi diharapkan dapat membantu seseorang mempertimbangkan untuk membaca penuh atau tidak. Dengan demikan, pembaca sebagai user tidak akan membuang waktu. Sehingga dapat mereda pembaca melakukan bouncing.

Berikut fungsi untuk menampilkan durasi membaca artikel yang perlu Anda masukkan ke file function.php:

/**
 * Display reading time.
 */
function tutorial_reading_time() {
    $content = get_the_content( null, false, get_the_ID() );
    $content = strip_shortcodes( $content );
    $content = wp_strip_all_tags( $content );

    $word_count = count( preg_split( '/\s+/', $content ) );

    $wpm  = 161;
    $time = ceil( $word_count / $wpm );
    $time = max( 1, $time );

    $read_time = sprintf(
        /* translators: %s: Number of minutes. */
        __( '%s min read', 'tutorial' ),
        $time
    );
    echo esc_html( $read_time );
}

Pada serangkaian code di atas, kita mengguanakan filter the_content yang akan dipanggil pada fungsi the_content(); dan mengolahnya atau memodifikasi output content tersebut menjadi 36 kata menggunakan fungsi dari WordPress wp_trim_words(); .

Tapi sebelumnya ada kondisi is_archive(); dan is_home(); yang berfungsi untuk mencegah modifikasi ini berjalan selain di halaman depan dan archive.

Berikut gambaran penerapan durasi baca pada file functions.php:

Code untuk menampilkan durasi membaca.

Kesimpulan dan Hasil

Kesimpulan dari step ini adalah kita harus memisah antara header, footer untuk static templatenya dan index untuk dinamis templatenya. sedangkan untuk fungsi kustom bisa ditulis di file functions.php.

Untuk modifikasi output dari the_content() hanya diimplementasi di home dan archive saja. Selain itu, atribut – atribut post merupakan element yang penting untuk membuat konten semakin menarik dan informatif.

Nah, pada step selanjutnya kita akan belajar membuat halaman single atau single post. Halaman ini yang akan menjadi halaman isi dari artikel yang dipublikasikan di website.

Membuat website secara mandiri memang cukup menantang. Jika Anda ingin fokus ke bisnis, Anda dapat menyerahkan urusan pembuatan website ke Tim Tonjoo, pengembang website profesional yang telah dipercaya oleh berbagai kalangan.

Mulai dari website korporasi hingga start-up pernah kami tangani, contohnya seperti Polygon, Hipwee, Telkom hingga Astra International. Yuk, diskusikan gambaran website keinginan Anda melalui Kontak Tonjoo dan kami akan bantu wujudkan!

Baca artikel terkait WordPress, WooCommerce, Plugin dan pengembahan website lainnya dari Moch. Nasikhun Amin di blog Tonjoo Studio.