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

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

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

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

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

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

خب به سراغ فایل index.php می رویم:

در دومین خط از فایل زبان صفحه را تعیین کرده ایم، در وردپرس تابعی به نام language_attributes وجود دارد که به طور داینامیک اطلاعات زبان صفحه و direction آن را چاپ می کند. پس ما کلمه lang=”fa” را حذف کرده و این تابع را جایگزین می کنیم.

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

در خط چهارم charset صفحه را به صورت دستی تعیین کردیم، اما تابع bloginfo در وردپرس، همین کار را نیز برای ما انجام خواهد داد.

پس کد زیر را نیز بجای خط چهارم جایگزین کنید.

برای title صفحه نیز از کد زیر استفاده می کنیم، زیرا titleکه قرار داده ایم به صورت ثابت خواهد بود و اگر به صفحات دیگر وبسایت نیز رجوع کنیم نام همان خواهد بود که بهتر  است نام هر صفحه مختص آن باشد تا کاربر بداند در کدام صفحه قرار دارد. پس باید کد زیر را جایگزین کرد که نام صفحه به صورت داینامیک گرفته شود و در title چاپ شود :

با استفاده از این کد نام وبسایت، سپس یک خط جدا کننده (|) سپس نام صفحه را چاپ خواهیم کرد. درضمن اگر در صفحه اصلی باشیم، بجای نام صفحه توضیح سایت قرار خواهد گرفت.

مرحله بعدی قرار دادن قرار دادن یک meta tag با مقدار توضیح سایت در head صفحه است که برای موتورهای جستجو مفید خواهد بود. برای این کار کد زیر را در head صفحه بعد title قرار دهید.

کار بعدی متصل کردن فایل style هست، پس بایستی href آن را تغییر دهیم، اما اینکار به صورت دستی انجام پذیر نیست، و باید از تابع وردپرس مخصوص آن استفاده کرد پس آدرسی که برای فایل style نوشتیم را پاک کرده و مقدار زیر را جایگزین آن کنید.

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

ابتدا از فونت ها شروع می کنیم و آدرس آن ها را به صورت زیر تغییر می دهیم :

منبع: سون لرن

 

 

پاسخ دهید

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