Kursus WordPress

Appearance

Menampilkan Info Professor di Front-End ​

Gambaran Umum ​

Video ini membahas pembuatan output HTML front-end untuk block Featured Professor — menggunakan render_callback, WP_Query, ob_start()/ob_get_clean(), dan file PHP terpisah untuk menjaga organisasi kode.

Konsep Organisasi Kode ​

Alih-alih menulis semua HTML di file PHP utama, gunakan file terpisah untuk template HTML:

featured-professor/
  ├── inc/
  │   └── generate-professor-html.php   ← Template HTML professor
  ├── featured-professor.php            ← File utama (bird's eye view)

Filosofi: File utama (featured-professor.php) harus menjadi pandangan dari ketinggian 10.000 kaki — hanya berisi logika top-level, bukan detail HTML template.

Render Callback di File PHP Utama ​

Mengubah renderCallback ​

php
function renderCallback($attributes) {
  if ($attributes['profId']) {
    wp_enqueue_style('featuredProfessorStyle');
    return generateProfessorHTML($attributes['profId']);
  } else {
    return null;
  }
}

Require File Terpisah ​

Di bagian atas file, sebelum class definition:

php
require_once plugin_dir_path(__FILE__) . 'inc/generate-professor-html.php';

File Template: generate-professor-html.php ​

Struktur Dasar ​

php
<?php

function generateProfessorHTML($id) {
  $profPost = new WP_Query(array(
    'post_type' => 'professor',
    'p' => $id        // Query berdasarkan post ID spesifik
  ));

  while($profPost->have_posts()) {
    $profPost->the_post();
    ob_start(); ?>

    <div class="professor-callout">
      <div class="professor-callout__photo" 
           style="background-image: url(<?php the_post_thumbnail_url('professorPortrait'); ?>)">
      </div>
      <div class="professor-callout__text">
        <h5><?php the_title(); ?></h5>
        <p><?php echo wp_trim_words(get_the_content(), 30); ?></p>

        <?php
        $relatedPrograms = get_field('related_programs');
        if ($relatedPrograms) { ?>
          <p><?php the_title(); ?> teaches: <?php
            foreach($relatedPrograms as $key => $program) {
              echo get_the_title($program);
              if ($key != array_key_last($relatedPrograms) && count($relatedPrograms) > 1) {
                echo ', ';
              }
            } ?>.</p>
        <?php } ?>

        <p><strong><a href="<?php the_permalink(); ?>">
          Learn more about <?php the_title(); ?> &raquo;
        </a></strong></p>
      </div>
    </div>

    <?php wp_reset_postdata();
    return ob_get_clean();
  }
}

Penjelasan Detail Kode ​

WP_Query dengan Post ID Spesifik ​

php
$profPost = new WP_Query(array(
  'post_type' => 'professor',  // Keamanan: pastikan ID benar-benar professor
  'p' => $id                    // 'p' = parameter untuk post ID tertentu
));
  • 'post_type' => 'professor' → Mencegah ID palsu/bogus yang bukan professor
  • 'p' => $id → Query untuk satu post spesifik berdasarkan ID

Output Buffering (ob_start / ob_get_clean) ​

php
ob_start();      // Mulai menangkap semua output
// ... HTML template di sini ...
return ob_get_clean();  // Ambil output yang ditangkap & bersihkan buffer
  • Mengapa? Function harus return string, bukan langsung echo
  • ob_start() mulai menangkap output (HTML di luar PHP tag)
  • ob_get_clean() mengambil semua yang ditangkap sebagai string & reset buffer

Background Image untuk Foto ​

html
<div class="professor-callout__photo" 
     style="background-image: url(<?php the_post_thumbnail_url('professorPortrait'); ?>)">
</div>
  • Menggunakan background-image alih-alih <img> tag
  • CSS bisa dengan mudah mengatur ukuran, posisi, dan crop gambar
  • 'professorPortrait' = custom image size yang sudah didaftarkan sebelumnya

Trim Words untuk Ringkasan ​

php
echo wp_trim_words(get_the_content(), 30);
  • wp_trim_words() → Potong konten menjadi 30 kata pertama
  • get_the_content() → Ambil isi post (tanpa echo langsung)
php
$relatedPrograms = get_field('related_programs');
if ($relatedPrograms) {
  foreach($relatedPrograms as $key => $program) {
    echo get_the_title($program);
    // Tambah koma+spasi kecuali item terakhir
    if ($key != array_key_last($relatedPrograms) && count($relatedPrograms) > 1) {
      echo ', ';
    }
  }
}
  • get_field() → ACF (Advanced Custom Fields) function
  • array_key_last() → Cek apakah item saat ini adalah yang terakhir
  • count() > 1 → Pastikan ada lebih dari satu item sebelum tambah koma
  • Menghindari whitespace PHP sebelum titik (.) dengan menempatkan titik langsung setelah ?> penutup

wp_reset_postdata() ​

php
wp_reset_postdata();
  • Wajib setelah custom WP_Query
  • Mengembalikan global post object ke main query WordPress
  • Mencegah konflik dengan query lain di halaman yang sama