Cara menggunakan css blur only parent

Pengertian Dan Cara Membuat Child Theme WordPress – WordPress adalah platform yang sangat kaya akan fitur. Tak heran jika banyak website dan blog di dunia yang menggunakan Content Management System (CMS) WordPress sebagai dasar softwarenya. WordPress juga dikenal dengan banyaknya dukungan dari para developer handal di dunia untuk lebih mengembangkan lagi CMS WordPress. Terbukti dengan hadirnya ratusan plugin dan template yang bisa kita dapatkan secara gratis dan berbayar. Dengan begitu tidak diragukan lagi dengan kelengkapan amunisi website dan blog jika CMS yang kita pilih adalah WordPress.

Baca Juga : Resiko Menggunakan Theme & Plugin WordPress Nulled Bagi Kelangsungan Blog

Namun walaupun begitu adakalanya kita merasa tidak puas dengan tampilan template yang kita gunakan. Terlebih jika template tersebut kita dapatkan secara gratis yang tentunya akan jauh kelengkapan fiturnya dibanding dengan template berbayar. Terutama tampilan template gratis biasanya akan terlihat kurang menarik dibanding theme premium sehingga kita perlu melakukan kustomisasi lagi agar lebih cocok dengan kemaun kita. Tapi tidak menutup kemungkinan juga jika theme berbayar harus kita ubah lagi tampilannya.

Cara menggunakan css blur only parent

Sebelum kita mengubah tampilan theme WordPress sebaiknya kita pikirkan dulu bagaimana jika nanti ada pemberitahuan harus update (memperbarui) template? Karena tidak sedikit depelover theme akan memberitahu kita untuk upgrade theme jika memang sudah ada fitur terbarunya. Notifikasi upgrade theme ini tidak hanya untuk theme berbayar saja, karena theme gratispun diantaranya ada yang harus upgrade secara berkala contohnya theme POINT dari MyThemeShop.

Anda mungkin sudah menyadarinya jika sebelumnya kita sudah pernah melakukan perubahan pada template seperti mengubah warna header, mengubah jenis huruf, dan sebagainya maka ketika template di upgrade tampilan template akan kembali ke tampilan semula (default). Tentunya itu adalah sebuah perjuangan yang sia-sia bukan?

Apakah sekalian saja jangan melakukan upgrade template?

Mungkin sekilas kita akan menjawab seperti itu bahwa mending sekalian jangan upgrade theme ketika ada notifikasi update dari developer theme. Jawaban itu saya rasa kurang tepat. Banyak kerugiannya jika kita tidak upgrade theme, seperti kita akan tidak tahu fitur terbaru dari template yang kita gunakan. Bahkan upgrade theme termasuk untuk meningkatkan keamanan blog kita.

Upgrade di WordPress seperti upgrade CMS WordPress, upgrade theme, dan upgrade plugin itu wajib dilakukan tidak ada alasan lagi.

Lalu bagaimana dengan solusi agar ketika upgrade theme tampilan template yang sebelumnya pernah kita ubah tidak menjadi ke tampilan semula? Disinilah saya akan memberikan solusi terbaiknya dan sudah saya buktikan ternyata manjur.

Solusinya adalah dengan membuat Child Theme.

Apa Itu Child Theme WordPress?

Apa itu Child Theme? Jika dilihat kosakatanya ‘child’ berarti ‘anak’ maka kalau Child Theme adalah anak theme/tema/template. Dengan kata lain Child Theme adalah yang memungkinkan kita untuk mengubah tampilan theme tanpa harus mengubah kode asli dari theme itu sendiri. Ketika website atau blog dijalankan maka tidak akan mengeksekusi kode dari theme induk namun dari Child Theme.

Disini akan dibahas “cara membuat Child Theme” dan “cara menggunakan Child Theme”. Jadi silakan Anda simak artikelnya sampai selesai.

Child Theme yang kita buat nanti akan ditempatkan sama dengan theme induk (Parent Theme). Jadi bukan kita tempatkan didalam Parent Theme, lihat skema berikut :

Cara menggunakan css blur only parent

Bagaimana Cara Membuat Child Theme WordPress Dan Cara Menggunakannya?

Ok kita mulai saja tutorial cara membuat Child Themenya. Pada dasarnya dalam membuat Child Theme hanya ada satu elemen penting saja yang harus kita buat yaitu style.css. Didalam style.css ini kita sering otak-otik tampilan theme seperti mengubah warna huruf, mengubah background, mengubah tampilan gambar, dan sebagainya. Untuk elemen-elemen lainya sementara kita biarkan dulu.

Langkah awal …

Kita ketahui dulu apa nama theme yang kita gunakan saat ini atau Parent Theme (Tema Induk), sebagai contoh theme yang saya gunakan sekarang adalah point dari MyThemeShop. Kemudian kita harus memikirkan nama template yang akan kita buat sebagai Child Theme, misal template selingkuhan.

Ok Parent Theme point dan Child Theme adalah template selingkuhan …

Buat folder baru di komputer dan terserah letaknya di drive mana karena ini hanya konsep dengan nama Child Theme yang sudah kita siapkan yaitu template selingkuhan. Kemudian buat file baru dengan Notepad beri nama style.css (biarkan isinya kosong dulu). Anda masukkan file tersebut kedalam folder yang tadi telah dibuat.

Saatnya mengatur style.css …

Anda buka file yang tadi telah dibuat di Notepad dengan nama style.css kemudian isikan kode berikut didalamnya :

/*
 Theme Name: Nama theme
 Theme URI: URL blog
 Description: Isi deskripsi
 Author: Nama author
 Author URI: Url author
 Template: Nama template
 Version: Versi theme
 */

Maksud dari kode diatas adalah sebagai berikut :

  1. Theme Name: = (wajib) Nama dari Child Theme Anda;
  2. Theme URI: = (pilihan) URL website atau blog Anda yang akan dipasang Child Theme;
  3. Description: = (pilihan) Diskripsi Child Theme, silakan kreasikan lagi;
  4. Author URI: = (pilihan) URL Author webiste atau blog Anda;
  5. Author: = (pilihan) Nama Anda;
  6. Template: = (wajib) Nama folder Parent Theme atau Theme Induk (case-sensitive);
  7. Version: = (pilihan) Versi Child Theme yang Anda buat sekarang.

Pada nama template Parent Theme itu wajib Anda isi dan memang itu adalah bersifat case-sensitive artinya Anda harus memperhatikan juga penulisan huruf kapital atau huruf kecilnya. Biasanya nama template ditulis tanpa spasi, misal penulisan point tentu berbeda dengan Point atau POINT.

Kemudian Anda pasang kode berikut dibawahnya :

@import url("../nama_template/style.css");

Sesuaikan nama point dengan nama Parent Theme yang Anda gunakan ….

Setelah menempatkan kode diatas dan melakukan perubahan seperlunya kemudian Anda sekarang perlu mengimport seluruh kode style.css dari Parent Theme kedalam style.css Child Theme.

Silakan sekarang Anda berkreasi sepuasnya bagian template mana yang akan diubah sesuai dengan selera Anda. Contoh kongkritnya nanti isi style.css Child Theme akan tampak seperti ini :

/*
Theme Name: Nama theme
Theme URI: URL blog
Description: Isi deskripsi
Author: Nama author
Author URI: Url author
Template: Nama template
Version: Versi theme
 */
 @import url("../point/style.css");
 /*-[ Mulailah berkreasi dari sini ]*/

Mengatur File dan Folder Lainnya …

Lalu bagaimana jika sebelumnya kita pernah mengubah atau menambahkan kode tertentu pada file dan folder lainnya didalam folder theme? Apakah ketika upgrade template akan hilang juga? Jawabannya tentu saja …

Dalam membuat file

@import url("../nama_template/style.css");
1 berbeda dengan membuat file style.css. Buat file
@import url("../nama_template/style.css");
1 dengan Notepad kemudian isi dengan kode-kode tertentu saja yang ingin Anda tambahkan, artinya tidak semua kode yang ada didalam Parent Theme dimasukkan kedalam Child Theme.

Namun sebelum menempatkan kode tertentu yang ditambahkan kedalam file

@import url("../nama_template/style.css");
1, diawali dengan kode
@import url("../nama_template/style.css");
5 dan diakhiri dengan kode
@import url("../nama_template/style.css");
6. Misal kita ingin menambahkan kode Custom CSS Widget dan kode Membatasi Jumlah Karakter Komentar maka contoh kongkritnya akan seperti ini :

<?php
/*-----------------------------------*/
/* Membatasi Jumlah Karakter Komentar
/*-----------------------------------*/
add_filter( 'preprocess_comment',
'wpb_preprocess_comment' );
function wpb_preprocess_comment($comment) {
if ( strlen( $comment['comment_content'] ) > 2000 ) {
wp_die('Isi pesan');
 }
if ( strlen( $comment['comment_content'] ) < 100 ) {
wp_die('Isi pesan');
 }
 return $comment;
}
/*-----------------------------------*/
/* Menonaktifkan Emoji
/*-----------------------------------*/
remove_action ('wp_head', 'print_emoji_detection_script', 7);
remove_action ('wp_print_styles', 'print_emoji_styles');
?>

Sedangkan untuk file-file lainnya seperti

@import url("../nama_template/style.css");
7,
@import url("../nama_template/style.css");
8,
@import url("../nama_template/style.css");
9,
/*
Theme Name: Nama theme
Theme URI: URL blog
Description: Isi deskripsi
Author: Nama author
Author URI: Url author
Template: Nama template
Version: Versi theme
 */
 @import url("../point/style.css");
 /*-[ Mulailah berkreasi dari sini ]*/
0,
/*
Theme Name: Nama theme
Theme URI: URL blog
Description: Isi deskripsi
Author: Nama author
Author URI: Url author
Template: Nama template
Version: Versi theme
 */
 @import url("../point/style.css");
 /*-[ Mulailah berkreasi dari sini ]*/
1,
/*
Theme Name: Nama theme
Theme URI: URL blog
Description: Isi deskripsi
Author: Nama author
Author URI: Url author
Template: Nama template
Version: Versi theme
 */
 @import url("../point/style.css");
 /*-[ Mulailah berkreasi dari sini ]*/
2, dan sebagainya kecuali
@import url("../nama_template/style.css");
1 maka ketika kita ingin melakukan perubahan didalamnya harus semua kode dalam file-file tersebut diimport kedalam Child Theme kemudian lakukan perubahan semestinya seperti mengubah pada file style.css.

Pertanyaan sekarang bagaimana untuk folder-folder tertentu seperti folder images dan folder font? Seperti kita telah menambahkan Gambar Default Avatar dan ditempatkan didalam folder images. Silakan Anda copy paste juga folder images yang ada didalam Parent Theme kedalam Child Theme.

Begitupun juga jika Anda telah menggunakan Font Face untuk desain Typograpy tampilan template maka inipun sama copy paste juga folder font di Parent Theme kedalam folder Child Theme. Karena nanti Child Theme akan mengeksekusi seluruh file yang ada didalam folder Child Theme saja.

Agar Child Theme yang kita buat lebih keren lagi, silakan tambahkan juga gambar screenshot. Biasanya file format screenshot ini adalah format .png dan memiliki ukuran 880 x 660 pixels.

Saatnya upload Child Theme …

Sekarang saya anggap Anda sudah berhasil membuat template Child Theme dengan nama Template Selingkuhan yang didalamnya terdapat file style.css, screenshot, file lainnya, dan folder lainnya. Kemudian anda ubah atau kompress folder Child Theme menjadi zip file menggunakan software kompressi seperti WinRAR. Kemudian Anda upload template baru Child Theme bisa melalui cPanel atau wp-admin dashboard. Nanti setelah upload sukses Anda tinggal aktifkan Chil Theme dari Appearance > Themes.

Selengkapnya pembahasan tentang Child Theme ini bisa dilihat dihalaman resmi WordPress.org. Ok mungkin pembahasan tentang Cara Membuat Child Theme WordPress Secara Manual dicukupkan sekian saja. Semoga artikel ini ada manfaatnya dan jika Anda mempunyai pendapat lain silakan disampaikan di kotak komentar saja. Salam sukses.