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

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

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

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

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

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

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

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

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

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

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

اضافه کردن کلاس های CSS سفارشی خود در وردپرس

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

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

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

// 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 پیش فرض را به عناصر مختلف وب سایت وردپرس شما تولید و اضافه می کند.

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

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

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

اگر در حال یادگیری توسعه قالب وردپرس هستید یا به سادگی سعی می کنید یک تم کودک برای وب سایت خود ایجاد کنید، دانستن آن کلاس های 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 {}