Как подключить bootstrap к wordpress — Просто!

Первый способ — простой 

в файле header.php (заголовок) перед функцией head() добавляем подключение  либо сетки (2 сточка кода, обычно это достаточно в 90% случаях), либо js скриптов, либо все подряд, от зависимости, что вам нужно, через сервисы:

<!--  сетка Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Второй способ — тяжелее, для локальных файлов

Для подключения bootstrap  к wordpress локальными файлами:

  1. Cкачать архив библиотеки. (Download Bootstrap)
  2. Распаковать содержимое архива (css, fonts,js)  в свою тему  в «/wp-content/themes/НАЗВАНИЕ_ПАПКИ_ТЕМЫ/bootstrap/

подключить bootstrap   в header.php   перед <?php wp_head(); ?> (чтобы можно было перебивать стили стандартным файлом style.css)

	<link href="/wp-content/themes/НАЗВАНИЕ_ТЕМЫ/bootstrap/css/bootstrap.min.css" rel="stylesheet">	
  	<script src="/wp-content/themes/НАЗВАНИЕ_ТЕМЫ/bootstrap/js/bootstrap.min.js"></script>

Попробуйте вывести  html код во вкладке текст  :

<div class="container">
  <div class = "row">
<div class="col-md-4">111</div>
<div class="col-md-4">222</div>
<div class="col-md-4">333</div>
</div> 
  
</div>

у вас получиться 3 колонки по ширине 33%

! я обычно использую только сетку, и подключаю только файл стилей. Можно подключить файл js  в футере

Почему я советую данный способ подключения bootstrap ?

  1. Во первых, здесь все просто, и это рабочий вариант.
  2. Мне пришлось его использовать в десятках различных сайтах на wordpress.
  3. Также, если вы захотите тему установить на новый сайт, то она не будет конфликтовать.
  4. Если библиотеку подключить выше  <?php wp_head(); ?> то, все стили очень легко меняются в стандартном файле style.css — таким образом, не затрагивая саму библиотеку, что легко способствует ее обновлению.

 

ответы на вопросы

Как  подключить bootstrap через function.php

/**
* add js ans css bootstrap
*/
function wpt_register_js() {
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

 

 

Поделись с друзьями:
Как подключить bootstrap к wordpress — Просто!: 8 комментариев
  1. artem:

    ! я обычно использую только сетку!!!!!!!
    что именно нужно подключить, чтоб пользоваться только сеткой, а стили не трогать?
    спасибо!

    1. allwp:

      для адаптивности достаточно только сетки -это библиотека bootstrap.min.css
      как ее подключить описано в посте, двумя вариантами

  2. Inakentiy:

    как подключить bootstrap через functions.php?

    1. allwp:

      для добавления bootstrap через function.php ответил в конце статьи

  3. ищу информацию по bootstrap, так как на сайте его настройки перебивают заданные файлом css, в админке нет этого файла, в том числе в function.php
    Получается, через ftp смотреть в папке темы?

    1. allwp:

      откройте режим разработки в браузере. посмотрите где находится файл который перебивает стили. через ftp отредактируйте его как нужно.

  4. Алексей:

    Спасибо, автор! Кроме того, что я подключил бутстрап с Вашей помощью, так я еще и свои стили поставил! 🙂 Делал по самому последнему способу, с подключением через functions.php

  5. mk3mk:

    интересно , а что такое jquery.bootstrap.min ??? это помесь jquery с bootstrap? в архиве скачанного boоtstrap есть файлы bootstrap css и есть файлы bootstrap js . А вот насчет jquery.bootstrap — это что-то интересное ….

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *