Бешеный конкурс!
3:55
Автор: Рубрика: Bootstrap Комментариев нет

Как сделать подключение 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’);
}

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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

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

add_action(‘wp_enqueue_scripts’, ‘add_bootstrap’);


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

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

Комментариев нет