Dasar-dasar CSS WordPress dan Memahami Class Bawaan – Ada ketertarikan tersendiri bagi saya untuk membangun situs menggunakan WordPress. Dengan banyak fungsi yang tersedia dan strutkur desain yang mudah untuk diterapkan. Pada posting kali ini saya akan mencoba berbagi berkenaan struktur CSS yang dipakai dalam platform WordPress. Konten yang akan dijabarkan ini bersumber dari CSS-TRICKS yang mana di situs ini banyak mengulas tentang WordPress termasuk tentang hal ini.
Dan posting ini bisa dijadikan sebagai panduan bagi Anda untuk memahami lagi beberapa set CSS yang anda bisa terapkan dalam membangun situs WordPress.
Style untuk Widget
Widget menjadi bagian penting dalam situs WordPress, ini menjadi sulit dibayangkan apabila tidak ada sama sekali widget di dalamnya. Pertama kali diperkenalkan, widget telah menjadi populer di berbagai situs. Widget ini umumnya menampilkan konten sekunder bersama posting dan halaman, sering ditempatkan sebagai sidebar.
WordPress sendiri menerapkan widget pada sisi kanan kotak, dan banyak plugin juga yang menambahkannya sendiri. Adapun standar widget yang ditampilkan oleh WordPress meliputi: Archives, Calendar, Categories, Custom Menu, Meta, Pages, Recent Comments, Recent Posts, RSS, Search, Tag Cloud, Text.
Dan masing-masing widget ini memiliki class CSS tersendiri yang disertakan kapanpun widget tertentu digunakan.
Class-class yang WordPress tetapkan untuk semua elemen widget (terlepas dari jenis widget) adalah:
.widget {} /* top level class for every widget */
.widget-title {} /* usually on the inner header element */Kemudian, berdasarkan jenis widget-nya, setiap class ini dapat digunakan:
/* Archives */
.widget_archive {} /* used next to .widget (on the same tag) */
/* Calendar */
.widget_calendar {} /* used next to .widget (on the same tag) */
#calendar_wrap {} /* on <div> wrapping the calendar */
#wp-calendar {} /* on <table> building the calendar */
/* Categories */
.widget_categories {} /* used next to .widget (on the same tag) */
.cat-item {} /* on each item in the <ul> list */
/* Custom Menu */
.widget_nav_menu {} /* used next to .widget (on the same tag) */
.menu-item {}
/* Meta */
.widget_meta {} /* used next to .widget (on the same tag) */
/* Pages */
.widget_pages {} /* used next to .widget (on the same tag) */
.page_item {}
/* Recent Comments */
.widget_recent_comments {} /* used next to .widget (on the same tag) */
.recentcomments {} /* on each item in the <ul> list */
/* Recent Posts */
.widget_recent_entries {} /* used next to .widget (on the same tag) */
/* RSS */
.widget_rss {} /* used next to .widget (on the same tag) */
.rsswidget {} /* on each RSS link */
/* Search */
.widget_search {} /* used next to .widget (on the same tag) */
.search-form {} /* used with the actual <form> element */
/* Tag Cloud */
.widget_tag_cloud {} /* used next to .widget (on the same tag) */
.tagcloud {} /* on the <div> wrapping the cloud */
/* Text */
.widget_text {} /* used next to .widget (on the same tag) */
.textwidget {} /* on the actual text content of the widget */Nah, poin awal terbaik di sini adalah style pertama class .widget sendiri dan pastikan bahwa blok widget utama adalah selalu ditampilkan dengan benar. Langkah ini untuk memberikan style class secara individual sangat diperlukan. Itulah bagaimana kita selalu melakukannya.
Dengan menggunakan default seperti ini dapat menjadi cara yang lebih cepat dalam membangun sebuah desain, dibandingkan dengan cara Anda sendiri dalam membungkus elemen-elemen tertentu. Sehingga akan lebih mudah bagi Anda untuk menerapkannya.
Untuk memeriksa apakah struktur dokumen HTML sebenarnya terlihat seperti ini, silahkan Anda mencoba untuk mengatur pengujian situs WordPress menggunakan tema default ini, menempatkan semua widget di sidebar dan memeriksa sumber HTML.
Style untuk <body>
WordPress benar-benar bermurah hati dalam hal penambahan berbagai class pada tag. Mereka semua memiliki tujuan berbeda dan ditampilkan pada sub-halaman berbeda tiap situs. Ini memungkinkan Anda dengan mudah memperkenalkan pemberian style kustom untuk halaman berbeda dan jenis halaman berbeda. Contohnya: category archives, posts, dan author pages, hanya untuk beberapa nama saja.
Mari kita mulai dari atas:
.home {} /* if it's the homepage */
.page {} /* if it's any page */
.postid-XX {} /* if it's a post - XX is the post's ID */
.rtl {} /* when dealing with right-to-left content */
.blog {} /* if it's the custom blog listing */
.archive {} /* if it's any sort of archive page */
.category {} /* if it's a categories listing page */
.tag {} /* if it's a tags listing page */
.search .search-results {} /* if it's a search results page */
.author {} /* if it's an authors page */
.author-XX {} /* if it's an individual author's archive - XX is the author's nickname */
.date {} /* if it's a date-based archives page */
.error404 {} /* if it's a 404 page */Kode di atas bukan daftar class yang lengkap, tetapi seharusnya cukup untuk membuat Anda untuk bergerak dan mencakup semua dasar-dasarnya.
Style untuk posting dan halaman
Untuk posting dan halaman, mereka memiliki struktur yang umumnya sama ketika kita ingin menampilkannya di situs. Meskipun tujuan keduanya berbeda, WordPress memperlakukan baik posting maupun halaman sangat mirip dengan tabel yang sama juga di databasenya.
Jadi tergantung apakah anda sedang berhadapan dengan sebuah posting atau sebuah halaman, WordPress akan menetapkan class berikut ini ke tag konten utama (yang mana di HTML5 biasa digunakan <article>)
.post-XX {} /* the ID of the element being displayed; used for both the posts and the pages */
.post {} /* if it's a post */
.page {} /* if it's a page */
.attachment {} /* if it's an attachment; on most sites this is not used */
.sticky {} /* if it's a sticky post */
.format-YY {} /* assigned to custom content types - YY is the name of the content type, e.g. "audio" */Bagian penting di sini adalah seperti .post-XX dan .format-YY. Mereka membiarkan anda memperkenalkan style kustom untuk setiap posting atau halaman di dalam database, dan juga membedakan antara berbagai jenis konten yang digunakan oleh admin situs. CSS dapat melakukan banyak hal. Terkadang ini menggoda untuk membuat templat baru secara keseluruhan ketika anda membutuhkan halaman yang akan terlihat berbeda, tetapi itu dapat terlepas, sehingga cukup ingat untuk bergantung pada CSS dan class kustom ini ketika anda bisa.
Style untuk menu
Cara WordPress menangani semua menu sangatlah sederhana. Setiap menu ditampilkan dalam standar unordered list(). Satu-satunya hal yang anda dapat lakukan tanpa melakukan beberapa hal pemilteran lanjutan untuk menata list dan elemennya secara individual.
Jadi, style menu ini tidak ada standar baku untuk menerapkannya. Struktur menu bisa anda gunakan sesuai selera Anda untuk didesain dan WordPress akan masuk dan menampilkan menu sebagai list dalam struktur tersebut.
Style untuk konten
WordPress menyediakan Editor WYSIWYG (TinyMCE) bagi pengguna untuk membuat konten mereka dengan. Jadi supaya dipastikan bahwa semuanya ditata dengan baik, Anda hanya perlu menangani setiap class yang TinyMCE hasilkan.
Metode yang disarankan untuk menangani tentang hal ini adalah memulai dengan membuat pengujian posting dan menempatkan setiap kemungkinan jenis konten di dalamnya. Kemudian kita lihat sumber posting HTML dan termasuk class-class dalam CSS Anda.
Berikut ini lembar contekan yang cepat, di sinilah Anda bisa mulai:
/* the main classes used for alignment */
.alignnone {}
.alignleft {}
.alignright {}
.aligncenter {}
img.alignnone {}
img.alignleft {}
img.alignright {}
img.aligncenter {}
.wp-caption {} /* img caption */
.gallery {}
.gallery-caption {}
/* styles for img sizes */
img.size-full {}
img.size-large {}
img.size-medium {}
img.size-thumbnail {}
/* not classes, but surely something you should take care of */
blockquote {}
code {}
pre {}
hr {}
del {}Sejauh ini, hal yang paling penting dalam daftar di atas adalah style gambar. Setelah situs ini hidup, admin akan menggunakannya secara teratur, sehingga Anda perlu memastikan bahwa CSS Anda mampu menangani bahkan kombinasi gambar paling aneh.
Misalnya, apa yang terjadi ketika seseorang menempatkan dua gambar di samping satu sama lain, one.alignleft dan lainnya .aligncenter? Bagaimana jika ada gambar ketiga di dekatnya? Dan sebagainya.
Selalu mengawali dengan mereset
Memulai pekerjaan CSS Anda dengan mengatur ulang semua tag default adalah praktik yang baik tanpa memandang proyek yang sedang Anda kerjakan, dan WordPress tidak ada bedanya di sini.
Misalnya, tema default saat WordPress – Twenty Fourteen – menggunakan versi modifikasi dari reset style sheet oleh Eric Meyer.
Ketika bekerja pada style sheet Anda sendiri, Anda dapat mulai dengan reset Meyer juga. Tetapi jika Anda ingin jalan pintas kemudian cukup mengunduh apa pun tema default untuk WordPress pada saat ini, ambil stylesheet, serta copy dan paste style resetnya ke situs Anda. Pengulangan standar Tema saat ini adalah lebih dari 400 baris yang panjang, sehingga membangun sesuatu yang mirip sendiri pasti akan memakan waktu cukup lama.
Sumber: CSS-Tricks.com
Leave a Reply