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

فیلم آموزشی طراحی قالب وردپرس – بخش سایدبار

آموزش طراحی قالب وردپرس – بخش سایدبار

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

// فعال کردن بخش ابزارک ها
if ( function_exists('register_sidebar') )
register_sidebar(array(
      'name' => 'ابزارک های سایدبار', // نام سایدبار اینجا قرار میگیرد
      'id'   => 'sidebar-widgets', // آی دی مربوط به سایدبار برای فراخوانی در پوسته
      'description'   => 'ابزارک های این ناحیه در سایدبار نمایش داده خواهند شد', // توضیحات مربوط به سایدبار
      'before_widget' => '<div class="sidebar-widget">', // مقداری که قبل از هر بلوک قرار می گیرد
      'after_widget'  => '</div>', // مقداری که بعد از هر بلوک قرار می گیرد
      'before_title'  => '<h3 class="widget-title">', // مقداری که قبل از عنوان ابزارک قرار می گیرد
      'after_title'   => '</h3>', // مقداری که بعد از عنوان ابزارک قرار می گیرد
     ));
	 
	 register_sidebar(array(
      'name' => 'ابزارک های فوتر', // نام سایدبار اینجا قرار میگیرد
      'id'   => 'footer-widgets', // آی دی مربوط به سایدبار برای فراخوانی در پوسته
      'description'   => 'ابزارک های این ناحیه در فوتر نمایش داده خواهند شد', // توضیحات مربوط به سایدبار
      'before_widget' => '<div class="footer-widgets col-md-4 col-sm-12 col-xs-12">',  // مقداری که قبل از هر بلوک قرار می گیرد
      'after_widget'  => '</div>',  // مقداری که بعد از هر بلوک قرار می گیرد
      'before_title'  => '<h3 class="widget-title">', // مقداری که قبل از عنوان ابزارک قرار می گیرد
      'after_title'   => '</h3>', // مقداری که بعد از عنوان ابزارک قرار می گیرد
     ));

توضیحات کد رو به صورت comment در داخل کد بالا گذاشتم

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

با رفتن به بخش ابزارک ها باید دو ابزارک به نام “ابزارک های سایدبار” و “ابزارک های فوتر” وجود داشته باشد در غیر اینصورت احتمالا قسمتی از کدهارو اشتباهی گذاشتید.

فراخوانی سایدبار در پوسته وردپرس

فایل index.php رو باز کنید و div که کلاس sidebar داره رو پیدا کرده و پاک کنید و به جاش کد زیر رو قرار بدید

 <?php if ( is_active_sidebar( 'sidebar-widgets' ) ) : // بررسی می کند که آیا ابزارکی وجود دارد یا خیر ?>
	 <div class="sidebar col-md-3 col-sm-12 col-xs-12 pull-left">
		<?php dynamic_sidebar( 'sidebar-widgets' ); // فراخوانی ابزارک ?>
	</div>
<?php endif; ?>

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

استایلی که براش قرار دادم اینه:

/**************** Sidebar ********************/

.sidebar-widget {
background: #fff;
padding: 10px;
margin-top: 20px;
}
 
.widget-title {
    margin: 3px 0 20px;
    font-size: 18px;
}

.sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget a {
    color: #222;
    text-decoration: none;
}

.sidebar-widget a:hover {
    text-decoration: none;
}

.sidebar-widget ul li {
    position: relative;
    display: block;
    padding-right: 20px;
    border-bottom: 1px dashed #e74c3c59;
    padding-bottom: 7px;
    margin-bottom: 7px;
}

.sidebar-widget ul li:before {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    background: #e74c3c;
    border-radius: 50%;
    right: 7px;
    top: 12px;
}

استایلش ساده ست و چیزی نداره. میتونید مطابق با سلیقتون استایل اضافه کنید

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

هر جایی به مشکل خوردید یا سوالی داشتید از واسم دیدگاه بزارید در اسرع وقت حتما پاسخ میدم

موفق باشید

آموزش طراحی قالب وردپرس – قدم اول : دانلود نرم افزار های مورد نیاز

آموزش طراحی قالب وردپرس – قدم دوم: راه اندازه لوکاه هاست و نصب وردپرس

آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش اول

آموزش طراحی قالب وردپرس – قدم سوم: ساخت فایل header.php – بخش دوم

آموزش طراحی قالب وردپرس – قدم چهارم: کار با حلقه ها

آموزش طراحی قالب وردپرس – قدم ششم : فرم جستجو

آموزش طراحی قالب وردپرس – قدم هفتم بخش 1: ساخت فایل single.php

آموزش طراحی قالب وردپرس – قدم هفتم بخش 2: ساخت باکس درباره نویسنده

آموزش طراحی قالب وردپرس – قدم هفتم بخش 3: ساخت بخش دیدگاه ها

+4

3 دیدگاه برای “آموزش طراحی قالب وردپرس – سایدبار

  • محسن
    - ۴ فروردین , ۱۳۹۵

    ممنون خیلی کمک کرد

    ۰
  • مهدی
    - ۹ خرداد , ۱۳۹۵

    چی کار کنم ساید بار بیاد کنار ولی برای من میره زیره پستام amoozefa.ir

    ۰
    • الناز
      - ۹ خرداد , ۱۳۹۵

      دوست عزیز تگ div رو جای اشتباهی بستی

      ۰

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --