Class CSS Default yang Dihasilkan WordPress

Apakah kamu pernah berpikir bagaimana kamu bisa menata elemen tema WordPress yang berbeda? Memang elemen dari tema satu dengan tema yang lain itu berbeda, tetapi ada class dan ID CSS tertentu yang sama dan di hasilkan oleh WordPress secara otomatis.

Jika kamu ingin menata tampilan tema, atau seorang developer yang sedang membuat tema untuk di publish, maka berikut adalah beberapa elemen yang bisa kamu pertimbangkan untuk di tambahkan ke tema kamu.

Tujuan dari artikel ini adalah untuk membantu pemula yang ingin tahu lebih jauh mengenai tema WordPress. Tetapi jika kamu adalah orang yang tidak ingin di repotkan dengan kode, maka kami sarankan untuk menggunakan builder sehingga mempermudah dalam membangun website.

Sekarang, kita akan membahas beberapa gaya WordPress default yang paling penting satu per satu.

Styles Default Class Body

Salah satu keunggulan ketika menggunakan WordPress berada pada bagian penyesuaiannya. Karena kamu dapat menargetkan aspek yang sangat spesifik dari website dengan menggunakan CSS.

Salah satu caranya adalah dengan menambahkan custom class ke bagian elemen blog. Dan yang paling penting berada di dalam tag <body>.

Berikut adalah beberapa contoh class umum yang mungkin di tambahkan WordPress ke elemen ini.

.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-(template file name) {}

.search-results {}

.search-no-results {}

.logged-in {}

.paged-(page number) {}

.single-paged-(page number) {}

.page-paged-(page number) {}

.category-paged-(page number) {}

.tag-paged-(page number) {}

.date-paged-(page number) {}

.author-paged-(page number) {}

.search-paged-(page number) {}

Misalnya, jika kamu ingin memberi gaya sendiri pada laman hasil penelusuran dengan cara tertentu, maka kamu dapat menggunakan class “search-results” untuk menambahkan gaya.

WordPress hanya menambahkan class ini ke tag body saat halaman hasil pencarian aktif, sehingga tidak akan memengaruhi halaman lainnya.

Default Post Style

Sama seperti elemen body, WordPress juga menambahkan class dinamis ke elemen post. Berikut adalah daftar dari beberapa elemen yang di tambahkan WordPress secara otomatis.

.post-id {}

.post {}

.page {}

.attachment {}

.sticky {}

.hentry {}

.category-misc {}

.category-example {}

.tag-news {}

.tag-wordpress {}

.tag-markup {}

WordPress akan menambahkan class dinamis ke postingan menggunakan fungsi post_class() yang memungkinkan kamu membuat gaya sendiri untuk setiap format.

Fungsi post_class() akan menambahkan class dalam bentuk “.format-foo” di mana foo adalah format postingan apa pun yang kamu pilih seperti galery, gambar, dll.

.format-image {}

.format-gallery {}

.format-chat {}

.format-link {}

.format-quote {}

.format-status {}

.format-video {}

Default Menu Styles

Pada artikel kami sebelumnya tentang cara menata menu navigasi WordPress, kami membahas bagaimana pengguna dapat menambahkan class sendiri ke menu.

Sekarang, kami akan menganggap kamu telah membaca artikel tersebut dan sudah tahu cara memberi nama class sendiri pada “main-menu”.

#header .main-menu{} // container class

#header .main-menu ul {} // container class first unordered list

#header .main-menu ul ul {} //unordered list within an unordered list

#header .main-menu li {} // each navigation item

#header .main-menu li a {} // each navigation item anchor

#header .main-menu li ul {} // unordered list if there is drop down items

#header .main-menu li li {} // each drop down navigation item

#header .main-menu li li a {} // each drap down navigation item anchor

.current_page_item{} // Class for Current Page

.current-cat{} // Class for Current Category

.current-menu-item{} // Class for any other current Menu Item

.menu-item-type-taxonomy{} // Class for a Category

.menu-item-type-post_type{} // Class for Pages

.menu-item-type-custom{} // Class for any custom item that you added

.menu-item-home{} // Class for the Home Link

Perhatikan bahwa setiap kali kamu membuat menu di WordPress, menu tersebut secara otomatis di bungkus dalam div. Tag div ini hanya memiliki nama class jika kamu menentukannya (kami menggunakan “main-menu”).

Default WISWYG Editor Styles

Editor WISWYG adalah salah satu aspek WordPress yang paling populer dan paling banyak di gunakan. Ketika menggunakan ini, sebaiknya kamu menyiapkan gaya apa pun yang mungkin di tambahkan pengguna ke blog mereka seperti gambar dan kutipan block.

CSS berikut menunjukkan kepada kamu class apa yang di tambahkan WordPress secara otomatis ke elemen ini.

.entry-content img {}

.alignleft, img.alignleft {}

.alignright, img.alignright {}

.aligncenter, img.aligncenter {}

.alignnone, img.alignnone {}

.wp-caption {}

.wp-caption img {}

.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}

blockquote.right {}

.gallery dl {}

.gallery dt {}

.gallery dd {}

.gallery dl a {}

.gallery dl img {}

.gallery-caption {}

.size-full {}

.size-large {}

.size-medium {}

.size-thumbnail {}

Kamu bisa melihat bahwa ada beberapa class yang berkaitan dengan gambar. Misalnya, pengguna memutuskan untuk menyertakan gambar rata kiri, maka WordPress akan menambahkan class “alignleft”.

Styles Widget WordPress Default

Widget adalah aspek populer lain dari WordPress. Sebagai pengembang, kamu memiliki kendali atas widget mana yang akan di tampilkan sehingga kamu biasanya tahu persis gaya mana yang akan di tambahkan.

WordPress hadir dengan beberapa widget default, kecuali kamu menghapusnya, sebaiknya tambahkan gaya ke class mereka.

.widget {}

#searchform {}

.widget_search {}

.screen-reader-text {}

.widget_meta {}

.widget_meta ul {}

.widget_meta ul li {}

.widget_meta ul li a {}

.widget_links {}

.widget_links ul {}

.widget_links ul li {}

.widget_links ul li a {}

.widget_archive {}

.widget_archive ul {}

.widget_archive ul li {}

.widget_archive ul li a {}

.widget_archive select {}

.widget_archive option {}

.widget_pages {}

.widget_pages ul {}

.widget_pages ul li {}

.widget_pages ul li a {}

.widget_links {}

.widget_links li:after {}

.widget_links li:before {}

.widget_tag_cloud {}

.widget_tag_cloud a {}

.widget_tag_cloud a:after {}

.widget_tag_cloud a:before {}

.widget_calendar {}

#calendar_wrap {}

#calendar_wrap th {}

#calendar_wrap td {}

#wp-calendar tr td {}

#wp-calendar caption {}

#wp-calendar a {}

#wp-calendar #today {}

#wp-calendar #prev {}

#wp-calendar #next {}

#wp-calendar #next a {}

#wp-calendar #prev a {}

.widget_categories {}

.widget_categories ul {}

.widget_categories ul li {}

.widget_categories ul ul.children {}

.widget_categories a {}

.widget_categories select{}

.widget_categories select#cat {}

.widget_categories select.postform {}

.widget_categories option {}

.widget_categories .level-0 {}

.widget_categories .level-1 {}

.widget_categories .level-2 {}

.widget_categories .level-3 {}

.recentcomments {}

#recentcomments {}

#recentcomments li {}

#recentcomments li a {}

.widget_recent_comments {}

.widget_recent_entries {}

.widget_recent_entries ul {}

.widget_recent_entries ul li {}

.widget_recent_entries ul li a {}

.textwidget {}

.widget_text {}

.textwidget p {}

Saat menata widget, kamu mungkin akan menggunakan gaya yang sama berulang-ulang. Jadi, akan sangat menghemat waktu dan ruang jika kamu menggabungkan class pada stylesheet menggunakan koma.

Misalnya, kamu bisa menggabungkan .widget_pages ul dan .widget_archive ul, sehingga akan terlihat seperti ini.

1	.widget_pages ul, .widget_archive ul {}

Default Comment Form Styles

Seperti apa pun tampilan gaya komentar, WordPress akan membuatnya jauh lebih mudah dengan class defaultnya. Namun, jika tidak berkaitan dengan thread comment, maka kamu dapat mengabaikan beberapa di antaranya.

/*Comment Output*/

.commentlist .reply {}

.commentlist .reply a {}

.commentlist .alt {}

.commentlist .odd {}

.commentlist .even {}

.commentlist .thread-alt {}

.commentlist .thread-odd {}

.commentlist .thread-even {}

.commentlist li ul.children .alt {}

.commentlist li ul.children .odd {}

.commentlist li ul.children .even {}

.commentlist .vcard {}

.commentlist .vcard cite.fn {}

.commentlist .vcard span.says {}

.commentlist .vcard img.photo {}

.commentlist .vcard img.avatar {}

.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}

.commentlist .comment-meta a {}

.commentlist .commentmetadata {}

.commentlist .commentmetadata a {}

.commentlist .parent {}

.commentlist .comment {}

.commentlist .children {}

.commentlist .pingback {}

.commentlist .bypostauthor {}

.commentlist .comment-author {}

.commentlist .comment-author-admin {}

.commentlist {}

.commentlist li {}

.commentlist li p {}

.commentlist li ul {}

.commentlist li ul.children li {}

.commentlist li ul.children li.alt {}

.commentlist li ul.children li.byuser {}

.commentlist li ul.children li.comment {}

.commentlist li ul.children li.depth-{id} {}

.commentlist li ul.children li.bypostauthor {}

.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}

#cancel-comment-reply a {}

/*Comment Form */

#respond { }

#reply-title { }

#cancel-comment-reply-link { }

#commentform { }

#author { }

#email { }

#url { }

#comment

#submit

.comment-notes { }

.required { }

.comment-form-author { }

.comment-form-email { }

.comment-form-url { }

.comment-form-comment { }

.form-allowed-tags { }

.form-submit { }

Karena ini adalah pembahasan dasar mengenai class dan ID CSS default yang ada pada WordPress, jadi masih banyak yang balum kami sebutkan pada postingan ini.

Jika kamu merasa ada yang perlu di tanyakan, bisa tinggalkan komentar di bawah.