Как установить шаблон bootstrap на wordpress

Как подключить Bootstrap к WordPress?

Дата публикации: 2016-09-21

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

Итак, создадим перед собой задачу. У нас есть шаблон на wordpress, к нему нужно подключить bootstrap. Как это сделать? Казалось бы, чего тут сложного, подойдет тот же код, который мы использовали для подключения к веб-странице. Но не тут то было, если вы попытаетесь в header.php, в котором в wordpress-шаблоне выводится секция head, добавить тот самый код:

Ничего не выйдет, стили фреймворка не подключатся. Почему и что нам с этим делать? Во-первых, посмотрите на путь, ведущий к таблице стилей. Давайте вспомним, что wordpress читает путь начиная с корневой папки сайта, а не шаблона, у нас же путь прописан только относительно шаблона. Реальный же путь, по которому находится файл, выглядит так:

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

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

Чтобы его отредактировать, соединитесь с сайтом по ftp и перейдите в каталог с активной темой, найдите там соответствующий файл. Предлагаю вам сохранить его резервную копию на всякий случай. Теперь откройте его с помощью удобного вам редактора. Можно не изучать особо его содержимое, все равно, если вы не знакомы с wordpress-функциями, то ничего не поймете, разве только из комментариев разработчика.

Пройдите в самый конец, сюда мы и будем добавлять код, который подключит фреймворк к движку.

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

Итак, нам нужно будет написать новую функцию, назовем ее произвольно, я предлагаю так – load_bootstrap, чтобы сразу было понятно. Внутри функции прописываем две wordpress-функции. Первая отвечает за подключение скриптов, вторая – за css-стили. Сами функции абсолютно идентично работают и имеют 2 обязательных параметра:

Название функции. Его можно написать произвольно. Опять же, я предлагаю назвать так, чтобы было сразу все понятно.

Путь к подключаемому файлу. Очень важно задать его правильно, если вы просто пропишите js/bootstrap.js, то ничего работать не будет, так как я уже говорил, что wordpress ищет файлы от корня сайта, а в корне папки js просто нет, она присутствует в нашем шаблоне, куда вы заранее должны скинуть файлы фреймворка.

Собственно, чтобы правильно задать путь, нужно получить путь к папке с активным шаблоном, а потом уже дописать сам путь к скрипту в этом шаблоне. Как это сделать? Тут нам поможет функция get_template_directory_uri(). Прописываем ее и пристыковываем путь к файлу.

Если вам нужно подключить больше файлов, то просто с новой строки заново пишем функцию wp_enqueue_script или style, указываем в параметрах название и путь.

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

В ней мы должны указать 2 параметра: первый будет неизменен в нашем случае, это функция wp_enqueue_scripts. Именно с s на конце, это важно! Вторым параметром нужно указать название нашей общей функции, в которой мы подключаем наш js и css-файл.

Итак, мы рассмотрели с вами правильное подключение bootstrap к wordpress. Если в будущем вам нужно будет подключить новые файлы фреймворка, не нужно будет писать для этого новую функцию, а всего лишь добавьте или измените нужные строки кода в уже имеющейся у вас функции load_bootstrap().

Благодаря тому, что мы сделали все таким образом, подключение фреймворка будет работать при изменении доменного имени, при изменении имени шаблона и т.д. Что ж, вы можете начинать использовать фреймворк для своих целей, на этом я заканчиваю эту статью. Если вы хотите в максимально короткие сроки освоить bootstrap, рекомендую вам пройти наш платный курс по этому фреймворку, в котором вы сможете сверстать 2 сайта, лендинг, то есть одностраничный сайт, а также получить хорошую теоретическую подготовку.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Источник

WordPress создание темы с нуля

Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или «натянуть» HTML шаблон; ну или в конце концов работать в этом направлении получая свои кровные.

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

Вот ещё один пример, когда может понадобится создать тему с нуля. На одном известном мне сайте изначально был установлен шаблон, который полностью устраивал хозяина и дизайном и функционалом. Но скорость его работы была занижена за счет лишних скриптов и не нужного ему функционала. Я думаю это проблема любого шаблона для любой CMS. После долгих мучений с оптимизацией было решено разработать шаблон с нуля на чистом Bootstrap, чтобы не было ничего лишнего, только то, что нужно. На самом деле это заняло не так много времени. Гораздо больше он бы потратил на оптимизацию готового шаблона. Вся работа заняла около недели. И вуаля в Google PageSpeed 99 пунктов.

В этом уроке я покажу как создать тему для WordPress с нуля используя начальный шаблон Bootstrap 4. На самом деле вы можете использовать любой HTML шаблон или сверстать его самостоятельно суть от этого не изменится.

Структура шаблона

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

style.css — файл стилей в корне темы. В нём так же указывается основная информация о шаблоне, но можно её не добавлять. Без этого файла WordPress будет выдавать ошибку темы. Лично я создаю его именно для того, чтобы тема работала и оставляю его пустым.
index.php — содержимое главной страницы
header.php — общая шапка сайта
footer.php — общий футер сайта
functions.php — файл с функциями темы
single.php — шаблон записи
page.php — шаблон страницы
category.php — шаблон списка записей категории
archive.php — шаблон списка записей архивов
404.php — содержимое страницы ошибки 404
search.php — шаблон страницы со списком результатов поиска

css/ — папка со стилями
js/ — папка со JS скриптами

Получается вот такой минимальный набор всех нужных файлов для создания шаблона новостного сайта или блога.

Создание темы WordPress

Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.

Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.

Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:

Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.

Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.

HTML шаблон

Как я уже говорил мы будем использовать стандартный начальный шаблон Bootstrap 4. Скачать его можно на официальном сайте по ссылке Starter template.

Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.

Перед тем, как тема будет «разрезана» на шапку и футер вы можете добавить весь исходный код шаблона в файл index.php и увидеть, что тема работает. Путь до папки с темой указывается функцией get_template_directory_uri() — это чтобы сразу в теме указать ссылки для скриптов. Должно получится примерно следующее:

Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.

Добавляем API WordPress

Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег добавляем следующее:

Теперь заголовок окна браузера будет содержать тайтл из системы WordPress.

И ниже подключаем API. Код должен находится внутри тега :

Теперь если вы посмотрите исходный код сайта, то вы сможете увидеть, что в появилась новая разметка, которую добавил WordPress. Это мета-теги, скрипты и т.д.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник