وب آکادمی

مرجع آموزش طراحی و برنامه نویسی وب

جلسه چهاردهم – استفاده از بوت استرپ برای ساخت پوسته وردپرس

دسته بندی:آموزش ساخت قالب وردپرس تاریخ انتشار: 27 مهر 1397 برچسب ها : برچسب‌ها:, , , , , , ,

128در جلسات قبل برای رعایت سادگی و قابل فهم بودن در طراحی صفحات پوسته وردپرس از جدول استفاده کردیم. با توجه به اینکه طراحی صفحات وب بر اساس جداول، منسوخ شده و معمولاً از تگ های div و کلاس های استایل شیت برای طراحی استفاده می کنند، از طرفی با کمک چارچوب یا کتابخانه بوت استرپ طراحی صفحات راحت تر و سریعتر و در عین حال واکنش پذیر (responsive) می شود. برای ادامه آموزش ها از بوت استرپ استفاده خواهیم کرد.

قبل از اینکه بتوانید از بوت استرپ استفاده کنیم باید فایل های مربوط به آن را در پوشه پوسته کپی کنیم. کتابخانه بوت استرپ معمولاً بصورت یک پوشه (فرضاً با نام bs ) حاوی سه زیرپوشه است با اسامی:

  • زیرپوشه ی css برای نگهداری فایل های استایل شیت
  • زیر پوشه ی js برای نگهداری فایل های کدنویسی جاوااسکریپت و
  • زیرپوشه ی fonts برای نگهداری فایل های فونت

حالا می توانیم در بخش هدر صفحه index.php ، فایل های بوت استرپ را معرفی کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> page title </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/bs/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/bs/css/bootstrap-rtl.css">
<script src="<?php bloginfo('template_url'); ?>/bs/js/jquery.js"></script>
<script src="<?php bloginfo('template_url'); ?>/bs/js/bootstrap.js"></script>
</head>
<body><div class="container-fluid ">
<div class="container">
<div class="row">
<div class="col-sm-3">
sidebar
</div>
<div class="col-sm-9">
main area
</div>
</div>
</div>
</div><div class="container-fluid footer">
<div class="container">
footer
</div>
</div>
</body>
</html>

برای استفاده از بوت استرپ در بخش head صفحه باید فایل های آنرا معرفی کنیم. فایل های css و js آن با استفاده از تگ های link و تگ های script معرفی شده اند.

برای رعایت سادگی و قابل فهم بودن توابع دیگری که قبلاً معرفی شده و باید در بخش head نوشته می شدند صرف نظر شده است.

در محلی از فایل index.php که عبارت sidebar نوشته شده باید محتوای ستون کناری قرار داده شود و در محل عبارت main area باید حلقه اصلی وردپرس برای نمایش لیست نوشته ها نوشته شود. همچنین به جای عبارت footer باید اطلاعات فوتر قرار بگیرد.

همچنین می توان بخش های مختلف فایل index.php را فایل های جداگانه قرار داد که در این صورت با در نظرگرفتن همه توابع معرفی و استفاده شده از قبل فایل های زیر را خواهیم داشت:

محتوای فایل header.php :
<!DOCTYPE html>
<html <?php language_attributes(); ?> >
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/bs/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/bs/css/bootstrap-rtl.css">
<script src="<?php bloginfo('template_url'); ?>/bs/js/jquery.js"></script>
<script src="<?php bloginfo('template_url'); ?>/bs/js/bootstrap.js"></script>
<?php wp_head(); ?></head>
<body>
<div class="container-fluid navbar navbar-default " style="margin:0px;">
<div class="container">
<?php
wp_nav_menu( array ('theme_location'=>'my-top-menu',
'menu' =>'fehrest1',
'menu_class' =>'top-menu' ) );
?>
</div>
</div><div class="container-fluid header">
<div class="container">
<h1> <?php bloginfo('name'); ?>  </h1>
<h4> <?php bloginfo('description'); ?>  </h4>
</div>
</div>

محتوای فایل footer.php :
<div class="container-fluid footer">
<div class="container">
طراحی شده توسط کدنویسان
<br />
<?php dynamic_sidebar('footer1'); ?>
</div>
</div><?php wp_footer(); ?>
</body>
</html>

محتوای فایل sidebar.php
<?php dynamic_sidebar('sidebar1'); ?><div class="side-panel">
<div class="side-title"> لیست دسته ها </div>
<?php wp_list_categories('hide_empty=0&title_li='); ?>
</div><div class="side-panel">
<div class="side-title"> لیست برگه ها </div>
<?php wp_list_pages('hide_empty=0&title_li='); ?>
</div><div class="side-panel">
<div class="side-title"> آرشیو مطالب </div>
<?php wp_get_archives('limit=5&type=monthly'); ?>
</div>

محتوای فایل index.php
<?php get_header(); ?>
<div class="container-fluid ">
<div class="container">
<div class="row">
<div class="col-sm-3">
<?php get_sidebar(); ?>
</div>
<div class="col-sm-9">
<?php if(have_posts() ) : ?>
<h1>  لیست نوشته ها</h1>
<?php while( have_posts() ) : the_post(); ?>
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<h4>»<?php the_category('/'); ?> </h4>
<p>
<?php
if ( has_post_thumbnail() )
the_post_thumbnail('small-size' , array('align'=>'right' ,'alt'=>get_the_title() ));
the_excerpt(); ?>
[ <a href="<?php the_permalink(); ?>">ادامه نوشته </a>]
</p>
<div style="clear:both"></div>
<?php endwhile; ?>
<?php else : ?>
<h1> نوشته ای پیدا نشد </h1>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>

محتوای فایل functions.php
<?php
add_theme_support("post-thumbnails");
add_image_size('small-size' , 100 , 100 , true );
add_image_size('large-size' , 300 , 300 , true );
if ( function_exists(register_sidebar) ) {
register_sidebar( array(
'name' =>'sidebar1',
'description'=>' سایدبار شماره یک',
'before_widget'=>'<div class="side-panel">' ,
'after_widget' =>'</div>',
'before_title'=>'<div class="side-title">',
'after_title'=>'</div>'));
register_sidebar( array(
'name' =>'footer1',
'description'=>' فوتر برای نوشتن کپی رایت',
'before_widget'=>'' ,
'after_widget' =>'',
'before_title'=>'',
'after_title'=>''));
}function register_my_menu()
{
register_nav_menu('my-top-menu',' منوی بالای سایت من');
register_nav_menu('my-main-menu',' منوی اصلی سایت من');
}
add_action( 'init' , 'register_my_menu');?>

نتیجه طراحی پوسته با استفاده از بوت استرپ را در شکل زیر مشاهده می کنید:

طراحی پوسته وردپرس با بوت استرپ

با استفاده از لینک های زیر می توانید فایل های پوسته با کمک جدول و بوت استرپ را دریفات کنید :

لینک دریافت پوسته کدنویسان با استفاده از جداول

لینک دریافت پوسته کدنویسان با استفاده از بوت استرپ

 

دیدگاهتان را بنویسید

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

نه − پنج =