Bekerja dengan Kelas dan ID yang Dihasilkan Oleh WordPress

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Fitur bermanfaat WordPress adalah caranya menghasilkan kelas dan ID. Beberapa di antaranya dihasilkan oleh sistem itu sendiri, sementara dalam kasus lain Anda memasukkan beberapa PHP ke dalam tema Anda dan WordPress menggunakannya untuk menambahkan kelas dan ID ke markup halaman.

Dalam tutorial ini, saya akan menunjukkan tiga cara di mana WordPress melakukan ini dan memberikan aplikasi praktis dan contoh untuk masing-masing. Tiga area yang akan saya hadapi adalah sebagai berikut:

Kelas dan ID yang dihasilkan untuk gambar yang Anda upload ke WordPress melalui pengunggah media
Tag template yang digunakan dalam file template tema untuk menghasilkan kelas dan ID berdasarkan konten dan halaman yang sedang dilihat
Parameter yang dapat Anda atur saat mendaftarkan widget dan menu (atau yang sudah akan ditetapkan dalam tema yang ditulis dengan baik), yang akan menghasilkan kelas dan ID yang relevan dengan jenis widget, widget individual dan item menu tertentu

Untuk masing-masing, saya akan menjelaskan bagaimana mereka bekerja dan kemudian menunjukkan masing-masing dengan beberapa contoh.

Yang Anda Perlukan untuk Menyelesaikan Tutorial Ini

Untuk mengikuti contoh praktis dalam tutorial ini, Anda memerlukan:

Sebuah instalasi pembangunan WordPress
Tema yang bisa Anda edit

Saya akan bekerja dengan tema anak dari Twenty Twelve - Anda dapat mengakses file tema dalam bundel kode.

Kelas dan ID yang Dihasilkan untuk Gambar oleh Pengunggah Media

Saat mengunggah gambar melalui Pengunggah Media, Anda diberi opsi untuk menentukan bagaimana gambar harus diselaraskan, seperti yang ditunjukkan pada screenshot. Anda juga diminta untuk memilih ukuran gambar yang ingin Anda tampilkan: thumbnail, medium, large atau full size.

wordpress-generated-classes-IDs-0-image-uploader

Berdasarkan pilihan Anda, WordPress memberikan tag <img> untuk gambar yang Anda upload sejumlah kelas. Kelas untuk penyelarasan adalah sebagai berikut:

.alignnone
.aligncenter
.alignright
.alignleft

Selain itu, WordPress memberikan kelas .wpcaption ke teks yang Anda tambahkan ke gambar. Teks akan memiliki kelas ini dan juga salah satu kelas penyelarasan di atas, berdasarkan pada bagaimana Anda memilih untuk menyelaraskan gambar.

WordPress juga menambahkan kelas untuk setiap ukuran gambar:

.size-full
.size-large
.size-medium
.size-thumbnail

Anda dapat menggunakan ini untuk memberi gaya pada gambar dari setiap ukuran file.

Sebagian besar tema akan memasukkan CSS untuk membuat setiap kelas-kelas ini dengan tepat, misalnya tema Twenty Twelve meliputi:

.alignleft {
  float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright {
	margin: 12px 0 12px 24px;
	margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter {
	margin-top: 12px;
	margin-top: 0.857142857rem;
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto;
}

CSS di atas menyelaraskan elemen apapun (bukan hanya gambar) dengan kelas .alignleft, .alignright atau .aligncenter, yang berarti Anda juga dapat menggunakan kelas ini untuk memberi gaya konten selain gambar jika Anda mau.

Ini juga menambahkan margin pada gambar yang memiliki kelas ini dan memastikan gambar ukuran penuh dan besar tidak menyimpang di luar elemen yang mereka tempati, dengan menggunakan max-width: 100%.

Anda bisa melihat efeknya pada gambar di bawah ini. Gambar pertama disejajarkan kanan dan yang kedua di tengah dan ukuran penuh.

wordpress-generated-classes-IDs-1-images-twenty-twelve

Menambahkan Gaya Anda Sendiri Menggunakan Kelas dan ID Ini

Serta pengaturan kesejajaran dan margin untuk masing-masing kelas ini, Anda dapat menggunakannya untuk menambahkan gaya tambahan.

Gambar pertama pada screenshot di atas adalah sejajar-kanan. Jika layar diubah ukurannya, ukurannya tetap sama dan teksnya membungkus dengan kacau di sekelilingnya:

wordpress-generated-classes-IDs-2-images-screen-resized-twenty-twelve

Anda dapat menambahkan gaya untuk memastikan bahwa gambar yag sejajar-kanan tidak melebihi 50% dari lebar layar, sehingga teks akan terbungkus lebih rapi, dengan menambahkan CSS berikut ke stylesheet Anda:

img.alignright {
	max-width: 50%;
}

Sekarang ketika halaman dilihat pada layar yang sempit, gambarnya kurang dominan:

wordpress-generated-classes-IDs-3-images-screen-resized-with-styling

Serta menambahkan CSS untuk tata letak atau ukuran, Anda dapat menambahkan gaya dekoratif ke gambar yang diselaraskan dengan cara tertentu. Untuk menambahkan gaya dekoratif ke gambar dengan ukuran penuh terpusat, tambahkan yang berikut ke stylesheet Anda:

img.size-full.aligncenter {
	width: 75%;
	padding: 5px;
	border: 2px dotted #ccc;
}

Ini menambahkan border pada gambar dan mengurangi ukurannya:

wordpress-generated-classes-IDs-4-full-size-image-with-styling

Tag Template untuk Menambahkan Kelas dan ID

Kelas dan ID yang kita lihat untuk gambar dihasilkan oleh WordPress itu sendiri. Kelas dan ID lain dapat dihasilkan oleh tag template dalam tema Anda.

Catatan: Jika Anda tidak terbiasa dengan tag template, lihatlah artikel Tag Template Codex.

Ada dua tag template: satu yang diterapkan untuk tag HTML <body> dan dua yang diterapkan untuk setiap posting.

Tag Template `body_class()`

Tema yang ditulis dengan baik akan memiliki tag berikut pada file header.php-nya:

<body <?php body_class(); ?>>

Ini menggantikan tag <body> normal. Tag template body_class() memberi tahu WordPress untuk memberi kelas pada tag <body> berdasarkan halaman yang sedang dilihat dan file template yang digunakannya dari tema yang aktif.

Daftar kelas yang bisa dihasilkan ada banyak dan Anda bisa menemukannya di Codex WordPress.

Beberapa contoh meliputi:

.home untuk halaman beranda
.single-postid-{ID} saat satu posting sedang dilihat, dimana ID adalah ID numerik pos tersebut
.archive untuk halaman arsip
.page-template-{filename}-php saat template halaman kustom digunakan

Jika Anda ingin menambahkan kelas tambahan ke tag <body> yang tidak dibuat oleh WordPress, Anda bisa. Misalnya untuk menambahkan kelas "hello", kodenya adalah:

<body <?php body_class( 'hello' ); ?>>

Anda dapat menambahkan sebanyak mungkin kelas yang Anda inginkan dengan cara ini, memisahkannya dengan spasi.

Anda dapat menggunakan kelas yang dihasilkan oleh tag body_class() untuk menambahkan styling yang spesifik ke lokasi tertentu di situs atau file template, atau elemen di dalam file template itu.

Sebagai contoh, pada tema anak, saya telah membuat template halaman yang disebut page-full-width-with-sidebar.php, yang dirancang untuk menampilkan halaman dengan konten penuh dan sidebar di bawah konten dan bukan ke kanannya. Anda dapat menemukan template halaman ini dalam bundel kode.

Dengan menggunakan tag body_class(), WordPress menghasilkan kelas .page-template-page-full-width-with-sidebar-php untuk tag <body> (di antara kelas lainnya).

Jadi untuk memberi gaya elemen pada halaman menggunakan template ini, Anda menambahkan yang berikut ke stylesheet Anda:

/* style layout for full page template with sidebar */
.page-template-page-full-width-with-sidebar-php .site-content,
.page-template-page-full-width-with-sidebar-php .widget-area {
	width: 100%;
	clear: both;
}
.page-template-page-full-width-with-sidebar-php #secondary.widget-area .widget {
	width: 48%;
	margin: 0 1%;
	float: left;
}

Ini menetapkan lebar konten utama dan sidebar (#secondary) ke 100%, dan juga menyelaraskan widget di sidebar di samping satu sama lain. Anda bisa melihat efeknya di screenshot:

wordpress-generated-classes-IDs-5-full-width-page-template

Catatan: Jika tema Anda responsif, pastikan Anda melakukan penyesuaian terhadap lebar widget pada layar sempit di media query Anda.

Tag Template `post_class()` dan `post_ID()`

Tag ini bekerja dengan cara yang mirip dengan tag body_class(), namun Anda menggunakannya dengan posting individu dalam loop bukannya elemen <body>.

Misalnya, dalam tema Twenty Twelve, setiap posting dalam loop dibungkus dalam elemen <article> dengan tag ini diterapkan:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
// content here
</article>

Ini menghasilkan sejumlah kelas berdasarkan kategori dan jenis posting dan ID berdasarkan ID numerik posting. Misalnya, sebuah posting di situs demo saya dengan kategori 'red' akan memiliki kelas dan ID berikut yang dihasilkan:

<article id="post-10" class="post-10 post type-post status-publish format-standard hentry category-red">
// content
</article>

Anda dapat menggunakan kelas ini untuk memberi gaya posting dari kategori individual secara berbeda. Di situs demo ada tiga kategori yang disiapkan: 'red', 'blue' dan 'important'.

Untuk memberi gaya ini, tambahkan CSS berikut ke stylesheet tema:

/* style posts in 'red' category */
.category-red {
	border-top: 2px solid #cc0000;
}

/* style posts in 'blue' category */
.category-blue {
	border-top: 2px solid #3366ff;
}

/* style posts in 'important' category */
.blog .category-important {
	padding-top: 2em;
	margin-left: 2em;
}
.category-important:before {
	content: 'READ THIS POST! IT IS IMPORTANT';
}

Ini menambahkan styling untuk masing-masing kategori: border berwarna untuk masing-masing kategori warna dan margin tambahan untuk kategori 'important'. Ini juga menggunakan pseudo-element untuk memasukkan konten tambahan sebelum setiap posting dalam kategori 'important'.

Hasilnya ditampilkan di screenshot.

wordpress-generated-classes-IDs-6-category-styling

Menggunakan Kelas dan ID dengan Widget dan Menu

Saat widget terdaftar dalam sebuah tema (atau terkadang plugin), fungsi yang digunakan dapat memasukkan kode yang memberi tahu WordPress untuk menghasilkan kelas dan ID berdasarkan nama, jenis, dan ID widget.

Saat menu terdaftar, WordPress bisa menghasilkan kelas berdasarkan nama menu, posisi item dalam menu dan lokasi di situs. Anda bisa menggunakan semua ini untuk menata widget dan menu Anda.

Kelas dan ID untuk Widget

Untuk mendaftarkan area widget, Anda menggunakan fungsi register_sidebar() pada file functions.php tema Anda. Ini mengambil parameter berikut:

<?php register_sidebar = array(
	'name'          => __( 'Sidebar name', 'theme_text_domain' ),
	'id'            => 'unique-sidebar-id',
	'description'   => ' ',
	'class'         => ' ',
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>' );
?>

Ada dua parameter yang menghasilkan kelas dan/atau ID:

'class' => ' '
'before_widget' => '<li id="%1$s">'

Parameter 'class' memungkinkan Anda menentukan secara manual kelas untuk area widget. Pengaturan parameter 'before_widget' memberi tahu WordPress untuk menghasilkan ID unik untuk setiap widget di area widget dan sejumlah kelas untuknya juga, yang akan didasarkan pada jenis widgetnya.

Misalnya di situs demo saya telah menambahkan dua widget - daftar posting dan daftar halaman. Untuk daftar posting, HTML berikut adalah output:

<aside id="recent-posts-2" class="widget widget_recent_entries">
// widget contents
</aside>

Untuk daftar halaman, HTML berikut adalah output:

<aside id="pages-2" class="widget widget_pages"><h3 class="widget-title">
// widget contents
</aside>

Anda bisa menggunakan ini untuk memberi gaya widget yang mencantumkan posting, dengan menambahkan CSS berikut ke stylesheet tema:

/* style specific widget */
aside.widget_pages {
	border: 1px solid #3366ff;
	padding: 5px;
}

Ini menambahkan border pada halaman daftar widget, seperti yang ditunjukkan pada screenshot:

wordpress-generated-classes-IDs-7-styling-widgets

Catatan: Ini bekerja di situs demo karena menggunakan tema anak dari tema twenty twelve, yang memiliki sidebars terdaftar dengan benar. Jika Anda membangun tema Anda sendiri, Anda harus menambahkan tag register_sidebar() dengan parameter di atas. Cari tahu bagaimana melakukannya di artikel Codex yang terkait.

Kelas dan ID untuk Menu

Menu navigasi ditampilkan menggunakan tag wp_nav_menu() di file header.php tema Anda. Ini membutuhkan sejumlah parameter, seperti yang dijelaskan dalam artikel wp_nav_menu.

Salah satu dari berikut ini menambahkan kelas dan ID ke setiap item dalam menu:

'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>'

Ini menambahkan ID dan sejumlah kelas ke setiap item. Kelas didasarkan pada kelas untuk menu itu sendiri dan lokasi di situs. Misalnya, saat pengguna berada di halaman di situs, entri di menu navigasi akan memiliki kelas .current_page_item.

Anda dapat menggunakan ini untuk menambahkan styling ke entri halaman saat ini dalam menu. Misalnya, untuk menambahkan garis bawah ke halaman ini, tambahkan yang berikut ke stylesheet Anda:

/* style active page link in navigation */
.main-navigation .current_page_item a {
	text-decoration: underline;
}

Garis bawah yang dihasilkan dapat dilihat pada screenshot (dan juga perubahan warna yang sudah ada dalam stylesheet tema induk):

wordpress-generated-classes-IDs-8-styling-menus

Catatan: Saat saya menggunakan tema anak dari tema twenty twelve, saya tidak perlu menambahkan tag wp_nav_menu(), karena ini sudah ada dalam tema induk.

Ringkasan

Seperti yang telah kita bahas di atas, ada beberapa cara di mana WordPress akan menghasilkan kelas dan ID pada elemen di sebuah situs. Beberapa di antaranya dihasilkan oleh WordPress sendiri dan yang lainnya menggunakan tag template atau parameter fungsi untuk memberi tahu WordPress agar menampilkan kelas dan ID. Anda bisa menggunakan ini untuk menata halaman, menu, widget, daftar posting dan elemen lainnya dalam desain Anda.

Ada banyak cara lain untuk menggunakan kelas dan ID ini untuk menata proyek Anda. Sebagai contoh:

Anda bisa membuat situs dengan sejumlah bagian yang berbeda, menggunakan kelas yang dihasilkan oleh tag body_class() untuk membuat konten di setiap bagian terlihat sangat berbeda
Anda dapat membuat daftar posting individual secara berbeda di halaman arsip dengan menargetkan ID yang dihasilkan oleh tag the_ID()
Anda bisa menyorot item menu saat ini di navigasi Anda, menciptakan efek seperti tombol dan menggunakan gambar, latar belakang, gradien dan banyak lagi
Anda bisa menggunakan kombinasi di atas, misalnya menata widget tertentu secara berbeda di berbagai area situs

Kemungkinannya hanya dibatasi oleh imajinasi Anda!

Sumber daya

Beberapa halaman Codex yang berguna pada topik yang dibahas dalam tutorial ini:

Kelas yang dihasilkan untuk gambar: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
Tag body_class(): http://codex.wordpress.org/Function_Reference/body_class
Tag post_class(): http://codex.wordpress.org/Function_Reference/post_class
Tag the_ID(): http://codex.wordpress.org/Function_Reference/the_ID
Fungsi wp_register_sidebar(): http://codex.wordpress.org/Function_Reference/register_sidebar
Tag wp_nav_menu(): http://codex.wordpress.org/Function_Reference/wp_nav_menu
Panduan untuk tag template: http://codex.wordpress.org/Template_Tags