ساختن آنلاین قالب برای وبلاگهای وردپرس فقط در چند کلیک ساده!

برای ساختن قالب با این ابزار، احتیاج به هیچ دانش فنی ندارید، فقط کافیه رنگ قسمتهای مختلف و نوع فونت اونا رو مشخص کنید، بعد با زدن یک دکمه، قالبی که ساختین رو تو یه فایل زیپ شده دریافت کنین، به همین ساده‌گی، به همین خوشمزه‌گی :)

حین انجام کار هم میتونین نتیجه‌ی کارتون رو بهصورت زنده، تو همون صفحه ببینین.

 

برای اینکه با Widgets بیشتر آشنا بشید پیشنهاد می‌کنم این دو تا نوشته رو بخونید:
Widgets چیست و چگونه آن‌را نصب کنیم؟
چگونه قالب‌های خود را با Widgets هماهنگ کنیم؟

بریم سر بحث اصلیمون، یعنی هماهنگ کردن قالب‌هایی که از چند نوار کناری استفاده می‌کنن با Widgets، تو این شرایط دو حالت ممکنه پیش بیاد:

۱. همه‌ی ستون‌های شما از نظر کدنویسی مشابه باشند
۲. ستون‌های شما از نظر کدنویسی متفاوت باشند

که ما به‌تفصیل هر دو حالت رو شرح می‌دیم.

• حالت اول (کدنویسی مشابه):

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

اگر از نوارکناری لیستی استفاده می‌کنید:

if ( function_exists('register_sidebars') )
    register_sidebars(N);

اگر از نوارکناری غیرلیستی استفاده می‌کنید:

if ( function_exists('register_sidebars') )
    register_sidebars(N, array(
        'before_widget' => 'BEFORE_WIDGETS_CODE',
        'after_widget' => 'AFTER_WIDGETS_CODE',
        'before_title' => 'BEFORE_WIDGETS_TITLE_CODE',
        'after_title' => 'AFTER_WIDGETS_TITLE_CODE'
    ));

که در کدهای بالا به‌جای N در تابع register_sidebars تعداد نوارکناری‌هایی که می‌خواهید ایجاد شوند را بنویسید، مثلن برای به‌وجود آوردن ۲ نوارکناری داریم:

اگر از نوارکناری لیستی استفاده می‌کنید:

if ( function_exists('register_sidebars') )
    register_sidebars(2);

اگر از نوارکناری غیرلیستی استفاده می‌کنید:

if ( function_exists('register_sidebars') )
    register_sidebars(2, array(
        'before_widget' => 'BEFORE_WIDGETS_CODE',
        'after_widget' => 'AFTER_WIDGETS_CODE',
        'before_title' => 'BEFORE_WIDGETS_TITLE_CODE',
        'after_title' => 'AFTER_WIDGETS_TITLE_CODE'
    ));

نکته: برای آگاهی از مفهوم نوارهای لیستی و غیرلیستی و همچنین آرگومان‌هایی که در حالت غیرلیستی در تابع register_sidebars استفاده شده است به نوشته‌ی قبلی من در همین مورد مراجعه کنید.

حال برای صدا زدن نوارهای کناری که تعریف کرده‌ایم همچون نوشته‌ی قبلی از تابع dynamic_sidebar به‌صورت شرطی در ابتدا و انتهای نوارکناری معمولی‌مان استفاده می‌کنیم:

ابتدا:

<?php if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar(شماره مشخصه نوار کناری) ) : ?>

انتها:

<?php endif; ?>

که به‌جای «شماره مشخصه نوار کناری» در تابع dynamic_sidebar در ابتدای نوار کناری معمولی، عدد مشخصه نوارکناری مورد نظرمان را می‌گذاریم، مثلن برای فراخوانی نوار شماره ۲ داریم:

در ابتدا:

<?php if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar(2) ) : ?>

• حالت دوم (کدنویسی متفاوت):

برای این حالت به‌تعداد نوارکناری‌هایی که می‌خواهیم تعریف کنیم باید از تابع register_sidebar استفاده کنیم و هر نوار را به‌دلخواه نامگذاری کنیم.

برای مثال من دو نوار می‌خوهم تعریف کنم که نام یکی را “Avali” و نام دیگری را هم “Dowomi” می‌گذارم، که اولین نوارکناری به‌صورت لیستی است و نوار دوم به‌صورت غیرلیستی، در فایل functions.php می‌نویسیم:

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'Avali'
	));
	register_sidebar(array(
		'name' => 'Dowomi',
		'before_widget' => 'BEFORE_WIDGETS_CODE',
        'after_widget' => 'AFTER_WIDGETS_CODE',
        'before_title' => 'BEFORE_WIDGETS_TITLE_CODE',
        'after_title' => 'AFTER_WIDGETS_TITLE_CODE'
	));
}

بدین‌ترتیب دو نوارکناری با نام‌های Avali و Dowomi تعریف کردیم، حال برای فرخوانی آنها در قالب خود طبق معمول از تابع dynamic_sidebar استفاده می‌کنیم، و نام نوارکناری موردنظرمان را به‌عنوان آرگومان ورودی تابع معرفی می‌کنیم.

برای فراخوانی اولین نوارکناری داریم:

< ?php if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('Avali') ) : ?>
	محتویات نوارکناری اول در حالت عادی
< ?php endif; ?>

و برای دومی هم داریم:

< ?php if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('Dowomi') ) : ?>
	محتویات نوارکناری دوم در حالت عادی
< ?php endif; ?>

تموم شد، همین! :)

مرتبط:
Widgets چیست و چگونه آن‌را نصب کنیم؟
چگونه قالب‌های خود را با Widgets هماهنگ کنیم؟

 

با فرض بر اینکه شما 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

 

از سر بیکاری نشستم قالب Almost Spring رو رفع ایراد و فارسی کردم، اسمشو هم گذاشتم «بهار»!

دانلود