Panduan Pemula untuk Mengembangkan Theme WordPress

Menurut WordPress Codex: “Tema WordPress adalah kumpulan file yang bekerja sama untuk menghasilkan antarmuka grafis dengan desain pemersatu yang mendasari untuk weblog.” Dengan kata sederhana, tema seperti kulit halaman web atau situs Anda. yang memungkinkan Anda memodifikasi tampilan konten Anda.

Jadi, jika Anda ingin membuat tema WordPress, saya akan mengatakan mari kita mulai dari awal. Tutorial ini akan membantu Anda membangun tema yang paling sederhana di WordPress. Tutorial ini akan membantu Anda membangun tema yang paling dasar dan memungkinkan Anda menelurkannya dengan fitur Anda sendiri.

Catatan: Untuk tutorial ini, Anda harus memiliki pemahaman HTML dan CSS yang menyeluruh, karena keduanya merupakan blok bangunan penting untuk bekerja dengan WordPress.Anda juga harus memiliki lingkungan localhost yang terpasang di komputer tempat Anda bekerja di WordPress.

Mari kita mulai …

Hal pertama yang perlu Anda ketahui adalah di mana WordPress menyimpan tema. Anda bisa menemukannya di direktori wp-content / themes di install anda. Anda juga bisa mengubah lokasi tema Anda dengan memberikan beberapa perintah di wp-config.php namun hal itu dilakukan sangat jarang.

Untuk membuat tema baru Anda perlu melakukan beberapa hal yang cukup mudah:

  • Buat folder baru direktori “Themes” instal Anda dan beri nama itu sedikit unik, seperti tema pertama saya.
  • Di folder ini, buat dua file: style.css & index.php
  • Buka stylesheet (style.css) dan tempelkan kode berikut ini:
  • Sekarang, rincian ini akan secara otomatis mengisi bagian rincian tema di bagian Appearance »Theme di backend WordPress. FYI, teks pada domain teks harus sama persis dengan nama folder (dalam hal ini my-first-theme).

Komponen Tema WordPress

Komponen dari tema WordPress terdiri dari 3 file paling sedikit.

  • index.php
  • style.css
  • functions.php

Pada dasarnya, kita perlu membuat 6 file untuk tema latihan contoh kita.

style.css
File ini berisi kode yang akan menambahkan gaya pada struktur HTML kita. Ini juga memegang informasi dasar tentang tema yang mencakup nama tema, Penulis, Deskripsi, Versi, Tag Filter, dan lisensi yang diumumkan.

index.php
File ini berisi kode yang membentuk struktur tema WordPress. Ini adalah file template utama. Ini bertindak sebagai template cadangan saat template lainnya tidak tersedia. Ini adalah file dimana loop WordPress ditambahkan.

header.php
File ini berisi unsur-unsur website seperti tipe dokumen, atribut bahasa, judul website, charset, metas dan berbagai link dan lainnya. Ini juga berisi “header” tema dan “menu utama”. File ini harus memiliki wp_head () action hook karena digunakan untuk fungsi dan plugin WordPress. File ini disebut dengan file index.php dan template lainnya dengan menggunakan fungsi get_header ().

footer.php
Seperti namanya, file ini berisi bagian footer dari tema Anda yang mencakup link, theme info, dan footer widgets jika ada. File ini disebut dengan file index.php dan template lainnya dengan menggunakan fungsi get_footer ().

komentar.php
biasanya menampilkan bentuk komentar dan komentar individu. File ini bisa disebut dengan menambahkan comments_template () pada template yang menampilkan single post atau page.

functions.php
File ini sangat penting karena mengandung fungsionalitas khusus. Di sini, Anda dapat menambahkan berbagai fungsi seperti mendaftarkan menu, mendaftarkan sidebars dinamis dan gaya antrian dan skrip.

Desain Tema

Mari buat disain sederhana agar kita bisa memahaminya dengan benar. Sebuah blog dengan satu sidebar di sebelah kanan akan menganggur untuk itu. Selain itu, sangat mudah untuk merancang dan bahkan lebih mudah untuk menambahkan sifat responsif nanti.

Panduan Pemula untuk Mengembangkan Theme WordPress

 

Header.php – Mari kita jelaskan dulu isi dari header.php. Kode pertama yang masuk adalah:

 

Selalu pastikan untuk menambahkan wp_head (); sebelum penutupan </ head>. Kait tindakan itu diperlukan untuk menambahkan dan memodifikasi isi header.php.

Setelah kode <head>, bagian selanjutnya adalah header dimana Anda akan menampilkan deskripsi nama situs dan situs.

Perhatikan bahwa istilah <head> dan Header adalah hal yang berbeda. <Head> adalah bagian dari dokumen HTML yang tidak terlihat di browser dan menangani Judul, Favicon, Meta, Stylesheets, Scripts dan banyak lagi. Header adalah bagian dari tema yang ditampilkan di bagian paling atas dimana Nama dan Deskripsi situs web biasanya ditampilkan. Ini mungkin juga menampilkan gambar header khusus tapi itu untuk tutorial lain. Untuk saat ini, kita akan fokus pada dasar-dasar membuat tema WordPress.

Sekarang, kita menambahkan wadah tag dan badan pembuka. Lalu kita tambahkan judul dan deskripsi judul.

 

Sekarang tambahkan Menu pada header.php

The WordPress Loop

Lingkaran WordPress bertanggung jawab untuk menampilkan isi dan isi dari isi website.

Navigasi Post

Ini menampilkan link “Older Posts” dan “Newer Posts”.

Jadi, sekarang kita punya header, menu, dan konten. Mari beralih ke sidebar yang berisi widget.

Mengkonfigurasi Widget Sidebar

Daftarkan Sidebar Dinamis
Tempatkan kode berikut di file functions.php:

Tampilkan Widget di Sidebar

Tambahkan kode ini di file index.php:

Isi CSS di WordPress

Lembar gaya itu penting karena berisi info penting tentang tema seperti nama tema, deskripsi tema, versi tema dan tema penulis; juga mendikte penampilan temanya.

Reset CSS
Ini memastikan konsistensi situs Anda di berbagai browser.

Desain Tema

Setelah CSS Reset Anda sekarang dapat menambahkan kode CSS untuk mengubah tampilan tema Anda.
Terlalu banyak untuk mencantumkan semuanya disini tapi praktik yang baik (menurut saya) adalah memulai dengan wadah seperti bodi dan bungkus besar lainnya. Dalam tema contoh kami, ini adalah #container, #header, #content, #sidebar dan sebagainya.

Menambahkan Stylesheet

Sekarang setelah Anda membuat style.css beserta isinya, Anda harus menautkannya ke template header Anda. Cara yang tepat untuk menambahkan stylesheet utama Anda (style.css) adalah menambahkan kode ini ke functions.php Anda.

Sekarang, tema Anda siap digunakan. Nikmati dan jika Anda menghadapi kesulitan tolong beritahu saya melalui komentar.

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

four + 10 =