با فرض بر اینکه شما Widgets را [بر اساس آموزش فارسی] نصب و فعال کردهاید، میخواهیم چگونهگی هماهنگ کردن قالبهای مختلف با این افزونه را شرح دهیم.
برای اینکار:
- باید به وردپرس بفهمانیم که قالب ما از Widgets پشتیبانی میکند تا یک زیرشاخه بهنام Sidebar Widgets به قسمت Presentation در بخش مدیریت وردپرس اضافه شود.
- باید کدهای مربوط به Widgets را در قالبمان قرار دهیم.
خب برای اینکه به وردپرس بگوییم که میخواهیم از Widgets استفاده کنیم اول باید بدانیم قالبمان از چه مدل نوار کناری استفاده میکند، اکثر قالبها از نوارهای لیستی استفاده میکنند، برای مثال کد زیر نمونهای از نوار کناری لیستی است:
<ul id="sidebar"> <li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
</ul>
که در آن عناصر بوسیلهی تگهای <li> از هم جدا میشوند و عناوین در تگ <h2> قرار میگیرند.
اگر نوار کناری ما از لیستها برای نشان دادن محتویاتش استفاده کند ما به سادهگی میتوانیم قالب خود را با Widgets هماهنگ کنیم:
۱. فایل functions.php را در پوشهی قالب خود بیابید (اگر وجود ندارد ایجاد کنید) و کدهای زیر را به فایل اضافه نمایید:
<?phpif ( function_exists('register_sidebar') )
register_sidebar();
?>
با اینکار به وردپرس فهماندیم که ما میخواهیم از Widgets استفاده کنیم.
۲. در پوشهی قالب خود فایل sidebar.php را انتخاب نموده و خطوط زیر را به ابتدا و انتهای لیست آن اضافه نمایید:
ابتدا:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
انتها:
<?php endif; ?>
که کد قبلی که مثال زدیم بهصورت زیر درمیآید:
<ul id="sidebar"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li id="about">
<h2>About</h2>
<p>This is my blog.</p> </li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
<?php endif; ?>
</ul>
این کدها یک شرط برای وردپرس تعیین میکند که اگر Widgets فعال بود آنها را نشان دهد و درغیراینصورت نوار کناری را به حالت ساده (بدون Widgets) نشان دهد.
حال اگر نوار کناری ما از لیستها استفاده نکند (مثل نوار کناری قالب فعلی من) چه باید کرد؟
۱. فایل functions.php را در پوشهی قالب خود بیابید (اگر وجود ندارد ایجاد کنید) و کدهای زیر را به فایل اضافه نمایید:
<?phpif ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => 'BEFORE_WIDGETS_CODE',
'after_widget' => 'AFTER_WIDGETS_CODE',
'before_title' => 'BEFORE_WIDGETS_TITLE_CODE',
'after_title' => 'AFTER_WIDGETS_TITLE_CODE'
));
?>
و مقادیر زیر را جایگزین کنید:
- بهجای BEFORE_WIDGETS_CODE کدهایی که قبل از یک بلوک Widget قرار میگیرند
- بهجای AFTER_WIDGETS_CODE کدهایی که بعد از یک بلوک Widget قرار میگیرند
- بهجای BEFORE_WIDGETS_TITLE_CODE کدهایی که قبل از عنوان یک Widget قرار میگیرند
- بهجای AFTER_WIDGETS_TITLE_CODE کدهایی که بعد از عنوان یک Widget قرار میگیرند
برای مثال، کد یکی از بلوکهای نوار کناری من بهصورت زیر است:
<div class="blocks"> <div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="m">
<div class="title">عنوان</div>
محتویات بلوک
</div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
</div>
حال من باید در فایل functions.php قالبم اینگونه بنویسم:
<?phpif ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div class="blocks">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="m">',
'after_widget' => '</div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
</div>',
'before_title' => '<div class="title">',
'after_title' => '</div>'
));
?>
۲. باید sidebar.php را هم ویرایش کنیم که مانند مثال قبل کدهای زیر را به ابتدا و انتهای کدهای موجود در نوار کناریمان اضافه میکنیم:
ابتدا:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
انتها:
<?php endif; ?>
در نتیجه برای مثال بالا داریم:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><div class="blocks">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="m">
<div class="title">عنوان</div>
محتویات بلوک ۱
</div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
</div>
<div class="blocks">
<div class="tl"></div>
<div class="tc"></div>
<div class="tr"></div>
<div class="m">
<div class="title">عنوان</div>
محتویات بلوک ۲
</div>
<div class="bl"></div>
<div class="bc"></div>
<div class="br"></div>
</div>
<?php endif; ?>
پس ما آموختیم که چگونه انواع قالبها را با Widgets هماهنگ کنیم!
حال میتوانیم به زیرشاخهی Sidebar Widgets در قسمت Presention در بخش مدیریت وردپرس رفته و کار با Widgets را آغاز کنیم و از نتیجهی کار لذت ببریم :)
در برخی موارد قالبها دارای بیش از یک نوار کناری هستند، چگونهگی هماهنگ کردن بیش از یک نوار کناری را با Widgets در پستهای بعدی شرح خواهم داد.
مرتبط:
Widgets چیست و چگونه آنرا نصب کنیم؟
هماهنگ کردن قالبهای چند ستونه با Widgets
