طراحی قالب وردپرس (فصل دوم – جلسه سوم) : ساخت ستون های کناری

‏  7 دقیقه
۲۵ شهریور ۱۳۹۲
طراحی قالب وردپرس (فصل دوم – جلسه سوم) : ساخت ستون های کناری

در جلسه قبلی، کدهای هدر را نوشتیم و توانستیم آن‌ها را از یک فایل جدا در صفحه index لود کنیم، در این جلسه ستون‌های کناری (sidebars) را با استفاده از توابع وردپرس داینامیک کرده، سپس ویژگی ابزارک‌ها و مدیریت پیوندها را با استفاده از فایل functions فعال خواهیم کرد.

طبق روال آموزش، ابتدا فایل index را در ویرایشگر کد و قالب را نیز در مرورگر برای مشاهده نتیجه باز کنید.

از ستون کناری سمت راست شروع می‌کنیم : ابتدا گزینه‌های لیست، یعنی تگ‌های li را   از بلوک موضوعات و آخرین مطالب پاک کنید.

در وردپرس برای گرفتن لیست موضوعات سایت از تابعی به نام wp_list_categories استفاده می‌شود. حال شما نیز این تابع را درون تگ ul مربوط به بلوک موضوعات قرار دهید :

<div class="block">

<h4>موضوعات</h4>

<div class="block-content">

<ul>

<?php wp_list_categories(); ?>

</ul>

</div>

</div>

نتیجه کد در مرورگر :

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

<?php wp_list_categories('title_li='); ?>

حال به بخش مدیریت وردپرس رفته و چند دسته جدید ایجاد کنید (مسیر : نوشته‌ها > دسته ها).

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

<?php wp_list_categories('title_li=&hide_empty=0'); ?>

Hide_empty دو مقدار 0 و 1 را می‌گیرد که 0 به معنای نمایش و 1 به معنای عدم نمایش، که مقدار پیشفرض نیز می‌باشد.

درضمن اگر می‌خواهید که تعداد مطالب هر دسته را نیز در جلوی آن نمایش دهید، باید از خصوصیت show_count استفاده کنید، : به شکل زیر

<?php wp_list_categories('title_li=&hide_empty=0&show_count=1'); ?>

نکته :

کاراکتر & که در میان تنظیمات تابع قرار می‌دهیم، جهت جدا کردن گزینه‌ها از یک دیگر است

خب حال نوبت به آخرین مطالب می‌رسد، برای نمایش آخرین مطالب از تابع wp_get_archives استفاده می‌کنیم :

<div class="block">

<h4 class="block-title">آخرین مطالب</h4>

<div class="block-content">

<ul>

<?php wp_get_archives(); ?>

</ul>

</div>

</div>

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

<?php wp_get_archives('type=postbypost'); ?>

در تابع فوق تعیین کرده ایم که آرشیو از نوع پست به پست باشد، مقدار پیشفرض این گزینه مقدار monthly است، برای همین ابتدا آرشیو ماهانه را نشان داد. درضمن این گزینه مقادیر yearly , daily  و weekly که آرشیو سالانه هفتگی و روزانه را می‌توان نمایش داد.

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

<?php wp_get_archives('type=postbypost&limit=5'); ?>

Limit باعث خواهد شد که تعداد مطالب نمایش محدود شود که من در اینجا مقدار ان را 5 قرار داده ام ، تا فقط 5 مطلب اخیر نمایش داده شوند.

خب تا اینجای کار، توانستیم که اطلاعات مورد نیازمان را با استفاده از توابع وردپرس بگیریم، حال اگر خواستیم که بلوک‌های دیگری را نیز اضافه کنیم حتما باید، کدها را ویرایش کنیم و باز تابع وردپرس بنویسیم! اما اگر بخواهیم که این کار را نیز خود وردپرس برایمان انجام دهد چطور؟! در این صورت باید ابزارک‌ها را برای پوسته فعال کنیم.

در حالت عادی اگر به صفحه ابزارک‌ها بروید با این پیغام مواجه خواهید شد :

 برای این کار نیاز به فایل functions داریم. پس ابتدا یک فایل جدید در کنار فایل index.php با نام functions.php ایجاد کنید.  و کدهای زیر را درون آن قرار دهید

<?php

// If Dynamic Sidebar Exists

if(function_exists('register_sidebar')) {

// Define Sidebar Widget Area 1

register_sidebar(array(

'name' => 'Right Sidebar',

'description' => __( 'ستون سمت راست'),

'before_widget' => '<div class="block">',

'before_title' => '<h4 class="block-title">',

'after_title' => '</h4> <div>',

'after_widget' => '</div></div>'

));

}

?>

حال فایل را با اینکودینگ utf-8 ذخیره کرده و سپس به مدیریت وردپرس بروید، خواهید دید که بخش ابزارک‌ها نیز فعال شده است (مسیر : نمایش > ابزارک ها).

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

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

<?php dynamic_sidebar('Right Sidebar'); ?>

حال اگر قالب را ریفرش کنید می‌بینید که دیگر بلوک‌ها نمایش داده شده اند.

درضمن می‌توانید کدهای آخرین مطالب و موضوعات را پاک کرده، و آن‌ها را از طریق ابزارک‌ها اضافه کنید. به علاوه اینکه می‌توانید کدهای تبلیغات متنی را نیز با استفاده از ابزار متن به ستون اضافه کنید و کدهای آن را از فایل index.php پاک کنید :

بعد از اینکار تنها چیزی که از کدهای Right Sidebar در فایل index.php باقی مانده است کدهای زیر است :

<!-- Start Right Sidebar -->

<div id="right-sidebar">

<?php dynamic_sidebar('Right Sidebar'); ?>

</div>

<!-- End Right Sidebar -->

حال یک فایل جدید با نام right-sidebar.php در کنار فایل index.php ایجاد کنید و کدهای فوق را از فایل index به آن انتقال دهید و بجای آن‌ها در فایل index کد زیر را قرار دهید تا فایل right-sidebar.php در فایل index.php لود شود :

<?php get_template_part('right-sidebar'); ?>

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

// Define Sidebar Widget Area 2

register_sidebar(array(

'name' => 'Left Sidebar',

'description' => __( 'ستون سمت چپ'),

'before_widget' => '<div class="block">',

'before_title' => '<h4 class="block-title">',

'after_title' => '</h4> <div>',

'after_widget' => '</div></div>'

));

کد فوق را بعد کدهای ستون سمت راست در داخل حلقه if قرار دهید، سپس به فایل index.php برگردید و کد زیر را قبل یا بعد از بلوک تبلیغات یا در کل هر جایی از ستون سمت چپ که خواستید برای نمایش ابزارها قرار دهید :

<?php dynamic_sidebar('Left Sidebar'); ?>

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

خب برای این کار کد زیر را در فایل functions.php قبل از تگ ?> قرار دهید :

//Activate the Link Manager built in to the WordPress admin

add_filter( 'pre_option_link_manager_enabled', '__return_true' );

بعد از انجام اینکار اگر به بخش مدیریت وردپرس بروید خواهید دید که بخش پیوندها نیز فعال شده است. در آن جا می‌توانید پیوندهای جدید ایجاد کنید، اگر به بخش ابزارک‌ها بروید، خواهید دید که ابزارک پیوندها نیز فعال شده، آن را به داخل left sidebar بکشید در ستون سمت چپ نمایش داده شود :

حال در فایل index.php از کدهای ستون سمت چپ فقط کدهای زیر باقی مانده است :

<!-- Start Left Sidebar -->

<div id="left-sidebar">

<div class="block">

<h4 class="block-title">تبلیغات</h4>

<div class="block-content">

<a href="#"><img src="<?php bloginfo('template_url'); ?>/images/ads-150.png" width="180" height="150" alt="تبلیغات" title="تبلیغات" /></a>

<a href="#"><img src="<?php bloginfo('template_url'); ?>/images/ads-300.png" width="180" height="300" alt="تبلیغات" title="تبلیغات" /></a>

</div>

</div>

<?php dynamic_sidebar('Left Sidebar'); ?>

</div>

<!-- End Left Sidebar -->

آن‌ها به یک فایل جدید با نام left-sidebar.php انتقال دهید و به جای آن‌ها کد زیر را در فایل index قرار دهید تا کدهای فایل left-sidebar.php در فایل index.php لود شوند.

<?php get_template_part('left-sidebar'); ?>

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

محمد اصلاحی

اونجا که گفتید برای نمای ابزارک ها باید کد رو قرار بدیم
خوب این فقط اسم بلوک رو نشون میده
برای نمایش بلوک و محتواش باید چیکار کنیم؟

WEBIG

سلام
خیلی اسمی هستش !
میگم اگه میشه یک آموزش کلی بذارید برای طراحی یک قالب بسیار حرفه ای وردپرسی . حالا این یک ایده هستش ولی بعدش به جای این که خیلی توضیح بدهید بگویید که ابتدا حتما سری آموزشی طراحی قالب وردپرس را باید بخوانند که با مشکل رو بر رو نشوید . دیگر هم راحت می توانید پیش بروید و کم تر به جزعیات بپردازید …
موفق باشید . سایتتون اسمیه ! اسمی 😉

Shahoo

درود
من وقتی این تغیرات را اعمال می کنم برای تمام پوسته هایی که دارم اعمال میشود!!!
مشکلم از کجاست؟؟

سجاد دریس

یعنی شما یه تغییر توی یک قالب انجام میدین، رو همه ی قالب ها اعمال میشه؟!!
چنین چیزی غیر ممکنه دوست عزیز!

بهرام

سلام خسته نباشید
سوالم در مورد sidebar widget area تو function هست. تو خط 9 یک دیو باز شده که تو 15 هم بسته شده که کل ویدجت رو نگه میداره. اما اون دیو دیگه که تو خط 13 باز و 15 بسته شده واسه چیه؟

سجاد دریس

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

امین

خیلی مفید بود..
برای تابع wp_get_archives تنظیماتی وجود داره که بشه فقط مطالب (پست ها) اخیر یک دسته ی خاص رو نمایش بده؟
اگه نداره لطف کن راهنمایی کن از کدوم تابع میتونم همچین کاری رو انجام بدم…تشکر

سجاد دریس

سلام.
خیر با این تابع نمیشه.
برای اینکار میتونید از تابع get_posts استفاده کنید.
به طور مثال :

get_posts(&#8216;category=2&#8217;);
میلاد عابدی

با عرض سلام
من ستون ها را ایجاد کرد. اما چیز هایی که داخل اون بلوک باید باشه بیرون اون نشون می ده علتش چیه 😐 😥

سجاد دریس

کدهایی که بایستی درون فایل فانکشن قرار بگیرند رو درست نوشتین؟

abbas ka

آقا سجاد بابت این آموزش تشکر
حالا اگه بخواهیم بلوک در پایین صفحه داشته باشم باید از چه کدی استفاده کرد؟

امین

اقا سجاد واقعا دمت گرم 😯

hajian1

سلام
تصمیم گرفته بودم درانتهای این آموزش قالب رادریکی ازسرورهاراه اندازی کنم وباکمک شماسایتی راه اندازی کنم لذاخواهشمندم ازاین بیشترادامه آموزش رابه درازامنتهی لطفاًنکنید
باتشکر

یاسر داودفر

با سلام . یاسر داودفر هستم از سایت yaspsd.ir
واقعا آموزشاتون عالیه..
مرسی.امیدوارم موفق باشین

hajian1

سلام
باعنایت به مورذی که مطرح نمودم
ابزارک هایی مثل ابزارک متن وقتی فعال می شونددقسمت تبلیغات متنی قرارنمی گیرندوتوقسمت سایدبارداخل
آخرین مطلب قرارمیگیره ونظم سایدباررابهم می زنه
درانتهاازطریق دیریم ویورکدهای تبلیغات متنی وپیوندهاراواردوسیوکردم درنتیجه درمحل خودکه درطراحی قالب قبلاً
تنظیم شده بودبه درستی درمحل های تعین شده قرارگرفتند
اکنون که ازگزینه(افزودن متن)ابزارک هااستفاده نشده به دلیل عدم موفقیتی که دربالاذکرشده بود
دروردپرس بامشگلی مواجه نمشوم؟
باتشکرمنتظرجواب کلی هستم

hajian1

سلام
درصورت امکان ادامه این آموزش رادرسایت قراردهید
باتشکر

صندوق فروشگاهی

خیلی ممنون از آموزش تون من زبون آموزش شمارو دوست دارم. ❗

محمد رمضانی

سلام اموزش بعدی اماده نشد؟ منتظریماا 🙄

hajian1

سلام
برای اطمینان تبایغ متنی رابه صورتhtmlدردرون ابزارک متن در5ردیف ایجادکردم وپس ازانتشارتبلیغ متنی دردرون دل(آخرین مطلب)قرارگرفت
البته باعنایت به اینکه باابزارک ها ودیگرامکانات وسیع وردپرس به تازگی برخوردکرده ام دلیل براشتباه باشد
برای این منظوراگرمنبعی برای یادگیری ابزارک ها،دسته ها،افزونه ها،افزودن،ویرایشگروتنظیمات وردپرس اطلاع داریدلطفاًدرصورت امکان جهت پیش گیری ازاشتباهات معرفی نمایید
باتشکرفراوان

جواد عباسی

سلام مجدد
ممنون میشم پیگیری کنید.