Как подключить bootstrap к вордпресс

Опубликовано: 08.10.2017

видео Как подключить bootstrap к вордпресс

HTML-верстка сайта на Bootstrap | #1 Подключение Bootstrap

Сегодня рассмотрим как подключить к любимому нами вордпрессу не менее любимый bootstrap 3. На базе этого фреймворка гораздо удобнее верстать темы, нежели без него. Сетка, хлебные крошки, типографика, и прочее, прочее.



Подключение CSS версии

Первым делом качаем сам бутстрап отсюда http://getbootstrap.com/ Нас интересует css версия без исходных кодов. (когда нибудь позже опишу как работать с бутстрапом с помощью SASS).

Минимальная структура шаблона обычно такая:

"wp-content/themes/our-theme/css" "wp-content/themes/our-theme/js" "wp-content/themes/our-theme/index.php" "wp-content/themes/our-theme/functions.php" "wp-content/themes/our-theme/style.css"

В скачанном архиве bootstrap берем файлик «/css/bootstrap.min.css» и закидываем его в наш шаблон в папку css. Далее «/js/bootstrap.min.js» из ахива копируем в папку js шаблона.


Натяжка шаблона на WordPress | #1

Осталось подключить. Для этого в файлике functions.php подключаем нужные скрипты и стили.

<? // Bootstrap Styles if( !function_exists( 'display_our_styles' ) ) { function display_our_styles() { /** Bootstrap Style **/ wp_register_style( 'bootstrap', get_template_directory_uri . '/css/bootstrap.min.css', array(), '', 'all' ); wp_enqueue_style( 'bootstrap' ); } if (!is_admin()) { add_action('wp_enqueue_scripts', 'display_our_styles'); } } // Bootstrap Scripts if( !function_exists( 'our_display_scripts' ) ) { function our_display_scripts() { wp_register_script( 'bootstrap', THEME_DIR_URI . '/js/bootstrap.min.js', '', '', true); wp_enqueue_script('bootstrap'); } if (!is_admin()) { //add_action('wp_enqueue_scripts', 'our_display_scripts'); } }

Пояснения к коду — стандартное подключение скриптов и стилей, на странице админки бутстрап нам не нужен, поэтому такое условие. Теперь можно работать с стилями bootstrap. Например в index.php выведем сайдбар и цикл с записями.


Разработка сайта с нуля. Перенос HTML сайта на Wordpress. Часть #22.

<? get_header(); ?> <div class="container"> <div class="row"> <aside class="col-sm-4 sidebar"> <!-- Тут сайдбар --> </aside> <section class="col-sm-8 content"> <? if (have_posts()) : ?> <div class="row"> <? while (have_posts()) : the_post(); ?> <article class="col-sm-4 post"> <h2><? the_title(); ?></h2> <? the_content(); ?> <a href="<? the_permalink(); ?>" >Читать далее...</a> </article> <? endwhile; ?> </div> <? endif; ?> </section> </div> </div> <? get_footer(); ?>