Fungsi tema anak wordpress php

Pernahkah Anda memperbarui tema WordPress Anda hanya untuk menemukan bahwa semua perubahan khusus yang Anda buat pada tema itu sendiri telah hilang?

Mari kita pergi

Daftar isi

Apa itu Tema Anak WordPress

Tema anak WordPress tidak dianggap sebagai tema lengkap seperti yang dapat ditemukan di direktori tema WordPress. Sebaliknya, itu sepenuhnya bergantung pada tema lain (disebut Tema Induk) agar dapat diaktifkan dan berfungsi dengan baik

Saat diaktifkan, itu mewarisi semua fungsi, fitur, dan kode tema induknya tanpa membuat perubahan apa pun pada file tema induk

WordPress akan menyajikan kode tema induk kecuali bagian yang ditimpa oleh tema anak yang akan disajikan dari folder tema anak. Hasil dari ini berarti bahwa ketika tema induk diperbarui, setiap modifikasi/penambahan dan seterusnya yang dilakukan pada tema anak tidak hilang

Membuat Tema Anak (Langkah-demi-Langkah)

Sebelum melanjutkan, pastikan

• Anda memiliki akses ke file situs web Anda melalui klien FTP (seperti WinSCP atau Filezilla)
• Anda memiliki editor teks yang tersedia (seperti notepad ++)

Untuk memulai, kami akan mengaktifkan tema default yang juga disebut sebagai Tema Induk. Dalam contoh ini akan menjadi tema Dua Puluh Dua Puluh. Jika kita menuju ujung depan situs web kita, kita akan melihat sesuatu seperti ini

Sekarang mari buat dan aktifkan tema anak 'Twenty Twenty'

Tambahkan Direktori

Pertama, kita harus membuat direktori 'dua puluh dua puluh anak' baru di dalam /wp-content/themes. Perhatikan bahwa folder anak dapat diberi nama sesuka Anda selama Anda tidak menggunakan spasi atau tanda baca

Tambahkan gaya. file css

Selanjutnya, kita harus membuat gaya. css dan tambahkan tajuk tema yang sesuai. Sebelum melanjutkan, mari kita lihat gayanya. css dari tema induk

Mari kita lihat di mana informasi ini tercermin di area admin

Pertama, buka detail tema di Appearance > Themes dan perhatikan kolom kanan lebih dekat

Jika kita membandingkannya dengan stylesheet, kita akan melihat dari mana berbagai elemen dari informasi ini diambil

Kita perlu mulai menambahkan beberapa informasi ini ke stylesheet tema anak kita. Informasi minimum yang diperlukan yang harus dimasukkan sebagai tajuk adalah 'Nama Tema' dan 'Templat'.  

/*
Theme Name: Twenty Twenty - Child
Template: twentytwenty
*/

• Nama Tema. Nama yang diinginkan dari Tema Anak Anda yang akan ditampilkan di bagian belakang WordPress
• Templat. Ini harus identik dengan nama direktori dari tema induk. Ini adalah tajuk paling penting untuk tema anak karena sebenarnya memberi tahu WordPress apa tema induknya dan dengan demikian menentukan ketergantungannya. Tanpanya, tema anak Anda tidak akan berfungsi

Setelah tema anak diaktifkan, yang akan Anda lihat di backend adalah ini

Anda juga dapat memasukkan informasi opsional berikut

• Versi (versi tema)
• Membutuhkan setidaknya (versi WP minimum yang diperlukan agar tema berfungsi dengan baik)
• Membutuhkan PHP (versi WP PHP minimum agar tema berfungsi dengan baik)
• Deskripsi (detail terkait tema)
• Tag (tag tema)
• Penulis (nama pengembang Tema)
• dll.

Pada titik ini, jika Anda membuka ujung depan situs web Anda, Anda mungkin menemukan itu rusak dan terlihat seperti ini

Ini sepenuhnya normal karena stylesheet (style. css) yang sekarang menjadi referensi WordPress sekarang dari tema anak dan lembar gaya ini kosong, kecuali informasi yang Anda masukkan di atas. Anda dapat memulai gaya Anda sendiri dari awal atau memuat gaya tema induk dan mulai dari sana. Jika Anda ingin mengimpor lembar gaya tema induk, Anda dapat melakukannya dengan salah satu dari dua cara

Opsi Satu. Impor lembar Gaya Induk dengan Cara Klasik

Yang harus Anda lakukan hanyalah menambahkan baris ini ke gaya tema anak Anda. file css

@import url('../twentytwenty/style.css');

Perintah ini memberi tahu WordPress ke mana harus mencari untuk mengambil file CSS asli. Sekarang jika Anda me-refresh homepage Anda sepertinya kembali normal. Apa pun yang Anda tambahkan sekarang dalam gaya. css akan menimpa gaya induk yang diimpor. Coba misalnya untuk menambahkan ukuran font yang berbeda untuk judul h2 “Hello world. ”

Segarkan halaman dan lihat pemeriksa elemen pada tab pengembang.  

Anda akan melihat bahwa nilai tambah dihitung dan default (gaya induk) "font-size. 6. 4rem;”

Apa yang harus Anda pertimbangkan adalah bahwa menggunakan metode ini memiliki pengaruh negatif pada kecepatan situs Anda karena file dipaksa untuk memuat satu demi satu dan tidak secara paralel. Lebih khusus lagi, browser harus mengunduh, mengurai, dan mengeksekusi file pertama sebelum "diberitahu" bahwa ia perlu mengunduh file kedua

Untuk alasan ini, mengimpor gaya induk. file css dengan cara ini tidak lagi direkomendasikan

Opsi Dua. Impor Lembar Gaya Induk dengan Cara yang Benar

Untuk mengimpor gaya induk. file css 'dengan cara yang benar' kita harus menambahkan file functions.php kosong di dalam folder tema anak Anda

Setelah Anda selesai melakukannya, buka dengan editor Anda dan tambahkan tag PHP pembuka (

function twentytwenty_scripts() {
    wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'twentytwenty_scripts');

Jika Anda memeriksa alat pengembang browser Anda sekarang, Anda akan melihat bahwa hasilnya sama dengan cara 'tradisional' yang diuraikan dalam Opsi Satu di atas, kecuali sekarang jauh lebih cepat

Beberapa catatan lebih lanjut tentang kode PHP

• 'parent-theme-style'_ adalah nama pegangan dan harus unik

• @import url('../twentytwenty/style.css');

  0 memberi tahu WordPress lokasi sumber dari gaya induk. lokasi css

• @import url('../twentytwenty/style.css');

  1 mengambil URI direktori template untuk tema induk kita. Dalam kasus kami ini menampilkan 'http. //situsku. onpressidium. com/wp-content/themes/twentytwenty’

Tambahkan Fungsionalitas ke Tema Anak Anda

Sekarang Anda telah membuat Tema Anak, Anda dapat mulai menambahkan beberapa fungsi tambahan. Pertama mari kita lihat bagaimana Anda akan mengedit file functions.php dalam tema anak Anda dan bagaimana ini bekerja dalam praktiknya

Fungsi Tema Anak. php

Berbeda dengan file

@import url('../twentytwenty/style.css');

Sebagai contoh, mari kita lihat bagaimana kita dapat mengubah Teks "Read More" untuk tampilan postingan

Langkah pertama. Buat kategori posting percobaan

Langkah Kedua. Buat dua posting baru di bawah kategori ini. Mari tambahkan beberapa contoh konten. Pada titik ini, Jika Anda mengunjungi halaman kategori, Anda akan melihat ini

Dalam contoh ini, kami ingin mengubah teks 'Lanjutkan Membaca' yang ditampilkan di tombol yang memuat postingan lengkap

Mari mundur sejenak untuk memahami bagaimana teks ini ditampilkan. Di WordPress, untuk memodifikasi fungsi tertentu, kami menggunakan

Dalam contoh ini untuk mendapatkan apa yang kita inginkan, kita harus menyesuaikan filter ‘the_content_more_link‘ yang awalnya diperkenalkan di wp-includes/post-template. php file inti baris 369 seperti ini

$output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>",       $more_link_text );

Ini saat ini diganti oleh tema induk twentytwenty dalam fungsinya. php (baris 571) dengan potongan kode ini.  

function twentytwenty_read_more_tag( $html ) {
    return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html );
}
add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Jadi, jika Anda ingin mengubah teks 'Lanjutkan Membaca' di tombol, ini dapat diganti di functions.php tema anak Anda jika Anda menambahkan potongan kode ini

function modify_read_more_link() {
    return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

Kait ''the_content_more_link'' umum di antara file-file tersebut dalam hal ini kait anak selalu berlaku

Kemudian segarkan halaman dan voila

Cara Menyesuaikan Template PHP

Tangkapan layar di atas menunjukkan konten dari template tema dua puluh dua puluh untuk tampilan kategori posting. Jadi, bagaimana kita bisa mengubah desainnya atau menambah/menghapus informasi menggunakan tema anak?

Inilah cara Anda dapat melakukan ini

1. Temukan file php terkait
2. Salin file yang sesuai ke folder tema anak dan edit
3. Sesuaikan sesuai keinginan Anda

Masalah pertama dan paling umum di sini adalah kita harus menemukan file php mana yang berisi keluaran yang ingin kita edit. Sesuatu yang pasti akan membantu Anda menemukan jalan keluarnya adalah hierarki template WordPress

Singkatnya, satu-satunya file yang dibutuhkan oleh tema WordPress adalah file index. php dan gaya. file css. File dan folder tambahan sebenarnya adalah file yang dipanggil dari dalam

@import url('../twentytwenty/style.css');

@import url('../twentytwenty/style.css');

Sehubungan dengan tema Twenty Twenty, jika kita melihat file

@import url('../twentytwenty/style.css');

if ( have_posts() ) {

    $i = 0;
    while ( have_posts() ) {
	$i++;
	if ( $i > 1 ) {
	    echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
	}
	the_post();
	get_template_part( 'template-parts/content', get_post_type() );
    }

}

Dalam kasus kami, kami harus menyalin file

function twentytwenty_scripts() {
    wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'twentytwenty_scripts');

Selain itu, pastikan Anda hanya menyalin file PHP yang ingin Anda sesuaikan. Jangan menyalin setiap file PHP di tema induk

CATATAN. Struktur folder harus sama pada tema anak agar perubahan tercermin di bagian depan

Jadi, pertama-tama kita membuat subfolder 'template-parts' dan meletakkan salinan

function twentytwenty_scripts() {
    wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'twentytwenty_scripts');

Anda sekarang dapat membuka file di editor Anda dan menyesuaikannya

Coba ubah sesuatu yang sepele pada awalnya untuk memastikan semuanya berfungsi dengan baik, misalnya, ubah kelas div dan segarkan frontend Anda untuk memeriksa hasilnya

Sesuaikan Templat Kategori Pos

Kami sudah memiliki dua posting di bawah kategori 'test category'. Anda sekarang dapat membuat menu item "'Kategori Posting"' dan menautkannya ke 'kategori tes'. Jika Anda mengklik item menu baru, Anda akan melihat halaman tampilan kategori posting

Sekarang Anda dapat memodifikasi lebih lanjut file

function twentytwenty_scripts() {
    wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'twentytwenty_scripts');

get_template_part( 'template-parts/featured-image' );

Ini berarti file yang menampilkan gambar unggulan adalah

function twentytwenty_scripts() {
    wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'twentytwenty_scripts');

Jadi, Anda dapat menyalin file di direktori tema anak Anda dan mengeditnya. Fantastis

Kesimpulan

Tema anak memungkinkan pengguna untuk mengubah tata letak, gaya, dan fungsionalitas tema induk tanpa kehilangan kemampuan untuk memperbarui tema induk. Seringkali, desainer web enggan memperbarui tema situs web mereka karena mereka tahu jika mereka melakukannya, mereka akan kehilangan perubahan yang dibuat langsung di tema induk. Ini adalah masalah serius karena sama pentingnya untuk selalu memperbarui tema Anda seperti plugin dan inti WordPress Anda. Bekerja dengan tema anak sejak awal menghilangkan masalah ini dan memungkinkan Anda memperbarui tema induk sesuai kebutuhan tanpa takut menimpa semua pengeditan yang telah Anda lakukan pada tema secara keseluruhan

Di mana fungsi tema anak saya php?

Bagaimana cara membuat file fungsi php di tema anak WordPress?

Bagaimana cara mengedit tema anak di php?

Bagaimana cara membuat kode tema anak di WordPress?