Pada modul ini kita akan membuat image page banner dan subtitle dinamis dengan menggunakan custom field.
Langkah pertama tambahkan custom field baru, nama silakan sesuaikan dengan kebutuhan, pada tutorial digunakan nama Page Banner. Tambahkan 2 field text untuk menyimpan informasi subtitle dan image untuk menyimpan informasi image.
Yang perlu diperhatikan disini adalah bagian rule. Karena tidak ada pilihan untuk menampilkan custom field pada All Post Type, kita gunakan trick seperti dibawah.
Langkah selanjutnya adalah kita registrasi image size untuk page banner pada functions.php
function aftertheme(){
register_nav_menu('headerMenu', 'Header Menu');
register_nav_menu('FooterMenu1', 'Footer Menu 1');
register_nav_menu('FooterMenu2', 'Footer Menu 2');
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size('InstructorLnd', 400, 260, true);
add_image_size('InstructorPort', 300, 420, true);
add_image_size('PageBanner', 1200, 350, true);
}
add_action('after_setup_theme', 'aftertheme');
Selanjutnya kita edit content dari Instructor, tambahkan page subtitle dan page image pada bagian custom field.
Berikutnya kita ubah single-instructor.php, untuk menampilkan subtitle dan banner image.
Untuk menampilkan image, gunakan fungsi get_field(‘nama custom field image’), akan mengembalikan array. Untuk mengakses size page banner, $pbimg[‘sizes’][‘PageBanner’]; Perhatian, string PageBanner adalah ukuran file yang kita registrasikan pada functions.php.
Untuk mengakses subtitle, gunakan fungsi the_field(‘nama custom field subtitle’).
Perhatian code dibawah hanya diambil bagian page banner saja.
<?php
get_header();
while(have_posts()){
the_post();
?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php $pbimg = get_field('pb_bg_img'); echo $pbimg['sizes']['PageBanner']; ?>);"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title"><?php the_title(); ?></h1>
<div class="page-banner__intro">
<p><?php the_field('pb_subtitle') ?></p>
</div>
</div>
</div>
....
....
....
