Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Простое bootstrap подключение к самым популярным движкам Joomla и WordPress. Все элементарно для новичков

Приветствую всех читателей текущей публикации. Очень часто у начинающих веб-разработчиков возникает вопрос: «Как осуществляется Bootstrap подключение к CMS?». Поэтому чтобы дать ответы на подобные вопросы, я решил написать данную статью.

Я подробно расскажу, как подключить фреймворк к WordPress и Joomla!, объясню, что такое кастомизация и для чего она нужна. Ну что ж, приступим!

Подключение Bootstrap к Joomla

На самом деле подключение фреймворка к движкам осуществляется достаточно просто. А в ситуации с Joomla Бутстрап уже включен в сборку и подключается автоматически. Так, он используется в админпанелях движка.

Однако тут есть одно НО. Версия фреймворка, которая используется в этой CMS, устаревшая. Поэтому вам желательно подключить последнюю версию Bootstrap. И тут важно не заменить старую на новую, так как админка может полететь, а использовать их совместно (конфликта не будет).

Чтобы элементы фреймворка заработали, необходимо выполнить несколько действий:

     

  1. Скачать на официальном сайте последнюю доступную версию Bootstrap;
  2.  

  3. Все файлы фреймворка с расширением css скопировать в каталог css выбранного макета CMS Joomla;
  4.  

  5. Все файлы с расширением js скопировать в каталог js выбранного шаблона движка;
  6. Скопировать все файлы из каталога fonts скачанного фреймворка в папку fonts выбранного макета Joomla;
  7.  

  8. В основном файле index.php вашего проекта в хедере добавить следующие строки:

325443d4d3a3823fe40a570c758a27c9000

Если вам необходимо также добавить скрипт библиотеки jQuery, то прописывайте его перед указанными скриптами.


Вот и все необходимые действия. Я привел один из самых простых и действующих способов, который не требует огромного количества настроек и шагов. В принципе, примерно идентичным образом фреймворк можно подключить к любому известному движку.

Подключение Bootstrap к WordPress

Чтобы не дублировать прошлый вариант подключения Бутстрапа, я расскажу, как пользоваться онлайн-хранилищами. Как вы уже, наверное, знаете, не обязательно скачивать файлы описываемого инструмента. Иногда достаточно воспользоваться ссылками на CDN.

Для этого в хедере файла с названием index.php вам необходимо по таким же правилам, как и в предыдущем варианте (описание стилей, скрипты js и jQuery, скрыпты Bootstrap), вставить строки:

1
<script type="text/javascript" src="/templates/НАЗВАНИЕ_ШАБЛОНА /js/bootstrap.min.js"></script>

Для CMS WordPress существует и другой способ:

  1. Скачайте на официальном сайте http://getbootstrap.com/ последнюю доступную версию Bootstrap;
  2. Все файлы фреймворка с расширением css скопируйте в каталог css активного макета Вордпресс;
  3. Все файлы с расширением js скопируйте в каталог js активного шаблона движка;
  4. Скопируйте все файлы из каталога fonts в папку fonts активного WordPress-шаблона;
  5. В корневом каталоге этого макета найдите файл functions.php и откройте его;
  6. Вписывайте в текст открытого документа код:
    1
    
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  7. После функции добавьте строку add_action (‘wp_enqueue_scripts’, ‘add_bootstrap’); которая запустит обработку только что созданной функции.

Несколько слов о Customize

Customize

В случае, когда вы точно знаете, какие элементы фреймворка вам нужны, а какие вы вообще не используете или когда изначально вам хочется поменять базовые значения параметров, стоит использовать Customize (http://getbootstrap.com/customize/).

С ее помощью можно выбрать перечень компонентов, утилит, плагинов, настроек css и другие элементы из файлов Less. К примеру, можно отключить иконки и символы, известные под названием Glyphicons (если не знаете, как они выглядят, то посмотрите в Google или по этой ссылке).

К тому же в отдельных диалоговых окнах можно задать другие значения цветов, шрифтов, отступов и т.д., которые впоследствии станут параметрами по умолчанию.
На этом моя статья подошла к концу. Подписывайтесь на обновления моего обучающего блога и рассказывайте о нем друзьям. Желаю удачи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 71 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: