Cara Membuat Child Theme di WordPress

Apakah Anda ingin menambahkan atau ingin membuat anak tema di situs WordPress? Setelah Anda mempelajari dasar-dasar WordPress, Anda mungkin ingin mempelajari cara menyesuaikan situs WordPress Anda. Saya percaya bahwa Theme child adalah titik awal yang bagus bagi siapa pun yang ingin mengkustomisasi tema WordPress.

Sekarang Programmer handal dan berbakat WordPress telah menunjukkan kemampuan mereka untuk membuat Child tema WordPress agar Anda bisa membuat sub-theme berdasarkan karakteristik dari theme utama. child tema akan memungkinkan Anda untuk menggunakan dan memodifikasi tema utama, kemudian menyimpan child tema terpisah tanpa mempengaruhi tema utama.

Pada artikel ini, saya akan menunjukkan cara membuat dan mengkustomisasi anak tema WordPress.

Tema anak WordPress sederhana berdasarkan Twenty Thirteen

Mengapa Anda harus menggunakan Child Theme WordPress?

Anak tema dianggap sebagai cara terbaik untuk menyesuaikan tema WordPress Anda. Anak tema mewarisi semua fitur dan tampilan dari tema utamanya. Anda dapat menyesuaikannya tanpa memengaruhi tema utama. Ini memungkinkan Anda memperbarui tema utama dengan mudah tanpa khawatir kehilangan perubahan Anda.

Persyaratan

Pemahaman dasar tentang CSS / HTML diperlukan, sehingga Anda dapat membuat perubahan sendiri. Beberapa pengetahuan tentang PHP pasti akan membantu. Jika Anda pandai menyalin dan menempelkan cuplikan kode dari sumber lain, itu juga akan berhasil.

Saya menyarankan Anda untuk berlatih di lingkungan pengembangan lokal Anda. Anda dapat memindahkan situs WordPress langsung ke server lokal untuk tujuan pengujian atau menggunakan konten tiruan untuk pengembangan tema.

Cara Kerja Child Theme

Anak tema berada di direktori terpisah dari theme utama dan setiap direktori child harus memiliki file style.css dan functions.php sendiri. File tambahan yang dikustomisasi bisa ditambahkan sesuai dengan kebutuhan, namun file tersebut direkomendasikan agar tema bisa berfungsi dengan normal.

Dengan menggunakan file .css dan .php yang relevan, Anda bisa memodifikasi apapun mulai dari styling dan parameter layout hingga coding yang sebenarnya dan sscript yang digunakan oleh anak tema WordPress, bahkan jika script tersebut tidak terdapat di direktori utama.

Bayangkan anak tema WordPress sebagai lapisan yang berada di atas tema utama. Jika pengunjung membuka website Anda, WordPress pertama kali akan me-load child tema dan kemudian menurunkan style dan fungsi yang hilang dari tema utama. Hasilnya, mayoritas coding Anda tetap akan mengambil dari direktori utama, namun sudah dimodifikasi sesuai dengan parameter pada anak tema sebelum konten ditampilkan di halaman. Siap membuat child theme WordPress Anda?

Tema WordPress yang bagus dapat digunakan sebagai tema utama. Namun, ada banyak jenis tema dan beberapa mungkin bukan yang termudah untuk dikerjakan. Demi tutorial ini, saya akan menggunakan Twenty Thirteen , yang merupakan salah satu tema WordPress default.

Membuat Child Theme di WordPress

Pertama, Anda perlu membuka /wp-content/themes/folder instalasi WordPress Anda dan membuat folder baru untuk child Anda. Anda dapat memberi nama folder ini apa pun yang Anda inginkan. Untuk tutorial ini saya akan menamainya wpbdemo.

Membuat Tema Anak WordPress baru

Buka editor teks seperti Notepad dan tempel kode ini:

1
2
3
4
5
6
7
8
9
10
11
/*
 Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com/
 Description:  A Twenty Thirteen child theme
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 Template:     twentythirteen
 Version:      1.0.0
*/
@import url("../twentythirteen/style.css");

Sekarang simpan file ini seperti style.cssdi folder Child Theme yang baru saja Anda buat.

Sebagian besar hal dalam file ini cukup jelas. Yang benar-benar ingin Anda perhatikan adalah Template: dua puluh tiga belas .

Ini memberi tahu WordPress bahwa tema kita adalah child tema dan nama direktori tema utama kita adalah dua puluh tiga belas. Nama folder induk peka huruf besar kecil. Jika saya menyediakan WordPress dengan Template: TwentyThirteen, maka itu tidak akan berhasil.

Baris terakhir dalam kode ini mengimpor stylesheet tema utama kita ke anak tema.

Ini adalah persyaratan minimum untuk menambahkan child theme. Sekarang Anda dapat pergi ke Penampilan > Tema di mana Anda akan melihat anak tema wpb. Anda perlu mengklik tombol aktifkan untuk mulai menggunakan anak tema di situs Anda.

Mengaktifkan tema anak WordPress Anda

Karena Anda belum mengubah apa pun di child theme Anda, situs Anda akan menggunakan semua fungsionalitas dan tampilan tema utamanya.

mengkustomisasi Child Theme Anda

Setiap tema WordPress memiliki file style.css di direktori utamanya. Sebagian besar ini adalah stylesheet utama tema Anda tempat semua CSS digunakan. Namun, beberapa tema mungkin hanya memiliki informasi header tema di dalamnya. Tema seperti itu biasanya memiliki file CSS yang terletak di direktori terpisah.

Untuk bagian ini, Anda memerlukan sedikit pengetahuan CSS.

Google Chrome dan Firefox hadir dengan alat pemeriksa bawaan. Alat ini memungkinkan Anda untuk melihat HTML dan CSS di balik elemen apa pun dari halaman web.

Jika Anda ingin melihat CSS yang digunakan untuk menu navigasi, cukup arahkan mouse Anda ke menu navigasi dan klik kanan untuk memilih Inspect Element .

Menggunakan alat Inspect Element di Google Chrome

Ini akan membagi layar browser Anda menjadi dua bagian. Di bagian bawah layar, Anda akan melihat HTML dan CSS untuk halaman tersebut.

Pemeriksa Chrome menampilkan aturan gaya HTML dan CSS yang dirender

Saat Anda menggerakkan mouse ke baris HTML yang berbeda, inspektur Chrome akan menyorotnya di jendela atas. Seperti yang Anda lihat bahwa saya memiliki menu navigasi yang dipilih pada gambar di atas.

Ini juga akan menunjukkan kepada Anda aturan CSS yang terkait dengan elemen yang disorot di jendela sebelah kanan.

Anda dapat mencoba mengedit CSS di sana untuk melihat tampilannya. Mari kita coba mengubah background color.navbarmenjadi #e8e5ce.

Bermain-main dengan CSS di Chrome Inspector

Anda akan melihat bahwa warna background bilah navigasi akan berubah. Jika Anda suka ini, maka Anda dapat menyalin aturan CSS ini dan menempelkannya di file style.css anak tema Anda.

1
2
3
.navbar {
background-color: #e8e5ce;
}

Simpan perubahan yang Anda buat ke file style.css dan kemudian pratinjau situs Anda.

Ulangi proses untuk apa pun yang ingin Anda ubah di lembar gaya tema Anda. Berikut adalah stylesheet lengkap yang telah saya buat untuk child theme. Jangan ragu untuk bereksperimen dan memodifikasinya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
 Theme Name:   Ach Child Theme
 Theme URI:    https://www.achyar.online
 Description:  A Twenty Thirteen child theme
 Author:       achyar
 Author URI:   https://www.achyar.online
 Template:     twentythirteen
 Version:      1.0.0
*/
@import url("../twentythirteen/style.css");
.site-title {
padding: 30px 0 30px;
}
.site-header .home-link {
min-height: 0px;
}
.navbar {
background-color: #e8e5ce;
}
.widget {
background-color: #e8e5ce;
}
.site-footer {
background-color: #d8cdc1;
}
.site-footer .sidebar-container {
background-color:#533F2A
}

Mengedit File Template

Dua Puluh Tiga Belas Tata Letak

Setiap tema WordPress memiliki tata letak yang berbeda. Mari kita lihat tata letak tema Twenty Thirteen. Anda memiliki header, menu navigasi, loop konten, area widget footer, area widget sekunder, dan footer.

Masing-masing bagian ini ditangani oleh file yang berbeda di folder dua puluh tiga belas. File-file ini disebut template.

Sebagian besar waktu template ini dinamai sesuai area tempat mereka digunakan. Misalnya, bagian footer biasanya ditangani oleh file footer.php, header dan area navigasi ditangani oleh file header.php. Beberapa area, seperti area konten ditangani oleh beberapa file yang disebut Template konten.

Pertama yang perlu Anda lakukan adalah memilih file tema yang ingin Anda ubah dan kemudian menyalinnya ke anak tema Anda.

Misalnya, Anda ingin menghapus tautan didukung oleh WordPress dari area footer dan menambahkan pemberitahuan hak cipta di sana. Cukup salin file footer.php di Child Theme Anda dan kemudian buka di editor teks biasa seperti notepad. Cari tahu garis yang ingin Anda hapus dan ganti dengan milik Anda. Seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?>
        </div><!-- #main -->
        <footer id="colophon" class="site-footer" role="contentinfo">
            <?php get_sidebar( 'main' ); ?>
            <div class="site-info">
                <p>&copy; Copyright <?php echo date("Y"); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
                
            </div><!-- .site-info -->
        </footer><!-- #colophon -->
    </div><!-- #page -->
    <?php wp_footer(); ?>
</body>
</html>

Dalam kode ini, saya telah mengganti kredit Twenty Thirteen dengan pemberitahuan hak cipta.

Pemecahan masalah jauh lebih mudah saat membuat tema child. Misalnya jika Anda tidak sengaja menghapus sesuatu yang diperlukan oleh tema utama Anda, maka Anda cukup menghapus file dari Child Theme Anda dan memulai kembali.

Menambahkan Fungsi Baru ke Child Theme

Anda akan menemukan banyak tutorial WordPress yang meminta Anda untuk menyalin dan menempelkan potongan kode di file functions.php tema Anda .

Menambahkan cuplikan kode ke file functions.php tema utama berarti bahwa perubahan Anda akan ditimpa setiap kali ada pembaruan baru untuk tema utama. Inilah sebabnya mengapa selalu disarankan untuk menggunakan anak tema dan menambahkan semua cuplikan kode custom Anda ke file functions.php anak tema.

Mari kita buat file baru di folder anak tema Anda dan beri nama functions.php. Dalam contoh ini kita akan menambahkan sedikit potongan kode yang akan mengubah gambar header default menjadi gambar buatan kita sendiri.

Saya telah membuat gambar header dan thumbnail dengan mengedit gambar header default Twenty Thirteen. Selanjutnya, saya mengunggahnya ke Child tema saya di dalam / images / headers / folder.

Setelah itu kita perlu memberi tahu WordPress untuk menggunakan gambar ini sebagai gambar header default untuk tema kita. Kita bisa melakukannya dengan menambahkan potongan kode ini ke file functions.php anak tema kita:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
function wpbdemo_custom_header_setup() {
    add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );
    register_default_headers( array(
        'caramel' => array(
            'url'           => '%2$s/images/headers/circle-wpb.png',
            'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
            'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )
        ),
    ) );
}
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
?>

Sekarang jika Anda mengunjungi Appearance > Header , Anda akan dapat melihat gambar yang saya tambahkan sebagai gambar default.

Mengubah tajuk tema di Tema Anak WordPress Anda

Anda dapat menambahkan potongan kode khusus yang Anda perlukan di file functions.php Child tema Anda.

Penyelesaian masalah

Sebagai pemula, Anda diharapkan membuat error saat mengerjakan anak theme pertama Anda. Hanya saja, jangan menyerah terlalu cepat.

Error paling umum yang mungkin Anda lihat mungkin adalah kesalahan sintaks yang biasanya terjadi ketika Anda melewatkan sesuatu dalam kode. Berikut adalah panduan singkat yang menjelaskan cara menemukan dan memperbaiki kesalahan sintaks di WordPress .

Hasil Akhir

Tema anak WordPress sederhana berdasarkan Twenty Thirteen

Child Theme Lainnya Berdasarkan Dua Puluh Tiga Belas

Berikut adalah beberapa anak tema WordPress lainnya berdasarkan Twenty Thirteen. Lihatlah dan lihat bagaimana pengembang tema ini menyesuaikan Twenty Thirteen.

Holi

Holi - Tema anak WordPress berdasarkan Twenty Thirteen

bunga sakura

Cherry Blossom - Tema Dua Puluh Tiga Belas Anak

2013 Biru

2013 Biru

Portofolio Datar

Portofolio Datar

Saya harap artikel ini membantu Anda mempelajari cara menambahkan child Theme di WordPress. Ingatlah bahwa ada banyak dukungan yang tersedia bagi mereka yang membutuhkannya.

Achyar

Panduan Blog

Leave a Reply

Your email address will not be published.