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

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

1اضافه کردن ابزارک

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

2صفحه بندی محتوا

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

3لود فایل های استایل و جاوا اسکریپت

اگر بگوییم 99.99 درصد وردپرس کار های داخلی از روش اصولی لود فایل های css و js مطلع نیستند و یا استفاده نمی کنند، اغراق نکرده ایم. روش رایج و مورد استفاده اکثریت قاطع این است که هنگام تبدیل قالب html به وردپرس، در فایل هدر قالب، آدرس سایت را به اول فایل های استایل و جاوا اسکریپت اضافه می کنند. مثلا به این صورت:

لازم است بدانید که این روش، روش اصولی برای طراحی قالب وردپررس استاندارد نیست. روش اصولی استفاده از توابع wp_enqueue_script و wp_enqueue_style در فایل functions.php قالب می باشد. برای قالب ما، فایل های CSS شامل فایل style.css قالب و فایل css بوت استرپ می باشند. فایل های جاوااسکریپت شامل فایل jquery.js ، فایل جاوا اسکریپت بوت استرپ و فایل جاوا اسکریپت اختصاصی قالب می باشند. با اضافه کردن کد زیر به فایل functions.php این موارد به قالب اضافه می شوند:

در کد بالا با استفاده از اکشن، تابع webhow_theme_scripts را هنگام لود تابع wp_enqueue_scripts وردپرس فراخوانی می کنیم. محتوای تابع به این صورت می باشد.

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

در این قسمت، ابتدا فایل جاوااسکریپت بوت استرپ و سپس فایل جاوااسکریپت اختصاصی قالب توسط تابع wp_register_script تعریف می شوند و سپس توسط تابع wp_enqueue_script بارگزاری می شوند. نحوه استفاده از این توابع به زودی در یک پست جداگانه به صورت مفصل بررسی می شود.
نکته ای که لازم است توجه داشته باشید این است که تابع jquery.js را معرفی نکرده ایم، دلیل این مورد این واقعیت است که وردپرس به صورت خودکار این فایل را بارگزاری می کند و در صورتی که شما مجددا بارگزاری نمایید، حجم صفحه بیشتر و مشکلات جزئی دیگری اتفاف می افتد. همچنین فایل جاوا اسکریپت بوت استرپ از سرور بوت استرپ بارگزاری شده است که سرعت لود بهتری دارد.

در این بخش، فایل استایل بوت استرپ از سرور CDN بوت استرپ و با استفاده از تابع wp_enqueue_style وردپرس بارگزاری می شود و فایل style.css قالب نیز معرفی گردیده است.

در قسمت بعدی این آموزش فایل header.php قالب کدنویسی خواهد شد.

یک دیدگاه

  1. مهسا گفت:

    با سلام و وقت بخیر
    ببخشید مرحله بعدی رو کی شروع میکنید؟؟؟

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