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

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

به صورت پیشفرض بخش ابزارک ها در وردپرس فعال نیست. پس در این مرحله هم ابزارک هارو فعال می کنیم و هم دو مکان ابزارک برای سایدبار و فوتر می سازیم. برای این کار باید کد زیر را به 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;
}
 
h3.widget-title {
margin: 3px 0 20px;
font-size: 18px;
}

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

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

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

موفق باشید