Tutorial Pengembangan Tema WordPress Langkah Demi Langkah

Posted on by

Tutorial Pengembangan Tema WordPress Langkah Demi Langkah – Ini akan menjadi tutorial yang menyenangkan di mana kami memeriksa cara membuat Tema WordPress Anda sendiri dari awal. Bahkan, kita akan mulai dengan benar-benar nol file dan nol baris kode. Satu-satunya cara untuk memahami cara kerja Tema WordPress, adalah dengan benar-benar terjun ke level rendah dan melakukan semuanya sendiri.

thesimplexdesign

Tutorial Pengembangan Tema WordPress Langkah Demi Langkah

thesimplexdesign – Ya, sangat menggoda untuk menghindari ini karena Anda dapat membuat WordPress melakukan segalanya untuk Anda tanpa memahami kode yang mendukungnya. Ini bisa berupa PHP, JavaScript, CSS atau bahkan HTML dasar. Pada akhir tutorial Tema WordPress langkah demi langkah ini, Anda akan memahami bagaimana semuanya cocok dan bagaimana menyesuaikan WordPress sesuai keinginan Anda dengan mudah.

Ada begitu banyak tema gratis yang tersedia untuk Anda ketika Anda menjalankan situs web WordPress. Di luar tema gratis, Anda juga dapat memilih untuk membayar premium untuk tema WordPress yang dibuat secara profesional yang tampak hebat dan memiliki fitur fantastis. Jadi mengapa belajar cara membuat tema Anda sendiri dari awal? Jawabannya adalah, apa pun tema yang Anda gunakan, akan ada saatnya Anda ingin membuat perubahan sederhana pada situs web Anda.

Baca Juga : Panduan Lengkap Pemula Untuk Pemasaran Digital

Beberapa dari perubahan tersebut mungkin dapat diakomodasi oleh plugin atau widget sederhana. Namun seringkali, lebih masuk akal untuk memahami apa yang ingin Anda ubah, bagaimana mengubahnya, dan menghindari mengubah situs web WordPress Anda menjadi kekacauan plugin dan add-on yang menjadi berat. Dengan hanya sedikit pengetahuan tingkat dasar, Anda akan percaya diri dalam memodifikasi tema Anda, atau hanya membangun sendiri dari awal.

Langkah 1: Buat folder untuk menyimpan file tema Anda.

Jika kita akan membangun tema, kita perlu tahu di mana file yang membentuk tema WordPress tinggal di Instalasi WordPress. Ini cukup mudah. Kita tahu bahwa instalasi WordPress biasanya memiliki direktori root bernama wordpress. Inilah yang terlihat seperti direktori root kami di PHP Storm.

Direktori ini berisi file dan folder berikut:

File

  • komposer.json
  • index.php
  • lisensi.txt
  • readme.html
  • wp-aktifkan.php
  • wp-blog-header.php
  • wp-komentar-posting.php
  • wp-config.php
  • wp-config-sample.php

Folder

  • wp-admin
  • wp-konten
  • wp-termasuk

Folder yang paling kami minati saat ini adalah folder wp-content . Di dalam folder wp-content ada folder bernama themes . Apakah Anda tahu untuk apa folder ini? Ya, itu benar! Ini adalah folder yang menyimpan satu atau lebih tema yang ingin Anda gunakan dengan situs web WordPress Anda. Dalam folder tema ini kami menemukan tiga folder tambahan dua puluh lima belas , dua puluh enam belas , dan dua puluh tujuh belas.

Folder-folder ini berisi tiga tema yang dikirimkan WordPress secara default. Perhatikan di bawah bahwa ada juga folder bernama customtheme. Silakan dan buat folder itu juga di instalasi Anda karena di sinilah kami akan membuat tema WordPress kami dari awal.

Langkah 2: Buat style.css dan index.php di folder tema khusus Anda

Kita sekarang tahu di mana file tema WordPress berada di sistem file. Kami juga telah membuat folder baru bernama customtheme di folder tema kami. Kita sekarang akan membuat dua file kosong di direktori ini. Satu disebut index.php dan yang lainnya disebut style.css .

Mari kita sekarang mengisi file-file ini dengan minimal yang kita butuhkan untuk mendapatkan tema baru di WordPress.

style.css

WordPress sebenarnya membaca komentar yang Anda tempatkan di file style.css. Di sinilah Anda menentukan informasi spesifik tentang tema yang Anda bangun.

Style.css adalah file stylesheet (CSS) yang diperlukan untuk setiap tema WordPress. Ini mengontrol presentasi (desain visual dan tata letak) dari halaman situs web.

Dalam cuplikan kami di sini, kami cukup menetapkan Nama Tema, Penulis, URI Penulis, dan nomor Versi tema kami.

/*
Theme Name: customtheme
Author: Vegibit
Version: 1.0
*/

index.php
Dalam file ini, kami hanya ingin menampilkan sesuatu ke layar untuk membuktikan bahwa tema khusus kami berfungsi.

Markup
Kerja bagus! Percaya atau tidak, Anda telah membuat Tema WordPress pertama Anda.

Langkah 3: Aktifkan tema Anda dari Dasbor WordPress

Pada titik ini kita dapat mengunjungi Dashboard WordPress kita dan menavigasi ke Appearance->Themes dan lihatlah, kita melihat tema baru yang telah kita buat.

Kita dapat mengklik “Detail Tema” untuk menelusuri tema khusus kita dan menemukan bahwa informasi yang telah kita masukkan ke dalam file style.css telah berfungsi. Kita dapat melihat mereka memiliki nama customtheme, dengan Versi 1.0, oleh penulis Vegibit, dan tautan ke URI yang telah kami sediakan. Sangat keren.

Dan sekarang momen kebenaran! Silakan dan klik “Aktifkan” pada tema kustom baru dan kemudian kunjungi situsnya. Ini tidak akan memenangkan penghargaan Webby apa pun, tetapi kami memiliki awal yang baik untuk tema khusus baru!

Langkah 4: Tambahkan Kode ke Output Judul Posting dan Teks Posting

Kami telah mengambil kebebasan untuk mengisi beberapa contoh posting di database sehingga kami dapat bekerja dengan data tersebut selama tutorial ini. Saat ini, tema kami hanya menampilkan Tema Kustom! ke halaman ketika kami mengunjungi situs kami tidak peduli berapa banyak posting di database.

Sekarang mari kita beralih ke mengambil beberapa data dari database, dan mengeluarkannya ke halaman. Secara khusus, kami ingin mengambil Judul Postingan dan Konten Postingan dari semua posting dan melihatnya di beranda. Mari kita coba sekarang. Pertama mari kita lihat apa yang kita miliki untuk posting di Dashboard WordPress.

Memanfaatkan Loop WordPress

Sekarang kita dapat berbicara sedikit tentang Loop WordPress. Loop WordPress benar-benar mesin yang membuat WordPress berjalan. Melalui loop ini, pengembang tema memeriksa posting dan menampilkannya di halaman sesuai kebutuhan. Jika mengikuti format sebagai berikut. Jika database memiliki postingan, mari kita ulangi saat masih ada postingan, jika tidak, kami akan memberi tahu pengguna bahwa tidak ada postingan. Ini terlihat seperti ini dalam kode PHP.

PHP

Perhatikan bahwa The Loop menggunakan dua fungsi dalam bentuknya yang paling dasar. Itu adalah have_posts() dan the_post() . Fungsi have_posts() hanya melakukan satu hal. Ini memberitahu Anda jika ada posting di database untuk mengulang. Fungsi ini akan mengembalikan salah satu trueatau falsedan hanya itu . Jika mengembalikan true, maka ada pos yang tersedia untuk diulang.

Jika mengembalikan false, maka tidak ada posting untuk diulang. Fungsi lainnya, the_post() tidak mengembalikan apa pun. Tugasnya adalah menyiapkan WordPress untuk menampilkan posting.

Secara khusus, ia mengambil pos berikutnya, menyiapkan pos, menyetel in_the_loopproperti ketrue. Sejauh ini, halaman kita masih belum menampilkan informasi apa pun tentang posting blog kita, tetapi kita dapat memperbaruinya sekarang di file index.php kita .

PHP

Kami sekarang telah menggunakan dua fungsi WordPress tambahan, the_title() dan the_content() . Paling sering, fungsi-fungsi ini digunakan di dalam loop dan apa yang mereka lakukan adalah mengambil judul dan konten dari setiap posting saat loop berulang pada masing-masing dalam database. Jadi saat loop berjalan, itu akan menemukan posting pertama.

Pada saat itu fungsi the_title() akan menampilkan judul posting ke halaman dan the_content() akan menampilkan isi posting itu ke halaman. Pada loop berikutnya, fungsi-fungsi ini akan kembali mengambil judul dan konten berikutnya dan menampilkannya ke halaman. Jadi dengan ini, kita sekarang akan melihat beberapa informasi tentang posting kita yang dikirim ke layar. Mari kita coba!

Langkah 5: Tambahkan Tautan Ke Setiap Posting

Bagaimana dengan menautkan ke setiap posting individu sehingga kami dapat melihat posting itu sendiri daripada hanya sebagai bagian dari beranda. Kita bisa melakukannya dengan cukup mudah, sekali lagi dengan fungsi khusus yang disediakan WordPress. Untuk tugas ini, kita dapat menggunakan fungsi the_permalink() . Kami dapat memperbarui kode kami seperti ini:

Sekarang, kita dapat mengklik masing-masing judul posting, dan menavigasi ke halaman yang hanya memiliki satu posting itu. Sangat keren!