() translation by (you can also view the original English article)
Di tutorial singkat ini, kita akan melihat Body class wordpress dan bagaimana memanipulasinya dengan menggunakan Core API.
Khusus nya, kita akan menambahkan body class, menghilangkan body class, dengan beberepa kondisional menambahkan body class dan beberapa contoh.
Body Class: Apa kegunaan dan fungsinya?
body Class di wordpress adalah sebuah class atau serangkaian class yang di terapkan pada elemen Body HTML. Hal ini sangat berguna untuk menerapkan tampilan yang unik pada area yang berbeda di situs wordpress dengan menambahkan kondisional tertentu pada body.
WordPress menyediakan sejumlah class standar yang akan kita bahas di dalam artikel ini
Menambahkan Class pada Body
Ada beberapa metode yang bisa kita gunakan untuk menambahkan class baru di dalam body wordpress. Tutorial ini akan membahas cara menambahkan class di theme wordpress (biasanya di definisikan di dalam file header.php) dengan menggunakan fungsi body_class dan menambahkan class dengan menggunakan filter.
Mengedit Theme : Melalui Nilai Class Body.
Ini adalah cara yang sangat sederhana untuk menambahkan class body dan sangat berguna pada saat pembuatan sebuah theme (tema). Class Body biasanya di sertakan kedalam sebuah theme dengan menggunakan kode seperti berikut ini:
1 |
<body <?php body_class(); ?>> |
Untuk menambahkan class milik anda sendiri, anda cukup menambahkan sebuah nilai ke dalam fungsi seperti kode di bawah ini:
1 |
<body <?php body_class( 'my-class' ); ?>> |
Hal ini akan menambahkan class my-class pada setiap halaman situs wordpress anda.
Menambahkan Beberapa Class Body
Mungkin ada saat saat ketika anda ingin menambahkan lebih dari satu class body. hal ini dapat anda terapkan dengan menggunakan array sederhana:
1 |
<body <?php body_class( array( "class-one", "class-two", "class-three" ) ); ?>> |
Kode tersebut akan mengambil semua class di dalam array. dan akan melewati body_class.
Menambahkan Class Body dengan Kondisional.
Anda juga mungkin menginginkan menambahkan class body dengan kondisional tertentu. Hal ini bisa dengan mudah anda terapkan dengan kode PHP sederhana. Contoh ini menggunakan kondisional WooCommerce dari is_shop();
1 |
<?php if ( is_shop() ) { body_class( 'is-woocommerce-shop' ); } else { body_class(); } ?> |
Catatan : WooCommerce sudah menambahkan class berdasarkan contoh di atas, jadi untuk di ketahui ini adalah murni sebagai sebuah contoh saja.
Apa yang kode di atas lakukan adalah memeriksa bahwa jika fungsi pertama benar, maka class is-woocommerce-shop akan di tambahkan kedalam class body; sebaliknya, jika salah maka hanya class body default yang akan di tampilan.
Menambahkan class body dengan menggunakan Filter
Hal tersebut sangat memungkinkan menggunakan filter wordpress untuk menambahkan class body. Metode ini membuat theme tetap rapi dan sangat berguna jika anda ingin menambahkan class body dari plugin. Kode ini dapat di tambahkan juga di file functions.php di dalam theme anda atau di dalam plugin anda.
1 |
add_filter( 'body_class','my_body_classes' ); |
2 |
function my_body_classes( $classes ) { |
3 |
|
4 |
$classes[] = 'class-name'; |
5 |
|
6 |
return $classes; |
7 |
|
8 |
}
|
Kode di atas akan menambahkan sebuah class (atau beberapa class, tergantung kebutuhan anda) ke dalam array dan mereturn value nya.
Menambahkan Beberapa Class body dengan menggunakan Filter.
Untuk menambahkan class melalui filter, hanya menambahkan beberapa baris lain yang memberikan nilai di dalam array.
1 |
add_filter( 'body_class','my_body_classes' ); |
2 |
function my_body_classes( $classes ) { |
3 |
|
4 |
$classes[] = 'class-name'; |
5 |
$classes[] = 'class-name-two'; |
6 |
|
7 |
return $classes; |
8 |
|
9 |
}
|
Menambahkan Class body via Filter dengan menggunakan konditional
Kondisi juga bisa di gunakan dalam filter. Dengan contoh yang sama kita gunakan sebelumnya, kita dapat memperoleh hasil yang sama.
1 |
add_filter( 'body_class','my_body_classes' ); |
2 |
function my_body_classes( $classes ) { |
3 |
|
4 |
if ( is_shop() ) { |
5 |
|
6 |
$classes[] = 'class-name'; |
7 |
$classes[] = 'class-name-two'; |
8 |
|
9 |
}
|
10 |
return $classes; |
11 |
}
|
Menambahkan Class body berdasarkan halaman template.
Secara default, WordPress menambahkan class body untuk template halaman anda, akan tetapi jika anda seorang front-end developer dan memiliki akses penamaan, maka anda mungkin ingin mengubah class default tersebut.
Sebagai contoh, sebuah halaman template yang dengan nama "halfhalf" akan memiliki class body dari page-template-page-halfhalf-php ini tidak baik.
Jadi, mari kita tambahkan sebuah class baru, dengan menggunakan filter dan kondisional tag WordPress.
1 |
add_filter( 'body_class','halfhalf_body_class' ); |
2 |
function halfhalf_body_class( $classes ) { |
3 |
|
4 |
if ( is_page_template( 'page-halfhalf.php' ) ) { |
5 |
$classes[] = 'halfhalf-page'; |
6 |
}
|
7 |
|
8 |
return $classes; |
9 |
|
10 |
}
|
11 |
ini akan menambahkan class body halfhalf-page jika halaman tersebut adalah page-halfhalf.php
Menghapus Class Body
Ini tidak mungkin bahwa anda ingin menghapus class body, karena anda tidak dipaksa untuk menggunakan mereka karena kegunaan nya sangat sedikit bagi markup anda. Itu artinya, adalah memungkinkan untuk menghapus class body dengan menggunakan filter body_class yang sama.
1 |
add_filter( 'body_class', 'adjust_body_class' ); |
2 |
function adjust_body_class( $classes ) { |
3 |
foreach ( $classes as $key => $value ) { |
4 |
if ( $value == 'woocommerce-page' ) unset( $classes[ $key ] ); |
5 |
}
|
6 |
|
7 |
return $classes; |
8 |
|
9 |
}
|
Credit: Kode ini di modifikasi dari artikel ini
Pada contoh ini, kita melakukan perulangan melalui array nama class. unset nama class woocommerce-page jika ada, dan kemudian mengembalikan (me-return) class di kurangi class yang sudah di hapus.
That’s All Folks!
Di tutorial singkat ini, kami telah membahas dua metode untuk menambahkan class body WordPress :
- Dengan Menggunakan fungsi body_class di dalam theme.
- dan Dengan menggunakan Filter.
Kami juga telah membahas cara menambahkan class body dengan kondisi dan menghapus class, jika Anda merasa perlu untuk melakukan untuk pengembangan di masa yang akan datang.
