Artikel ini adalah tentang mengembangkan WordPress Tema. Jika Anda ingin mempelajari lebih lanjut tentang cara menginstal dan menggunakan Tema, meninjau Menggunakan Tema. Topik ini berbeda dari Menggunakan Tema karena membahas aspek teknis penulisan kode untuk membangun Tema Anda sendiri daripada cara mengaktifkan Tema atau di mana untuk mendapatkan Tema baru.
Tema WordPress adalah file yang bekerja sama untuk menciptakan desain dan fungsi dari situs WordPress. Setiap Tema mungkin berbeda, menawarkan banyak pilihan untuk pemilik situs untuk langsung mengubah tampilan website mereka.
Anda mungkin ingin mengembangkan Tema WordPress untuk Anda gunakan sendiri, untuk proyek klien atau tunduk pada Tema WordPress Directory. Kenapa lagi Anda harus membangun Tema WordPress?
Sebuah Tema WordPress memiliki banyak manfaat, juga.
Mengapa Anda harus membangun Tema WordPress Anda sendiri? Itulah pertanyaan yang sebenarnya.
WordPress Tema harus dikodekan menggunakan standar berikut:
WordPress Themes tinggal di subdirektori dari tema WordPress direktori ( wp-content /themes / secara default) yang tidak bisa langsung pindah menggunakan wp-config. 'file php'. Subdirektori Theme ini menampung semua file stylesheet Theme ini, file template, dan fungsi opsional berkas ( functions.php ), file JavaScript, dan gambar. Sebagai contoh, sebuah tema yang bernama "test" akan berada di direktori wp-content /themes /test /. Hindari menggunakan nomor untuk nama tema, karena hal ini mencegah dari yang ditampilkan dalam daftar tema yang tersedia.
WordPress termasuk tema default di setiap instalasi baru. Memeriksa file dalam tema default hati-hati untuk mendapatkan ide yang lebih baik tentang bagaimana membangun file tema Anda sendiri.
Untuk panduan visual, melihat ini di WordPress Tema Anatomi.
WordPress Themes biasanya terdiri dari tiga jenis utama dari file, selain gambar dan file JavaScript.
Mari kita lihat ini secara individual.
Tema yang paling sederhana yang mungkin adalah tema anak yang hanya mencakup file style.css , ditambah gambar apapun. Hal ini dimungkinkan karena merupakan anak dari tema lain yang bertindak sebagai induknya.
Untuk panduan rinci untuk tema anak, lihat Anak Tema. <! - Kita perlu meningkatkan Tema Anak daripada link ke situs eksternal seperti ini: http://op111.net/53 tutorial ini dengan op111 ->
Selain informasi gaya CSS untuk tema Anda, style.css memberikan rincian tentang tema dalam bentuk komentar. Stylesheet 'harus' memberikan rincian tentang tema dalam bentuk komentar. 'Tidak ada dua Tema diperbolehkan untuk memiliki rincian yang sama' tercantum dalam komentar mereka header, karena ini akan menyebabkan masalah dalam dialog pemilihan Theme . Jika Anda membuat tema sendiri dengan menyalin yang sudah ada, pastikan Anda mengubah informasi ini pertama.
Berikut ini adalah contoh dari beberapa baris pertama dari stylesheet, yang disebut header stylesheet, untuk tema "Dua puluh Tiga belas":
/* Tema Nama: Dua puluh Tiga belas Tema URI: http://wordpress.org/themes/twentythirteen Penulis: Tim WordPress Penulis URI: http://wordpress.org/ Keterangan: Tema 2013 untuk WordPress membawa kita kembali ke blog, menampilkan berbagai format posting, masing-masing ditampilkan indah dengan cara mereka sendiri yang unik. Rincian desain berlimpah, dimulai dengan skema warna cerah dan pencocokan gambar header, tipografi yang indah dan ikon, dan tata letak fleksibel yang tampak hebat pada perangkat apapun, besar atau kecil. Versi: 1.0 Lisensi: GNU General Public License v2 atau lambat Lisensi URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: hitam, coklat, oranye, cokelat, putih, kuning, cahaya, satu-kolom, dua kolom, kanan sidebar, fleksibel-lebar, custom-header, adat-menu, editor-gaya, fitur-gambar, Microformats, pasca-format, rtl-bahasa-dukungan, lengket-post, terjemahan-siap Teks Domain: twentythirteen Tema ini, seperti WordPress, dilisensikan di bawah GPL. Menggunakannya untuk membuat sesuatu yang keren, bersenang-senang, dan berbagi apa yang Anda pelajari dengan orang lain. * /
NB: Nama yang digunakan untuk Penulis disarankan untuk menjadi sama dengan nama pengguna wordpress.org Theme Penulis, meskipun bisa nama asli penulis juga. Pilihannya adalah Tema Penulis.
Perhatikan daftar Tags digunakan untuk menggambarkan tema. Ini memungkinkan pengguna untuk menemukan tema Anda menggunakan tag filter. Anda dapat menemukan daftar lengkap di Ulasan Handbook.
'Garis komentar header' 'style.css' 'yang diperlukan untuk WordPress untuk dapat mengidentifikasi tema' dan menampilkannya dalam Panel Administrasi di bawah Desain> Tema sebagai pilihan tema yang tersedia bersama dengan Tema diinstal lainnya.
Tema opsional dapat menggunakan file fungsi, yang berada dalam tema subdirektori dan diberi nama functions.php . File ini pada dasarnya bertindak seperti Plugin, dan jika hadir dalam tema yang Anda gunakan, maka secara otomatis dimuat selama inisialisasi WordPress (baik untuk halaman admin dan halaman eksternal). Kegunaan disarankan untuk file ini:
Tema default Wordpress berisi 'functions.php' file yang mendefinisikan banyak dari fitur ini, sehingga Anda mungkin ingin menggunakannya sebagai model. Sejak functions.php pada dasarnya berfungsi sebagai plugin, yang Function_Reference daftar adalah tempat terbaik untuk pergi untuk informasi lebih lanjut tentang apa yang dapat Anda lakukan dengan file ini.
'Catatan untuk memutuskan kapan untuk menambahkan fungsi untuk' 'functions.php' 'atau plugin tertentu:' Anda mungkin menemukan bahwa Anda perlu fungsi yang sama akan tersedia untuk lebih dari satu orang tua tema. Jika itu terjadi, fungsi harus dibuat dalam Plugin bukannya functions.php untuk tema tertentu. Hal ini dapat mencakup tag template dan fungsi spesifik lainnya. Fungsi yang terkandung dalam plugin akan terlihat oleh semua tema.
Template adalah file PHP sumber yang digunakan untuk menghasilkan halaman yang diminta oleh pengunjung, dan output sebagai HTML. File template terdiri dari HTML, PHP, dan [Template [Tag | WordPress Template Tags]].
Mari kita lihat berbagai template yang dapat didefinisikan sebagai bagian dari Tema.
WordPress memungkinkan Anda untuk menentukan template terpisah untuk berbagai aspek dari situs Anda. Hal ini tidak penting, namun, untuk memiliki semua file-file ini template yang berbeda untuk situs Anda untuk sepenuhnya fungsi. Template dipilih dan dihasilkan berdasarkan Template Hierarchy, tergantung pada apa template yang tersedia dalam tema tertentu.
Sebagai pengembang Tema, Anda dapat memilih jumlah kustomisasi Anda ingin menerapkan menggunakan template. Misalnya, sebagai kasus ekstrim, Anda dapat menggunakan hanya satu file template, yang disebut index.php sebagai template untuk semua halaman yang dihasilkan dan ditampilkan oleh situs. Sebuah penggunaan yang lebih umum adalah untuk memiliki file template yang berbeda menghasilkan hasil yang berbeda, untuk memungkinkan kustomisasi maksimum.
Berikut adalah daftar file Tema diakui oleh WordPress. Tentu saja, Anda dapat Tema mengandung lainnya stylesheet, gambar, atau file. Hanya perlu diingat bahwa setelah telah arti khusus untuk WordPress - lihat Template Hierarchy untuk informasi lebih lanjut.
File-file ini memiliki arti khusus berkaitan dengan WordPress karena mereka digunakan sebagai pengganti index.php , bila tersedia, menurut Template Hierarchy, dan ketika sesuai Tag Bersyarat mengembalikan true. Misalnya, jika hanya single post sedang ditampilkan, is_single () fungsi kembali 'benar', dan, jika ada tunggal 'file php' di Tema aktif, template yang digunakan untuk menghasilkan halaman.
Pada sangat minimal, Tema WordPress terdiri dari dua file:
Kedua file ini masuk ke direktori tema. The index.php Template file sangat fleksibel. Hal ini dapat digunakan untuk memasukkan semua referensi untuk header, sidebar, footer, konten, kategori, arsip, pencarian, kesalahan, dan halaman lain dibuat di WordPress.
Atau, dapat dibagi menjadi file template modular, masing-masing mengambil bagian dari beban kerja. Jika Anda tidak menyediakan file template lainnya, WordPress mungkin memiliki file standar atau fungsi untuk melakukan pekerjaan mereka. Misalnya, jika Anda tidak memberikan searchform.php file template, WordPress memiliki fungsi default untuk menampilkan form pencarian.
File template khas meliputi:
Menggunakan file template ini Anda dapat menempatkan tag template dalam index.php master file untuk memasukkan file-file lain di mana Anda ingin mereka untuk tampil di halaman yang dihasilkan akhir.
Berikut adalah contoh dari termasuk penggunaan:
? <get_sidebar php (); ?> ? <get_footer php (); ?>
File default untuk beberapa fungsi template dapat usang atau tidak hadir, dan Anda harus menyediakan file-file ini dalam tema Anda. Pada versi 3.0, file standar usang terletak di wp-includes /tema-compat#L0 wp-includes /tema-compat. Misalnya, Anda harus menyediakan header.php untuk fungsi get_header () untuk bekerja dengan aman, dan comments.php untuk fungsi comments_template () .
Untuk lebih lanjut tentang bagaimana berbagai Template bekerja dan bagaimana untuk menghasilkan informasi yang berbeda dalam diri mereka, membaca Template dokumentasi.
File mendefinisikan setiap halaman template ditemukan di Themes Anda direktori. Untuk membuat halaman kustom baru template untuk halaman Anda harus membuat sebuah file. Mari kita sebut halaman template pertama kami untuk halaman kami snarfer.php . Di bagian atas dari 'snarfer.php' 'file', menempatkan berikut:
<? php /* Nama Template: Snarfer * / ?>
Kode di atas mendefinisikan ini snarfer.php berkas sebagai "Snarfer" template. Tentu, "Snarfer" dapat digantikan dengan sebagian teks untuk mengubah nama template halaman. Nama template ini akan muncul di Theme Editor sebagai link untuk mengedit file ini.
<! - 'Template Nama' dan 'Halaman Template' di paragraf sebelumnya diubah untuk menghapus topi awal karena mereka istilah generik. Aku telah menghapus beberapa orang lain atas dan di bawah. Silahkan hubungi saya jika saya melanggar gaya rumah WordPress. r-sr ->
File mungkin bernama hampir apa-apa dengan php ekstensi (lihat dilindungi Tema nama file untuk nama file Anda harus tidak digunakan, ini adalah khusus nama file cadangan WordPress untuk tujuan tertentu).
Berikut di atas lima baris kode terserah Anda. Sisa dari kode yang Anda tulis akan mengendalikan bagaimana halaman yang menggunakan Snarfer halaman template akan ditampilkan. Lihat Template Tags untuk penjelasan dari berbagai fungsi template WordPress Anda dapat menggunakan untuk tujuan ini. Anda mungkin merasa lebih nyaman untuk menyalin beberapa template lainnya (mungkin page.php atau index.php ) untuk snarfer.php dan kemudian tambahkan di atas lima baris kode ke awal berkas. Dengan cara itu, Anda hanya perlu alter HTML dan kode PHP, bukan menciptakan semuanya dari awal. Contoh ditunjukkan bawah. Setelah Anda membuat template halaman dan ditempatkan di direktori tema Anda, itu akan tersedia sebagai pilihan ketika Anda membuat atau mengedit halaman. ( 'Catatan' :. Saat membuat atau mengedit halaman, opsi Template Halaman tidak muncul kecuali ada setidaknya satu template didefinisikan dengan cara di atas)
WordPress dapat memuat berbagai Template untuk berbeda permintaan jenis. Ada dua cara untuk melakukannya: sebagai bagian dari built-in Template Hirarki, dan melalui penggunaan Conditional Tags dalam The Loop dari file template.
Untuk menggunakan Template Hierarchy, pada dasarnya anda perlu menyediakan tujuan khusus file Template, yang secara otomatis akan digunakan untuk mengesampingkan index.php . Misalnya, jika Anda Theme menyediakan template yang disebut category.php dan kategori sedang bertanya, category.php akan dimuat bukan index.php . Jika category.php tidak hadir, index.php digunakan seperti biasa.
Anda bisa mendapatkan bahkan lebih spesifik dalam Template Hierarchy dengan menyediakan sebuah file yang bernama, misalnya, kategori-6.php - file ini akan digunakan daripada category.php saat membuat halaman untuk kategori yang nomor ID adalah 6. (Anda dapat menemukan nomor ID kategori di Pengelolaan> Kategori jika Anda login sebagai administrator situs di WordPress versi 2.3 dan di bawah ini. Dalam WordPress 2.5 kolom ID telah dihapus dari panel Admin. Anda dapat menemukan kategori id dengan mengklik 'Edit Kategori' dan mencari di URL address bar untuk nilai cat_id. Ini akan terlihat '... categories.php? action = edit & cat_id = 3 'di mana' 3 'adalah kategori id). Untuk melihat lebih rinci bagaimana proses ini bekerja, lihat Kategori Template.
Jika Tema Anda perlu memiliki lebih kontrol atas file mana Template yang digunakan dibandingkan dengan yang ada di Template Hierarchy, Anda dapat menggunakan Conditional Tags. Tag Bersyarat pada dasarnya memeriksa untuk melihat apakah beberapa kondisi tertentu adalah benar, dalam WordPress loop, dan kemudian Anda dapat memuat template tertentu, atau menaruh beberapa teks tertentu pada layar, berdasarkan kondisi itu.
Misalnya, untuk menghasilkan stylesheet yang khas dalam posting hanya ditemukan dalam kategori tertentu, kode akan terlihat seperti ini:
<? php
jika (is_category ('9')) {
get_template_part ('single2'); //Mencari posting dalam kategori dengan ID dari '9'
} lain {
get_template_part ('single 1'); //Menempatkan ini pada setiap lain pasca kategori
}
?>
Atau, menggunakan query, mungkin terlihat seperti ini:
<? php
$ post = $ wp_query-> posting;
jika (in_category ('9')) {
get_template_part ('single2');
} lain {
get_template_part ('single 1');
}
?>
Dalam kedua kasus, contoh kode ini akan menyebabkan template yang berbeda yang akan digunakan tergantung pada kategori pos tertentu yang ditampilkan. Kondisi permintaan tidak terbatas pada kategori, namun, melihat Conditional Tags artikel untuk melihat semua pilihan.
Hal ini dimungkinkan untuk menggunakan sistem plugin WordPress untuk menentukan template tambahan yang ditampilkan berdasarkan kriteria kustom Anda sendiri. Fitur canggih ini dapat dicapai dengan menggunakan "template_redirect" aksi kail. Informasi lebih lanjut tentang membuat plugin dapat ditemukan di Plugin API referensi.
Untuk memuat template lain (selain header, sidebar, footer, yang memiliki standar termasuk perintah seperti get_header () ) ke dalam template, Anda dapat menggunakan get_template_part () . Hal ini membuat mudah bagi Tema untuk menggunakan kembali bagian kode.
Ketika referensi file lain dalam tema yang sama, menghindari URI keras-kode dan path file. Referensi Sebaliknya URI dan path file dengan bloginfo () : lihat Mengacu File Dari Template.
Perhatikan bahwa URI yang digunakan dalam stylesheet yang relatif terhadap stylesheet, bukan halaman yang referensi stylesheet. Misalnya, jika Anda termasuk gambar / direktori dalam tema Anda, Anda hanya perlu menentukan direktori ini relatif dalam CSS, seperti:
h1 {
background-image: url (images /my-background.jpg);
}
Ketika mengembangkan Tema, ada baiknya untuk diingat bahwa tema Anda harus dibentuk sehingga dapat bekerja dengan baik dengan plugin WordPress pengguna mungkin memutuskan untuk menginstal. Plugin menambah fungsionalitas ke WordPress melalui "Aksi Hooks" (lihat Plugin API untuk informasi lebih lanjut).
Kebanyakan Hooks Aksi berada dalam kode PHP inti WordPress, sehingga Tema Anda tidak harus memiliki tag khusus bagi mereka untuk bekerja. Tapi Hooks Action beberapa yang perlu hadir dalam tema Anda, agar Plugin untuk menampilkan informasi secara langsung di header, footer, sidebar, atau di dalam tubuh halaman. Berikut adalah daftar khusus Aksi Hook Template Tags Anda perlu menyertakan:
Untuk contoh penggunaan dunia nyata, Anda akan menemukan ini kait Plugin termasuk dalam template default Tema ini.
Pada WordPress 3.4, fitur Kustomisasi Theme baru tersedia secara default untuk hampir semua tema WordPress. Tema Kustomisasi halaman admin secara otomatis diisi dengan pilihan yang tema menyatakan dukungan untuk dengan add_theme_support () atau menggunakan Pengaturan API, dan memungkinkan admin untuk melihat preview non-permanen perubahan yang mereka buat secara real waktu.
Theme dan plugin pengembang tertarik untuk menambahkan pilihan baru untuk tema yang Kustomisasi Theme halaman harus lihat dokumentasi pada Kustomisasi Theme API. Tutorial tambahan pada Kustomisasi Theme API yang tersedia di website.
Anda harus melarikan diri dihasilkan secara dinamis konten di Theme, terutama konten yang output ke HTML atribut. Seperti tercantum dalam WordPress Coding Standards, teks yang masuk ke dalam atribut harus dijalankan melalui esc_attr () sehingga satu atau dua tanda kutip tidak berakhir nilai atribut dan membatalkan XHTML dan menyebabkan masalah keamanan. Tempat umum untuk memeriksa adalah judul , alt , dan value atribut.
Ada beberapa tag template khusus untuk kasus-kasus umum di mana output yang aman dibutuhkan. Salah satu kasus tersebut melibatkan outputing judul posting ke judul atribut menggunakan the_title_attribute () bukan the_title () untuk menghindari kerentanan keamanan. Berikut ini adalah contoh dari melarikan diri yang benar untuk judul atribut link judul posting ketika menggunakan teks diterjemahkan:
<a href="<?php the_permalink(); ?> "title =" <? php sprintf (__ ('Link Permanen ke% s', 'tema-nama'), the_title_attribute ('echo = 0' ));?> "> <the_title php (); ?> </a>
Ganti melarikan diri ditinggalkan panggilan dengan panggilan yang benar: wp_specialchars () dan htmlspecialchars () dengan esc_html () , clean_url () dengan [ [Fungsi Referensi /esc_url | esc_url () ]], dan attribute_escape () dengan esc_attr () . Lihat Data_Validation untuk lebih.
Untuk memastikan kelancaran transisi untuk lokalisasi bahasa, menggunakan WordPress gettext berbasis i18n fungsi untuk membungkus semua teks diterjemahkan dalam file template. Hal ini membuat lebih mudah untuk file terjemahan untuk menghubungkan dan menerjemahkan label, judul dan teks template lainnya ke dalam bahasa situs saat ini. Lihat lebih lanjut di WordPress Lokalisasi dan i18n untuk WordPress Pengembang.
Mengimplementasikan tag template berikut untuk menambahkan kelas WordPress dihasilkan atribut untuk elemen tubuh, posting, dan komentar. Untuk kelas pos, hanya berlaku untuk unsur-unsur dalam The Loop.
Ketika mengembangkan Tema, periksa file template Anda terhadap standar file template berikut.
Berikut ini adalah contoh dari HTML5 kepala daerah sesuai dengan benar-diformat:
<! DOCTYPE html>
? <html <language_attributes php (); ? >>
<head>
<meta charset = "<? php bloginfo ('charset');?>" />
? <title> <wp_title php (); ?> </title>
<link rel = "profil" href = "http://gmpg.org/xfn/11" />
<link rel = "pingback" href = "<? php bloginfo ('pingback_url');?>" />
<? php if (is_singular () && get_option ('thread_comments')) wp_enqueue_script ('comment-reply'); ?>
? <wp_head php (); ?>
</head>
? <wp_footer php (); ?> </body> </html>
<h2> <? Php printf:;? (__ ('Hasil pencarian untuk% s'), '<span>' get_search_query () '</span>'..) ?> </h2> === === JavaScript
<script type = "text /javascript"> /* <! [CDATA [* / //Isi Javascript Anda pergi di sini /*]]> * / </script>
=== === Screenshot
Membuat screenshot untuk tema Anda. Screenshot harus dinamai screenshot.png , dan harus ditempatkan di direktori tingkat atas. Screenshot harus akurat menunjukkan desain tema dan disimpan dalam format PNG. Ukuran gambar yang dianjurkan adalah '880x660' . Screenshot hanya akan ditampilkan sebagai 387x290, tapi lebih gambar ganda berukuran memungkinkan untuk resolusi tinggi melihat pada HiDPI display.
Perhatikan bahwa opsional, .jpg, .jpeg, dan Gif juga ekstensi yang valid dan format file untuk screenshot (meskipun tidak disarankan).
Tema opsional dapat mendukung Tema Sesuaikan Layar. Untuk kode contoh, lihat Theme WordPress Contoh Pilihan Halaman.
Ketika memungkinkan ketersediaan Theme Sesuaikan Layar untuk pengguna peran, menggunakan "edit_theme_options" kemampuan pengguna bukan "switch_themes" kemampuan kecuali peran pengguna sebenarnya juga harus mampu untuk beralih Tema. Lihat lebih lanjut di Peran dan Kemampuan dan Menambahkan Administrasi Menu.
Jika Anda menggunakan "edit_themes" kemampuan di mana saja di Theme untuk mendapatkan akses peran Administrator ke Tema Sesuaikan Layar (atau mungkin beberapa layar kustom), menyadari bahwa sejak Versi 3.0, kemampuan ini tidak ditugaskan ke Peran administrator secara default dalam kasus WordPress Multisite instalasi. Lihat penjelasan. Dalam kasus seperti itu, gunakan "edit_theme_options" kemampuan bukan jika Anda ingin Administrator untuk melihat "Tema Options". Lihat kemampuan tambahan dari peran Administrator ketika menggunakan WordPress Multisite.
=== === CSS
=== === Template
Kategori: Desain dan Layout Kategori: Pengembangan WordPress Kategori: UI Link