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: Picture Timber, Menu, and User

by
Length:MediumLanguages:
This post is part of a series called Kick-start WordPress Development With Twig.
Kick-Start WordPress Development With Twig: Blocks & Nesting

Malay (Melayu) translation by Rana Salsabiela (you can also view the original English article)

Sekarang anda telah membaca tentang konsep asas menggunakan Twig melalui Kayu, sambil membina tema WordPress modular.  Kami juga mempelajari warisan bersarang dan pelbagai pusaka dengan Twig, berdasarkan prinsip DRY.  Hari ini, kami akan meneroka cara memaparkan lampiran, menu WordPress, dan pengguna dengan tema Twig melalui plugin Kayu.

Gambar dalam Kayu 

Imej adalah salah satu unsur yang paling penting untuk tema WordPress. Dalam amalan pengekodan WordPress biasa, imej disepadukan dengan PHP di dalam tag imej HTML biasa.  Walau bagaimanapun, Kayu menawarkan cara yang agak komprehensif untuk mengendalikan tag img (imej) yang bersifat modular dan bersih.

Terdapat gambar yang dilampirkan pada lajur posting thumbnail.  imej ini boleh diperoleh dengan mudah melalui fail Twig oleh {{post.thumbnail}} .  Itu mudah!

Penggunaan

Mari kita mulakan dengan contoh praktikal.  Fail single.php kami kelihatan seperti ini:

Di sini, saya menggunakan fungsi TimberPost () untuk alasan yang agak jelas. Ia digunakan di seluruh Kayu untuk mewakili kiriman yang diambil dari WordPress, yang menjadikannya tersedia untuk templat Twig.

Oleh kerana imej yang dipaparkan dilampirkan pada siaran data, kini kita perlu mengambilnya di hujung depan.  Jadi fail Twig untuk itu, single.twig , akan kelihatan seperti ini:

Dalam baris # 9 kod {{post.thumbnail.src}} mengambil gambar ciri (thumbnail) pada siaran dan memaparkannya seperti ini:

Images in Timber

Anda boleh menggunakan sintaks kod ini untuk mengambil imej lakaran kecil sebanyak yang anda mahu.

Terdapat banyak lagi yang anda boleh cuba dengan imej ini apabila menggunakan Kayu.  Sebagai contoh, anda juga boleh mengubah saiznya melalui:

Menggunakan fungsi resize () , anda boleh menambah dimensi baru pada imej di mana parameter pertama ialah width dan yang kedua ialah height . Sekiranya anda ingin skala imej secara proporsional, maka keluarkan atribut height .  Sekarang sintaks adalah:

Bahagian depan memaparkan imej yang sama seperti ini:

Resize image in Timber

Jika anda ingin meneroka lebih lanjut, kemudian cuba gambar buku masakan .

Menggunakan TimberImage ()

Pertimbangkan senario di mana pemaju mahu mengambil gambar melalui ID imej, atau mahu memaparkan imej luaran melalui URL, dll.  Untuk pendekatan pengembangan seperti itu, Kayu menawarkan kelas, TimberImage () , untuk mewakili imej yang diambil dari WordPress.

Penggunaan

Mari kita ambil contoh untuk fail single.php kami, yang kelihatan seperti ini sekarang:

Kali ini, saya akan menggunakan kelas TimberImage () yang mengambil gambar ID sebagai parameternya.  Selebihnya rutin pengkodan adalah sama. Mari ambil gambar ini melalui fail single.twig Twig.

Nilai yang disimpan dalam elemen $context custom_img, iaitu {{custom_img}} , akan mengambil imej itu melalui {{custom_img}} untuk dipaparkan di hujung depan seperti ini:

TimberImage function in Timber

Untuk mengambil gambar melalui perubahan URL luaran, anda boleh mengikuti sintaks ini.

Kali ini, bukan ID imej, ada URL imej luaran yang dipaparkan pada hujung depan seperti ini:

TimberImage function with image URL

Untuk meneroka lebih banyak ciri fungsi ini, anda boleh menyemak dokumentasi .

Menu dalam Kayu

Sekarang, bagaimana anda boleh membuat menu WordPress dengan templat Twig?  Itulah perkara yang sukar dilakukan.  Tetapi tunggu!  Kayu memberikan anda kelas TimberMenu () , yang dapat membantu anda membuat menu WordPress dalam fail Twig sebagai gelung lengkap.  Mari kita lihat.

Penggunaan

Seluruh konsep mengambil item menu berputar di sekitar objek menu . Terdapat dua cara untuk menentukan konteksnya.  Yang pertama ialah menjadikan objek menu tersedia pada setiap halaman dengan menambahkannya ke fungsi get_context global (), seperti yang saya lakukan dalam fail functions .php .  Kedua, anda boleh menambah menu tertentu dengan IDnya untuk templat PHP tertentu.

Selain daripada kedua-dua kaedah ini, apabila menu tersedia pada array Kayu $context , anda boleh mengambil semua item menu dari itu.  Tetapi saya lebih suka menetapkannya secara global.  Jadi pergi ke fail functions.php dan paste kod berikut:

Jadi, di sini saya telah menetapkan fungsi panggilan custom add_to_context . Di dalam fungsi ini terdapat beberapa data yang saya ingin sediakan dalam setiap template PHP melalui fungsi get_context () .  Dalam baris # 13, anda boleh mencari contoh TimberMenu () diluluskan ke menu elemen dalam array $data .

Ini akan menjadikan menu standard WordPress tersedia untuk templat Twig sebagai objek yang boleh kita langkau.  Fungsi TimberMenu () boleh mengambil parameter seperti slug atau ID menu.

Mari buat template bernama Twig file menu.twig .

Kod di atas menjalankan gelung dalam templat Twig ini.  Line # 5 berfungsi untuk gelung untuk setiap item menu dan memaparkan tajuk setiap item menu dalam senarai yang tidak berturut-turut.  Gelung berfungsi sehingga semua pasangan nilai utama dari objek menu diulang dan disenaraikan di hadapan.

Saya pergi dan masuk menu.twig templat dalam templat base.twig pada baris # 11.

Mari kita tinjau back-end ( Penampilan> Menu ) dari tapak demo saya di mana menu mengandungi dua barang induk dan satu item kanak-kanak.

Sample menu

Oleh itu, mari lihat halaman pos - single.twig base.twig kami meluaskan base.twig , menu kami akan muncul secara automatik pada halaman itu.

Menu at the top

Anda dapat melihat bahawa di bahagian atas pos tunggal kami ada menu dengan kedua item induk di dalamnya.

Bagaimana dengan item menu kanak-kanak?  Mari kita kemas kini fail menu.twig kami untuk memasukkan item kanak-kanak juga.

Baris 9 hingga 23 mencetak item menu kanak-kanak, jika ada.  Kali ini, bahagian hadapan memaparkan item kanak-kanak dari ibu bapa yang pertama.

Menu with Child Items

Untuk maklumat lanjut mengenai TimberMenu () , semak dokumentasi .

Pengguna dalam Kayu

Pengguna boleh dimuatkan dari pangkalan data WordPress dengan kelas TimberUser () .  Kelas mengambil ID pengguna atau slug sebagai argumen untuk mengambil pengguna.

Oleh kerana penulis pengguna atau blog berkaitan dengan siaran WP, saya akan menggunakan kod single.php , yang kini kelihatan seperti ini:

Line # 20 memulakan kelas TimberUser() dan ditugaskan ke elemen objek konteks, iaitu user .  Mari tunjukkan nama pengarang melalui templat Twig.

Templat single.twig saya mempunyai barisan kod baru pada akhir, pada baris # 21.

Kod mengambil nama pengarang dari jawatan yang sedia ada dan memaparkannya di depan.  Anda boleh menggunakan {{user | Print_r}}{{user | Print_r}} untuk melihat apa lagi yang boleh didapati dalam objek TimberUser.

author name displayed on the front-end

Untuk membaca lebih lanjut mengenai kelas ini, lihat dokumentasi .  Anda boleh mencari kod tutorial ini di repo GitHub di cabang ImagesMenusUsers .

Kesimpulannya

Artikel ini merangkumi keseluruhan siri.  Sepanjang semua empat artikel ini, saya meneroka cara menggunakan Kayu untuk mengintegrasikan bahasa template Twig ke dalam tema WordPress.

Repositori terakhir untuk siri ini boleh didapati di GitHub dengan cawangan tutorial khas:

Untuk mendapatkan maklumat lanjut, anda boleh merujuk kepada dokumentasi dalam talian Timber.

Ikuti keseluruhan siri dan gunakan semua contoh yang diterangkan, dan saya pasti anda akan menikmati Twig.  Hantar soalan anda ke kotak komen di bawah.  Anda juga boleh menghubungi saya melalui Twitter .

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.