افزودن پشتیبانی قالب از ابزارک های وردپرس

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

widgets-layout

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

1معرفی کد اضافه کردن ابزارک های وردپرس

برای اضافه کردن ابزارک به قالب های وردپرس از هک زیر استفاده می شود:

عبارت داخل کوتیشن دوم در واقع نام تابعی است که می خواهیم برای این هک اجرا شود. با صرف نظر از کدهای ترجمه (که برای قالب ذاتا فارسی معنایی ندارد)، استاندارد و اصولی ترین روش تعریف این تابع به شکل زیر است:

در قطعه کد بالا، تابع پیشفرض وردپرس برای ثبت محل ابزارک (register_sidebar) فراخوانی شده و پارامترهای محل ابزارک ما تعریف می شود که موارد تعریف شده سطر به سطر توضیح داده می شوند:

  1. نام ابزارک (name): همانطور که مشخص است نام محل استفاده ابزارک تعریف می شود.
  2. آی.دی (id): آی.دی جهت نمایش ابزارک داخل فایل های قالب استفاده می شود؛ لذا لازم است برای هر محل ابزارک آی.دی منحصر به فردی استفاده شود.
  3. توضیحات (description): توضیح مختصری در مورد نحوه یا محل استفاده ابزارک های این محل
  4. عبارت قبل از هر ابزارک (before_widget): در این قسمت عبارت یا کد HTML ی که باید قبل از هر ابزارک وجود داشته باشد، وارد می شود. درج پارامترهای %۱$s و %۲$s در این بخش از الزامات یک قالب وردپرس استاندارد می باشد. این پارامترها در واقع آی.دی و کلاس های CSS ابزارک ها را به کد HTML اضافه می کنند و ابزارک ها بر این اساس استایل دهی می شوند یا استایل های ابزارک های وردپرس با این پارامترها فراخوانی می شوند.
  5. عبارت بعد از هر ابزارک (after_widget): در این قسمت تگ(های) HTML شروع شده در خط قبل بسته می شوند.
  6. عبارت قبل از عنوان (before_title): تگ HTML و کلاس CSS عنوان ابزارک در این قسمت درج می شود.
  7. عبارت بعد از عنوان (after_title): تگ شروع شده در خط قبل در این قسمت بسته می شود.

2افزودن کد به قالب وردپرس

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

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

display-widgets

3نمایش ابزارک های وردپرس در قالب

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

توجه کنید که sidebar-1 همان آی.دی ابزارک سایدبار می باشد که در قسمت قبل ایجاد کردیم.

و ابزارک فوتر که می خواهیم در فوتر سایت نمایش داده شود. برای این کار فایل footer.php قالب را باز می کنیم و کد زیر را در محل مناسبی داخل این فایل اضافه می کنیم:

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

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

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