Очередная статья из рубрики «подключение чего-то к чему-то» На этот раз рассмотрим подключение Bootstrap к wordpress. Если вы интересуетесь этим вопросом, то наверняка понимаете, что обозначают эти слова. Bootstrap — это css-фреймворк, в разы упрощающий нам верстку веб-страниц, а wordpress — сайтовый движок, упрощающий управление сайтами. Обзор фреймворка вы можете почитать здесь.
Как скачать Bootstrap?
Для начала скачайте себе фреймворк. Для этого перейдите на официальный сайт бутстрапа — getbootstrap.com. Он на английском языке, но ничего, не пугайтесь этому. Перейдите на вкладку Getting Started, там вам будет предложено 3 варианта скачивания фреймворка. Скорее всего, вас устроить пока первый вариант.
На данный момент актуальная версия бутстрапа — 3.3.7. Впрочем, вы можете прочитать эту статью через год и тогда уже это будет устаревшая версия. Но способ подключения к wordpress не изменится, поэтому все равно можете читать дальше.
Итак, после скачивания распакуйте архив, там у вас должно быть три папки. Это и есть содержимое фреймворка:
К слову, если вы не хотите скачивать все компоненты фреймворка целиком, а только нужные вам, тогда вам пригодится эта страница:
Customize
На ней вы сможете кастомизировать фреймворк, то есть настроить под себя. Но об этом у меня еще будет подробная статья.
Устанавливаем Bootstrap на wordpress
Во-первых, все три папки нужно скопировать в ваш активный wordpress-шаблон. Для этого соединитесь с сервером через ftp, ssh или панель управления на хостинге, и скиньте эти папки.
Далее в корневой папке активного шаблона найдите файл functions.php. Именно его нам предстоит редактировать, чтобы правильным образом подключить файлы фреймворка. Собственно, чтобы все компоненты бутстрапа работали, необходимо подключить bootstrap.css и bootstrap.js, либо минифицированные копии этих файлов.
Для этого мы создадим новую функцию, которая будет подключать скрипт и стилевой файл. Вот код функции:
function add_bootstrap(){
wp_enqueue_script(‘my_bootstrap_js’, get_template_directory_uri().’/js/bootstrap.js’);
wp_enqueue_style(‘my_bootstrap_css’, get_template_directory_uri().’/css/bootstrap.css’);
}
Я думаю, что-то вам из кода понятно, даже если вы не программист. Главное, чтобы пути к файлам были правильными. То есть если написано js/bootstrap.js, то в корневой папке активного шаблона должна находиться папка js, а в ней должен лежать файл bootstrap.js, в таком случае у вас не будет никаких проблем с подключением. Если вы хотите подключить минифицированные версии, просто отредактируйте в этом куске кода названия файлов.
Остается добавить хук, чтобы наша функция выполнялась при загрузке стандартных стилей и скриптов wordpress. Для этого напишем ниже нашей функции вот что:
add_action(‘wp_enqueue_scripts’, ‘add_bootstrap’);
Здесь первым параметром выступает, по сути, сам хук, к которому мы добавляем нашу функцию. Второй параметр — имя нашей функции. Вставьте этот код, сохраните изменения в файле. Установка bootstrap на wordpress успешно выполнена, теперь вы можете использовать фреймворк.
Если вы мало что поняли из статьи, это только потому, что вы не знакомы с функциями wordpress. Просто копируйте код и читайте мои разъяснения и даже без знаний вы легко подключите Bootstrap. А на этом у меня все!