Приветствую всех читателей текущей публикации. Очень часто у начинающих веб-разработчиков возникает вопрос: «Как осуществляется Bootstrap подключение к CMS?». Поэтому чтобы дать ответы на подобные вопросы, я решил написать данную статью.
Я подробно расскажу, как подключить фреймворк к WordPress и Joomla!, объясню, что такое кастомизация и для чего она нужна. Ну что ж, приступим!
Подключение Bootstrap к Joomla
На самом деле подключение фреймворка к движкам осуществляется достаточно просто. А в ситуации с Joomla Бутстрап уже включен в сборку и подключается автоматически. Так, он используется в админпанелях движка.
Однако тут есть одно НО. Версия фреймворка, которая используется в этой CMS, устаревшая. Поэтому вам желательно подключить последнюю версию Bootstrap. И тут важно не заменить старую на новую, так как админка может полететь, а использовать их совместно (конфликта не будет).
Чтобы элементы фреймворка заработали, необходимо выполнить несколько действий:
- Скачать на официальном сайте последнюю доступную версию Bootstrap;
- Все файлы фреймворка с расширением css скопировать в каталог css выбранного макета CMS Joomla;
- Все файлы с расширением js скопировать в каталог js выбранного шаблона движка;
- Скопировать все файлы из каталога fonts скачанного фреймворка в папку fonts выбранного макета Joomla;
- В основном файле index.php вашего проекта в хедере добавить следующие строки:
1 | <script type="text/javascript" src="/templates/НАЗВАНИЕ_ШАБЛОНА /js/bootstrap.min.js"></script> |
Если вам необходимо также добавить скрипт библиотеки jQuery, то прописывайте его перед указанными скриптами.
Вот и все необходимые действия. Я привел один из самых простых и действующих способов, который не требует огромного количества настроек и шагов. В принципе, примерно идентичным образом фреймворк можно подключить к любому известному движку.
Подключение Bootstrap к WordPress
Чтобы не дублировать прошлый вариант подключения Бутстрапа, я расскажу, как пользоваться онлайн-хранилищами. Как вы уже, наверное, знаете, не обязательно скачивать файлы описываемого инструмента. Иногда достаточно воспользоваться ссылками на CDN.
Для этого в хедере файла с названием index.php вам необходимо по таким же правилам, как и в предыдущем варианте (описание стилей, скрипты js и jQuery, скрыпты Bootstrap), вставить строки:
1 | <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
Для CMS WordPress существует и другой способ:
- Скачайте на официальном сайте http://getbootstrap.com/ последнюю доступную версию Bootstrap;
- Все файлы фреймворка с расширением css скопируйте в каталог css активного макета Вордпресс;
- Все файлы с расширением js скопируйте в каталог js активного шаблона движка;
- Скопируйте все файлы из каталога fonts в папку fonts активного WordPress-шаблона;
- В корневом каталоге этого макета найдите файл functions.php и откройте его;
- Вписывайте в текст открытого документа код:
1 2 3 4
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’); } - После функции добавьте строку add_action (‘wp_enqueue_scripts’, ‘add_bootstrap’); которая запустит обработку только что созданной функции.
Несколько слов о Customize 
В случае, когда вы точно знаете, какие элементы фреймворка вам нужны, а какие вы вообще не используете или когда изначально вам хочется поменять базовые значения параметров, стоит использовать Customize (http://getbootstrap.com/customize/).
С ее помощью можно выбрать перечень компонентов, утилит, плагинов, настроек css и другие элементы из файлов Less. К примеру, можно отключить иконки и символы, известные под названием Glyphicons (если не знаете, как они выглядят, то посмотрите в Google или по этой ссылке).
К тому же в отдельных диалоговых окнах можно задать другие значения цветов, шрифтов, отступов и т.д., которые впоследствии станут параметрами по умолчанию.
На этом моя статья подошла к концу. Подписывайтесь на обновления моего обучающего блога и рассказывайте о нем друзьям. Желаю удачи! Пока-пока!
С уважением, Роман Чуешов
