Pada modul ini kita akan membahas 3 file yang berkaitan secara langsung, yaitu
- header.php file template untuk website header area.
- footer.php file template untuk website footer area.
- functions.php file yang berisi fungsi-fungsi, contohnya untuk load css dan javascript.
header.php
file ini digunakan sebagai template untuk menampilkan header pada website WordPress. Harus di include pada index.php, single.php dan page.php
File header.php digunakan untuk load header file yang dibutuhkan seperti css, font dan lainnya. Untuk melakukan itu, gunakan fungsi wp_head(), dimana fungsi ini akan menjalankan fungsi-fungsi yang telah kita definisikan di file functions.php
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<h1>Header goes here</h1>
footer.php
File ini digunakan sebagai template untuk area footer pada website. Sama seperti header.php, file footer.php juga harus dinclude pada index.php, single.php dan page.php
Pada footer.php kita gunakan fungsi wp_footer(), fungsi wordpress dapat digunakan untuk loading file javascript (biasanya ada kebutuhan untuk loading file javascript diakhir html).
<p>Footer goes here</p> <?php wp_footer(); ?> </body> </html>
functions.php
File ini berisi fungsi-fungsi yang kita definisikan, umumnya digunakan untuk load file pendukung theme seperti css, font dan javascript. Berbeda dengan file-file sebelumnya yang telah kita bahas (index.php dan lainnya). File functions.php adalah file internal, tidak digunakan untuk menampilkan web.
<?php
function skillplus_files(){
wp_enqueue_style('skillplus_main_style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'skillplus_files');
?>
Perintah add_action diisi 2 parameter, yaitu
- Parameter pertama diisi wp_enqueue_scripts (harus ditulis persis, karena fungsi WordPress specific). Untuk dokumentasi lengkap click add_action() atau wp_enqueue_scripts
- Parameter kedua, adalah nama fungsi yang kita buat, jadi penamaannya bebas. Pada contoh adalah skillplus_files.
Kemudian kita buat fungsi skillplus_files, yang isinya memanggil fungsi wp_enqueue_style yang berguna untuk load css. Fungsi ini memerlukan 2 parameter,
- Parameter pertama penamaannya bebas, sesuaikan dengan maksud dan tujuan.
- Parameter kedua, get_stylesheet_uri() adalah fungsi dari WordPress untuk load file style.css.
Tambahkan header.php dan footer.php
Setelah selesai membuat 3 file diatas. Mari kita ubah file index.php, single.php dan page.php. Tambahkan perintah get_header() dan get_footer(). Pada contoh digunakan file index.php (lakukan hal yang sama dengan single.php dan page.php)
<?php
//tambahkan get_header() disini
get_header();
while(have_posts()){
the_post();?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php the_content(); ?>
<hr>
<?php
}
//tambahkan get_footer() disini
get_footer();
?>
Sebelum refresh browser, pada file style.css coba tambahkan style, agar kita bisa melihat perubahan yang terjadi. Contoh:
/*
Theme Name: SkillPlus
Author: SkillPLus
Description: Amazing themes by SkillPlus
Version: 1.0
*/
body {
color: blue;
}
Hasilnya kurang lebih seperti gambar dibawah. Kita sudah berhasil load header.php dan footer.php (perhatikan tulisan header goes here dan footer goes here).
Tulisan artikel juga berwarna biru, sesuai dengan css yang kita tambahkan diatas.
<html >
Gmn caranya menambahkan amp di header php diatas?
Halo, karena ini bukan tutorial tentang amp, kita tidak bahas disini. Untuk kedepan mungkin akan kita buat tutorial amp. Untuk sementara bisa dilihat di https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/?format=websites
semoga bisa menjawab. Trims.