WordPress tarafından oluşturulan varsayılan bir CSS kopya sayfası mı arıyorsunuz?
WordPress, çoğu temadaki farklı öğelere otomatik olarak bazı CSS sınıfları ekler. Bu varsayılan CSS sınıfları, WordPress temanızdaki bu öğeleri şekillendirmek için kullanılabilir.
Bu makalede, size WordPress tarafından oluşturulan varsayılan CSS kopya sayfasını göstereceğiz. Ayrıca CSS sınıflarını nasıl kolayca bulacağınızdan ve ihtiyaç duyduğunuzda özel CSS sınıflarını nasıl ekleyeceğinizden bahsedeceğiz.
Neden Varsayılan WordPress Tarafından Oluşturulan CSS Hakkında Bilgi Edinmelisiniz?
WordPress, WordPress web sitenizdeki farklı öğeler için otomatik olarak varsayılan CSS sınıfları oluşturur ve ekler.
WordPress tema geliştiricileri daha sonra bu CSS sınıflarını tüm WordPress sitelerinin ortak alanlarını şekillendirmek için kullanabilir. Buna içerik alanı, kenar çubukları, widget’lar, navigasyon menüleri ve daha fazlası dahildir.
WordPress tema geliştirmeyi öğreniyorsanız veya sadece kendi web siteniz için bir alt tema oluşturmaya çalışıyorsanız, bu CSS sınıflarını bilmek kullanışlı olacaktır.
Ayrıca, kendi temanızı oluşturmadan özel CSS ekleyerek WordPress temanızdaki belirli öğeleri hızlı bir şekilde şekillendirmenize yardımcı olur.
Not: Tema stillerinizi değiştirmek veya özel bir tema oluşturmak için CSS öğrenmek zorunda değilsiniz. Kod yazmayı öğrenmek istemiyorsanız SeedProd gibi bir sürükle ve bırak oluşturucu kullanabilirsiniz. Makalenin ilerleyen bölümlerinde bunun hakkında daha fazla konuşacağız.
Bununla birlikte, varsayılan WordPress tarafından oluşturulan CSS sınıflarına bir göz atalım.
Varsayılan Gövde Sınıfı Stilleri
HTML’deki <body> gövde etiketi, herhangi bir web sayfasının tüm düzen yapısını içerir ve bu da onu herhangi bir WordPress tema tasarımında çok önemli kılar.
WordPress, gövde alanına tema tasarımcılarının gövde kabını şekillendirmek için kullanabileceği birkaç CSS sınıfı ekler.
// 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) {}
Gördüğünüz gibi, bu sınıflar CSS stillerinizde hedefleyebileceğiniz çok çeşitli koşullar içerir.
Örneğin, ‘Haberler’ kategori sayfasının farklı bir arka plan rengine sahip olmasını istiyorsanız, aşağıdaki özel CSS’yi ekleyebilirsiniz.
.category-news {
background-color:#f7f7f7;
}
WordPress’te CSS ve kod parçacıkları eklemek için kolay bir yola mı ihtiyacınız var? Kod parçacıklarınızı geleceğe taşımak için ücretsiz WPCode eklentisini deneyin.
Varsayılan Yazı Stili Sınıfları
Tıpkı gövde öğesinde olduğu gibi, WordPress yazı öğelerine de dinamik sınıflar ekler.
Bu öğe genellikle tema şablonunuzdaki <article> etiketidir. Ancak temanıza bağlı olarak başka herhangi bir etiket de olabilir. Yazı CSS sınıfları temanızda post_class() şablon etiketi eklenerek görüntülenir.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Post_class() işlevi tarafından oluşturulan en yaygın CSS sınıflarından bazılarının listesi aşağıda verilmiştir:
// 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) {}
Gönderi sınıfları, blog gönderilerini ve sayfalarını farklı koşullara uygun şekilde biçimlendirmenize olanak tanır. Örneğin, aşağıdaki özel CSS’yi kullanarak belirli bir kategoride dosyalanmış blog gönderilerini farklı şekilde stilleyebilirsiniz:
.category-news {
background-color:#EFEFEF;
}
WordPress panonuzda CSS düzenleyicisini göremiyorsanız, eksik WordPress tema özelleştiricisini nasıl düzelteceğinize dair eğitimimizi izleyin.
Varsayılan Gezinti Menüsü Sınıfları
WordPress ayrıca gezinti menülerinize CSS sınıfları da ekler. Aşağıda gezinti menülerine varsayılan olarak eklenen sınıflar yer almaktadır.
// 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{}
WordPress temanız ayrıca her gezinti menüsü konumuna bir CSS sınıfı ekleyecektir.
Diyelim ki temanız üstbilgi alanındaki bir menü konumuna primary-menu sınıfını atadı, o zaman aşağıdaki CSS sınıflarını kullanarak CSS’nizde bunu hedefleyebilirsiniz.
// 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 {}
Daha fazla ayrıntı için WordPress’te gezinme menülerinin nasıl şekillendirileceğine ilişkin kılavuzumuza bakın.
Varsayılan WordPress Widget Sınıfları
Widget’lar WordPress temanızda içerik dışı blokları görüntülemenin kolay bir yoludur. Genellikle WordPress temanızdaki widget’a hazır özel alanlarda veya kenar çubuklarında görüntülenirler.
WordPress, eski widget’lara aşağıdaki sınıfları ekler.
.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 {}
Ancak WordPress blok tabanlı widget alanlarına geçtiği için artık widget alanlarınıza farklı bloklar ekleyebilirsiniz ve bunların her biri dinamik olarak CSS sınıfları oluşturur.
Bu CSS sınıflarını nasıl bulacağınızı bu makalenin ilerleyen bölümlerinde göstereceğiz.
Varsayılan Yorum Formu Sınıfları
Yorumlar birçok WordPress web sitesi için etkileşim merkezidir. Bunları şekillendirmek, kullanıcılara daha temiz ve daha ilgi çekici bir deneyim sunmanıza yardımcı olur.
WordPress, tema geliştiricilerin yorum alanını şekillendirmesine yardımcı olmak için aşağıdaki varsayılan CSS sınıflarını ekler.
/*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
Daha fazla ayrıntı için WordPress’te yorumların nasıl şekillendirileceğine ilişkin kılavuzumuza bakın.
WordPress Blok Sınıflarını Bulma
WordPress blok editörü, bloklar için dinamik olarak CSS sınıfları oluşturur.
Bu CSS sınıflarını bulmak için, söz konusu bloğu bir yazıya veya sayfaya eklemeniz gerekir. Bundan sonra, bloğu çalışırken görmek için Önizleme düğmesine tıklamanız gerekir.
Önizleme sekmesinde, farenizi yeni eklediğiniz bloğun üzerine getirin ve sağ tıklayarak İncele aracını seçin.
Geliştirici konsolunda, blok tarafından oluşturulan HTML’yi göreceksiniz. Buradan, blok tarafından eklenen CSS sınıflarını görebilirsiniz.
Yukarıdaki ekran görüntüsünde Galeri bloğunun CSS sınıflarına bakıyoruz. Daha sonra bu CSS sınıflarını WordPress temanızdaki galeri bloğunu şekillendirmek için kullanabilirsiniz.
WordPress’te Kendi Özel CSS Sınıflarınızı Ekleme
Şimdi, varsayılan WordPress CSS sınıfları oldukça kapsamlıdır. Ancak bunların amacı, tema geliştiricilerine standart bir çerçeve sunmaktır.
Bireysel web siteniz için, hedeflenecek varsayılan bir CSS sınıfı bulamayabileceğiniz alanlar için özel CSS eklemeniz gerekebilir.
Benzer şekilde, bazen temanızın tamamına uygulamadan yalnızca belirli bir gönderi veya sayfada küçük bir değişiklik yapmak isteyebilirsiniz.
Neyse ki WordPress size farklı alanlara CSS sınıfları eklemek için birkaç kolay yol sunar.
Blok Düzenleyicinin İçindeki Bir Bloğa Özel CSS Sınıfları Ekleme
Belirli bir gönderiye veya sayfaya hızlı bir şekilde özel bir CSS sınıfı eklemek istiyorsanız, bunu yapmanın en kolay yolu blok düzenleyiciyi kullanmaktır.
Basitçe yazıyı veya sayfayı düzenleyin ve ardından özel CSS sınıfı eklemek istediğiniz bloğu seçin. Blok ayarları altında, gelişmiş panele tıklayın ve CSS sınıfınız için bir ad ekleyin.
Güncelle düğmesine tıklayarak değişikliklerinizi kaydetmeyi unutmayın.
Artık bu sınıfı, belirli bir yazı veya sayfada yalnızca bu belirli bloğu etkileyecek özel CSS kodu eklemek için kullanabilirsiniz.
WordPress Gezinti Menülerinde
WordPress navigasyon menüsü öğelerinize özel CSS de ekleyebilirsiniz. Diyelim ki bir menü öğesini düğmeye dönüştürmek istiyorsunuz, o zaman bu yöntem kullanışlı olacaktır.
Basitçe Görünüm ” Menüler sayfasına gidin ve ekranın sağ üst köşesindeki Ekran Seçenekleri düğmesine tıklayın.
Buradan, CSS sınıfları seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.
Ardından, özel CSS sınıfını eklemek istediğiniz menü öğesini genişletmek için aşağı kaydırmanız ve tıklamanız gerekir.
CSS sınıfları etiketli bir alan göreceksiniz. Devam edin ve özel CSS sınıfınızı buraya ekleyin.
Değişikliklerinizi kaydetmek için Menüyü Kaydet düğmesine tıklamayı unutmayın.
Artık bu özel CSS sınıfını, söz konusu menü öğesini farklı şekilde stilize etmek için kullanabilirsiniz.
Bonus: CSS Kodu Yazmadan Kolayca WordPress Teması Tasarlayın
WordPress temanızı özel CSS ile şekillendirmeyi öğrenmek oldukça faydalı bir beceridir. Ancak bazı kullanıcılar WordPress temalarını CSS kodu yazmadan tasarlamak için bir çözüm isteyebilir.
Bunun için SeedProd‘a ihtiyacınız olacak. Herhangi bir kod yazmadan kolayca özel temalar oluşturmanızı sağlayan piyasadaki en iyi WordPress sayfa oluşturucu aracıdır.
SeedProd, başlangıç noktası olarak kullanabileceğiniz kullanıma hazır temalarla birlikte gelir.
Elle şablon oluşturarak sıfırdan bir tema da oluşturabilirsiniz.
Daha sonra sezgisel bir sürükle ve bırak site oluşturma arayüzü kullanarak özel temanızı düzenleyebilirsiniz.
Kendi düzenlerinizi oluşturmak için blokları tasarımınıza bırakmanız yeterlidir.
Ayrıca herhangi bir öğeyi basit bir işaret ve tıklama ile kolayca değiştirebilirsiniz. Kendi renklerinizi, arka planınızı, yazı tiplerinizi ve daha fazlasını kullanabilirsiniz.
Daha fazla ayrıntı için, herhangi bir kod yazmadan kolayca özel bir WordPress temasının nasıl oluşturulacağına ilişkin adım adım eğitimimize bakın.
Bu makalenin varsayılan WordPress tarafından oluşturulan CSS hile sayfasını bulmanıza yardımcı olduğunu umuyoruz. Ayrıca en yaygın WordPress hatalarını düzeltme kılavuzumuzu veya küçük işletmeler için en iyi canlı sohbet yazılımı uzman karşılaştırmamızı görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Rodrigo Vieira Eufrasio da Silva says
You are to be congratulated for this wonderful content. I would only recommend updating this article, and letting us know which classes are generated by guttenberg and the latest version of WordPress because this post is out of date. But it helped me a lot.
Hugs to you all.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look
Yönetici
Alison Westall says
Is there a CSS class for changing the padding of an element? Thanks!
WPBeginner Support says
Once you find the object you want to add padding to, you would use:
padding, padding-top, padding-right, padding-bottom, padding-left
depending on what type of padding you want added
Yönetici
Matt Cauley says
Thanks for the info. I just bookmarked page even though its a few years old!
WPBeginner Support says
Thank you, while the article is older, it should still be useful
Yönetici
MS Shohan says
Awesome work bro. Thanks for making a list of all the default WP classes
Hannah Steele says
Hello, I am really struggling to format the automatically generated events page.
Please help me?
Arunjith RS says
Realy useful..Tank you.
Shai says
Can you (if not already elsewhere) list the admin dashboard and admin widgets classes.
it look like the admin is using a loader (wp-admin/load-styles.php) to include it CSS but that CSS is compress and hard to read. it will be nice to see a list of the items in use. for example if you want to create your own widget with tabs ; I inspected the CSS and can see large list of the class .nav-tab related CSS.
.
Ari Susanto says
and the “entry-content” itself!
Ari Susanto says
I want to add this one:
“status-publish”
luroch says
A question: when creating a bootstrap theme from underscores, should I keep the classes and ids that come with this framework, just adding the Bootstrap ones, or can I use only Bootstrap classes and Ids?
Ari Susanto says
How did you found them? Is there an automated way like using php function, may be?
Stephen Clark says
Fantastic post and highly informative. Curious if you could append this post with similar details about the WP footer. I have been struggling with styling and formatting the footer with the theme I’m using, and with some other sites I’ve built.
Would also be helpful to have a downloadable CSS stylesheet file containing all of these styles. Thanks!
Kevin Pryce says
When I inspect element only my wordpress theme, I do not see these styles, especially the ones applied to the body class. Do you have to put them into the template?
Joel Bladt says
Nice compilation of all the standard WordPress classes. Was that really all classes that are added automatically by WordPress? If classes are obsolete and disappeared, or new ones have come to this, I look forward to updating the list.
– German Blogger and translated with Google Translator.
WPBeginner Support says
It is up to date to the best of our knowledge, if you find any class obsolete, please let us know.
Yönetici
loreto says
time saver! now let me mess those styles
Amba Junior says
Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well
MalcolmOwen says
Do you know what would be useful? A printable PDF version of this guide…
Pete says
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane says
Thank you Pete!
wpbeginner says
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50 says
@smashingmag Congrats on your 50★ tweet! http://t.co/r78Ao3Sm
bobHankin says
@photoassassin No I hadn’t. That’s sweet! Handy too!
eugenebicyclist says
Just learning to work with WP and this is really handy. Thank you.