Sun. Feb 28th, 2021

Apakah Anda ingin menambahkan atau ingin membuat child Theme di situs Anda? Setelah Anda mempelajari dasar-dasar WordPress, Anda mungkin ingin mempelajari cara menyesuaikan situs WordPress Anda. Kami percaya bahwa child Theme 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 Theme agar Anda bisa membuat sub-theme berdasarkan karakteristik dari theme utama. child theme akan memungkinkan Anda untuk menggunakan dan memodifikasi tema utama, kemudian menyimpan child theme terpisah tanpa mempengaruhi tema utama.

Pada artikel ini, kami akan menunjukkan cara membuat dan mengkustomisasi child theme pada WordPress.

Tema anak WordPress sederhana berdasarkan Twenty Thirteen

Mengapa Anda harus menggunakan Child Theme WordPress?

Child Theme dianggap sebagai cara terbaik untuk menyesuaikan tema WordPress Anda. Child theme 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.

Kami 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

Child theme berada di direktori terpisah dari tema 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 child theme WordPress, bahkan jika script tersebut tidak terdapat di direktori utama.

Bayangkan child theme WordPress sebagai lapisan yang berada di atas tema utama. Jika pengunjung membuka website Anda, WordPress pertama kali akan me-load child theme 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 child theme sebelum konten ditampilkan di halaman. Siap membuat child theme pada 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, kami 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 kami 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 theme dan nama direktori tema utama kita adalah dua puluh tiga belas. Nama folder induk peka huruf besar kecil. Jika kami menyediakan WordPress dengan Template: TwentyThirteen, maka itu tidak akan berhasil.

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

Ini adalah persyaratan minimum untuk membuat child theme. Sekarang Anda dapat pergi ke Penampilan > Tema di mana Anda akan melihat child theme wpb. Anda perlu mengklik tombol aktifkan untuk mulai menggunakan child theme 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 kami 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 child theme 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 kami 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 child Theme Anda.

Misalnya, Anda ingin menghapus link 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, kami telah mengganti kredit Twenty Thirteen dengan pemberitahuan hak cipta.

Pemecahan masalah jauh lebih mudah saat membuat child theme. 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 child theme dan menambahkan semua cuplikan kode custom Anda ke file functions.php child theme.

Mari kita buat file baru di folder child theme 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.

Kami telah membuat gambar header dan thumbnail dengan mengedit gambar header default Twenty Thirteen. Selanjutnya, kami mengunggahnya ke Child theme kami 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 child theme 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 theme Anda.

Penyelesaian masalah

Sebagai pemula, Anda diharapkan membuat error saat mengerjakan 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 child theme situs 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

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

Advertisements

Leave a Reply