Ahmad Muhardian · 20 Feb 2016

Membuat Template Wordpress #2: Fungsi-fungsi Dasar Wordpress di Homepage

#Wordpress #PHP #CSS #CMS

Pada tutorial sebelumnya kita telah membuat konstruksi awal dari template.

Ada dua file yang telah kita dibuat, index.php dan style.css.

Sekarang kita fokus pada file index.php. Isinya adalah sebuah HTML percobaan (hello world).

Tentu ini bukan tujuan akhir yang kita inginkan,

Karena itu, kita akan menggantinya.

Mari kita mulai…

Modifikasi File `index.php`

File index.php merupakan file utama template. File ini yang bertanggung jawab menampilkan halaman utama.

Silakan ganti semua isi file index.php menjadi seperti ini:

<!DOCTYPE html>
 <html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title><?php bloginfo('name'); ?></title>
        <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?> >

    <div class="container">

        <header class="site-header">
            <h1><a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a></h1>
            <h5><?php bloginfo('description'); ?></h5>
        </header>

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

                <article class="post">
                    <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                    <?php the_content(); ?>
                </article>

            <?php endwhile;
        else:
            echo "<p>Tidak ada artikel</p>";
        endif;
        ?>

        <footer class="site-footer">
            <div class="attrib">Copyright &copy; <?php echo date('Y'); ?> <a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a> | Developed by <a href="http://ardianta.github.io">Ardianta</a></div>
        </footer>

    </div><!-- /container -->

    <?php wp_footer(); ?>
    </body>
</html>

Setelah itu, coba lihat hasilnya:

Kita telah berhasil menampilkan judul website (header), artikel (post), dan footer.

Artikelnya cuma ada satu, karena saya belum menambahkannya. Bila ada artikel yang lain, maka akan ditampilkan juga di sana. Tampilannya saat ini masih polos (plain) karena kita belum menambahkan kode CSS.

Penjelasan Kode Template

Dalam kode index.php terdapat beberapa fungsi yang kita panggil.

language_attributes();
bloginfo();
wp_head();
body_class();
home_url();
have_posts();
the_post();
the_title();
the_content();
date() (fungsi dari PHP);
dan wp_footer().

Fungsi-fungsi tersebut adalah fungsi dari wordpress dan PHP.

Rupanya wordpress sudah menyediakan fungsi yang dapat kita pakai.

Mari kita bahas maksud fungsi-fungsi tersebut.

<!DOCTYPE html>
 <html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title><?php bloginfo('name'); ?></title>
        <?php wp_head(); ?>
    </head>

<!-- ada lanjutan kode lain di bawah kode ini -->

Terdapat tiga fungsi PHP yang dipanggil di bagian*(head)*:

language_attributs() berfungsi untuk mendapatkan atribut bahasa. Pada wordpress yang saya gunakan, fungsi ini akan mengembalikan nilai en-US karena bahasa default yang saya gunakan adalah bahasa inggris.
bloginfo() berfungsi untuk menampilkan informasi tentang website/blog. Pada potongan kode di atas, fungsi ini dipanggil dua kali dengan parameter yang berbeda. Fungsi ini akan menghasilkan nilai sesuai parameter yang kita berikan. Sebagai contoh, bloginfo('name') akan menghasilkan judul website yaitu Petani Kode.
wp_head() berfungsi untuk memanggil komponen head yang lainnya, seperti tag meta, link css, kode css, javascript, dsb.

Selanjugnya perhatikan bagian body:

...

<body <?php body_class(); ?> >

    <div class="container">
    ...
    </div><!-- /container -->

    <?php wp_footer(); ?>
</body>
...

Pada potongan kode di atas, terdapat dua fungsi PHP yang dipanggil.

Fungsi pertama body_class() untuk memanggil kelas-kelas yang dibutuhkan tag body.
Kemudian fungsi wp_footer() fungsinya hampir mirip dengan wp_head(), namun wp_footer() disertai navbar (warna hitam di atas) dan dikhususkan untuk memanggil javascript. Karena pemanggilan Javascript dibagian akhir dokumen HTML dapat meningkatkan kecepatan web.

Berikutnya, coba perhatikan bagian <header>.

...
<header class="site-header">
    <h1><a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a></h1>
    <h5><?php bloginfo('description'); ?></h5>
</header>
...

Pada bagian <header>, kita menggunakan fungsi bloginfo() untuk mengambil judul website dan deskripsinya.

Berikutnya, coba perhatikan bagian tengah…

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

        <article class="post">
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <?php the_content(); ?>
        </article>

    <?php endwhile;
else:
    echo "<p>Tidak ada artikel</p>";
endif;
?>

Pada bagian ini, kita akan menampilkan semua artikel yang ada di dalam Wordpress.

Kita menggunakan fungsi have_posts() untuk mengecek: apakah sudah ada artikel atau tidak?

Fungsi ini akan mengembalikan nilai true apabila ada artikel.

Berikutnya kita menggunakan perulangan while untuk membuat perulangan berdasarkan banyak artikenya.

Fungsi the_title() akan menghasilkan judul dari artikel yang ada dan the_content() akan menghasilkan kontennya.

Terakhir, coba perhatikan bagian <footer>.

<footer class="site-footer">
    <div class="attrib">Copyright &copy; <?php echo date('Y'); ?> <a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a> | Developed by <a href="http://ardianta.github.io">Ardianta</a></div>
</footer>

Pada bagian <footer>, kita menggunakan fungsi date('Y') untuk mengambil tahun saat ini dan fungsi bloginfo() untuk mengambil nama website.

Apa Selanjutnya?

Pada bagian ini, kita sudah mengenal beberapa fungsi dasar untuk membuat template di Wordpress.

Fungsi-ungsi ini tidak perlu dihafal, karena sudah ada di dokumentasi.

Jika kamu belum paham arti dari fungsi-fungsi, tersebut…

…tinggal buka dokumentasi.

Modifikasi File index.php

Penjelasan Kode Template

Apa Selanjutnya?

Modifikasi File `index.php`