آموزش طراحی قالب سایت وردپرس ( جلسه هفتم )

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

طراحی قالب سایت وردپرس

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

در جلسه پیش توانستیم که مطالب وبسایت را با استفاده از توابع وردپرس نمایش دهیم، در این جلسه صفحه مطلب پوسته را ایجاد خواهیم کرد،

قبل از شروع به ایجاد فایل single لازم است که کارمان را با فایل index به طور کامل تمام کنیم.

پس ابتدا فایل index.php را در ویرایشگر کد و قالب را در مرورگر باز کنید :

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

برای نمایش آن نیاز به قرار دادن توابع آن است برای انجام این کار تابع

را قبل از تگ </head> (درون فایل header.php) و تابع

را قبل از تگ </body> قرار دهید. حال اگر قالب را ریفرش کنید، نوار مدیریت نیز نمایش داده خواهد شد.

آخرین کار ما با فایل index جدا کردن کدهای فوتر است برای انجام اینکار نیز یک فایل جدید در کنار index.php با نام footer.php ایجاد کنید و کد های فوتر را از فایل index به آن انتقال دهید.

سپس بجای این کدها در فایل index کد زیر را برای لود کردن فایل footer.php قرار دهید.

خب حال نوبت به صفحه مطلب می رسد، یک فایل دیگر با نام single.php ایجاد کنید ، و کل کدهای فایل index.php را درون آن کپی کنید.

خب فایل single.php با فایل index.php فرق چندانی نخواهد داشت، بجز در قسمت content. این قسمت نیاز به تصویر شاخص و دکمه ادامه مطلب نخواهد داشت، درضمن برچسب ها و نظرات را نیز باید ایجاد کنیم.به علاوه اینکه به جای خلاصه مطلب بایستی کل مطلب را نمایش دهیم.

خب اولین کار بر روی ادامه مطلب پست “سلام دنیا” به دلیل داشتن نظر کلیک کنید.

حال به فایل single.php بر می گردیم و div با کلاس post را به شکل زیر تغییر دهید.

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

خب کار بعدی حذف تصویر شاخص (البته این کار اختیاری است، می توانید تصویر را در یک اندازه ی بزرگتر نیز به نمایش بگذارید) و دکمه ادامه مطلب است. پس کدهای قسمت post به شکل زیر تغییر خواهد کرد.

حال کل مطلب را با تابع زیر به جای خلاصه نمایش می دهیم.

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

خب کار بعدی نمایش برچسب های مطلب است برای اینکار کد زیر را خارج از div با کلاس single-post و قبل از endwhile قرار دهید.

تابع the_tags تگ های مطلب را چاپ می کند و این تابع سه مقدار می گیرد، مقدار اول متنی که قبل از تگ ها نمایش داده می شود که من متن برچسب ها را قرار داده ام. مقدار دوم متن جدا کننده ی بین تگ ها که من ویرگول گذاشتم، و مقدار سوم متن پس از برچسب ها که معمولا خالیست.

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

کد زیر را نیز به انتهای فایل style.css اضافه کنید تا این قسمت بدون استایل نباشد.

خب حال نوبت به قسمت نظرات می رسد. قسمت نظرات را می توان به دو شکل ایجاد کرد. یا اینکه از تابع آن استفاده کرد که شکل آن از فایلcomment-template موجود در پوشه ی wp-includes  گرفته می شود. یا که خودمان طبق شکلی که می خواهیم آن را طراحی کنیم که اینکار نیاز به فایل comments.php و کد نویسی زیادی دارد.

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

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

استایل فوق از پوسته ی twentyten گرفته شده، و فقط مقداری اون رو ویرایش کردم.

خب تقریبا کار ما با فایل single تمام شد.

حال یک فایل جدید با نام page.php ایجاد کنید و کدهای فایل single.php را درون آن کپی کنید.

تنها تفاوتی که این فایل با فایل single.php  دارد قسمت برچسب هاست که نیازی به نمایش آن ها نداریم. برای همین فقط کدهای برچسب را از فایل page.php پاک کنید.

خب به انتهای آموزش ساده و مقدماتی قالب وردپرس رسیدم امیدواریم نهایت استفاده رو برده باشید.

با تشکر از وب سایت سون لرن

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *