Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

WordPress Kick-Start Development With Twig: Blocks & Nesting

by
Length:MediumLanguages:
This post is part of a series called Kick-start WordPress Development With Twig.
Kick-Start WordPress Development With Twig: Getting Started
Kick-Start WordPress Development With Twig: Timber Image, Menu, and User

Malay (Melayu) translation by Muhammad Hasan (you can also view the original English article)

Dalam artikel sebelumnya, saya menulis tentang mengintegrasikan enjin templat Twig dengan WordPress melalui Kayu dan bagaimana pemaju boleh menghantar data dari fail PHP ke fail Twig. Mari kita bincangkan cara membuat templat asas dengan Twig, dapatkan teknik DRY ini, dan cheat WordPress Timber-Twig.

Mewujudkan Template Asas dalam Twig

Twig berfungsi dengan prinsip DRY (Jangan Ulangi Sendiri). Salah satu ciri yang paling penting dari Twig adalah templat asas dengan bersarang dan pelbagai pusaka .  Walaupun kebanyakan orang menggunakan PHP termasuk secara linear, anda boleh membuat tahap blok bersarang tanpa had untuk mengawal template halaman anda secara khusus.

Fikirkan template asas anda sebagai templat ibu bapa dengan satu set blok di dalamnya. Templat kanak-kanak boleh memanjangkan templat ibu bapa dan mengubah suai blok atau blok dari itu tanpa perlu menulis semula kod yang akan sama dalam kedua-dua templat.

Mari lihat contoh templat induk atau asas, fail base.twig . Anda boleh meletakkannya dengan templat Twig lain dalam folder paparan.  Anda memanggil fail ini dalam mana-mana templat Twig yang digunakan sebagai templat ibu bapa untuk fail Twig tertentu.  Ketik baris kod berikut untuk membuat folder views . Templat asas ini akan menyediakan struktur dasar untuk tema WordPress anda. Berikut adalah kod fail base.twig mudah.

Komen pada Twig: {# Base Template: base.twig #}

Anda boleh menulis komen di Twig dengan sintaks {# comment here #}. Untuk mengulas pada bahagian baris dalam templat, gunakan sintaks komen {# ... #}. Ini berguna untuk debug atau menambah maklumat kepada pereka template lain atau diri anda sendiri. Anda boleh mendapatkan komen di baris # 1.

Blok: {% blok html_head_container%} {% endblock%}

Seluruh falsafah Twig dan Timber berputar di sekitar pendekatan kod modular di WordPress. Saya telah berulang kali menulis tentang idea bahawa data dalam Twig ditangani dalam bentuk komponen atau blok.

Blok digunakan untuk warisan dan ia bertindak sebagai pemegang tempat dan sebagai pengganti pada masa yang sama. Blok didokumentasikan secara terperinci dalam dokumentasi untuk memperluas tag. 

{% block add_block_name_here %} Blok kandungan di sini { % endblock % } 

Dalam kod yang ditulis di atas, anda boleh menemui blok yang dipanggil html_head_container yang memanjangkan baris # 3 ke baris # 7.  Sebarang templat yang memperluaskan templat asas base.twig ini boleh mewarisi kandungan blok yang sama atau mengubahnya untuk menambahkan sesuatu yang lain. Terdapat satu lagi blok yang dipanggil kandungan {% block content%} yang mengandungi baris # 13 hingga baris # 18.

Begitu juga, konsep penciptaan blok memanjangkan lagi di mana anda boleh membuat tahap blok bersarang tanpa had juga. Ini adalah prinsip DRY yang benar.

Sertakan Penyata: {% include "header.twig"%}

Templat kerinting boleh merangkumi templat Twig lain, seperti yang kita lakukan dalam PHP. Fail base.twig akan menjadi bungkus biasa, dan ia tidak akan lengkap tanpa fail header dan footer .  Oleh itu, sintaks {% include "file.twig"%} akan membantu kami memasuki dua templat Twig berbeza:

  • Templat header {% include "header.twig"%} dalam baris # 5.
  • Templat footer ( {% include "footer.twig"%} pada baris # 23.

Kembangkan Templat Asas 

Kami mencipta fail base.twig sebagai template induk dan meninggalkan blok kandungan kosong. Blok ini boleh digunakan dalam fail Twig tersuai yang akan mengubahnya, dan selebihnya template asas akan diwarisi seperti yang ada. Contohnya, mari buat fail single.twig yang akan memperluaskan templat asas.twig dan akan mengubah suai blok konten .

Kod ini menunjukkan fail single.twig khas. Dalam baris # 3, templat ini memanjangkan ke base.twig sebagai templat atau asas induk. Mengembangkan tag boleh digunakan untuk meluaskan templat dari templat lain.

Ini adalah semua butiran yang berkaitan dengan header dan footer diwarisi dari file base.twig , iaitu template induk, manakala blok konten akan digantikan dengan tajuk dan kandungan pos. Betapa menyeronokkan itu?

WordPress CheatSheet untuk Kayu

Pembangun kayu telah memastikan bahawa ia akan melengkapkan WordPress dalam setiap cara yang mungkin dari teras ke pengguna akhir. Walaupun sintaks penukaran fungsi WordPress dalam Kayu agak berbeza, dokumen ini cukup didokumenkan.  Menjelang akhir artikel ini, saya akan berkongsi senarai pelbagai penukaran untuk WordPress dan fungsi setara kayu mereka. Mari kita rekap.

Recap pendek

Dalam artikel saya sebelum ini, saya membuat nota mengalu-alukan yang hanya boleh diisi melalui rentetan PHP di laman utama tapak demo saya.  Kod ini boleh didapati di cawangannya di GitHub . Mari ulangi prosedur ini sekali lagi tetapi dengan pendekatan yang berbeza dan lebih teknikal.

Pada masa ini, saya akan menunjukkan nota mengalu-alukan sama tetapi kali ini dengan membuat halaman baru di laman utama.

Mengambil Fungsi WordPress dalam Twig

Buat halaman baru dengan tajuk "Selamat Datang ke Blog Saya!" Dan tambahkan beberapa kandungan di dalamnya sebelum anda menekan butang menerbitkan.

adding a new page in twig

Sekarang mari kita paparkan kandungan halaman selamat datang ini di halaman utama. Untuk melakukannya, sekali lagi pergi ke fail index.php dan tambahkan baris kod berikut.

di sini, saya menambah array $contexs , di dalamnya saya menambah unsur welcome page dan kemudian menggunakan fungsi get_post () untuk mendapatkan semula halaman yang baru saya buat. Untuk berbuat demikian, saya menghantar halaman ID, iaitu 4 dalam kes ini.

Dalam fail welcome.twig  , marilah kita print_r elemen welcome_page dan lihat data yang kami dapat. Fail welcome.twig saya kelihatan seperti ini sekarang.

Saya boleh mengesahkan bahawa elemen ini dalam array konteks $ sekarang mempunyai objek TimberPost untuk halaman tertentu dengan ID 4.

TimberPost object

Dari sini, kita boleh mendapatkan semua sifat yang boleh dipaparkan di bahagian hadapan. Sebagai contoh, saya mahu memaparkan tajuk dan kandungan halaman sahaja. Oleh itu, fail welcome.twig saya sekarang kelihatan seperti ini:

Dan laman utama mempunyai maklumat yang kami perlukan.

Welcome Homepage

WordPress Cheatsheet

Seperti yang saya katakan sebelumnya, Kayu memberi anda beberapa penukaran praktikal fungsi WordPress. Fungsi ini dapat membantu anda mendapatkan maklumat yang berkaitan dengan:

  • Blog
  • Badan kelas
  • Header / Footer

fungsi Get_context ()

Terdapat fungsi Timber :: get_context () yang mengambil banyak maklumat tapak yang ingin Timber :: get_context () para pemaju di hadapan di seluruh tapak. Dokumentasi menerangkannya seperti ini:

Ia akan mengembalikan objek dengan banyak perkara biasa yang kita perlukan di seluruh laman web ini. Perkara seperti nav, wp_head dan wp_footer anda. Anda mahu bermula pada bila-bila masa (walaupun anda menulis terlalu banyak kemudian).  Anda boleh melakukan $context = Timber :: get_context (); Print_r ($ context); $context = Timber :: get_context (); Print_r ($ context); untuk melihat apa yang ada di dalam atau buka timber.php untuk anda semak. 

Bukan itu sahaja tetapi anda boleh menambah data tersuai anda sendiri kefungsi ini melalui penapis yang berguna.

Di bawah ini anda boleh menemui lebih banyak penukaran seperti ini, yang boleh digunakan dengan Kayu.

Maklumat Blog

  • blog_info('charset') => {{ site.charset }}
  • blog_info('description') => {{ site.description }}
  • blog_info('sitename') => {{ site.name }}
  • blog_info('url') => {{ site.url }}

Kelas Badan

  • implode(' ', get_body_class()) => <body class="{{ body_class }}">

Tema

  • get_template_directory_uri() => {{ theme.link }} ( for parent themes)
  • get_template_directory_uri() => {{ theme.parent.link }} (untuk tema kanak-kanak)
  • get_stylesheet_directory_uri() => {{ theme.link }}
  • get_template_directory() => {{ theme.parent.path }}
  • get_stylesheet_directory() => {{ theme.path }}

wp_functions

  • wp_head() => {{ wp_head }}
  • wp_footer() => {{ wp_footer }}

Mari bereksperimen dengan beberapa fungsi, bermula dengan maklumat blog.Di tempat foo , tulis {{site.name}} .

Front-end akan memaparkan tajuk laman seperti ini:

sitetitle function in Timber

Kayu juga mempunyai beberapa fungsi penukaran untuk memaparkan siaran dan maklumat pasca berkaitan melalui TimberPost () . Sebelum saya menjelaskan penggunaan fungsi ini, marilah kita senaraikan penukaran fungsi yang berkaitan dengannya.

Post

  • the_content() => {{ post.content }}
  • the_permalink() => {{ post.permalink }}
  • the_title() => {{ post.title }}
  • get_the_tags() => {{ post.tags }}

Penggunaan

Gunakan kod ini dalam fail single.php .

Sekarang mari kita uji fungsi {{post.title}} dalam fail Twig kami.

Simpan dan front-end akan memaparkan tajuk pos seperti ini:

posttitle function in Timber

Giliran anda!

Hari ini, anda menyaksikan penerapan praktikal prinsip DRY dengan Kayu dan Twig semasa membangunkan tema WordPress.  Ikuti tutorial ini dan cuba memohon, dan beritahu saya tentang sebarang soalan yang anda ada. Anda boleh mencari kod penuh di cawangan WP Cheatsheet dalam repositori GitHub ini.

Dalam artikel seterusnya dan terakhir, saya akan membincangkan cara mengendalikan imej dan menu dalam template WordPress Twig. Sehingga itu, hubungi saya di Twitter untuk menjawab soalan anda, atau hantar di sini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.