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

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

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

آموزش فیلم h4>

مشترک شدن در WPBeginner

اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.

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

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

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

.rtl {}
. خانه {}
.وبلاگ {}
.بایگانی {}
.تاریخ {}
.جستجو کردن {}
صفحه بندی شده {}
.پیوست {}
.خطای 404 {}
.single postid- (id) {}
.attachmentid- (شناسه) {}
.tatachment- (نوع میمی) {}
.نویسنده {}
نویسنده- (نام کاربری_نام) {}
.دسته بندی {}
.category- (حلزون حرکت کردن) {}
.tag {}
.tag- (حلزون حرکت کردن) {}
.page-parent {}
.page-child والدین-pageid- (شناسه) {}
.page-template page-template- (نام فایل الگو) {}
.نتایج جستجو {}
. جستجو بدون نتیجه {}
.وارد شده {}
.paged- (شماره صفحه) {}
.single-paged- (شماره صفحه) {}
.page-paged- (شماره صفحه) {}
.category-paged- (شماره صفحه) {}
.tag-paged- (شماره صفحه) {}
.date-paged- (شماره صفحه) {}
.autor-paged- (شماره صفحه) {}
.search-paged- (شماره صفحه) {}

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

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

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

شناسه پست {}
.پست {}
صفحه.
.پیوست {}
چسبناک {}
صحت {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

اگر مقاله ما را خوانده اید What ، Whys و How to’s of Formats Post در WordPress 3.1 سپس شما در مورد قالبهای ارسال و اینکه چگونه می توانید پستهای خود را با توجه به قالبی که انتخاب می کنید متفاوت نمایش دهید. یک بار دیگر ، وردپرس کلاسهای پویا را با استفاده از تابع post_class () به پست شما اضافه می کند که به شما امکان می دهد سبک های خود را برای هر قالب ایجاد کنید. تابع post_class () یک کلاس به شکل “.format-foo” اضافه می کند که foo هر قالب پستی است که شما انتخاب کرده اید. گالری ، تصویر و غیره

.فرمت-تصویر {}
قالب گالری {}
قالب چت {}
.format-link {}
.فرمت نقل قول {}
.format-status {}
.format-video {}

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

در مقاله ما به نام نحوه سبک کردن منوهای پیمایش وردپرس ما در مورد اینکه چگونه می توانید کلاس خود را به فهرست خود اضافه کنید توضیح می دهیم. ما تصور می کنیم شما آن را خوانده اید و شما به منوی nav خود کلاس اصلی خود را “main-menu” می دهید.

#header .main-menu {} // کلاس کانتینر
#header .main-menu ul {} // اولین کلاس نامرتب کلاس کانتینر
#header .main-menu ul ul {} // لیست مرتب نشده در یک لیست غیر مرتب
#header .main-menu li {} // هر مورد ناوبری
#header .main-menu li a {} // هر لنگر مورد ناوبری
#header .main-menu li ul {} // لیست مرتب نشده در صورت وجود موارد کشویی
#header .main-menu li li {} // هر مورد ناوبری کشویی
#header .main-menu li li a a}} // هر لنگر مورد ناوبری drap down

.current_page_item {} // کلاس برای صفحه فعلی
.current-cat {} // کلاس برای گروه فعلی
.current-menu-item {} // کلاس برای هر مورد منوی فعلی
.menu-item-type-taxonomy {} // کلاس برای یک دسته
.menu-item-type-post_type {} // کلاس برای صفحات
.menu-item-type-custom {} // کلاس برای هر مورد سفارشی که اضافه کرده اید
.menu-item-home {} // کلاس برای پیوند صفحه اصلی

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

سبک های پیش فرض ویرایشگر WISIWYG h4>

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

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-large {}
.size-medium {}
.size-thumbnail {}

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

سبک های پیش فرض ویجت وردپرس h4>

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


ویجت {}

# فرم جستجو {}
جستجوی_ویجت {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

پیوندهای ویجت {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

بایگانی_ویجت {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive را انتخاب کنید {}
گزینه .widget_archive {}

صفحات ویجت {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

پیوندهای ویجت {}
.widget_links li: بعد از {}
.widget_links li: قبل از {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a: بعد از {}
.widget_tag_cloud a: قبل از {}

.widget_calendar {}
# بسته_ تقویم {}
# تقویم_پیچید {}
#calendar_wrap td {}
# wp-calendar tr td {}
# زیرنویس تقویم wp {}
# wp-calendar a {}
# wp-Calendar # امروز {}
# wp-calendar #prev {}
# wp-calendar #next {}
# تقویم wp # بعدی a {}
# wp-calendar #prev a {}

دسته های_ویجت {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories را انتخاب کنید {}
دسته های_ویجت # گربه را انتخاب کنید {}
.widget_categories select.postform {}
گزینه .widget_categories {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.نظرات اخیر {}
#نظرات اخیر {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.جنس_جیب_جستجو {}
.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 {}

سبک های پیش فرض فرم نظر h4>

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


/ * خروجی نظر * /

.commentlist .استفاده کنید {}
.commentlist .تکراراً یک {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist. حتی {}
.commentlist .thread-alt {}
.commentlist. رشته-عجیب و غریب {}
.commentlist. Thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul. کودکان. حتی {}

.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. والدین {}
.commentlist .comment {}
.commentlist. کودکان {}
.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 {}

# لغو-نظر-پاسخ {}
# لغو-نظر-پاسخ a {}

/ * فرم نظر * /

#پاسخ دادن { }
# پاسخ-عنوان {}
# لغو-نظر-پاسخ-پیوند {}
#commentform {}
#نویسنده { }
#پست الکترونیک { }
#url {}
#اظهار نظر
#ارسال
.comment-notes {}
.ضروری { }
.comment-form-author {}
.comment-form-email {}
.comment-form-url {}
.comment-form-comment {}
برچسب های مجاز-شکل {}
شکل دادن


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

منبع:
https://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/.

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