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

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

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

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

کلاس های پیش فرض Body

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

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

برای مثال ، اگر می خواهید صفحه نتایج جستجو را به روشی خاص تنظیم کنید ، می توانید از کلاس “نتایج جستجو” برای افزودن سبک خود استفاده کنید. وردپرس فقط وقتی صفحه نتایج جستجو فعال است این کلاس را به برچسب body اضافه می کند ، بنابراین هیچ صفحه دیگری را تحت تأثیر قرار نمی دهد.

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

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

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

وردپرس کلاسهای پویا را با استفاده از تابع post_class () به پست شما اضافه می کند که به شما امکان می دهد سبک های خود را برای هر قالب ایجاد کنید. تابع post_class () یک کلاس به شکل “.format-foo” اضافه می کند که foo هر قالب پستی است که شما انتخاب کرده اید. گالری ، تصویر و غیره.

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

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

در مقاله ما با عنوان نحوه استایل دهی منوهای پیمایش وردپرس ، ما بحث می کنیم که چگونه می توانید کلاس خود را به فهرست خود اضافه کنید. ما تصور می کنیم شما آن را خوانده اید و شما به منوی nav خود کلاس اصلی خود را “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

توجه داشته باشید که هر زمان که منویی را در وردپرس ایجاد می کنید ، به طور خودکار در یک div قرار می گیرد. این div فقط یک کلاس را مشخص می کند اگر آن را مشخص کنید (ما “main-menu” را انتخاب کردیم). از آنجا شما فقط عناصر مختلف لیست را سبک می کنید.

کلاس های پیش فرض WISIWYG

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

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

می بینید که چندین کلاس مربوط به تصاویر وجود دارد. برای مثال ، اگر کاربر تصمیم بگیرد تصویری تراز چپ را اضافه کند ، وردپرس کلاس “alignleft” را اضافه می کند.

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

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

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

هنگام استایل دهی به ابزارک ها ، احتمالاً در نهایت از همان سبک ها بارها و بارها استفاده خواهید کرد. به همین دلیل بهتر است کلاسها را در صفحه سبک خود با استفاده از ویرگول ترکیب کنید. به عنوان مثال ، می توانید .widget_pages ul و .widget_archive ul را با انجام چنین کارهایی ترکیب کنید:

.widget_pages ul, .widget_archive ul {}

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

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

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

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

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

دیدگاهتان را بنویسید