چگونه می توان هر پست وردپرس را به صورت متفاوت سبک کرد

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

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

سبک کردن پست های فردی در وردپرس h4>

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

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

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

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

• .post-id
• .post
• پیوست
• چسبناک
• .hentry (صفحات میکروفرمت hAtom)
• .category-ID
• .category-name
• .tag-name
• .format- {format-name}
• .type- {post-type-name}
• . دارای تصویر کوچک است
• گذرواژه مورد نیاز است
• محافظت شده با رمز عبور.

یک نمونه خروجی به این شکل است:

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

به عنوان مثال ، اگر می خواهید پست شخصی را سبک کنید ، می توانید از کلاس post-id در CSS سفارشی خود استفاده کنید.

.post-412 {
background-color: # FF0303؛
رنگ: #FFFFFF؛
}

فراموش نکنید که شناسه پست را متناسب با شناسه خود تغییر دهید.

بیایید به یک مثال دیگر نگاهی بیندازیم.

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

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

.category-news {
    اندازه قلم: 18px؛
    نوع قلم: مورب؛
}

این CSS بر کلیه پست های ثبت شده در گروه اخبار تأثیر خواهد گذاشت.

عملکرد کلاس ارسال h4>

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

است.

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

بسته به طرح زمینه خود ، تابع post_class را در پرونده single.php یا در فایلهای الگوی محتوا پیدا خواهید کرد. به طور معمول ، کد چیزی شبیه به این است:

>

می توانید کلاس CSS سفارشی خود را با ویژگی مانند این اضافه کنید:

>

post_class کلاسهای پیش فرض CSS را به همراه کلاس CSS سفارشی شما چاپ می کند.

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

>

سبک ارسال متفاوت بر اساس نویسندگان h4>

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

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

با استفاده از قطعه زیر می توانید این کار را انجام دهید:

>

این کد نام ویژه کاربر را به عنوان کلاس CSS اضافه می کند. Nicename یک نام URL مناسب با وردپرس است. فضا ندارد و همه نویسه ها با حروف کوچک هستند که استفاده از آن به عنوان کلاس CSS را عالی می کند.

کد بالا خروجی از این قبیل را به شما می دهد:

اکنون می توانید از .peter در CSS سفارشی خود برای سبک دادن به همه پست های این نویسنده خاص استفاده کنید تا متفاوت به نظر برسد.

.peter {
background-color: #EEE؛
حاشیه: 1px جامد #CCC؛
}

سبک های ارسال شده براساس محبوبیت با استفاده از تعداد نظرات h4>

شاید سایتهایی با ابزارک های پست های محبوب که گاهی اوقات براساس تعداد نظرات است. در این مثال ، ما به شما نشان خواهیم داد که چگونه سبک پست ها را با استفاده از تعداد نظرات متفاوت تغییر دهید.

ابتدا باید تعداد نظرات را بدست آوریم و یک کلاس را با آن مرتبط کنیم.

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

 تأیید شده است؛
if ($ my_comment_count  = 10 && $ my_comment_count  = 20) {
$ my_comment_count = 'محبوب'؛
}
؟>

>

.new {حاشیه: 1 پیکسل جامد # FFFF00؛}
.emerging {border: 1px dashed # FF9933؛}
.popular {border: 1px dashed # CC0000؛}

  ID، 'post-class')؛ ؟>
>

.روند {
background-color: ## ff0000؛
}