برچسب: کد نویسی

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

 

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

مطلبی که امروز قصد دارم برای شما آموزش دهم پیش نیازهایی مانند : 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