Pemrograman

Bahasa

Framework

Peralatan

Info

Membuat tema Wordpress dari nol: (1) Fondasi awal halaman utama

– 20 February 2016

Pada tutorial sebelumnya, kita telah membuat konstruksi file awal. Ada dua file yang telah dibuat, index.php dan style.css. Sekarang kita fokus pada file index.php. Isinya adalah sebuah HTML percobaan (hello world). Sekarang kita akan menggantinya.

File index.php merupakan file utama tema. File ini yang bertanggung jawab menampilkan halaman utama. Silahkan ganti semua isi file index.php menjadi seperti berikut ini:


Kemudian coba buka lagi website wordpress-nya:

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

Dalam kode index.php terdapat beberapa fungsi yang kita panggil. Fungsi-fungsi tersebut adalah fungsi wordpress. Rupanya wordpress sudah menyediakan fungsi PHP yang dapat kita pakai. Mari kita bahas maksud fungsi-fungsi tersebut.
Catatan: ... (titik-titik-titik) artinya ada kode lain di sana
 <!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>
...
Terdapat tiga fungsi PHP yang dipanggil di bagian (head) ini:
  1. language_attributs() berfungsi untuk mendapatkan atribut bahasa. Pada wordpress yang saya gunakan, fungsi ini mengembalikan nilai en-US.
  2. bloginfo() berfungsi untuk menampilkan informasi tentang website/blog. Pada potongan kode di atas, fungsi ini dipanggil dua kali dengna parameter berbeda. Fungsi ini akan menghasilkan nilai sesuai parameter yang diminta. Sebagai contoh, bloginfo('name') akan menghasilkan judul website yaitu Petani Kode.
  3. wp_head() berfungsi untuk memanggil komponen head yang lainnya, seperti tag meta, link css, kode css, javascript, dsb.
Selanjugnya 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 dan sebuah kelas continter. 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 kepercayaan beberapa programmer, memanggil javascrip di akhir dokumen HTML membuatnya lebih cepat di-download.
...
<header class="site-header">
    <h1><a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a></h1>
    <h5><?php bloginfo('description'); ?></h5>
</header>
...
Pada potongan kode di atas ada dua fungsi PHP yang di panggil. Fungsi home_url() untuk mendapatkan link home. Kemudian fungsi bloginfo(), sudah dijelaskan sebelumnya.
... 
<?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;
?>
...
Potongan kode di atas merupakan potongan kode untuk menampilkan artikel. Ada lima fungsi PHP yang dipanggil di sana.
  1. have_posts() merupakan fungsi untuk mengecek, apakah ada artikel (post) atau tidak. Fungsi ini mengembalikan nilai trude dan false.
  2. the_post() fungsi untuk membuat iterasi (perulangan);
  3. the_permalink() fungsi untuk mendapatkan link (permanen) artikel;
  4. the_title() fungsi untuk mendapatkan judul artikel; dan
  5. the_content() fungsi untuk mendpatkan isi artikel.
Selain lima fungsi tersebut, di bagian artikel ini juga terdapat sebuah kelas post. Kelas ini kita butuhkan untuk memberikan style CSS.

Terakhir, 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.tumblr.com">Ardianta Pargo</a></div>
</footer>
...
Salah satu fungsi yang perlu saya jelaskan pada potongan kode di atas adalah date(), karena fungsi-fungsi yang lainya sudah dijelaskan sebelumnya. Fungsi date() merupakan fungsi PHP untuk mendapatkan tanggal. Parameter Y (y kapital) akan menghasilkan nilai tahun sekarang.

Selain fungsi, pada bagian footer ini juga terdapat dua kelas yang akan kita butuhkan nanti pada pembuatan kode CSS.  Saya kira cukup sekian tutorial ini. Cukup banyak fungsi yang harus diingat. [bersambung...]

Referensi: https://codex.wordpress.org/Function_Reference/