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

بوت استرپ یکی از معروف ترین فریم ورک های طراحی فرونت اند (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>';
    مطلب رو به اشتراک بگذارید
    ۹دیدگاه
    در بحث‌‌ پیرامون این مقاله شرکت کنید!
    ارسال دیدگاه
    • avatar

      افشین

      سه شنبه ۴ دی ۱۳۹۷ ۱۱:۲۷ ق٫ظ

      چجوری از تابع wp_get_nav_menu_items استفاده کنیم

      • مهرشاد درزی

        مهرشاد درزی

        دوشنبه ۱۷ دی ۱۳۹۷ ۱:۵۱ ب٫ظ

        در مستندات وردپرس به طور کامل شرح داده شده است

    • avatar

      علی پوری

      پنجشنبه ۲۷ دی ۱۳۹۷ ۲:۰۲ ب٫ظ

      مزخرفترین آموزشی که تا حالا دیدم!

      • مهرشاد درزی

        مهرشاد درزی

        سه شنبه ۲ بهمن ۱۳۹۷ ۱۰:۴۴ ق٫ظ

        دوست عزیز شما چه مشکلی در زمینه برنامه نویسی قالب وردپرس با بوت استرپ دارید ؟ میتونید بگید تا راهنماییتون کنم

      • avatar

        مسعود

        جمعه ۱۴ تیر ۱۳۹۸ ۵:۱۹ ب٫ظ

        سایت شما رو بوک مارک کردم. خیلی خوب بود فقط بیشتر توضیح میدادید بهتر بود. کار من انجام شد.
        ممنون

    • avatar

      محمد خضری

      جمعه ۲۱ تیر ۱۳۹۸ ۳:۳۷ ب٫ظ

      ممنون از این آموزش خوب و دیگر مقالات و آموزش ها

    • avatar

      علی نوروزی

      یکشنبه ۳۰ تیر ۱۳۹۸ ۱۱:۱۵ ق٫ظ

      سلام ممنون بابت آموزشتون
      اگه کامنت فرم و کامت تمپلیت رو هم اضافه کنید که چطور با بوت استرپ بهش استایل بدیم دیگه محشر میشه :)

    • avatar

      مونا

      چهارشنبه ۱۴ اسفند ۱۳۹۸ ۳:۴۰ ب٫ظ

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

      • مهرشاد درزی

        مهرشاد درزی

        پنجشنبه ۱۵ اسفند ۱۳۹۸ ۷:۴۶ ب٫ظ

        بوت استرپ یک فریم ورک Front هست که بسیاری از متخصصین دنیا روی آن کار کرده اند. پیشنهاد من اینه که اگر در بخش فرونت به تسلط کافی رسیدی که بتونید تمامی موارد رو بصورت Code Base بنویسید صد درد نوشتن از ابتدا به نفع شما خواهد بود در غیر این صورت حتما از بوت استرپ استفاده کنید.حتما از هم در زمان استفاده از بوت استرپ اون رو customize کنید تا کدهای اضافی Css تولید نشه و سرعت لود سایتت پایین نیاد.

    آکادمی وردپرس واقعی

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

    در دوره جامع WP-CLI یاد خواهید گرفت، به شکل کاملا حرفه ای و با سرعت بیش تر یک یا چند وب سایت وردپرسی خود را مدیریت کنید.عملیات تکراری در مدیریت وردپرس را برای کاهش هدر رفت زمان خود سیستم سازی کنید. وردپرس شما در حین کار با خط فرمان فشار کم تری به سرور ایجاد می کند و این رویکرد می تواند وب سایت شما را بدون نقص و با سرعت عالی ارائه دهد
    • محتوای آموزشی: ۴۶ جلسه آموزشی شامل ۱۶ ساعت ویدیو آموزشی به همراه تمرینات و فایل PDF خلاصه محتوا
    • پروژه عملی دوره: نصب و مدیریت کامل بخش های یک استارتاپ وردپرس در هاست
    • کلاس رفع اشکال: کلاس آنلاین ۳۰ دقیقه ای در پایان دوره به صورت کاملا خصوصی با استاد درزی برای تثبیت محتوا و رفع اشکالات دانشجو
    ۳,۶۹۷,۰۰۰ تومان
    سرویس ها و خدمات وردپرس

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

    اتصال و هماهنگی بخش محصولات ، و سفارشات پنل فروشندگان دیجی کالا با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول و مدیریت لیست سفارشات دیجی کالا در مدیریت وردپرس
    ۱,۲۵۰,۰۰۰ ۱,۰۰۰,۰۰۰ تومان

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

    قابلیت استعلام در سامانه اعتبار سنجی اشخاص حقیقی و حقوقی برای پرداخت های اعتباری در پنل فروشگاه ووکامرس بر اساس کد ملی و شماره همراه مشتریان وردپرس
    ۴,۵۰۰,۰۰۰ ۲,۸۷۰,۰۰۰ تومان

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

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار حسابداری سپیدار از شرکت همکاران سیستم با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۶,۵۰۰,۰۰۰ ۱۳,۴۷۰,۰۰۰ تومان

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

    اتصال دو طرفه بخش انبارداری یا محصولات ، مشتریان و فاکتور های نرم افزار حسابداری هلو با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۸,۰۰۰,۰۰۰ ۱۳,۸۴۰,۰۰۰ تومان

    اتصال نرم افزار حسابداری مهر باستان به افزونه فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار جسابداری مهر باستان با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۲,۰۰۰,۰۰۰ ۸,۵۶۷,۰۰۰ تومان

    اتصال نرم افزار حسابداری دشت همکاران سیستم به افزونه فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات ، مشتریان و فاکتور های نرم افزار حسابداری دشت همکاران سیستم با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۸,۰۰۰,۰۰۰ ۶,۴۷۰,۰۰۰ تومان

    اتصال نرم افزار حسابداری باران به افزونه فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات ، مشتریان و فاکتور های نرم افزار حسابداری باران با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۰,۰۰۰,۰۰۰ ۸,۴۳۰,۰۰۰ تومان

    اتصال نرم افزار حسابداری کیان نور رایانه به فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار حسابداری کیان نور رایانه با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۲,۰۰۰,۰۰۰ ۹,۵۰۰,۰۰۰ تومان

    اتصال نرم افزار حسابداری ابری رادیکال به افزونه فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار حسابداری ابری رادیکال با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۸۰۰,۰۰۰ ۴۹۷,۰۰۰ تومان

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

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار حسابداری ترنج رهیافت با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۸,۰۰۰,۰۰۰ ۵,۵۹۷,۰۰۰ تومان

    اتصال نرم افزار حسابداری گیو به افزونه فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار جامع حسابداری گیو با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۵,۰۰۰,۰۰۰ تومان

    اتصال استاندارد رسانه های وردپرس ، فایل های ووکامرس ، EDD و گرویتی فرم به هاست دانلود

    افزایش هشتاد درصدی سرعت وب سایت های وردپرس با اتصال تصاویر ، ویدیو ، صوت و فایل های فروشگاه ووکامرس ، Easy Digital Downloads و گرویتی فرم به هاست دانلود با قابلیت تغییر لینک اتوماتیک رسانه ها در محتوا و محافظ از سرقت فایل فروشی
    ۱,۲۵۰,۰۰۰ ۱,۰۰۰,۰۰۰ تومان

    اتصال نرم افزار حسابداری راهکاران همکاران سیستم به افزونه فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات ، مشتریان و فاکتور های نرم افزار حسابداری راهکاران از شرکت همکاران سیستم با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۴,۰۰۰,۰۰۰ ۹,۶۳۰,۰۰۰ تومان