HTML: Templating in Wordpress

Mustache, wp.template atau underscore _.template ?

Beberapa waktu lalu ketemu sama kode begini:

  <script type="text/html" id="tmpl-aneh">
        <div class="card">
            <div class="card-media size-16by9">
                <img src="{{{ data.thumbnail }}}" class="card-img" alt="overlay">
            </div>
            <div class="card-media-overlay d-flex align-items-end justify-content-end">
                <a href="{{{ data.url }}}"
                    class="view-link btn btn-primary">View</a>
            </div>
        </div>
  </script>
  

Nah, kalau dilihat-lihat memang mirip Mustache, soalnya di kerjaan sebelumnya berjibaku sama Handlebars jadi agak familiar dengan isi tag script tadi. Well, setelah aku telusuri lebih dalam ternyata ini fitur underscorejs bawaan WP yang sudah dimodifikasi mirip Mustache template, coba cek kodenya di sini. Dokumentasi resminya memang menyebutkan template ini dimodifikasi agar bisa jalan bersanding dengan php. Meskipun aku awalnya ga mengira kalau ini ulah undescore, memang di theme_setup ada wp_enqueue_script('wp-util'); yang output nya begini:

    <script type='text/javascript' src='https://example.com/wp-includes/js/underscore.min.js?ver=1.8.3'></script>
    

Lalu, di file javascript terpisah ada fungsi buat fetching dynamic konten.

function setState(templateData, templateName, templateContainer) {
  var tpl = wp.template(templateName);
  templateContainer.append(tpl(templateData));
}
// setState({ 
//	thumbnail: 'https://example.org/assets/blog-post1.png',
//	url: 'https://example.org/blog/blog-post1.html'},
//	'aneh',
//	'div')

Awal dari ketemu template ini adalah pencarian suatu halaman yang ternyata ga ketemu snippet html nya buat distyling, dimana sebagian besar halaman memang dipecah menjadi beberapa bagian berformat php. Setelah sekian lama mencari di beberapa bagian file dengan fungsi echo ga ketemu, ternyata search menunjukkan struktur yang aku cari tapi di dalam tag script. Apakah ini? Sampai sekarang aku juga masih bertanya, soalnya javascript buat ngisi datanya ga import library kecuali method wp.template tadi. Barulah setelah timeframe proyek sudah agak santai, aku cari tahu kebenarannya, wkwkwk.

Ngomong soal templating, tadinya aku mau belajar ejs yang mirip sama template nya underscore tadi. Namun, alih-alih mempercepat kerjaan malah jadi makin lama, akhirnya hifi prototype nya aku kerjakan pakai plain html yang makan waktu hampir 2 hari pengerjaan termasuk lembur. Bisa lebih cepet pakai templating sebenarnya, tapi handlebars yang kupelajari tahun lalu ga mendukung data dynamic dan fetching konten. Kerjaan sebelumnya aku pakai nodejs buat populate data dulu terus aku akali pakai twig yang lebih banyak fiturnya dari handlebars. Which is not worth the learning curve and the time limit, pun waktu itu proyek sedang dikejar target. Akhirnya mengandalkan emmet dan buka dokumentasi jadilah malam-malam penuh lembur itu diisi dengan snippet html.

Ternyata waktu jalan implementasinya diubah ke template tadi, entah apa namanya. Mari sebut saja wordpress template, wkwkwk. Pengetahuan baru dan pengalaman baru juga, semoga besok bisa ketemu lagi bentuk template yang kayak gini, lumayan fleksibel dan bisa diisi konten hasil fetching dari rest api worpress. Overall, nice experience so far.

Oktober 19, 2020