WordPress bootstrap

Очередная статья из рубрики «подключение чего-то к чему-то» На этот раз рассмотрим подключение Bootstrap к wordpress. Если вы интересуетесь этим вопросом, то наверняка понимаете, что обозначают эти слова. Bootstrap — это css-фреймворк, в разы упрощающий нам верстку веб-страниц, а wordpress — сайтовый движок, упрощающий управление сайтами. Обзор фреймворка вы можете почитать здесь.

Как скачать Bootstrap?

Для начала скачайте себе фреймворк. Для этого перейдите на официальный сайт бутстрапа — getbootstrap.com. Он на английском языке, но ничего, не пугайтесь этому. Перейдите на вкладку Getting Started, там вам будет предложено 3 варианта скачивания фреймворка. Скорее всего, вас устроить пока первый вариант.

На данный момент актуальная версия бутстрапа — 3.3.7. Впрочем, вы можете прочитать эту статью через год и тогда уже это будет устаревшая версия. Но способ подключения к wordpress не изменится, поэтому все равно можете читать дальше.

Итак, после скачивания распакуйте архив, там у вас должно быть три папки. Это и есть содержимое фреймворка:

К слову, если вы не хотите скачивать все компоненты фреймворка целиком, а только нужные вам, тогда вам пригодится эта страница:
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’);
}

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

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

add_action ('wp_enqueue_scripts', 'add_bootstrap');

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

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

dolinacoda.ru

Что такое Bootstrap?

Бутстрап – это бесплатный фреймворк на базе css и JavaScript, предоставляющий целый ряд встроенных инструментов для создания адаптивных веб-сайтов, а точнее их front-end разработки. Изначально был создан для внутреннего использования компанией Twitter и носил название «Twitter Bootstrap», но в дальнейшем вырос в самостоятельный проект. Данная библиотека может быть использована в работе как со статическими html-файлами, так и с различными системами управления контентом, в которых поддерживаются внешние стили.

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

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

Что же делает Бутстрап популярным среди разработчиков? Давайте рассмотрим ряд неоспоримых плюсов, которые мы получаем в работе с ним:

• открытый исходный код, то есть весь функционал предоставляется совершенно бесплатно;
• встроенная 12-колоночная сетка. Достаточно просто добавить нужный класс html-элементу, чтобы задать ему необходимо позиционирование относительно других объектов и каркаса страницы;
• адаптивность. Ранее я писала о том, как создать мобильную версию блога с плагинами и без и почему это однозначно необходимо делать. В Бутстрапе же данная опция включена по умолчанию и предполагает оптимизацию сайта под десктопные девайсы, планшеты и смартфоны. Помимо этого, вы можете сами установить любые варианты расширений вручную;
• вариативность в оформлении самых часто используемых на веб-страницах элементов. С помощью специальных классов легко можно управлять отображением и поведением событий, вкладок, кнопок и прочего. Предусмотрены и готовые решения для динамических элементов. Так, к примеру, чтобы создать слайдер, достаточно найти необходимый код в документации, скопировать его и разместить в своем блоге, заменив картинки из примера своими собственными. Как это работает на практике, я покажу вам дальше на примере установки в WordPress меню Bootstrap;


• иконочный шрифт. Приятный бонус в виде нескольких сотен иконок Glythicons в формате векторной графики;
• кастомизация, т.е. возможность выборочного использования тех или иных возможностей фреймворка, например: подключение к проекту только сетки и шрифтов, или только медиа, или комбинации из нескольких опций;
• легкость настройки – стандартные стили переопределяются простым созданием новых правил css, без применения «!important»;
• отличная документация с примерами. Несмотря на то, что официальный сайт англоязычный, не составит труда найти в интернете его русскоязычный аналог.

Основным минусом в работе с библиотекой может стать только то, что при редактировании или создании адаптивной темы Вордпресс Бутстрап-компоненты не могут быть просто добавлены из консоли CMS. Их использование потребует вставки дополнительного кода или установки вспомогательных плагинов.

Для начала скачиваем библиотеку с официального сайта — https://getbootstrap.com: жмем «Download Bootstrap» и в открывшейся вкладке «Getting started» выбираем вариант «Download Bootstrap». На текущий момент стабильной версией остается Bootstrap 3, но уже выпущена в режиме тестирования четвертая версия. Она имеет некоторые отличия от нынешней, но если вы изучите Бутстрап 3, то обновленный вариант фреймворка не вызовет никаких вопросов. 

Распаковываем архив и видим 3 основных папки: css, js, fonts. Файлы, содержащие в своем названии «min» ничем не отличаются от одноименных без этой частицы. Она обозначает, что код записан без пробелов, в одну строку, для уменьшения веса файла без потерь в функционале. Такой формат нечитабелен, но как раз он зачастую и подключается к проекту. Это позитивно влияет на увеличение скорости загрузки сайта на Вордпресс.  В папках css и js лежат соответственно файлы стилей и скриптов, а в папке fonts – те самые векторные иконки, которые упоминались выше. По сути, мы видим здесь один шрифт, представленный в нескольких форматах.

Один из удобных способов размещение файлов фреймворка в проекте – создание отдельной папки. Для этого в корне сайта в каталоге wp-content – themes – название_вашей_темы формируется папка libs, где в дальнейшем могут находиться другие библиотеки, используемые в проекте. И уже в ней – папка bootstrap, куда мы и копируем все содержимое, извлеченное из архива.

Как мы уже отмечали ранее, существует возможность выкачать только отдельный функционал Бутстрапа, например сетку или иконки. Это реализовывается на странице официального сайта «Customize».

Здесь необходимо снять галочки с тех компонентов и плагинов библиотеки, которые вы не хотите подключать к проекту. А затем, прокрутив страницу вниз, загрузить кастомизированный вариант Bootstrap, нажав «Compile and Download».

Дополнительно, для переопределения бутстраповских стилей и «родных» стилей темы, можно создать в папке шаблона в каталоге css файл style.css. Если вы не знакомы со структурой шаблона Вордпресс, статья о том, как редактировать тему WordPress обязательна к прочтению.

Чтобы подключить Bootstrap к WordPress, открываем в текстовом редакторе файл functions.php, который лежит в каталоге вашего активного шаблона. Находим функцию подключения скриптов (она может называться, например, function twentysixteen_scripts (){}, по названию темы) и вставляем следующий код:

— данная строка подключает минимизированный файл стилей фреймворка. Первый параметр функции ('bootstrap— style') – произвольное название подключаемого объекта.

Следующий параметр (get_template_directory_uri() . '/libs/bootstrap/css/bootstrap.min.css') – путь к файлу. Здесь с помощью функции get_template_directory_uri() мы получаем путь к папке с активным шаблоном, а затем «пристыковываем» непосредственно путь к файлу в этом шаблоне — . '/libs/bootstrap/css/bootstrap.min.css'.

Продолжаем вставлять код:

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

И последняя строка, которая нам понадобится для подключения Bootstrap к WordPress:

— в конце мы подключаем минимизированный файл скриптов. Здесь нам понадобится третий параметр функции – array (), который отвечает за очередность подключения скриптов. Дело в том, что Бутстрап зависит от библиотеки jQuery. Если на момент, когда сервер будет подгружать наш фреймворк, jQuery еще не будет подключено к проекту, скрипты Бутстрапа не сработают. Саму библиотеку jQuery нам загружать не надо, поскольку Вордпресс делает это автоматически. Но чтобы подключение происходило в необходимой нам последовательности, мы определим, что js-скрипты Bootstrap должны всегда идти после jQuery. Именно это и делает строка array ('jquery').

Если же вы создаете Бутстрап-тему для WordPress с нуля или просто не хотите смешивать все скрипты в одном месте, предлагаю вам создать отдельную функцию для подключения Bootstrap 3 к WordPress. В конце файла functions.php расположите следующий код:

— где load_bootstrap() – произвольное название созданной нами функции, а последняя строка дает ее движку на выполнение.

Основные возможности Бутстрапа и как это работает

Чтобы понять, каким образом возможно взаимодействие WordPress и Bootstrap, давайте разберем сам принцип работы фреймворка.

Итак, в файле стилей Бутстрапа прописаны специальные классы, которые добавляются в html-разметку, определяя тем самым отображение или поведение элементов.

Разметка: контейнеры и ячейки. Структура разметки Bootstrap основывается на блочной системе вложенных элементов. Контейнеры наивысшего порядка, выступающие оберткой, формируются методом добавления к ним классов .container или .container-fluid, в зависимости от того, хотим мы получить блок с  адаптивной фиксированной шириной или «резиновый».

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

Контент размещается в ячейках.  Каждая строка разбита на 12 ячеек – html-элементов с классами .col –lg-*, col- md-*, col- sm-*, col- xs-*. Эти классы определяют ширину ячеек для телефонов (xs), планшетов (sm), десктопных девайсов с небольшим монитором (md), для экраном с большим расширением (lg). А вот какая цифра в пикселях подразумевается под каждым из этих расширений:

Вместо звездочки в названии класса указывается число от 1 до 12, равное количеству ячеек, которое должен занимать элемент. Но сумма всех ячеек в пределах одной строки не должна превышать 12. Вот пример кода:

А вот так он будет выглядеть в браузере:

Подробно и с примерами, как работать с сеткой Бутстрап, описано в документации фреймворка на официальном сайте в разделе «CSS» — «Grid system».

Таблицы. Фреймворком предусмотрен ряд классов для элементов «table», позволяющих с легкостью стилизовать таблицы:

• .table – базовый стиль, только горизонтальные границы;
• .table- striped – чередование серых и белых строк в таблице;
• .table-bordered – формирование всех границ строк и столбцов;
• .table- hover – подсветка строки таблицы при наведении;
• .table- responsive – этот класс делает таблицу адаптивной ко всем устройствам.

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

Вот так, например, необходимо прописать ваш элемент «button», чтобы получить зеленую кнопку в стиле Bootstrap 3: <button type=»button» class=»btn btn-success»>Success</button>

Изображения. Для элементов «img» тоже есть интересные решения:

Это всего лишь малая часть возможностей Бутстрапа. Фреймворком предусмотрены классы для работы с типографикой, иконками, формами, всплывающими подсказками, навигацией и многим другим. Если вы оценили, какие преимущества может дать функционал Bootstrap для WordPress-блога, обязательно изучите документацию по данной библиотеке. 

pro-wordpress.ru

Тема bootstrap wordpress для разработки

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

Просто устанавливаем голый wordpress, накидываем тему и получаем следующее:

1. Через function.php проведена чистка лишних функций wordpress, который захламляют код и увеличивают время загрузки сайта (удалены emoji, отключен REST API, его фильтры, события и embeds).
2. Создано 2 меню адаптированных под bootstrap. Через админку создаете верхнее и нижнее меню.
3. Подключён файл стилей style.css, Где вы можете указать собственный CSS код для костамизации шаблона (В этом файле я добавил небольшой код для украшения темы, однако, вы можете удалить этот код, чтобы сохранить исходный вид bootstrap).
4. Миниатюры постов и кастомные размеры картинок.

Я бы рекомендовал вам перенести блок <header> в файл footer.php и через стили и position: absolute визуально поднять его обратно в шапку сайта. Это необходимо для SEO-оптимизации кода. С помощью этого действия Вы можете ощутимо поднять заголовок H1 вверх, что непременно положительно скажется на поисковый выдачи вашего сайта. Здесь я исхожу из мысли, которую услышал давно, однако, придерживаюсь её:

Нет ничего лучше для поисковика, чем страница для печати

Однако, перенос хедера — это дело ваше. Но в пользу своей позиции приведу авторитетный пример — https://devaka.ru/.

После редизайна сайта в коде можно заметить, что хедер подгружается из футера (сайт тоже сделан на wordpress). А Сергею Кокшарову я бы доверял.

Файлы в теме Bootstrap WordPress

С файлами все стандартно — просто ничего лишнего.

• 404.php — шаблон 404
• author.php — шаблон вывода постов автора
• archive.php — архив постов
• category.php — шаблон постов категории
• comments.php — шаблон комментариев, там сам вывод и форма, разметка списка комментариев в functions.php
• footer.php — подвал сайта
• function.php — функции шаблона
• header.php — шапка сайта
• index.php — шаблон вывода последних постов для главной
• loop.php — пост в цикле
• page.php — обычная страница
• search.php — шаблон поиска
• sidebar.php — сайдбар
• single.php — отдельная страница поста
• style.css — стили темы и описание
• tag.php — посты по тэгу
• /js — скрипты бутстрапа и шаблона
• /css — стили бутстрапа
• /fonts — шрифты бутсрапа

Замечу маленький нюанс — блок <div class=»container»> вынесен их header.php, для более удобной разработки. Например, вам нужно сделать слайдер во всю ширину страницы — просто в кастомном шаблоне страницы делаете слайдер без необходимости закрывать открытые теги с фиксированной шириной.

Скачивайте, пробуйте. Пишите свое мнение в комментариях. Автору же изначального шаблона советую купить пива.

---

richbee.ru

Bootstrap — не совсем подходящий инструмент для wordpress

Для справки (Wikipedia):

Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

Изначально Bootstrap создавался для Twitter в качестве бэкенд-инструмента, с помощью которого разработчики смогли бы создавать интерфейсы для приложений. До этого использовалось много других библиотек, но полученные в результате интерфейсы практически не поддерживались.

Учитывая этот факт, создание Bootstrap должно было помочь разработчикам сосредоточиться исключительно на коде в бэкенде и совершенно не беспокоится о фронтенде. Как вы понимаете, для WordPress фронтенд, то есть внешний вид сайта, играет очень большую роль. Соответственно использование Bootstrap противоречит задачам WordPress.

Bootstrap функционирует не так, как нужно WordPress

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

Что касается Bootstrap, то в нем используется свой подход к структурированию HTML, и он не совсем совместим с тем, что используется в WordPress. Поэтому разработчикам приходится дополнительно создавать код для того, чтобы наладить это несоответствие при функционировании с WordPress.

Хорошим примером этого является навигационное меню. Вместо использования wp_nav_menu() разработчикам пришлось создать классы Custom Walker, которые меняют отображение HTML с помощью функции. И таким образом могут быть использованы Bootstrap CSS и Javascript. Такой подход требует создания большего количества кода, а это требует больше времени.

Bootstrap очень раздутый

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

Bootstrap не приветствует хороший дизайн

Самая популярная функция Bootstrap – это полностью адаптивная грид-система twelve column. Добавляя классы в верстку HTML, разработчики могут создавать веб-сайты, которые адаптируются под экран любого разрешения. Но, к сожалению, предопределенная грид разметка по сетке не поможет создать отличный дизайн.

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

Альтернативный подход

» />

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

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

Что касается технической стороны, лучше используйте начальную тему с markup-разметкой для быстрого погружения в процесс работы. Можете использовать библиотеки и сниппеты кода, которые позволят сократить время разработки. Стандартные темы WordPress, как правило, отлично подходят для извлечения фрагментов кода.

hostenko.com

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

Качаем шаблон Flathood с сайта, распаковываем архив, и переносим файлы в папку wordpress wp-content/themes/flathood, — так будет называться тема.

Создаем файл style.css

/* Theme Name: Flathood  Theme URI: <a href="//www.bootstrapzero.com/bootstrap-template/flathood">//www.bootstrapzero.com/bootstrap-template/flathood</a>  Author: Bootply  Author URI: Bootply.com  Description: A popular tech news site was the inspiration for this 2-column bold, bright design. This template uses the Bootstrap affix plugin to pin the sidebar after scrolling past the top header.   Version: 1.0.0 License: MIT  License URI: <a href="//opensource.org/licenses/MIT">//opensource.org/licenses/MIT</a> */

Подключаем стили bootstrap из папки css

@import url('css/bootstrap.min.css');

Копируем в style.css весь код из файла css/styles.css, который после чего можно удалить.

Создаем файл header.php

Копируем в header.php следующий код из шаблона flathood index.html. Сразу поправим некоторый динамический контент, который выводится с помощью функций WordPress. Ниже я объясню как они работают.

<!DOCTYPE html>  <html lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <meta charset="utf-8">  <title><?php bloginfo('name'); ?></title>  <meta name="generator" content="Bootply" />  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <!&#x2013;[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]&#x2013;>   <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">  <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">  <?php wp_head(); ?>   </head>  <body>  <nav class="navbar navbar-static">  <div class="container">  <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="glyphicon glyphicon-chevron-down"></span> </a>   <div class="nav-collapse collase">  <ul class="nav navbar-nav">  <li><a href="#">Home</a></li>  <li><a href="#">Link</a></li>  <li><a href="#">Link</a></li>  </ul>  <ul class="nav navbar-right navbar-nav">  <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>   <ul class="dropdown-menu" style="padding:12px;">  <form class="form-inline">  <div class="input-group">  <input type="text" class="form-control" placeholder="Search">   <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </div>  </div>  </form>  </ul>  </li>  <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>   <ul class="dropdown-menu">  <li><a href="#">Login</a></li>  <li><a href="#">Profile</a></li>  <li class="divider"></li>  <li><a href="#">About</a></li>  </ul>  </li>  </ul>  </div>  </div>  </nav>  <!&#x2013; /.navbar &#x2013;> </p>  <p>   <header class="masthead">  <div class="container">  <div class="row">  <div class="col col-sm-6">  <h1>  <a href="#" title="<?php bloginfo('name'); ?>">BNW Template</a>   <p class="lead"><?php bloginfo('description'); ?></p>  </h1>  </div>  <div class="col col-sm-6">  <div class="well pull-right"> <img src="//placehold.it/280x100/E7E7E7"> </div>  </div>  </div>  </div>  <div class="container">  <div class="row">  <div class="col col-sm-12">  </p>  <p>   <div class="panel">  <div class="panel-body"> You may want to put some news here <span class="glyphicon glyphicon-heart-empty"></span> </div>  </div>  </p>  <p>   </div>  </div>  </div>  </header> 

<title><?php bloginfo('name'); ?></title>

— название сайта

<?php bloginfo('stylesheet_url'); ?>

— путь к style.css

<?php bloginfo('description'); ?>

— описание сайта

<?php wp_head(); ?>

— важный хук wordpress, который необходим для правильного подключения и работы скриптов и плагинов.

Описание и название WordPress берет из Общих настроек.

Меню пока не трогаем.

Создаем файл footer.php

Он попроще.

<h1><a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a></h1> </p> <p>  <hr> <h4><a href="<?php bloginfo('url'); ?>">Bootply</a></h4> <hr> </div></div></div></div> </p> <p>  <?php wp_footer(); ?>  <!-- script references -->  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> -->  <!-- <script src="js/bootstrap.min.js"></script> -->  <!-- <script src="js/scripts.js"></script> -->  </body> </html>

Здесь стоит отметить:

<?php bloginfo('url'); ?>

— выводит url сайта

<?php wp_footer(); ?>

— хук, аналогичный wp-head для футера

Создаем главный шаблон index.php

Копируем из index.html весь оставшийся код между заголовком и подвалом. Я также удалил статический аккордеон и статический контент внизу страницы. Мы добавим их другим образом, о чем я расскажу во второй части статьи. Вот получившийся код страницы index.php.

<?php get_header(); ?> <!-- Begin Body -->  <div class="container"> <div class="row"> <div class="col col-sm-3">  <div id="sidebar">  <ul class="nav nav-stacked">  <li>  <h3 class="highlight">Channels <i class="glyphicon glyphicon-dashboard pull-right"></i></h3>  </li>  <li><a href="#">Link</a></li>  <li><a href="#">Link</a></li>  </ul>  </div> </div> <div class="col col-sm-9"> <div class="panel"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> <?php endwhile; else : ?>  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>  <div>  <p><?php posts_nav_link(); ?></p> </div> </p> <p> <?php get_footer(); ?>

<?php get_header(); ?>

— подключаем header.php

<?php get_footer(); ?>

— подключаем footer.php

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>  <?php the_content(); ?>  <?php endwhile; else : ?>  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>  <?php endif; ?>  <div><p><?php posts_nav_link(); ?></p></div>

Динамически вывести записи, если они есть, иначе вывести сообщение пользователю. Функция posts_nav_link() возвращает нам постраничную навигацию.

Сохраняем результат, смотрим что получилось.

Создаем файл functions.php

Сразу же подключаем в нём наши скрипты и стили

if (!is_admin()) {  //Load the theme CSS  function theme_styles() {   wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');   wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css'); }  //Load the theme JS   function theme_js() {   wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );  wp_enqueue_script( 'scripts_js', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '', true );  }   add_action( 'wp_enqueue_scripts', 'theme_styles' ); add_action( 'wp_enqueue_scripts', 'theme_js' ); } 

Функции отрабатывают только если мы НЕ находимся в консоли WordPress (мы не хотим загружать bootstrap и стили в панели администратора)

Обратите внимание, мы подключили также основной файл стилей Style.css, поэтому нужно убрать строку его подключения из header.php

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

— удаляем

Создаем динамическое меню WordPress

Скачиваем php класс wp bootstrap navwalker, копируем в папку с темой.

Подключаем данный файл в functions.php

// Register Custom Navigation Walker  require_once('wp_bootstrap_navwalker.php');

А также регистрируем динамическое меню

register_nav_menus( array(  'primary' => __( 'Primary Menu', 'flathood' ),  ) );

Теперь нужно вернуться в header.php, и адаптировать код. Вот весь листинг с подсветкой измененных строк

<!DOCTYPE html>  <html lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <meta charset="utf-8">  <title><?php bloginfo('name'); ?></title>  <meta name="generator" content="Bootply" />  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">  <?php wp_head(); ?>   </head>  <body>  <nav class="navbar">  <div class="container">  <div class="row">  <div class="col col-sm-9">  <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="glyphicon glyphicon-chevron-down"></span> </a>  <?php wp_nav_menu( array(  'menu' => 'primary',  'theme_location' => 'primary',  'depth' => 2,  'container' => 'div',  'container_class' => 'collapse navbar-collapse',  'container_id' => 'bs-example-navbar-collapse-1',  'menu_class' => 'nav navbar-nav',  'fallback_cb' => 'wp_bootstrap_navwalker::fallback',  'walker' => new wp_bootstrap_navwalker())  ); ?> </div>  <div class="col col-sm-3">  <ul class="nav navbar-right navbar-nav">  <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>   <ul class="dropdown-menu" style="padding:12px;">  <form class="form-inline">  <div class="input-group">  <input type="text" class="form-control" placeholder="Search">   <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </div>  </div>  </form>  </ul>  </li>  </ul>  </div>  </div>  </div>  </nav>  <!-- /.navbar --> </p>  <p>   <header class="masthead">  <div class="container">  <div class="row">  <div class="col col-sm-6">  <h1>  <a href="#" title="<?php bloginfo('name'); ?>">BNW Template</a>   <p class="lead"><?php bloginfo('description'); ?></p>  </h1>  </div>  <div class="col col-sm-6">  <div class="well pull-right"> <img src="//placehold.it/280x100/E7E7E7"> </div>  </div>  </div>  </div>  <div class="container">  <div class="row">  <div class="col col-sm-12">  </p>  <p>   <div class="panel">  <div class="panel-body"> You may want to put some news here <span class="glyphicon glyphicon-heart-empty"></span> </div>  </div>  </p>  <p>   </div>  </div>  </div>  </header>

Пояснения. Код, который формирует динамическое меню.

<?php wp_nav_menu( array(   'menu' => 'primary',  'theme_location' => 'primary',  'depth' => 2,   'container' => 'div',  'container_class' => 'collapse navbar-collapse',  'container_id' => 'bs-example-navbar-collapse-1',  'menu_class' => 'nav navbar-nav',  'fallback_cb' => 'wp_bootstrap_navwalker::fallback',  'walker' => new wp_bootstrap_navwalker())  ); ?>

Я также сделал несколько изменений в разметке. Добавил строку с двумя колонками (col-sm-9 и col-sm-3, чтобы уместить поиск рядом с меню на одной строке (row). Дополнительное меню пользователя в правом верхнем углу я удалил, чтобы не усложнять на данном этапе процесс разработки.

Регистрируем сайдбар в functions.php

  //register sidebar add_action( 'widgets_init', 'flathood_widgets_init' ); function flathood_widgets_init() {  register_sidebar( array(  'name' => __( 'Main Sidebar', 'flathood' ),  'id' => 'sidebar-1',  'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'flathood' ),  'before_widget' => '<li id="%1$s" class="widget %2$s">',  'after_widget' => '</li>',  'before_title' => '<h2 class="widgettitle">',  'after_title' => '</h2>',  ) ); } 

Функцию я взял из <a href=»примера в кодексе.

Создаем файл sidebar.php

 <div id="sidebar">  <?php if ( ! dynamic_sidebar('sidebar-1') ) : ?>  <ul class="nav nav-stacked">   <li><h3 class="highlight">Channels <i class="glyphicon glyphicon-dashboard pull-right"></i></h3></li>  <li><a href="#">Link</a></li>  <li><a href="#">Link</a></li>  </ul>  <?php endif; ?>  </div> 

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

Саму разметку я, разумеется, скопировал из шаблона flathood. Вы замечаете как работает копи-паст? Создание темы для WordPress не такая уж сложная вещь.

Подключаем сайдбар в index.php

<?php get_sidebar(); ?>

Смотрим. Сайдбар работает. Если виджеты не добавлены, отображается статический контент.

На этом первая часть заканчивается. Шаблоны page.php и post.php, для страниц и записей соответственно, делать не будем. Смотрите руководство как натянуть HTML шаблон на WordPress.

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

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

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

Пишите комментарии, и задавайте вопросы.

wp-best.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

webformyself.com

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

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

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

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

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

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

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

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

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

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

* Например, прочитав руководство по установке WordPress.

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

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

После того, как эти три пункта будут выполнены, откройте директорию с установленным Вордпрессом и перейдите в папку 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, поэтому мы не можем его назвать как-то по-другому, иначе наша тема не будет работать.

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

Последняя вещь, которую нужно сделать прежде чем мы начнем создавать нашу собственную адаптивную тему, – это загрузить в папку с темой ее скриншот. Это такое изображение, которое будет отображаться в разделе выбора темы в административной панели WP. Размеры этой картики: 300 x 225 пикселей, и называться она должна “screenshot.png”. Вы можете создать свой скриншот или воспользоваться моим:

Теперь структура папок и файлов должна выглядеть вот так:

Сейчас мы готовы войти в административную часть WP и установить нашу новую тему. Авторизуйтесь в административной части и перейдите в раздел Внешний вид > Темы. Вы должны увидеть WP Bootstrap в списке тем.

Щелкните «Активировать», чтобы сделать эту тему темой по умолчанию на сайте.

ВАЖНО: Если вы сейчас создаете тему на «живом» сайте и не хотите, чтобы пользователи видели процесс разработки, удостоверьтесь, что вы установили и активировали плагин Theme Test Drive.

Когда она активируется, перейдите на главную страницу своего сайта. Вы должны увидеть что-то вроде этого:

Так как пока никаких стилей к этой странице не применяется, она выглядит как простой текст со ссылками. Поэтому на следующем шаге мы начнем процесс превращения нашей статичной страницы в работающую тему WordPress.

Превращение файлов Bootstrap в шаблон WordPress

Большинство тем WordPress включают следующие основные файлы:

• index.php
• style.css
• header.php
• footer.php
• sidebar.php

Обычно вы ведите гораздо больше файлов, чем указано здесь, однако мы начнем именно с этих пяти основных, без которых не обходится ни одна тема ВордПресс. Создайте в той же папке с index.php пустые файлы с именами header.php, footer.php и sidebar.php.

Сейчас необходимо открыть файл index.php, вырезать html-код, который обычно выводится в «шапке» на каждой странице сайта и вставить в файл header.php. Затем мы вырежем и вставим в файл footer.php тот html-код, который обычно выводится в «подвале» всех страниц сайта.

Я уже подготовил эти файлы. Взгляните сюда:

• header.php
• index.php
• footer.php

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

Файл sidebar.php по-прежнему пустой.

Теперь настала пора использовать наши первые теги WordPress, которые предназначены для подключения к индексному файлу index.php «шапки» – header.php и «подвала» – footer.php.

Вот эти два тега: get_header() и get_footer(). Эти теги, на самом деле, встроенные в ВордПресс, функции, задача которых находить и подключать файлы header.php и footer.php. Первый подключается вверху страницы, второй – внизу. WordPress делает это потому, что мы назвали наши файлы header.php и footer.php. Если бы мы назвали их, например, my-header.php и my-footer.php, то это бы не сработало.

Вот как должен выглядеть наш файл index.php после этого:

Вы можете спросить: «Зачем разрезать html-страничку таким образом?». Ответ станет очевиден после того, как мы начнем создавать дополнительные страницы. Представьте себе, что у вас накопился десяток страниц с включенными туда «шапкой» и «подвалом» как есть, без разделения на отдельные файлы. И вот вам необходимо внести правки в адрес организации в «подвале». Для этого вам бы потребовалось изменить все эти десять страниц, – согласитесь, трудоемко? А если их не десяток, а сотня или даже больше? В случае хранения каждой отдельной части шаблона в отдельном файле, вам надо будет внести изменения в одном единственном файле!

Теперь нам надо исправить все неправильные ссылки к файлам стилей CSS и скриптов JavaScript.

Давайте начнем с шаблона «шапки».

Найдите вот этот блок кода в файле header.php:

И поменяйте его на вот этот блок кода:

В основном файле стилей style.css добавьте следующие строки:

Только что мы использовали еще один тэг WP, который присоединяет к нашей теме главный файл стилей style.css. Мы еще не раз будем применять функцию bloginfo() в этом руководстве. Затем мы использовали директиву @import, чтобы связать стили Bootstrap и наш главный CSS файл. Сейчас наш сайт должен выглядеть так:

Так гораздо лучше!:)

Прежде чем мы двинемся в «подвал», есть еще один тэг, который надо добавить в header.php – функция wp_head(). Это так называемый «хук» ВордПресс, позволяющий разработчикам плагинов динамически добавлять CSS и JavaScript на ваш сайт. Если мы не включим этот тэг в наш шаблон, некоторые плагины могут не заработать. Нам также надо будет удалить из header.php некоторые html тэги. В результате наш файл header.php должен выглядеть так:

Теперь давайте отредактируем шаблон «подвала». Скаченный нами пример содержит множество ссылок на файлы скриптов JavaScript, которые не требуются для нашего сайта. Наша задача их удалить. Приведите свой файл footer.php в соответствие с кодом ниже:

Следующим шагом мы добавим тэг wp_footer(), который служит для тех же целей, что и wp_head(). Мы поместим его перед закрывающим тэгом </body>. Мы также изменим способ загрузки наших JavaScript файлов, поместив их вызов в header.php.

В результате, наш обновленный footer.php должен выглядеть так:

Теперь можно вернуться и добавить загрузку JavaScript, в соответствии с рекомендациями разработчиков WordPress. Для этих целей воспользуемся специальной функцией wp_enqueue_script().

Во-первых, мы воспользуемся этой функцией, чтобы загрузить библиотеку jQuery прямо перед wp_head(). Поместите следующий код в свой header.php:

Далее, мы воспользуемся функцией wp_head(), чтобы загрузить скрипты JavaScript. Помните, wp_head() – это то, что используют плагины и темы для загрузки своих CSS и JavaScript файлов.

Создадим новый файл в папке нашей темы под названием functions.php и загрузим наши скрипты оттуда. Со стороны может показаться, что мы проделываем слишком много лишних шагов для загрузки JS. Однако, благодаря такому подходу, код вашей темы будет оставаться чистым и организованным, как бы она в дальнейшем не разрасталась в объеме.

В той же папке, где лежит файл header.php, создайте и откройте для редактирования файл functions.php. Вставьте туда следующий код:

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

Если выпадающее меню не работает, значит, где-то вкралась ошибка при связывании скриптов со страницей. Удостоверьтесь в том, что вы правильно выгрузили папку со скриптами в bootstrap > js.

Создание главной страницы WordPress

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

Перейдите в административную область и щелкните на пункте меню «Страницы > Добавить новую». Страницу назовите «Главная», а затем кликните на вкладке визуального редактора «Текст». Теперь вырежем весь html-код между тегами get_header() и get_footer() из файла index.php и вставим в визуальный редактор ВордПресс:

Не забудьте нажать кнопку «Опубликовать».

Теперь ваш файл index.php должен иметь вот такое содержание:

Чтобы динамически подключить содержание страницы «Главная», которую мы создали в административной панели Вордпресс, в наш шаблон, мы воспользуемся, пожалуй, самой известной функцией WordPress, известной как «Loop».

Loop (в пер. с англ. «петля») вполне оправдывает свое название. Loop перебирает страницы и опубликованные посты и «тянет» в них название и содержание, а также много другой полезной информации, например, дату публикации, автора статьи и даже связанные с ней комментарии.

В самом простом виде Loop выглядит так:

А так должен выглядеть ваш index.php после добавления туда Loop:

Что мы сейчас сделаем, так это извлечем название (title) и содержание (content) статьи. Тэг, отвечающий за вывод тайтла, пишется так: the_title(), а за вывод содержания – the_content(). А вот так они включаются в Loop:

Перед тем как мы протестируем вывод информации в браузере, необходимо обновить кое-какие настройки в WordPress. Настроим вывод на главную нашего сайта страницу «Главная», а не список последних записей в блоге, как это обычно сделано по умолчанию.

Итак, перейдите на вкладку Настройки > Чтение в административной части ВордПресс. В разделе «На главной странице отображать» выберите «Статическую страницу» и в выпадающем меню Главная страница — «Главная». Щелкните «Сохранить изменения» и перезагрузите главную страницу сайта. Вы должны увидеть содержание страницы «Главная», которую мы создали в админ панели ВордПресс.

WordPress позволяет нам использовать специальный файл, который называется front-page.php, исключительно для главных страниц, таких как «Главная». Сохраните файл index.php как front-page.php, удалив из него тэг the_title(), чтобы на главной не выводился заголовок «Главная».

Ваш шаблон front-page.php должен выглядеть так:

Вы можете оставить index.php с тем содержанием, которое есть.

Чтобы показать, что все работает, давайте попробуем отредактировать содержание главной страницы в административной части. Изменения должны отобразиться на сайте. Удалите кнопки, которые отображаются под тремя блоками текста с заголовками «Heading». Измененный код должен выглядеть так:

Вернитесь на сайт и обновите страницу. Теперь она должна выглядеть так:

blogbit.net