Как сделать подключение bootstrap к wordpress?

подключение bootstrap к wordpressОчередная статья из рубрики «подключение чего-то к чему-то» laugh На этот раз рассмотрим подключение Bootstrap к wordpress. Если вы интересуетесь этим вопросом, то наверняка понимаете, что обозначают эти слова. Bootstrap — это css-фреймворк, в разы упрощающий нам верстку веб-страниц, а wordpress — сайтовый движок, упрощающий управление сайтами. Обзор фреймворка вы можете почитать здесь.

Как скачать Bootstrap?

Для начала скачайте себе фреймворк. Для этого перейдите на официальный сайт бутстрапа — getbootstrap.com. Он на английском языке, но ничего, не пугайтесь этому. Перейдите на вкладку Getting Started, там вам будет предложено 3 варианта скачивания фреймворка. Скорее всего, вас устроить пока первый вариант.

На данный момент актуальная версия бутстрапа — 3.3.7. Впрочем, вы можете прочитать эту статью через год и тогда уже это будет устаревшая версия. Но способ подключения к wordpress не изменится, поэтому все равно можете читать дальше.

Итак, после скачивания распакуйте архив, там у вас должно быть три папки. Это и есть содержимое фреймворка:
bootstrap содержимое

К слову, если вы не хотите скачивать все компоненты фреймворка целиком, а только нужные вам, тогда вам пригодится эта страница:
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’);
}

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Я думаю, что-то вам из кода понятно, даже если вы не программист. Главное, чтобы пути к файлам были правильными. То есть если написано js/bootstrap.js, то в корневой папке активного шаблона должна находиться папка js, а в ней должен лежать файл bootstrap.js, в таком случае у вас не будет никаких проблем с подключением. Если вы хотите подключить минифицированные версии, просто отредактируйте в этом куске кода названия файлов.

Остается добавить хук, чтобы наша функция выполнялась при загрузке стандартных стилей и скриптов wordpress. Для этого напишем ниже нашей функции вот что:

add_action ('wp_enqueue_scripts', 'add_bootstrap');


Здесь первым параметром выступает, по сути, сам хук, к которому мы добавляем нашу функцию. Второй параметр — имя нашей функции. Вставьте этот код, сохраните изменения в файле. Установка bootstrap на wordpress успешно выполнена, теперь вы можете использовать фреймворк.

Если вы мало что поняли из статьи, это только потому, что вы не знакомы с функциями wordpress. Просто копируйте код и читайте мои разъяснения и даже без знаний вы легко подключите Bootstrap. А на этом у меня все!

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