کدهای CSS پر استفاده در Body Class وردپرس

امروز یک پست آموزشی دیگر درباره وردپرس داریم، سوالی که خیلی پرسیده می شود این است که لیستی از کدهای پیش فرض وردپرس CSS وجود دارد که کلاس های اصلی باشند و بتوان با کپی و پیست کردن از آنها استفاده کرد؟ جواب سوال بله است ، و اگر دنبال لیستی از دستورات CSS هستید در ادامه همراه من باشید.

در زیر می توانید لیستی از دستورات CSS و کاربردهای آنها را مشاهده کنید. // برای توضیحات استفاده می شود و هر چیزی که با دات یا نقطه شروع می شود دستور است که می توانید استفاده کنید.

// 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) {}

یک مثال برای اینکه می خواهیم صفحه NEWS دارای بکگراند با رنگی متفاوت باشد:

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

کدهای زیر برای استایل پست ها استفاده می شود:

// 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) {}

اگر می خواهید یک کلاس را در یک قالب پیدا کنید تا آن را دستکاری کنید کافیست روی آن راست کلیک کنید و مثلا در مرورگر کروم برروی inspect کلیک کنید.

بعد از اینکه کلاس را پیدا کردید می توانید در تنظیمات شخصی سازی وردپرس ، در بخش مربوط به کدهای اختصاصی CSS ، ترکیبات دلخواه از دستورات آموزش داده شده را وارد کنید.