آموزش طراحی پست هایی متفاوت و زیبا در وردپرس

طراحی پست هایی متفاوت و زیبا در وردپرس

 

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

مطلبی که امروز قصد دارم برای شما آموزش دهم پیش نیازهایی مانند : CSS ، HTML  را دارد ( یعنی به کمی کد نویسی و فهم آنها نیاز است )

 

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

ساختن و طراحی تم هم از این قضیه مستثنی نیست.

هسته ی اصلی تم وردپرس کلاس  ()post_class می باشد که می توان تغییرات را در همین کلاس اضافه کرد. برای فهم این مطلب می توان در مرورگر خود و با ابزار inspect  کلاس ذکر شده را مشاهده کرد. 

 

استایل جدید ..

 

 

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

post-id.

post.

attachment.

sticky.

hentry.

category-ID.

category-name.

tag-name.

{format-{format-name.

{type-{post-type-name.

has-post-thumbnail.

post-password-required.

post-password-protected.

 

 

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

حال اگر مایل هستید پست خود را با شیوه ای متفاوت نمایش دهید از کلاس post-id استفاده کنید و ایدی مطلب خود را وارد کنید .

استایل جدید.....

به مثالی دیگر توجه کنید :

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

{}category-news.

استایل جدید.....

توجه کنید که post class  در تگ <article>  وجود دارد.

برای یافتن این کلاس به فایل single.php  یا content templates file مراجعه کنید.

 

استایل جدید......

همانطور که می بینید پست مورد نظر ( longform ) در post class  وارد شده است.

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

به کد زیر دقت کنید.

 

 

استایل.......

 

حال اگر می خواهید نام نویسنده را در استایل هایی که ساخته اید درج کنید و آنها را در کلاس مورد نظر ( طبق شکل زیر ) وارد کنید .

دقت کنید که تمامی کدها طبق دستور زیر باشد .

استایل جدید........

برای مثال در کد زیر می بینید که   peter .  در پست ها نمایش داده خواهد شد.

کد زیر خروجی تصویر قبل می باشد.

استایل جدید........

برای تغییرات در استایل پست از کد زیر استفاده کنید.

استایل ....

منبع : wpbeginner

آموزش وردپرس وردپرس وردپرس فارسی

درباره Reza Mandegari

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

دیدگاه خود را بیان کنید

wp-yar.ir
wp-yar.ir

هر روز یک آموزش رایگان در کانال وردپرس یار