برگه تقلب CSS ایجاد شده پیش فرض وردپرس برای مبتدیان

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

این عنصر معمولا <article> در قالب تم خود تگ کنید. با این حال، بسته به موضوع شما می تواند هر برچسب دیگری باشد. کلاس‌های CSS پست با افزودن عبارت در تم شما نمایش داده می‌شوند post_class() تگ قالب

ویرایشگر بلاک وردپرس به صورت پویا کلاس های CSS را برای بلوک ها تولید می کند.

به سادگی به ظاهر » منوها صفحه و روی دکمه Screen Options در گوشه سمت راست بالای صفحه کلیک کنید.

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

SeedProd دارای تم های آماده برای استفاده است که می توانید به عنوان نقطه شروع استفاده کنید.

در مرحله بعد، باید به پایین بروید و کلیک کنید تا آیتم منو که می‌خواهید کلاس CSS سفارشی را در آن اضافه کنید، گسترش دهید.

برای این کار به SeedProd نیاز دارید. این بهترین ابزار صفحه ساز وردپرس در بازار است که به شما امکان می دهد بدون نوشتن هیچ کدی به راحتی تم های سفارشی ایجاد کنید.

وردپرس کلاس های زیر را به ویجت های قدیمی اضافه می کند.

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

کلاس های سبک پست پیش فرض

نظرات مرکز تعامل برای بسیاری از وب سایت های وردپرسی هستند. سبک دادن به آنها به شما کمک می کند تا تجربه جذاب تری را در اختیار کاربران قرار دهید.

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

برای پیدا کردن این کلاس‌های CSS، باید آن بلوک خاص را به یک پست یا صفحه اضافه کنید. پس از آن، باید روی دکمه Preview کلیک کنید تا بلاک را در عمل ببینید.

خوشبختانه وردپرس چندین راه آسان برای اضافه کردن کلاس های CSS در مناطق مختلف در اختیار شما قرار می دهد.

کلاس های پست به شما امکان می دهد به پست های وبلاگ و صفحات مطابق با شرایط مختلف استایل دهید. به عنوان مثال، می‌توانید با استفاده از CSS سفارشی زیر، به پست‌های وبلاگی که در یک دسته خاص ارسال شده‌اند، استایل متفاوتی بدهید:

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

در کنسول توسعه دهنده، HTML تولید شده توسط بلوک را خواهید دید. از اینجا می توانید کلاس های CSS اضافه شده توسط بلوک را مشاهده کنید.

ابزارک ها راهی آسان برای نمایش بلوک های غیرمحتوا در قالب وردپرس شما هستند. آنها معمولاً در قسمت های اختصاصی آماده ویجت یا نوارهای فرعی در قالب وردپرس شما نمایش داده می شوند.

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

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

همچنین می‌توانید با ایجاد دستی قالب‌ها، یک تم از ابتدا ایجاد کنید.

اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در توییتر و فیس بوک

ما در ادامه این مقاله به شما نشان خواهیم داد که چگونه این کلاس های CSS را پیدا کنید.

کلاس های پیش فرض فرم نظر

همچنین می توانید CSS سفارشی را به آیتم های منوی ناوبری وردپرس خود اضافه کنید. فرض کنید می خواهید یک آیتم منو را به دکمه تبدیل کنید، سپس این روش مفید است.

برای جزئیات بیشتر، راهنمای ما در مورد نحوه استایل دادن به نظرات در وردپرس را ببینید.

پیدا کردن کلاس های بلاک وردپرس

به طور مشابه، گاهی اوقات ممکن است بخواهید فقط یک تغییر کوچک در یک پست یا صفحه خاص بدون اعمال آن در کل موضوع خود ایجاد کنید.

امیدواریم این مقاله به شما کمک کند تا برگه تقلب CSS تولید شده وردپرس را پیدا کنید. همچنین ممکن است بخواهید راهنمای ما را برای رفع رایج ترین خطاهای وردپرس ببینید یا مقایسه تخصصی ما از بهترین نرم افزار چت زنده برای مشاغل کوچک را ببینید.

به سادگی بلوک هایی را در طرح خود رها کنید تا طرح بندی های خود را ایجاد کنید.

درست مانند عنصر بدنه، وردپرس کلاس های پویا را نیز به عناصر پست اضافه می کند.

کلاس های CSS سفارشی را به یک بلوک در ویرایشگر بلاک اضافه کنید

برای وب سایت شخصی خود، ممکن است لازم باشد CSS سفارشی را برای مناطقی که ممکن است نتوانید یک کلاس CSS پیش فرض را برای هدف پیدا کنید، اضافه کنید.

همانطور که می بینید، این کلاس ها شامل شرایط بسیار متنوعی هستند که می توانید در سبک های CSS خود هدف قرار دهید.

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

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

اگر در حال یادگیری توسعه قالب وردپرس هستید یا به سادگی سعی می کنید یک تم کودک برای وب سایت خود ایجاد کنید، دانستن آن کلاس های CSS مفید است.

وردپرس به طور خودکار کلاس های CSS پیش فرض را به عناصر مختلف وب سایت وردپرس شما تولید و اضافه می کند.

توجه داشته باشید: برای تغییر استایل های تم یا ایجاد یک تم سفارشی، لازم نیست CSS یاد بگیرید. اگر ترجیح می دهید کدنویسی را یاد نگیرید، می توانید از یک سازنده کشیدن و رها کردن مانند SeedProd استفاده کنید. در ادامه مقاله بیشتر در مورد آن صحبت خواهیم کرد.

برچسب بدنه <body> در HTML شامل کل ساختار طرح بندی هر صفحه وب است که آن را در طراحی هر قالب وردپرس بسیار مهم می کند.

آیا به دنبال یک برگه تقلب CSS تولید شده توسط وردپرس هستید؟

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

همانطور که گفته شد، بیایید نگاهی به کلاس‌های CSS پیش‌فرض تولید شده توسط وردپرس بیندازیم.

سبک های پیش فرض کلاس بدنه

در تب پیش نمایش، ماوس خود را به بلوکی که به تازگی اضافه کرده اید ببرید و با کلیک راست گزینه Inspect tool را انتخاب کنید.

همچنین به شما کمک می کند تا با افزودن CSS سفارشی بدون ایجاد تم خود، به سرعت عناصر خاصی را در قالب وردپرس خود سبک دهید.

متوجه یک فیلد با عنوان کلاس های CSS خواهید شد. ادامه دهید و کلاس CSS سفارشی خود را اینجا اضافه کنید.

از اینجا باید کادر کنار گزینه CSS classes را علامت بزنید.

اگر می خواهید به سرعت یک کلاس 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) {}

برای جزئیات بیشتر، راهنمای ما در مورد نحوه استایل دادن به منوهای ناوبری در وردپرس را ببینید.

کلاس های پیش فرض ویجت وردپرس

اگر ویرایشگر CSS را در داشبورد وردپرس خود نمی‌بینید، پس آموزش ما را در مورد چگونگی رفع مشکل سفارشی‌کننده تم وردپرس دنبال کنید.

کلاس های منوی پیمایش پیش فرض

در منوهای ناوبری وردپرس

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