Lembar contekan CSS yang dibuat default WordPress untuk pemula

Wordpress


Mencari lembar contekan CSS yang dibuat oleh WordPress?

WordPress secara otomatis menambahkan beberapa kelas CSS ke berbagai elemen di sebagian besar tema. Kelas CSS default ini dapat digunakan untuk menata elemen-elemen tersebut dalam tema WordPress.

Pada artikel ini, kami akan menunjukkan kepada Anda lembar contekan CSS default yang dihasilkan oleh WordPress. Kami juga akan berbicara tentang cara mudah menemukan kelas CSS dan cara menambahkan kelas CSS khusus kapan pun Anda membutuhkannya.

Lembar cheat untuk CSS default yang dihasilkan oleh WordPress

Mengapa belajar tentang CSS default yang dihasilkan oleh WordPress?

WordPress secara otomatis menghasilkan dan menambahkan kelas CSS default ke berbagai elemen situs web WordPress Anda.

Pengembang tema WordPress kemudian dapat menggunakan kelas CSS ini untuk menata area umum semua situs WordPress. Ini dapat mencakup area konten, bilah sisi, widget, menu navigasi, dan banyak lagi.

Jika Anda mempelajari pengembangan tema WordPress atau hanya mencoba membuat tema anak untuk situs web Anda, kelas CSS tersebut berguna untuk diketahui.

Ini juga membantu Anda dengan cepat menata elemen tertentu dalam tema WordPress Anda dengan menambahkan CSS khusus tanpa membuat tema Anda sendiri.

Catatan: Anda tidak perlu mempelajari CSS untuk mengubah gaya tema atau membuat tema khusus. Jika Anda lebih suka tidak belajar coding, Anda dapat menggunakan pembuat drag-and-drop seperti SeedProd. Kami akan membicarakannya lebih lanjut nanti di artikel.

Karena itu, mari kita lihat kelas CSS default yang dihasilkan oleh WordPress.

Gaya default kelas tubuh

Stiker tubuh <body> HTML berisi seluruh struktur tata letak halaman web apa pun, yang membuatnya sangat penting dalam desain tema WordPress apa pun.

WordPress menambahkan beberapa kelas CSS ke bagian badan yang dapat digunakan oleh perancang tema untuk menata wadah badan.

// Added when a website is using a right-to-left language e.g. Arabic, Hebrew	
.rtl {}

// Added when home page is being displayed
.home {}

// Added when blog page is being displayed
.blog {}

// Added when an Archive page is being displayed
.archive {}

// Added when a date based archive is displayed
.date {}

// Added on search pages
.search {}

// Added when pagination is enabled
.paged {}

// Added when an attachment page is displayed
.attachment {}

// Added when a 404 error page is displayed
.error404 {}

// Added when a single post is dispayed includes post ID
.single postid-(id) {}

// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}

// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}

// Added when an author page is displayed
.author {}

// Added when an author page is displayed. Includes author name. 
.author-(user_nicename) {}

// Added when a category page is displayed
.category {}

//Added when a category page is displayed. Includes category slug.
.category-(slug) {}

// Added when a tag page is displayed. 
.tag {}

// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}

// Added when a parent page is displayed. 
.page-parent {}

// Added when a child page is displayed. Includes parent page ID. 
.page-child parent-pageid-(id) {}

// Added when a page is displayed using page template. Includes page template file name. 
.page-template page-template-(template file name) {}

// Added when search results are displayed. 
.search-results {}

// Added when search returns no results. 
.search-no-results {}

// Added when a logged in user is detected. 
.logged-in {}

// Added when a paginated page is displayed. Includes page number. 
.paged-(page number) {}

// Added when a paginated single item is displayed. Includes page number. 
.single-paged-(page number) {}

// Added when a paged page type is displayed. Includes page number. 
.page-paged-(page number) {}

// Added when a paged category page is displayed. Includes page number. 
.category-paged-(page number) {}

// Added when a paged tag page is displayed. Includes page number. 
.tag-paged-(page number) {}

//Added when a paged date based archive page is displayed. Includes page number. 
.date-paged-(page number) {}

// Added when a paged author page is displayed. Includes page number. 
.author-paged-(page number) {}

// Added when a paaged search page is displayed. Includes page number. 
.search-paged-(page number) {}

Seperti yang Anda lihat, kelas-kelas ini berisi berbagai macam kondisi yang dapat Anda targetkan dalam gaya CSS Anda.

Misalnya, jika Anda ingin halaman kategori Berita memiliki warna latar belakang yang berbeda, Anda dapat menambahkan CSS khusus berikut.

.category-news { 
background-color:#f7f7f7; 
}

Kelas gaya posting default

Sama seperti elemen body, WordPress juga menambahkan kelas dinamis ke elemen posting.

Elemen ini biasanya <article> Tandai di template tema Anda. Namun, itu bisa berupa tag lain tergantung pada tema Anda. Posting kelas CSS ditampilkan dengan menambahkan pernyataan di tema Anda post_class() Label template

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

Berikut adalah daftar beberapa kelas CSS paling umum yang dihasilkan oleh fungsi post_class():

// Adds a class with ID for single items
.post-(ID) {}

// Generic post claass added for single blog posts. 
.post {}

// Generic page class added when a single page is displayed. 
.page {}

// Generic attachment class added to attachment pages.
.attachment {}

// Adds a post type class e.g. type-post
.type(post-type){}

// Adds a class for post format if theme supports posts formats. E.g. format-standard 
.format-(post-format){}

// Added when an item has a featured image
.has-post-thumbnail{}

// Added when a sticky post is displayed
.sticky {}

// Generic class to display an entry
.hentry {}

// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}

// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}

Kelas posting memungkinkan Anda untuk menata posting dan halaman blog sesuai dengan kondisi yang berbeda. Misalnya, Anda dapat mengatur gaya posting blog yang diposting dalam kategori tertentu secara berbeda menggunakan CSS khusus berikut:

 .category-news { 
background-color:#EFEFEF; 
}
Postingan kelas CSS

Jika Anda tidak melihat editor CSS di dasbor WordPress Anda, ikuti tutorial kami tentang cara memperbaiki masalah penyesuai tema WordPress.

Kelas menu navigasi default

WordPress juga menambahkan kelas CSS ke menu navigasi Anda. Di bawah ini adalah kelas default yang ditambahkan ke menu navigasi secara default.

 // Class for Current Page
.current_page_item{}

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

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

 // Class for a taxonomies
.menu-item-type-(taxonomy){}

// class to distinguish post types. 
.menu-item-type-(post_type){}

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

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

Tema WordPress Anda juga menambahkan kelas CSS ke setiap lokasi menu navigasi.

Misalkan tema Anda menetapkan kelas menu utama ke lokasi menu di dalam area header, maka Anda dapat menargetkannya di CSS Anda menggunakan kelas CSS berikut.

// container class
#header .primary-menu{} 
  
// container class first unordered list
#header .primary-menu ul {} 
  
//unordered list within an unordered list
#header .primary-menu ul ul {} 
  
 // each navigation item
#header .primary-menu li {}
  
// each navigation item anchor
#header .primary-menu li a {} 
  
// unordered list if there is drop down items
#header .primary-menu li ul {} 
  
// each drop down navigation item
#header .primary-menu li li {} 
  
// each drap down navigation item anchor
#header .primary-menu li li a {} 

Untuk detail lebih lanjut, lihat panduan kami tentang cara menata menu navigasi di WordPress.

Kelas default widget WordPress

Widget adalah cara mudah untuk menampilkan blok non-konten di tema WordPress Anda. Mereka biasanya ditampilkan di area atau bilah sisi siap widget khusus di tema WordPress Anda.

WordPress menambahkan kelas berikut ke widget lawas.

.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 {}

Namun, saat WordPress berpindah ke area widget berbasis blok, Anda sekarang dapat menambahkan blok yang berbeda ke area widget Anda dan masing-masing blok akan menghasilkan kelas CSS secara dinamis.

Kami akan menunjukkan cara menemukan kelas CSS ini nanti di artikel ini.

Kelas default formulir komentar

Komentar adalah pusat interaksi untuk banyak situs WordPress. Menata mereka akan membantu Anda memberikan pengalaman pengguna yang lebih menarik.

WordPress menambahkan kelas CSS default berikut untuk membantu pengembang tema menata area komentar mereka.

/*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

Untuk detail lebih lanjut, lihat panduan kami tentang cara menata komentar di WordPress.

Temukan kelas blok WordPress

Editor blok WordPress secara dinamis menghasilkan kelas CSS untuk blok.

Untuk menemukan kelas CSS ini, Anda perlu menambahkan blok khusus itu ke postingan atau halaman. Setelah itu, Anda perlu mengklik tombol Pratinjau untuk melihat blok beraksi.

Di tab pratinjau, gerakkan mouse Anda ke blok yang baru saja Anda tambahkan dan klik kanan untuk memilih opsi Inspect tool.

Temukan kelas CSS untuk blok

Di konsol pengembang, Anda akan melihat HTML yang dihasilkan oleh blok. Dari sini Anda dapat melihat kelas CSS yang ditambahkan oleh blok.

Pada gambar di atas, kita sedang melihat kelas CSS blok galeri. Anda kemudian dapat menggunakan kelas CSS ini untuk menata blok galeri di tema WordPress Anda.

Tambahkan kelas CSS kustom Anda sendiri di WordPress

Sekarang, kelas CSS WordPress default cukup komprehensif. Namun, tujuan mereka terutama untuk menyediakan kerangka kerja standar untuk pengembang tema.

Untuk situs web Anda sendiri, Anda mungkin perlu menambahkan CSS khusus untuk area di mana Anda mungkin tidak dapat menemukan kelas CSS default untuk ditargetkan.

Demikian pula, terkadang Anda mungkin hanya ingin membuat perubahan kecil pada postingan atau halaman tertentu tanpa menerapkannya ke seluruh tema Anda.

Untungnya, WordPress menyediakan beberapa cara mudah untuk menambahkan kelas CSS ke area yang berbeda.

Tambahkan kelas CSS khusus ke blok di editor blok

Jika Anda ingin menambahkan kelas CSS khusus dengan cepat ke posting atau halaman tertentu, cara termudah untuk melakukannya adalah dengan menggunakan editor blok.

Cukup edit posting atau halaman lalu pilih blok tempat Anda ingin menambahkan kelas CSS khusus. Di bagian Pengaturan Blok, klik panel Lanjutan dan tambahkan nama kelas CSS Anda.

Tambahkan kelas CSS khusus ke blok

Jangan lupa untuk menyimpan perubahan Anda dengan mengklik tombol Perbarui.

Sekarang Anda dapat menggunakan kelas ini untuk menambahkan kode CSS khusus yang hanya memengaruhi blok tertentu pada posting atau halaman tertentu ini.

Di menu navigasi WordPress

Anda juga dapat menambahkan CSS khusus ke item menu navigasi WordPress Anda. Misalkan Anda ingin mengonversi item menu menjadi tombol, maka metode ini berguna.

hanya untuk Penampilan » Menu layar dan klik tombol Opsi Layar di sudut kanan atas layar.

Dari sini Anda harus mencentang kotak di sebelah opsi kelas CSS.

menu kelas CSS

Selanjutnya, Anda perlu menggulir ke bawah dan klik untuk memperluas item menu tempat Anda ingin menambahkan kelas CSS khusus.

Anda akan melihat bidang berjudul Kelas CSS. Silakan dan tambahkan kelas CSS khusus Anda di sini.

Tambahkan kelas css ke item menu navigasi

Jangan lupa klik tombol save menu untuk menyimpan perubahan.

Anda sekarang dapat menggunakan kelas CSS khusus ini untuk menata item menu tertentu secara berbeda.

Bonus: Mudah mendesain tema WordPress tanpa menulis kode CSS

Mempelajari gaya tema WordPress Anda dengan CSS khusus adalah keterampilan yang sangat berguna. Namun, beberapa pengguna mungkin hanya menginginkan solusi untuk mendesain tema WordPress mereka tanpa menulis kode CSS.

Anda membutuhkan SeedProd untuk ini. Ini adalah alat pembuat halaman WordPress terbaik di pasar yang memungkinkan Anda membuat tema khusus dengan mudah tanpa menulis kode apa pun.

Kode kupon pengembang situs web SeedProd

SeedProd memiliki tema siap pakai yang dapat Anda gunakan sebagai titik awal.

Anda juga dapat membuat tema dari awal dengan membuat template secara manual.

Tema pemula SeedProd

Anda kemudian dapat mengedit tema khusus Anda menggunakan antarmuka pembuat situs seret dan lepas yang intuitif.

Cukup letakkan blok ke dalam tata letak Anda untuk membuat tata letak Anda sendiri.

Pembuat tema SeedProd

Anda juga dapat dengan mudah mengubah item apa pun dengan titik dan klik sederhana. Anda dapat menggunakan warna, latar belakang, font, dan lainnya.

Untuk detail lebih lanjut, lihat tutorial langkah demi langkah kami tentang cara mudah membuat tema WordPress kustom tanpa menulis kode apa pun.

Kami harap artikel ini membantu Anda menemukan lembar contekan CSS yang dihasilkan WordPress. Anda mungkin juga ingin melihat panduan kami untuk memperbaiki kesalahan WordPress yang paling umum atau lihat perbandingan ahli kami tentang perangkat lunak obrolan langsung terbaik untuk bisnis kecil.

Jika Anda menyukai artikel ini, silakan berlangganan saluran YouTube kami untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia Dan Facebook





Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *