آموزش طراحی قالب وردپرس استاندارد (بخش 2)

در قسمت قبلی آموزش طراحی قالب وردپرس استاندارد ، فولدر قالب، تصویر اسکرین شات و فایل style.css قالب ساخته شد. همانطور که در بخش قبلی اعلام شد، در بخش 2 آموزش طراحی قالب وردپرس استاندارد ، فایل functions.php قالب کدنویسی خواهد شد.

1تعریف متغیرها

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

اولین چیزی که در فایل functions.php تعریف می کنیم، متغیرها هستند. در کد زیر برای فولدر قالب اصلی، فولدر تصاویر، فولدر استایل ها و فولدر فایل های جاوا اسکریپت متغیرهای مربوطه تعریف شده اند.

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

از این کد استفاده خواهیم کرد:

2تعیین عرض محتوا

تصاویر، بنرهای فلش (embed) و آی فریم ها به وفور در صفحات وب استفاده می شوند. وردپرس به صورت پیشفرض قادر است با مقدار تعیین شده برای عرض محتوا، عرض عناصر ذکر شده را در هر صفحه تعیین کند. برای تعیین عرض محتوا باید کد زیر را در فایل functions.php قالب خود قرار دهید: (برای قالبی که قرار است در پایان این آموزش ها آماده شود، عرض 800 در نظر گرفته شده است.)

3افزودن موارد پشتیبانی قالب

پشتیبانی از فایل ترجمه، تولید عنوان صفحات، افزودن ساختار پست ها، لینک های فید، تصویر شاخص، فهرست ها و … از جمله مواردی است که در گام بعدی آموزش طراحی قالب وردپرس استاندارد اضافه خواهیم کرد. برای این کار کافیست کد زیر را به فایل functions.php اضافه کنیم:

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

تا قبل از انتشار وردپرس 4.1 عنوان صفحات با تگ <title> و استفاده از توابع مختلف به سلیقه طراح در فایل header.php اضافه می شد اما با انتشار وردپرس 4.1 امکان ویژه تولید عنوان صفحات به صورت اتوماتیک به هسته وردپرس اضافه شده؛ اما قریب به اتفاق طراحان داخلی از این امکان جدید بی خبرند و یا استفاده نمی کنند. اکنون به راحتی با استفاده از کد زیر می توانید عنوان بندی صفحات خود را به وردپرس بسپارید:

ساختارهای پست ها (Post Formats) با وردپرس 3.1 معرفی شدند و ابزار بسیار مناسبی برای طراحان محسوب می شوند. موارد استفاده بسیار زیادی می توان برای آنها شمرد اما به عنوان یک مثال فرض کنید در یک سایت خبری قرار است خبر، گالری تصاویر، گزارش ویدیویی، گزارش صوتی و … داشته باشید. برای این موارد ساختارهای پست دقیقا چیزی است که شما نیاز دارید! در کد زیر ساختار گالری، لینک، صدا، تصویر، ویدیو و نقل قول را به قالب اضافه می کنیم، بسته به نیازتان می توانید موارد اضافی را حذف کنید:

فید سایت در بسیاری از موارد استفاده می شود و کاربرد مهمی در بسیاری از سایت ها دارد. با استفاده از امکان زیر که از وردپرس 3 معرفی شد، می توانید لینک های RSS را به هدر صفحات سایت خود اضافه کنید:

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

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

از آنجایی که می خواهیم از فایل ترجمه برای قالب استفاده کنیم، در کد بالا، عبارت Main Menu در واقع نام نمایشی فهرست است که می توانیم بعدا آن را با استفاده از فایل ترجمه به فارسی ترجمه کنیم. در صورتی که شما نمی خواهید از فایل ترجمه استفاده کنید می توانید با حذف تابع ترجمه، کد را به صورت زیر مورد استفاده قرار دهید:

در قسمت بعدی آموزش طراحی قالب وردپرس استاندارد، ساخت فایل functions.php قالب را به اتمام خواهیم رساند.

2 دیدگاه

  1. وحید گفت:

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

  2. طاها گفت:

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

سوال یا دیدگاه شما