Buat Tema Anak di WordPress Langkah demi Langkah Tutorial

Dalam posting ini, Anda akan belajar cara membuat tema anak di WordPress langkah demi langkah, Semua dasar-dasar Tema Anak WordPress.

Anda akan belajar cara mengimpor gaya CSS Tema Induk, cara mengganti gaya Tema Induk, dan mengapa Anda harus membuat tema anak WordPress.

Untuk mempelajari mengapa tema anak WordPress penting, Anda harus membaca Panduan Pemula Pengembangan Tema Orang Tua dan Anak WordPress kami

Apa yang dapat Anda lakukan dengan tema anak WordPress?

Dengan tema anak WordPress, Anda dapat dengan mudah menyesuaikan tema WordPress aktif default Anda. Anda tidak perlu mengetahui HTML, CSS, PHP, atau JavaScript tingkat lanjut untuk membuat tema anak.

Pemahaman dasar atau baik tentang HTML, CSS, dan PHP bisa sangat membantu.

Bacaan Lebih Lanjut: Cara Memilih Tema WordPress Gratis Atau Premium Sempurna

Anda dapat menggunakan tema anak WordPress untuk memodifikasi situs Anda dengan CSS, menambahkan area widget baru, menu navigasi tambahan, mengedit file khusus untuk membuat halaman baru dengan gaya khusus.

Dengan tema anak, Anda juga dapat menyusun ulang elemen situs, menambahkan konten/elemen baru, dan Mengubah fungsi apa pun.

Mengapa Anda Harus Membuat Tema Anak WordPress

Alasan adanya tema anak adalah agar Anda dapat menyesuaikan tema "induk" (yang sudah ada/aktif) tanpa kehilangan perubahan dan modifikasi saat Anda memperbarui tema induk.

Misalnya, jika Anda telah langsung memodifikasi file single.php, penyesuaian Anda akan berfungsi dengan baik pada awalnya.

Namun, ketika Anda akan memperbarui tema Anda ke versi yang lebih baru dari tema modifikasi Anda, Anda akan kehilangan semua perubahan Anda dan tidak akan ada cara untuk memulihkan penyesuaian Anda.

Apa yang kau butuhkan

Anda dapat membuat tema anak dengan cepat dan mengunggahnya ke server Anda, tetapi disarankan untuk menginstal WordPress secara lokal di PC Anda.

Dengan instalasi WordPress lokal, Anda dapat dengan cepat membuat dan menguji tema Anda, Anda tidak memerlukan koneksi internet setiap saat.

Dengan situs WordPress lokal, Anda dapat membuat kesalahan tanpa memengaruhi situs langsung Anda dan ini jauh lebih cepat dan lebih baik.

Ada banyak cara untuk menginstal WordPress secara lokal di Windows, MAC atau Linux. Baca tutorial ini, untuk mempelajari cara menginstal WordPress di PC lokal dengan Bitnami WordPress stack.

Kami telah menerbitkan tutorial langkah demi langkah untuk pemula.

Cara Instal WordPress Di Server WAMP Di Windows 8

Cara Instal WordPress Di Windows 8 Menggunakan Bitnami Stack

bagaimana cara membuat tema anak di WordPress panduan langkah demi langkah?

Untuk setiap tema anak di WordPress, diperlukan dua file.

• function.php
• style.css

Dalam file style.css, kita dapat menambahkan informasi tentang tema anak kita, misalnya nama tema, deskripsi tema, nama penulis, detail tema induk, tag, dll.

Kami juga membutuhkan file functions.php untuk mendaftarkan lembar gaya tema induk dan anak. Dengan file functions.php kita juga dapat menambahkan fungsi baru, mendaftarkan menu navigasi baru, area widget, dll.

Jadi mari kita mulai membuat tema anak pertama Anda. Dalam tema anak ini, kami tidak akan menambahkan area widget baru, menu navigasi, dll. Kami akan menggunakan tema anak kami untuk membuat beberapa perubahan CSS sederhana, Kami akan mengganti gaya CSS default.

Anda dapat menggunakan tema WordPress apa pun sebagai tema induk, untuk tutorial ini, saya akan membuat tema anak untuk tema TwentySixteen.

Buat folder baru dan simpan sebagai dua puluh enam belas-anak atau Anda dapat memberi nama apa pun yang Anda inginkan, misalnya desain.

Buat dua file baru dan simpan sebagai file functions.php dan style.css di folder tema anak kami. Nama folder tema anak saya adalah designbomb.

Sekarang tambahkan informasi berikut di file style.css tema anak Anda dan simpan file Anda.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Sekarang masuk ke dasbor WordPress Anda. Buka Penampilan > Tema > Tambah Baru dan unggah tema anak baru ini. Anda akan melihat tema baru tanpa tangkapan layar apa pun. Arahkan mouse Anda pada tema dan klik tombol Detail Tema.

Anda akan melihat detail berikut untuk tema anak baru Anda.

Pada tangkapan layar di atas, Anda dapat melihat semua informasi dasar tentang tema anak kami. Nama tema anak kami, siapa Penulis tema ini, deskripsi tema anak dan Anda juga dapat melihat Ini adalah tema anak Twenty Sixteen. pesan.

Kami telah menambahkan Templat: dua puluh enam belas dalam file style.css tema anak kami. Baris ini memberi tahu WordPress bahwa dua puluh enam belas adalah tema induk.

Jika Anda menggunakan tema lain, ganti TwentySixteen dengan nama tema induk Anda.

Sekarang aktifkan tema anak baru Anda dan muat ulang halaman depan Anda. Anda akan melihat semua konten tanpa gaya apa pun. Jangan khawatir, itu normal. Ini karena kami belum menyertakan file style.css tema induk dan anak kami

Setelah mengaktifkan child theme baru Buka Appearance > Editor dan pilih file functions.php (Theme Functions), tambahkan kode berikut di file functions.php dan klik tombol Update file untuk menyimpan perubahan Anda.

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Sekarang kunjungi ujung depan situs WordPress Anda dan muat ulang halaman Anda, Anda akan melihat situs normal dengan semua gaya TwentySixteen.

Memodifikasi gaya yang ada

Artinya tema anak kita sudah siap, Sekarang saatnya menyesuaikan tema induk kita dengan gaya CSS baru. Sekarang di bawah Appearance > Editor pilih file style.css. Kami akan menambahkan beberapa gaya baru.

Tambahkan gaya berikut di file style.css tema anak Anda dan simpan file Anda.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

muat ulang ujung depan situs Anda dan buka halaman apa pun. Kami telah memodifikasi gaya default untuk item menu saat ini. Lihat tangkapan layar di bawah ini.

Untuk item menu saat ini, saya telah menambahkan warna latar belakang baru, radius batas, warna dan bayangan kotak. Sangat sederhana dan mudah untuk mengubah gaya dengan alat Chrome Dev.

Itu saja

Sekarang Anda tahu cara membuat tema anak. Bukankah itu sederhana dan mudah. Dengan tema anak WordPress, Anda dapat menyesuaikan hampir setiap file tema induk Anda, tetapi tidak disarankan untuk memodifikasi setiap file tema induk Anda.

Selalu gunakan tema anak untuk menambahkan fungsi, fitur, atau halaman khusus yang diperlukan.

Unduh Desain tema anak