Html bootstrap to wordpress

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

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

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

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

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Итак, стили не подключаются потому, что просто неправильно задан путь. Во-вторых, в 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().

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

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

Источник

Как подключить bootstrap к wordpress – Просто!

в файле header.php (заголовок) перед функцией head() добавляем подключение либо сетки (2 сточка кода, обычно это достаточно в 90% случаях) , либо js скриптов, либо все подряд, от зависимости, что вам нужно, через сервисы:

Второй способ – тяжелее, для локальных файлов

Для подключения bootstrap к wordpress локальными файлами:

1. Cкачать архив библиотеки. (Download Bootstrap)
2. Распаковать содержимое архива (css, fonts,js) в свою тему в “/wp-content/themes/НАЗВАНИЕ_ПАПКИ_ТЕМЫ/bootstrap/

подключить bootstrap в header.php перед (чтобы можно было перебивать стили стандартным файлом style.css)

Попробуйте вывести html код во вкладке текст :

у вас получиться 3 колонки по ширине 33%

! я обычно использую только сетку, и подключаю только файл стилей. Можно подключить файл js в футере

Почему я советую данный способ подключения bootstrap ?

1. Во первых, здесь все просто, и это рабочий вариант.
2. Мне пришлось его использовать в десятках различных сайтах на wordpress.
3. Также, если вы захотите тему установить на новый сайт, то она не будет конфликтовать.
4. Если библиотеку подключить выше то, все стили очень легко меняются в стандартном файле style.css – таким образом, не затрагивая саму библиотеку, что легко способствует ее обновлению.

Как подключить bootstrap через function.php

/** * add js ans css bootstrap */ function wpt_register_js() < wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script('jquery.bootstrap.min'); >add_action( 'init', 'wpt_register_js' ); function wpt_register_css() < wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap.min' ); >add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

Источник

Как создать адаптивную тему для WordPress с помощью Bootstrap

WordPress

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

Адаптивный веб дизайн: WordPress + Bootstrap

В этом руководстве мы научимся создавать свою собственную адаптивную тему для WordPress, используя Bootstrap.

Bootstrap – это фреймворк для создания сайтов и веб приложений. Он отлично подходит в качестве стартовой точки для создания адаптивной темы под WordPress.

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

Тема, которую мы будем создавать, будет основана на примере шаблона простого коммерческого сайта («Basic marketing site»), который вы можете скачать со страницы загрузки Bootstrap.

В этом руководстве мы создадим наш шаблон с основными страницами и дополним следующей функциональностью:

• Главная страница с изменяемым дизайном;
• Страница «О нас»;
• Страница «Контакты»;
• Секция новостей с комментариями;
• Виджитируемый сайдбар.

Подготовка к старту

Прежде чем мы начнем, есть несколько вещей, которые вам следует сделать:

1. Установить WordPress*;
2. Скачать и распаковать архив с Bootstrap;
3. Установить плагин Theme Test Drive**.

** Этот плагин вам потребуется только если вы будете создавать тему на «живом» работающем сайте и не хотите, чтобы посетители сайта видели процесс создания темы.

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

После того, как эти три пункта будут выполнены, откройте директорию с установленным Вордпрессом и перейдите в папку wp-content > themes.

В директории themes создайте новую папку с именем «wpbootstrap». Внутрь нее поместите распакованную из архива папку bootstrap.

Внутри папки wpbootstrap создайте файл index.php.

Теперь мы скопируем исходный код из примера «Basic marketing site», который был на странице скачивания bootstrap и вставим его в созданный только что файл index.php. Вы можете выбрать другой пример или воспользоваться, подготовленным мной, текстовым файлом. Откройте ссылку, скопируйте содержимое и вставьте в индексный файл.

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

В той же папке, в который вы создали файл index.php, создайте файл с именем style.css. Вордпресс требует, чтобы главный файл стилей назывался именно style.css, поэтому мы не можем его назвать как-то по-другому, иначе наша тема не будет работать.

Когда файл каскадных таблиц стилей будет создан, добавьте в самое начало следующие комментарии:

Источник