Pengantar Anatomi Tema WordPress

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

Beberapa waktu lalu, kami memperkenalkan kepada Anda konsep membuat tema WordPress dari HTML. Kami membagi tutorial menjadi dua bagian dan hari ini kita semua ingin menyempurnakan kedua tutorial, jadi silakan menganggap posting ini sebagai porsi ketiga dalam seri posting. Tujuan saya adalah membongkar tema WordPress untuk memberi Anda gambaran yang jelas tentang cara kerjanya (tema).


Posting ini mengasumsikan Anda memiliki pengetahuan tentang HTML dan CSS. Saya akan melanjutkan dan menyatakan bahwa memiliki keterampilan HTML dan CSS adalah prasyarat dalam merancang tema WordPress. Satu hal lagi, postingan ini akan menghindari kata-kata besar dan konsep-konsep sulit – akan mudah dipahami, jadi bersiaplah untuk bersenang-senang dan belajar.

Priming HTML Kecil

Setiap halaman web HTML dibagi menjadi beberapa bagian menggunakan

menandai. Misalnya, Anda dapat mematahkan tubuh () situs web Anda menjadi beberapa bagian seperti navigasi, tajuk, konten utama, bilah sisi, dan catatan kaki.

Setelah Anda memiliki halaman web Anda di bagian, Anda dapat memesan (atau mengatur) bagian yang Anda inginkan menggunakan CSS. Proses ini dikenal sebagai gaya, dan melibatkan penambahan elemen gaya lain seperti warna, ukuran, batas, efek khusus dll. Seperti itulah kekuatan CSS, yang – kependekan dari – Cascading Style Sheets. Ketika Anda meletakkan file HTMl dan CSS Anda bersama-sama dan melemparkan beberapa gambar, Anda berakhir dengan situs web yang lengkap.

Hal-hal yang tidak jauh berbeda dengan tema WordPress. Seperti yang kita lihat di bagian 1 dari Cara Membuat Tema WordPress dari HTML, tema WordPress dibagi menjadi beberapa file. Jika Anda tidak dapat menemukan kesamaan pada saat ini, izinkan saya untuk menjelaskan.

Halaman web HTML statis dibagi menjadi beberapa divisi (yang kami sebut bagian sebelumnya)

tag (atau tabel jika Anda benar-benar sekolah tua). Di sisi lain, tema WordPress dibagi menjadi beberapa file php, yang kemudian disatukan kembali menggunakan tag templat.

Oleh karena itu, alih-alih memiliki semua elemen tubuh (tajuk, konten utama, bilah sisi, catatan kaki dll) yang hidup dalam satu file (seperti halnya dengan HTML statis), masing-masing elemen tubuh (dalam tema WordPress) hidup dalam file yang terpisah.

Jadi, tajuk akan hidup di header.php, bilah samping akan menemukan rumah di sidebar.php, konten utama akan hidup di index.php, atau single.php (jika itu sebuah posting) atau page.php (jika itu adalah halaman ). Bagian footer akan hidup di footer.php dan seterusnya.

Apakah kamu mengikuti? Lihat ilustrasi di bawah ini:

html-wordpress = struktur

Dari ilustrasi kami di atas, , dan disebut tag templat. Pekerjaan mereka adalah untuk mengambil header.php, sidebar.php dan footer.php dalam urutan itu dari direktori tema Anda, dan menampilkan konten di index.php Anda, sehingga melengkapi halaman web.

Jangan biarkan .php ekstensi menakut-nakuti Anda, konten di dalam file php hanya kode HTML yang Anda kenal. Misalnya, header.php Anda dapat berisi navigasi daftar HTML biasa. Demikian pula, Anda dapat memasukkan kode HTML khas di footer.php, sidebar.php dan index.php.

Anda juga dapat menempatkan loop.php berfungsi di index.php Anda (atau di mana pun Anda suka) untuk menampilkan posting blog Anda, tapi saya harus memperlambat dan kembali ke anatomi tema WordPress. Saya telah menyebutkan satu atau dua hal tentang perulangan di bagian 2 tentang cara membuat tema WordPress dari HTML. dan kita akan membicarakannya (loop) dan fungsi lainnya di masa depan.

Bergerak…

Tema dasar WordPress terdiri dari setidaknya empat file templat yaitu:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Mari kita lihat apa yang masuk ke masing-masing gaib file:

File Template Index.php

Ini adalah file utama yang tanpanya Anda tidak memiliki tema WordPress yang berfungsi. Ini adalah file pertama (atau default) yang dimuat ketika Anda mengunjungi situs web WordPress. Anggap itu setara dengan index.html.

Indeks.php pada tema WordPress akan terlihat seperti ini:





Anda dapat menambahkan lingkaran di antaranya dan untuk menampilkan posting blog di beranda (index.php) seperti yang ditunjukkan di bawah ini:




File Template Header.php

File template ini berisi kode tajuk, navigasi, dan kode kepala HTML Anda. Pada dasarnya, header.php menyimpan semua yang ingin Anda tampilkan di bagian atas situs web Anda. Anda tahu, hal-hal seperti judul situs web Anda dan hal-hal seperti itu.

Anda juga menautkan ke stylesheet CSS Anda di header.php. Berikut adalah contoh dasar dari header.php:





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







Ini adalah bagian tajuk. Letakkan logo Anda dan detail lainnya di sini.

File Template Sidebar.php

Sidebar.php berisi semua yang Anda butuhkan untuk muncul di sidebar Anda. Bilah sisi berisi menu tambahan, widget, kategori, ikon media sosial, konten khusus, kode HTML seperti iklan dll.

Sidebar.php dapat berisi panggilan fungsi markup HTML atau php murni tergantung pada kebutuhan Anda. Dengan demikian, sidebar.php dasar mungkin terlihat seperti:

File Template Footer.php

Bagaimana menurut Anda masuk ke footer.php? Anda dapat meletakkan informasi hak cipta di sini, menu tambahan, tautan, ikon media sosial – apa pun yang Anda inginkan! Apakah Anda ingin melihat bagaimana tampilan footer.php dasar? Sini:

Letakkan konten footer Anda di sini termasuk panggilan fungsi php (untuk mengambil file template yang berbeda, misalnya search.php) jika perlu.

Perhatikan dan tag penutup di footer.php? Bisakah Anda menebak mengapa mereka harus disertakan dalam footer.php? Demikian pula, dapatkah Anda menebak mengapa dan tag pembuka termasuk dalam header.php? Beri tahu kami tebakan Anda di bagian komentar di akhir posting ini ��

Empat file templat yang baru saja kita bahas di atas merupakan tema WordPress yang sangat mendasar. Ada banyak file templat lainnya; ada file template untuk setiap elemen yang Anda lihat pada tema WordPress baik itu komentar, hasil pencarian dan 404 halaman kesalahan hanya untuk menyebutkan beberapa.

Untuk sepenuhnya memahami anatomi tema WordPress, Anda harus membiasakan diri dengan file templat yang berbeda. Anda dapat menelusuri semua ubin templat yang dapat digunakan di WordPress.

Lalu kami memiliki tag templat, yang digunakan WordPress untuk mengambil file templat dari direktori tema. Anda dapat mempelajari lebih lanjut tentang tag templat, dan peran yang dimainkannya di WordPress.

Ringkasan

Tema WordPress terdiri dari unsur-unsur anatomi berikut:

  • File template seperti index.php, header.php, search.php, category.php dll
  • Tag templat seperti , dll
  • CSS
  • Gambar dan file media lainnya
  • File JavaScript

Dan berikut ini adalah ilustrasi yang merangkum anatomi tema WordPress:

Ingin terus belajar? Lihat detailnya panduan anatomi tema di WordPress Codex.

Kesimpulan

Setiap tema WordPress yang Anda lihat di web menggunakan struktur anatomi yang sama (bahkan Tema WordPress Total kami yang populer), yang dapat Anda sesuaikan untuk memenuhi kebutuhan Anda. Setelah Anda menyelami dasar-dasar pengembangan tema WordPress, tidak ada batasan untuk apa yang dapat Anda lakukan dengan / untuk tema WordPress.

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