Tutorial WordPress: Cara Membuat Tema WordPress Dari HTML (Bagian 2)

  1. 1. Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Bagian 1)
  2. 2. Sedang membaca: Tutorial WordPress: Cara Membuat Tema WordPress Dari HTML (Bagian 2)
  3. 3. Pengantar Anatomi Tema WordPress

Di bagian pertama tutorial ini, kami membahas dasar-dasar pengubahan templat HTML menjadi tema WordPress. Jika Anda sedikit penasaran, kami belajar beberapa hal tentang memecah template HTML menjadi file PHP, menyatukannya kembali, menata dan menamai tema WordPress. Sungguh, kami belajar banyak, dan Anda akan ingin membiasakan diri dengan konsep yang kami bahas dalam tutorial pertama kami untuk menikmati penyajian kedua ini. Di pos hari ini, kami akan mengambil hal-hal yang lebih tinggi. Kami akan membahas beberapa area lagi sehingga Anda dapat membuat tema WordPress yang berfungsi penuh. Jadi, tanpa basa-basi lagi, ini dia.


Mengkonfigurasi Gambar dan File JavaScript

Jika Anda memiliki gambar di templat HTML asli Anda (index.html), Anda mungkin memperhatikan mereka berhenti menampilkan setelah memotong templat ke dalam file PHP. Jangan khawatir sama sekali, hanya seperti PHP. Misalnya, jika Anda memiliki logo di bagian tajuk seperti …

your_logo_alt_text

… Anda harus sedikit bermain-main dengan kode. Kode yang akan saya ungkapkan sebentar lagi akan membantu browser menemukan logo Anda (atau gambar lain) di blog Anda gambar-gambar folder, yang (atau seharusnya) adalah subfolder dari direktori utama tema Anda. Jadi, untuk menampilkan logo Anda di bagian header, buka file header.php dan ganti kode di atas dengan yang berikut:

your_logo_alt_text

Fungsi get_template_directory_uri () mengembalikan url untuk direktori tema Anda. JADI jika Anda menambahkan logo Anda ke dalam folder gambar, maka kode tersebut akan mengambil logo itu.

Perhatikan perbedaannya? Jelas, potongan kode ini hanya akan memperbaiki logo Anda. Untuk memperbaiki gambar lain, Anda harus menulis ulang kode mereka dengan cara yang sama. Barang mudah peasy.

Mari kita beralih ke JavaScript. Jika situs web HTML Anda menggunakan JavaScript, buat folder dengan nama js dan letakkan skrip Anda di sana. Anda dapat memanggil mereka di file header.php menggunakan kode berikut:

Kode di atas menggunakan contoh.js sebagai ilustrasi. Jangan lupa ganti bagian itu dengan nama file JavaScript Anda.

Tentu saja jika Anda membuat tema untuk orang lain, maka Anda benar-benar harus memuat file js Anda dengan skrip wp_enqueue_s. Periksa pos AJ tentang cara menambahkan JavaScript ke tema WordPress untuk info dan kiat lebih lanjut.

File Templat

Di bagian pertama tutorial ini, kami menyebutkan empat file templat dasar yaitu index.php, header.php, sidebar.php dan footer.php. File template mengontrol bagaimana situs web Anda akan ditampilkan di web. Template mendapatkan informasi dari database MySQL WordPress Anda dan menerjemahkannya ke dalam kode HTML yang ditampilkan di browser web. Dengan kata lain, file template adalah blok bangunan tema WordPress. Untuk mendapatkan pemahaman yang lebih baik tentang templat, marilah kita mempelajari konsep yang dikenal sebagai hierarki templat.

Kami akan menggunakan analogi. Jika pengunjung mengklik tautan kategori (mis. Tautan ke kategori) seperti http://www.yoursite.com/blog/category/your-category/, WordPress menggunakan hierarki templat untuk menghasilkan file (dan konten) yang tepat sebagai dijelaskan di bawah ini:

  • Pertama, WordPress akan mencari file templat yang cocok dengan ID kategori
  • Jika ID kategori adalah, misalnya 2, WordPress akan mencari file templat bernama kategori-2.php
  • Jika kategori-2.php tidak tersedia, WordPress akan mencari file templat kategori umum seperti category.php
  • Jika file template ini tidak tersedia juga, WordPress akan mencari template arsip generik seperti archive.php
  • Jika templat arsip umum tidak ada, WordPress akan kembali pada file templat utama, index.php

Begitulah cara kerja template WordPress, dan Anda dapat menggunakan file-file ini untuk menyesuaikan tema WordPress Anda sesuai dengan kebutuhan Anda. File template lainnya termasuk:

home.php atau index.phpDigunakan untuk merender indeks posting blog
halaman depan.phpDigunakan untuk membuat halaman statis atau posting terbaru seperti yang diatur di tampilan halaman depan
single.phpDigunakan untuk merender halaman posting tunggal
single- {post-type} .phpDigunakan untuk merender jenis posting khusus, mis. jika post-type adalah produk, WordPress akan menggunakan single-product.php
page.phpDigunakan untuk membuat halaman statis
category.php atau archive.phpDigunakan untuk membuat indeks Arsip Kategori
author.phpDigunakan untuk membuat penulis
date.phpDigunakan untuk membuat tanggal
search.phpDigunakan untuk membuat hasil pencarian
404.phpDigunakan untuk membuat halaman kesalahan server 404

Ini hanya daftar pendek, ada banyak lainnya Template WordPress. Topik templat adalah topik besar, dan cara terbaik untuk belajar cara bermain dengan file templat adalah dengan membaca ekstensif Pengembangan Tema perpustakaan di WordPress. Atau, Anda dapat membaca yang lebih pendek Bagian Templat di WordPress Codex.

Tag Templat

Melihat bahwa kami baru saja memperkenalkan File Template, cukup adil untuk menyebutkan satu atau dua hal tentang tag template, dan peran yang mereka mainkan dalam tema WordPress. Menurut WordPress.org, “… tag templat digunakan dalam templat blog Anda untuk menampilkan informasi secara dinamis atau menyesuaikan blog Anda, menyediakan alat untuk menjadikannya sebagai individual dan semenarik Anda.”

Dalam tutorial kami sebelumnya, Anda bertemu beberapa tag templat seperti get_header, get_sidebar, get_footer dan bloginfo. Di bagian berikut, kami akan menambahkan beberapa tag templat ke tema WordPress kami yang baru dibuat. Saya berasumsi Anda sudah memasukkan deklarasi DOCTYPE dalam file header.php Anda. Jika tidak, berikut adalah kodenya:

Deklarasi DOCTYPE memberi makna pada kode HTML Anda. Dengan itu, mari kita ubah tag HTML pembuka. Kami akan menyertakan atribut lang menggunakan tag language_attributes seperti itu:

Kode di atas akan menghasilkan yang berikut:

Dengan deklarasi DOCTYPE dan tag language_attribute di tempat, struktur tema Anda sah dan browser akan memahami kode Anda. Jika Anda membuat tema untuk blog, penting untuk menempatkan tautan ke URL pingback dan umpan RSS di kepala Anda. Di header.php Anda, tambahkan kode berikut:

Apakah Anda memperhatikan bagaimana kami menggunakan tag bloginfo untuk memasukkan umpan RSS (‘rss2_url’) dan pingback (‘pingback_url’)? Sebelum menyimpan file header.php Anda, tambahkan juga kode berikut:

Tag wp_head di atas akan menarik stylesheet dan file JavaScript yang diperlukan oleh plugin Anda. Jika Anda meninggalkan sepotong kode kecil ini, plugin Anda mungkin tidak berfungsi seperti yang diinginkan. Dengan itu, mari kita tambahkan judul halaman ke tema WordPress kita menggunakan – sekali lagi – tag bloginfo. Di file header.php Anda, tambahkan kode berikut:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Tag pertama wp_title akan menambahkan judul halaman atau posting Anda dan tag kedua bloginfo (‘nama’) akan menambahkan nama blog Anda. Sekarang karena tema WordPress Anda memiliki judul halaman, bagaimana kalau kami membuat tangkapan layar untuk tema kami, mengemas ulang tema tersebut dan beristirahat?

Membuat Screenshot Untuk Tema Anda

Ketika Anda mengunggah tema pengujian Anda pertama kali, Anda harus memperhatikan bahwa itu tidak memiliki tangkapan layar di Panel Tema WordPress. Itu terlihat menjemukan, terutama jika Anda memiliki tema lain dengan screenshot berwarna. Tapi jangan khawatir, membuat tangkapan layar untuk tema Anda sangat mudah. Cukup buat gambar menggunakan editor gambar favorit Anda (mis. Adobe Photoshop) atau ambil tangkapan layar tema Anda. Pastikan gambar Anda lebar 600px dan tinggi 450px. Simpan gambar sebagai tangkapan layar.png di folder tema Anda. Simpan semua perubahan, kompres folder tema Anda menjadi arsip ZIP. Unggah tema dan aktifkan untuk melihat perubahan baru Anda ��

Kesimpulan

Saya ingin percaya bahwa tutorial kedua ini memberi Anda wawasan yang lebih dalam untuk membuat tema WordPress dari HTML statis. Dalam waktu dekat, saya akan memperkenalkan Anda dengan aspek-aspek lain dari tema WordPress, tetapi sementara itu, saya telah menyiapkan sumber daya berikut hanya untuk Anda:

Selamat menciptakan!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map