راهنمای طراحی قالب وردپرس با بوت استرپ

بوت استرپ یکی از معروف ترین فریم ورک های طراحی فرونت اند (Front-End) در جهت ساخت وب سایت های واکنش گرا (Responsive) هماهنگ با موبایل و تبلت می باشد.یکی از مواردی که می بایست یک توسعه دهنده وردپرس به استفاده بوت استرپ در وردپرس دقت کند ، نحوه ی استاندارد سازی کدنویسی قالب وردپرس برای خلق یک محصول قدرتمند می باشد.در این مقاله به برخی از این موارد اشاره می کنیم.

سرعت قالب وردپرس با بوت استرپ را جدی بگیرید

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

برای کاهش حجم قالب وردپرس ، به صفحه قابلیت customize بوت استرپ رجوع کنید و مواردی که لزوما در کار شما استفاده نمی شود را حذف کنید و یک نسخه فشرده شده تر و خلاصه بهینه تر آن را دریافت کنید.

به عنوان مثال من همیشه Glyphicons را بطور کامل حذف می کنم .چون در پروژه هایم از آیکون فونت font Awesome استفاده می کنم.و یا اگر در وب سایتی از قابلیت تولتیپ (Tooltip) نخواهم استفاده کنم آن را برمی دارم. شما هم مناسب با پروژه ای که در حال ایجاد آن هستید ، برای طراحی قالب وردپرس با بوت استرپ به سرعت آن توجه زیادی داشته باشید.

اگر از پکیج کامل و RTL شده بوت استرپ استفاده می کنید در این حالت دیگر نمی توانید آن را جایگزین کنید. به همین دلیل پیشنهاد میکنم ابتدا فایل customize شده را دریافت کنید سپس از پکیج بوت استرپ فارسی که تنها شامل دستوراتی است برای راست چین کردن توییتر بوت استرپ.
ابتدا فایل زیر را دریافت کنید :

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

حال برای استفاده می بایست ابتدا فایل اصلی بوت استرپ فشرده شده را ضمیمه صفحه کنید و سپس فایل بوت استرپ فارسی  :

<!-- Original Bootstrap 3.x -->
<link rel="stylesheet" href="bootstrap.css">
<!-- Bootstrap RTL Theme -->
<link rel="stylesheet" href="bootstrap-rtl.css">

آموزش تبدیل منو بوت استرپ به وردپرس

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

آموزش ایجاد منو در وردپرس

ابتدا یک منو جدید در وردپرس تعریف می کنیم این کار را با اضافه کردن تابع register_nav_menu در کد نویسی انجام می دهیم :

add_action( 'after_setup_theme', 'wp_theme_setup' );
function wp_theme_setup() {
        //Create Nav Menu
        register_nav_menu( 'menutop', 'منوی اصلی وب سایت' );
}

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

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

wp_nav_menu([
	'theme_location'    => 'menutop',
	'depth'             => 2,
	'echo'              => true,
	'container'         => '',
	'menu_class'        => 'nav navbar-nav',
]);

ما توسط تابع بالا ، منویی که ایجاد کرده بودیم را نمایش دادیم. اما برای این که syntax آن مطابق با خروجی بوت استر باشد ، نیاز به یک تغییر دهنده یا Walker داریم.ابتدا فایل Bootstrap Walker را در زیر دریافت کنید. بعد از ضمیمه کردن این فایل در قالب ، حال ما می بایست کد بالا را به شکل زیر تغییر دهیم :

دانلود bootstrap Menu Walker WordPress

/* Load Bootstrap Walker */
require_once('get_template_directory() . '/wp_bootstrap_navwalker.php');

/* Show Menu */
wp_nav_menu([
		'theme_location'    => 'menutop',
		'depth'             => 2,
		'echo' => true,
		'container'         => '',
		'menu_class'        => 'nav navbar-nav', 
		'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
		'walker'            => new wp_bootstrap_navwalker())
]);

اگر مثل من حوصله سر و کله زدن با Walker وردپرس ندارید می توانید برای تبدیل منو بوت استرپ در وردپرس از تابع wp_get_nav_menu_items استفاده کنید.من ی نمونه کد برای “ایجاد منو در وردپرس” را در این صفحه Gist قرار دادم و می توانید استفاده کنید.

آموزش تبدیل شماره صفحات بوت استرپ به وردپرس

استفاده از Pagination یا شماره صفحات در وردپرس یکی از موارد الزامی است.اگر به نحوه ی کدنویسی فریم ورک بوت استرپ در بخش Pagination دقت کنید نیاز به یکسری تغییرات در ساختار افزونه شماره صفحات داریم.

در صورتی که از افزونه wp-pagenavi برای ایجاد شماره صفحات در وردپرس استفاده می کنید. کافیست از فیلتر زیر در وردپرس استفاده کنید :

// -------------------
// wp-page navi for bootstrap
// -------------------
add_filter( 'wp_pagenavi', 'ik_pagination', 10, 2 );

//customize the PageNavi HTML before it is output
function ik_pagination($html) {
    $out = '';
    //wrap a's and span's in li's
    $out = str_replace("<div","",$html);
    $out = str_replace("class='wp-pagenavi'>","",$out);
    $out = str_replace("<a","<li><a",$out);
    $out = str_replace("</a>","</a></li>",$out);
    $out = str_replace("<span","<li><span",$out);  
    $out = str_replace("</span>","</span></li>",$out);
    $out = str_replace("</div>","",$out);
  
    return '<ul class="pagination pagination-centered">'.$out.'</ul>';
}

اگر شما یک توسعه دهنده وردپرس هستید .می توانید برای استفاده اصولی از بوت استرپ در تابع paginate_links بصورت زیر استفاده کنید :

<?php
global $wp_query;
$current = max( 1, absint( get_query_var( 'paged' ) ) );
$pagination = paginate_links( array(
	'base' => str_replace( PHP_INT_MAX, '%#%', esc_url( get_pagenum_link( PHP_INT_MAX ) ) ),
	'format' => '?paged=%#%',
	'current' => $current,
	'total' => $wp_query->max_num_pages,
	'type' => 'array',
	'prev_text' => '«',
	'next_text' => '»',
) ); ?>
<?php if ( ! empty( $pagination ) ) : ?>
<ul class="pagination">
	<?php foreach ( $pagination as $key => $page_link ) : ?>
		<li class="paginated_link<?php if ( strpos( $page_link, 'current' ) !== false ) { echo ' active'; } ?>"><?php echo $page_link ?></li>
	<?php endforeach ?>
</ul>
<?php endif ?>

در مثال من بالا من شماره صفحات ، کوئری اصلی وردپرس (Wp_Query WordPress) رو به وسیله تابع paginate_links  نشان دادم. دقیقا همان کاری که افزونه wp-pagenavi انجام می دهد. اما شما می توانید از این تابع در هر Pagination که در مدیریت وردپرس یا چه در افزونه ایجاد میکنید استفاده نمایید.

حتما بخوانید : سرعت پایین وردپرس به دلیل استفاده مستقیم از WP_Query در قالب است !

ایجاد ابزارک widget بوت استرپ در وردپرس

برای ایجاد سایدبار (sidebar) در وردپرس ، در صورتی که از بوت استرپ استفاده می کنید هیچ گزینه ای بهتر از کامپوننت Panel این فریم ورک به عنوان ابزارک وردپرس نیست.

برای ایجاد یک ساید بار در وردپرس ابتدا بدین صورت عمل می کنیم :

add_action( 'widgets_init', 'WPTemplate_widgets_init' );
function WPTemplate_widgets_init() {
	
/*Create Sidebar*/
register_sidebar(array(
        'name' = > 'ساید بار سایت',
        'id' = > 'sidebar_widget',
        'description' = > 'محل ابزارک های اصلی وب سایت',
        'before_widget' = > '<div class="panel panel-primary">',
        'after_widget' = > '</div></div>',
        'before_title' = > '<div class="panel-heading"><h3 class="panel-title">',
        'after_title' = > '</h3></div><div class="panel-body">')
    );
	
}

با فرض این که از یک گرید بوت استرپ به صورت 9 به 3 استفاده کنیم در صفحات.بصورت زیر میتوان ابزارک وردپرس را در قالب بوت استرپ نمایش داد :

echo '<div class="row">';
echo '<div class="col-md-9">';
/* Your Main content */
echo '</div><div class="col-md-3">';
dynamic_sidebar( 'sidebar_widget' );
echo '</div>';
echo '</div>';

پیشنهاد میکنیم این مقالات را هم بخوانید

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

نوار ابزار وردپرس و اصول پیاده سازی دسترسی سریع کاربران با ادمین بار

انواع افزونه وردپرس و دلیل پیدایش ساختار آن ها در هسته وردپرس

دستورات کاربردی خط فرمان ویندوز که هر توسعه دهنده وردپرس باید بداند ؟