Tip dan Trik untuk Desainer Tema

Apakah Anda seorang calon desainer tema WordPress yang mencari cara baru untuk menggunakan CSS ke dalam tema Anda?

Untungnya, WordPress secara otomatis menambahkan kelas CSS yang dapat Anda manfaatkan dalam tema Anda. Beberapa dari kelas CSS ini secara otomatis ditambahkan ke

bagian dari setiap halaman di situs WordPress.

Pada artikel ini, kami akan menjelaskan body class WordPress dengan tip dan trik bagi calon desainer tema untuk memanfaatkannya dalam proyek mereka.

Berikut ini ikhtisar singkat tentang apa yang akan Anda pelajari di artikel ini.

Apa itu Kelas Tubuh WordPress?

Kelas tubuh (body_class) adalah fungsi WordPress yang memungkinkan Anda menetapkan kelas CSS ke elemen tubuh.

Tag body HTML biasanya dimulai di file header.php tema, yang dimuat di setiap halaman. Ini memungkinkan Anda untuk secara dinamis mencari tahu halaman mana yang sedang dilihat pengguna dan kemudian menambahkan kelas CSS yang sesuai.

Biasanya sebagian besar tema dan kerangka kerja pemula sudah menyertakan fungsi kelas tubuh di dalam tag body HTML. Namun, jika tema Anda tidak memilikinya, maka Anda dapat menambahkannya dengan memodifikasi tag body seperti ini:

Bergantung pada jenis halaman yang ditampilkan, WordPress secara otomatis menambahkan kelas yang sesuai.

Misalnya, jika Anda berada di halaman arsip, WordPress secara otomatis akan menambahkan kelas arsip ke elemen body. Itu dilakukan untuk hampir setiap halaman.

Terkait: Lihat bagaimana WordPress bekerja di balik layar (infografis)

Berikut beberapa contoh kelas umum yang mungkin ditambahkan WordPress, bergantung pada halaman mana yang sedang ditampilkan:

.rtl {} .home {} .blog {} .archive {} .date {} .search {} .paged {} .attachment {} .error404 {} .single postid- (id) {} .attachmentid- (id ) {} .attachment- (mime-type) {} .author {} .author- (user_nicename) {} .category {} .category- (slug) {} .tag {} .tag- (slug) {}. page-parent {} .page-child parent-pageid- (id) {} .page-template page-template- (nama file template) {} .search-results {} .search-no-results {} .logged- di {} .paged- (nomor halaman) {} .single-paged- (nomor halaman) {} .page-paged- (nomor halaman) {} .category-paged- (nomor halaman) {} .tag-paged- (nomor halaman) {} .date-paged- (nomor halaman) {} .author-paged- (nomor halaman) {} .search-paged- (nomor halaman) {}

Seperti yang Anda lihat, dengan memiliki sumber daya yang begitu kuat, Anda dapat sepenuhnya menyesuaikan halaman WordPress Anda hanya dengan menggunakan CSS. Anda dapat menyesuaikan tertentu halaman profil penulis, arsip berbasis tanggal, dll.

Karena itu, sekarang mari kita lihat bagaimana dan kapan Anda akan menggunakan kelas tubuh.

Kapan menggunakan The WordPress Body Class

Pertama, Anda perlu memastikan bahwa elemen body tema Anda berisi fungsi body class seperti yang ditunjukkan di atas. Jika ya, maka secara otomatis akan menyertakan semua kelas CSS yang dibuat WordPress yang disebutkan di atas.

Setelah itu, Anda juga dapat menambahkan kelas CSS kustom Anda sendiri ke elemen body. Anda dapat menambahkan kelas-kelas ini kapan pun Anda membutuhkannya.

Misalnya, jika Anda ingin mengubah tampilan artikel oleh penulis tertentu yang diajukan di bawah kategori tertentu.

Cara Menambahkan Kelas Tubuh Kustom

WordPress memiliki filter yang dapat Anda manfaatkan untuk menambahkan kelas tubuh khusus saat diperlukan. Kami akan menunjukkan kepada Anda cara menambahkan kelas tubuh menggunakan filter sebelum menunjukkan kepada Anda skenario kasus penggunaan tertentu agar semua orang dapat berada di halaman yang sama.

Karena kelas tubuh adalah tema khusus, Anda perlu menambahkan kode berikut ke tema Anda functions.php mengajukan.

function my_class_names ($ kelas) {// tambahkan ‘nama-kelas’ ke array $ kelas $ kelas[] = ‘wpb-class’; // kembalikan array $ kelas return $ kelas; } // Sekarang tambahkan kelas uji ke filter add_filter (‘body_class’, ‘my_class_names’);

Kode di atas akan menambahkan kelas “wpb-class” ke tag body pada setiap halaman di situs Anda. Itu tidak terlalu buruk, bukan?

Sekarang Anda dapat menggunakan kelas CSS ini di lembar gaya tema Anda secara langsung. Jika Anda mengerjakan situs web Anda sendiri, maka Anda juga dapat menambahkan CSS menggunakan fitur CSS khusus di penyesuai tema.

Menambahkan Kelas Tubuh Menggunakan Plugin WordPress

Jika Anda tidak sedang mengerjakan proyek klien dan tidak ingin menulis kode, maka metode ini akan lebih mudah untuk Anda.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Kelas Tubuh Kustom plugin. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami di cara memasang plugin WordPress.

Setelah aktivasi, Anda perlu mengunjungi Pengaturan »Kelas Tubuh Kustom halaman. Dari sini Anda dapat mengonfigurasi pengaturan plugin.

Anda dapat memilih jenis posting di mana Anda ingin mengaktifkan fitur kelas tubuh dan siapa yang dapat mengaksesnya. Jangan lupa untuk mengklik tombol simpan perubahan untuk menyimpan pengaturan Anda.

Selanjutnya, Anda dapat menuju untuk mengedit posting atau halaman apa pun di Situs WordPress. Pada layar edit posting, Anda akan menemukan kotak meta baru di kolom kanan berlabel ‘Post Classes’.

Klik untuk menambahkan kelas CSS kustom Anda. Anda dapat menambahkan beberapa kelas yang dipisahkan oleh spasi.

Setelah Anda selesai, Anda dapat menyimpan atau menerbitkan posting Anda. Plugin sekarang akan menambahkan kelas CSS khusus Anda ke kelas tubuh untuk posting atau halaman tertentu.

Menggunakan Tag Bersyarat dengan Kelas Tubuh

Kekuatan sebenarnya dari fungsi body_class datang ketika digunakan dengan tag kondisional.

Tag kondisional ini adalah tipe data benar atau salah yang memeriksa apakah suatu kondisi benar atau salah di WordPress. Misalnya, tag kondisional is_home memeriksa apakah halaman yang saat ini ditampilkan adalah beranda atau bukan.

Ini memungkinkan pengembang tema untuk memeriksa apakah suatu kondisi benar atau salah sebelum menambahkan kelas CSS khusus ke fungsi body_class.

Mari kita lihat beberapa contoh penggunaan tag kondisional untuk menambahkan kelas kustom ke kelas body.

Katakanlah Anda ingin memberi gaya pada beranda Anda secara berbeda untuk pengguna yang masuk dengan penulis peran pengguna. Meskipun WordPress secara otomatis menghasilkan kelas .home dan .logged-in, itu tidak mendeteksi peran pengguna atau menambahkannya sebagai kelas.

Sekarang, ini adalah skenario di mana Anda dapat menggunakan tag kondisional dengan beberapa kode kustom untuk secara dinamis menambahkan kelas kustom ke kelas body.

Untuk mencapai ini, Anda akan menambahkan kode berikut ke file functions.php tema Anda.

Sekarang, mari kita lihat contoh berguna lainnya. Kali ini kita akan memeriksa apakah halaman yang ditampilkan adalah pratinjau draf WordPress.

Untuk melakukan itu kita akan menggunakan tag kondisional is_preview dan kemudian menambahkan kelas CSS khusus kita.

function add_preview_class ($ kelas) {if (is_preview ()) {$ kelas[] = ‘mode pratinjau’; mengembalikan $ kelas; } mengembalikan $ kelas; } add_filter (‘body_class’, ‘add_preview_class’);

Sekarang, kami akan menambahkan CSS berikut ke stylesheet tema kami untuk memanfaatkan kelas CSS khusus baru yang baru saja kami tambahkan.

.preview-mode .site-header: before {content: ‘preview mode’; warna: #FFF; warna-latar belakang: # ff0000; }

Beginilah tampilannya di situs demo kami:

Anda mungkin ingin melihat daftar lengkap tag bersyarat yang dapat Anda gunakan di WordPress. Ini akan memberi Anda seperangkat tag siap pakai yang praktis untuk kode Anda.

Contoh Lain dari Menambahkan Kelas Tubuh Kustom secara Dinamis

Selain tag kondisional, Anda juga dapat menggunakan teknik lain untuk mengambil informasi dari database WordPress dan membuat kelas CSS khusus untuk kelas body.

Menambahkan nama kategori ke kelas tubuh dari satu halaman posting

Katakanlah Anda ingin menyesuaikan tampilan posting tunggal berdasarkan kategori mereka diarsipkan. Anda dapat menggunakan kelas tubuh untuk mencapai ini

Pertama, Anda perlu menambahkan nama kategori sebagai kelas CSS pada halaman posting tunggal. Untuk melakukan itu, tambahkan kode berikut ke file functions.php tema Anda:

// tambahkan nama nama kategori dalam fungsi kelas tubuh category_id_class ($ kelas) {global $ post; foreach ((get_the_category ($ post-> ID)) sebagai $ category) $ kelas[] = $ category-> category_nicename; mengembalikan $ kelas; } add_filter (‘body_class’, ‘category_id_class’);

Kode di atas akan menambahkan kelas kategori di kelas tubuh Anda untuk halaman posting tunggal. Anda kemudian dapat menggunakan kelas CSS untuk menatanya sesuai keinginan.

Menambahkan siput halaman ke kelas tubuh

Tempel kode berikut di file functions.php tema Anda:

// Halaman Kelas Tubuh Siput fungsi add_slug_body_class ($ kelas) {global $ post; if (isset ($ post)) {$ kelas[] = $ post-> post_type. ‘-‘. $ post-> post_name; } mengembalikan $ kelas; } add_filter (‘body_class’, ‘add_slug_body_class’);

Deteksi Browser dan Kelas Tubuh Khusus Browser

Terkadang Anda mungkin menemukan masalah di mana tema Anda mungkin memerlukan CSS tambahan untuk browser tertentu.

Sekarang kabar baiknya adalah WordPress secara otomatis mendeteksi browser saat memuat dan kemudian menyimpan informasi ini sebagai variabel global untuk sementara.

Anda hanya perlu memeriksa apakah WordPress mendeteksi browser tertentu dan kemudian menambahkannya sebagai kelas CSS khusus.

Cukup, salin dan tempel kode berikut di file functions.php tema Anda:

function wpb_browser_body_class ($ kelas) {global $ is_iphone, $ is_chrome, $ is_safari, $ is_NS4, $ is_opera, $ is_macIE, $ is_winIE, $ is_gecko, $ is_lynx, $ is_IE, $ is_edge; jika ($ is_iphone) $ kelas[] = ‘iphone-safari’; elseif ($ is_chrome) $ kelas[] = ‘google-chrome’; elseif ($ is_safari) $ kelas[] = ‘safari’; elseif ($ is_NS4) $ kelas[] = ‘netscape’; elseif ($ is_opera) $ kelas[] = ‘opera’; elseif ($ is_macIE) $ kelas[] = ‘mac-ie’; elseif ($ is_winIE) $ kelas[] = ‘windows-ie’; elseif ($ is_gecko) $ kelas[] = ‘firefox’; elseif ($ is_lynx) $ kelas[] = ‘lynx’; elseif ($ is_IE) $ kelas[] = ‘penjelajah internet’; elseif ($ is_edge) $ kelas[] = ‘tepi-ms’; lain $ kelas[] = ‘tidak diketahui’; mengembalikan $ kelas; } add_filter (‘body_class’, ‘wpb_browser_body_class’);

Anda kemudian dapat menggunakan kelas seperti:

.ms-edge .navigation {beberapa item ditempatkan di sini}

Jika ini adalah masalah bantalan atau margin kecil, maka ini adalah cara yang cukup mudah untuk memperbaikinya.

Pasti ada lebih banyak skenario di mana menggunakan fungsi body_class dapat menyelamatkan Anda dari penulisan baris kode yang panjang. Misalnya, jika Anda menggunakan kerangka tema seperti Asal, lalu Anda bisa menggunakannya untuk menambahkan kelas kustom di tema anak Anda.

Anda dapat menggunakan fungsi body_class untuk menambahkan kelas CSS tata letak halaman lebar penuh, konten sidebar, header dan footer, dll.

Kami harap artikel ini membantu Anda mempelajari cara menggunakan kelas tubuh WordPress di tema Anda. Anda mungkin juga ingin melihat artikel kami di bagaimana mengatur gaya setiap posting WordPress secara berbeda, dan perbandingan kami tentang plugin pembuat halaman WordPress terbaik.

Jika Anda menyukai artikel ini, silakan berlangganan kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia dan Facebook.

Sumber Artikel

WP Tips