Интеграция темы загрузки и WordPress за 8 простых шагов

1. Почему WordPress?
2. Почему Bootstrap?
3. Предпосылки для следования
4. Основные шаги по интеграции Bootstrap и WordPress
5. Структура темы WordPress
6. Шаг 1: Создание папки тем
7. Шаг 2: Добавление style.css
8. Шаг 6: Добавление файла шаблона index.php
9. Шаг 7: Добавление цикла WordPress
10. Шаг 8: Добавление Bootstrap
11. Заключение

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

Bootstrap и WordPress очень популярны: 3.7 веб-сайтов в Интернете создаются с помощью Bootstrap а также 29% Интернета использует WordPress , Очевидно, что знание того, как создавать веб-сайты и приложения с использованием этих двух надежных и зрелых технологий с открытым исходным кодом, может быть ценным навыком для разработчиков на рабочем месте.

Здесь есть что рассказать, так что давайте окунемся!

Почему WordPress?

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

Популярность WordPress в основном объясняется простотой использования и мощными возможностями внешнего вида, настройки и расширяемости (с помощью тем и плагинов).

Благодаря темам WordPress веб-мастера, практически не имеющие опыта программирования, могут придать своим веб-сайтам профессиональный вид и индивидуальные функциональные возможности. Пользователи могут легко выбирать различные темы с помощью нескольких щелчков мыши, используя меню « Внешний вид» на панели администрирования, или копировать файлы тем непосредственно в папку wp-content> themes . Темы могут быть приобретены на специализированных торговых площадках, у отдельных разработчиков, а также могут быть свободно установлены с Каталог тем WordPress.org ,

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

Почему Bootstrap?

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

На мой взгляд, есть много преимуществ использования Bootstrap для стилизации темы WordPress.

• Bootstrap - это популярный проект с открытым исходным кодом с обширной разработкой и постоянным обслуживанием, что со временем привело к уменьшению количества ошибок.

• Это кросс-браузерная структура, которая поддерживает основные браузеры с хорошим базовым уровнем CSS под названием [Reboot]
  (Http://getbootstrap.com/docs/4.0/content/reboot/).

• Имеет обширную и тщательную документацию.

• Он имеет дело с перезагрузкой, сетками, типографикой, утилитами и медиа-запросами, тем самым освобождая время разработки.

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

• Bootstrap можно использовать для быстрого создания мобильной и оптимизированной для WordPress темы, не изобретая велосипед.

• Сообществом доступно множество тем для начинающих, таких как Understrap , которые стремятся обеспечить быструю отправную точку для разработчиков для создания тем WordPress с Bootstrap.

• Хотя он не создан с учетом WordPress, Bootstrap может быть легко интегрирован с WordPress.

• Мы можем легко настроить Bootstrap в соответствии с конкретными требованиями проекта, когда у нас будет достаточно знаний о доступных классах.

• Мы можем воспользоваться сотнями плагинов JavaScript / jQuery, уже интегрированных с Bootstrap.

• Начиная с Bootstrap 4, плагины используют современную ES6.

• С выпуском Bootstrap 4 библиотека теперь использует Sass вместо Less в качестве предпочтительного препроцессора, что делает его более широко совместимым с огромным количеством рабочих процессов разработчиков.

• Bootstrap 4 представляет новые компоненты, такие как компонент карты , Карты Bootstrap позволяют легко создавать современный, карточный макет такой как интерфейс в стиле масонства.

• Сетка Bootstrap 4 построена поверх Flexbox , что делает сетку еще более гибкой, удобной для разработчиков и чистой.

Что касается недостатков, сообщество разработчиков подняло несколько вопросов, в том числе следующие.

• Bootstrap не предназначен для прямой интеграции с WordPress, но это не должно быть серьезным препятствием для большинства разработчиков.

• Если нам нужно переопределить множество предопределенных стилей Bootstrap, чтобы удовлетворить требования дизайна, возможно, не стоит вообще использовать CSS-фреймворк.

• Это правда, что Bootstrap позволяет легко добавить адаптивный стиль к нашей теме. Однако нам также нужно потратить время на изучение Bootstrap, чтобы иметь возможность добавлять наши настройки, чтобы наши темы выглядели не так, как на многочисленных веб-сайтах Bootstrap в Интернете.

• Bootstrap зависит от jQuery, поэтому в некоторых ситуациях нам, возможно, придется столкнуться с проблемами, связанными с jQuery, такими как устаревшие плагины или необходимость включения всей библиотеки jQuery, даже если нашему проекту нужна только небольшая функция, такая как $ .ajax ().

Предпосылки для следования

В этом руководстве предполагается, что у вас есть среда разработки с установленными PHP, MySQL и WordPress, например, Усадьба Улучшена , это быстрая подсказка поможет вам быстро освоиться с новой Homestead Improved Vagrant VM.

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

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

Основные шаги по интеграции Bootstrap и WordPress

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

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

Структура темы WordPress

Тема WordPress имеет предопределенную файловую структуру. Некоторые файлы необходимы для распознавания темы WordPress.

Первый необходимый файл - это style.css. Этот файл CSS содержит стили для темы. Наиболее важно, что этот файл также имеет специальную задачу: он предоставляет метаинформацию о теме, такую ​​как название темы, описание, автор и другие дополнительные детали. Мета-информация должна присутствовать в заголовке файла в виде комментариев CSS.

Другой необходимый файл - index.php, который является основным файлом темы WordPress, и последний резервный файл шаблона, на который опирается WordPress, в случае, если он не может найти другой файл шаблона для отображения своего содержимого.

Есть много необязательных файлов, но для нашей простой темы на основе Bootstrap мы добавим только следующие файлы:

• header.php и footer.php, чтобы выложить разделы верхнего и нижнего колонтитула нашей темы WordPress соответственно, которые отображаются на каждой странице нашей темы
• functions.php, где мы собираемся написать код для загрузки пользовательской таблицы стилей нашей темы, стилей и сценариев Bootstrap и многого другого.

Если вам интересно, посмотрите другие шаблоны, которые вы можете настроить из WordPress документы ,

Давайте приступим к делу!

Шаг 1: Создание папки тем

Сначала мы переходим в папку установки WordPress и переходим к wp-content -> themes. Здесь мы создаем папку для нашей темы. Давайте назовем это bs-theme.

Шаг 2: Добавление style.css

Давайте создадим наш первый обязательный файл style.css, куда мы собираемся поместить наш собственный код CSS.

В самом верху этого документа таблицы стилей (убедитесь, что вы не оставляете пустое пространство сверху), мы добавляем мета-информацию о нашей теме между комментариями CSS (не забудьте заменить заполнители <THEME_URI>, <AUTHOR_NAME> и <AUTHOR_URI> со значениями, относящимися к вашему собственному проекту):

/ * Название темы: BS 4 Theme Theme URI: <THEME_URI> Описание: Тема для WordPress с Bootstrap для стилизации. Автор: <AUTHOR_NAME> Автор URI: <AUTHOR_URI> Версия: 1.0 * /

Теперь WordPress может отображать информацию о нашей теме в админке.

Мы можем добавить наши собственные стили под комментариями метаинформации. Например, давайте добавим несколько правил CSS для стиля <body>:

@import url (https://fonts.googleapis.com/css?family=Montserrat:700); body {padding-top: 4.5rem; семейство шрифтов: 'Montserrat', 'Helvetica Neue', Arial, без засечек; цвет: # 001A33; }

Давайте начнем с создания header.php в папке тем. Далее добавляем следующий контент:

<! DOCTYPE html> <! - [if lt IE 7]> <html class = "no-js lt-ie9 lt-ie8 lt-ie7"> <! [Endif] -> <! - [if IE 7]> <html class = "no-js lt-ie9 lt-ie8"> <! [Endif] -> <! - [if IE 8]> <html class = "no-js lt-ie9"> <! [endif] -> <! - [if gt IE 8]> <! -> <html class = "no-js"> <! - <! [endif] -> <head> < meta charset = "utf-8"> <meta http-экв = "X-UA-совместимый" content = "IE = edge, chrome = 1"> <title&gt; <? php wp_title ('& laquo;', true, ' право'); ?&gt; <? php bloginfo ('name'); ?> </ title> <meta name = "description" content = ""> <meta name = "author" content = ""> <meta name = "viewport" content = "width = device-width"> <link rel = "pingback" href = "<? php bloginfo ('pingback_url');?>" /&gt; <? php wp_head (); ?> </ head> <body <? php body_class (); ? >> <nav class = "navbar navbar-expand-md navbar-dark с фиксированной вершиной bg-dark"> <a class="navbar-brand" href="#"&gt; <? php bloginfo ('name'); ?> </a> <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "# navbarCollapse" aria-controls = "navbarCollapse" aria-extended = "false" aria -label = "Переключить навигацию"> <span class = "navbar-toggler-icon"> </ span> </ button> <div class = "collapse navbar-collapse" id = "navbarCollapse"> <ul class = "navbar -nav mr-auto "> <li class =" nav-item active "> <a class="nav-link" href="/"> Главная страница <span class =" sr-only "> (текущая версия) </ span > </a> </ li> </ ul> </ div> </ nav>

В приведенном выше коде большая часть метаинформации для раздела заголовка HTML добавляется с использованием различных тегов WordPress, таких как bloginfo ( 'имя') для получения названия сайта, wp_title () чтобы получить заголовок для страницы, и wp_head (), чтобы запустить хук действия wp_head используется WordPress для добавления ссылок и других функций в раздел заголовка.

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

Предоставление статической панели навигации Bootstrap мощью WordPress будет нашим следующим шагом.

Чтобы выполнить нашу задачу, нам нужен WordPress Walker класс , что позволяет разработчикам обходить древовидные структуры данных с целью визуализации HTML-разметки. В Интернете доступно несколько классов ходунков Bootstrap. Для этого урока мы пойдем с Домиником Бусинаро BS4navwalker , который свободно доступен на GitHub.

Мы берем bs4navwalker.php и сохраняем его в корневом каталоге нашей темы (которую мы называли bs-theme ранее в этом уроке).

Далее мы создадим файл functions.php (это имя требуется WordPress) в корневой папке темы, и мы напишем следующую строку кода:

require_once ( 'bs4navwalker.php');

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

Мы находим разметку для только что написанного элемента nav и изменяем ее следующим образом:

<nav class = "navbar navbar-expand-md navbar-dark с фиксированной вершиной bg-dark"> <a class="navbar-brand" href="#"&gt; <? php bloginfo ('name'); ?> </a> <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "# navbarCollapse" aria-controls = "navbarCollapse" aria-extended = "false" aria -label = "Переключить навигацию"> <span class = "navbar-toggler-icon"> </ span> </ button&gt; <? php wp_nav_menu (['menu' => 'primary', 'theme_location' => 'menu -1 ',' container '=>' div ',' container_id '=>' navbarCollapse ',' container_class '=>' collapse navbar-collapse ',' menu_id '=> false,' menu_class '=>' navbar-nav mr-auto ',' deep '=> 0,' fallback_cb '=>' bs4navwalker :: fallback ',' walker '=> new bs4navwalker ()]); ?> </ nav>

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

Чтобы отобразить нашу панель навигации, мы используем функцию wp_nav_menu ().

Значения параметров menu и theme_location, которые мы передаем в wp_nav_menu (), взяты из настроек нашего меню WordPress, которое мы должны были создать уже в области администратора.

Значения параметров container, container_id и container_class берутся из классов Bootstrap и атрибута CSS id элемента div, который обертывает элемент ul, содержащий элементы списка для наших навигационных ссылок.

Значение параметра menu_class происходит из класса Bootstrap в элементе ul.

Значение параметра глубины указывает, сколько иерархических уровней будет иметь наше навигационное меню. Мы установили это в 0, которое является значением по умолчанию и обозначает все .

Параметр walker здесь очень важен, и мы установили для него новый экземпляр класса bs4navwalker, который отвечает за рендеринг разметки навигации Bootstrap.

И мы сделали!

Вы найдете подробное объяснение с полным списком параметров для функции wp_nav_menu () в Страница документации WordPress.org ,

Следующим шагом является создание файла footer.php и добавление следующего содержимого:

<footer> </ footer&gt; <? php wp_footer (); ?> </ body> </ html>

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

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

Шаг 6: Добавление файла шаблона index.php

index.php - второй необходимый файл для каждой темы WordPress, так что давайте продолжим и создадим его. Затем мы добавляем содержимое ниже:

<? php get_header (); ?> <! - Другое содержимое здесь -&gt; <? Php get_footer (); ?>

Использование get_header () и get_footer () инструктирует WordPress включать ранее созданные шаблоны header.php и footer.php в index.php.

Шаг 7: Добавление цикла WordPress

Чтобы показать наши сообщения, мы будем использовать знаменитый Цикл WordPress ,

Внутри index.php, между тегами header и footer, давайте добавим следующий код:

<div&gt; <? php if (have_posts ()): while (have_posts ()): the_post (); ?> <h2> <a href="<?php the_permalink() ?> "&gt; <? php the_title (); ?> </a> </ h2&gt; <? php the_content (); ?&gt; <? php endween; еще:?> <p> Нет записей для показа </ p&gt; <? php endif; ?> </ div>

Вот что происходит выше:

• Мы проверяем, есть ли какие-либо сообщения, вызывая have_posts ().
• Используя цикл while, мы перебираем все существующие сообщения.
• Наконец, мы показываем заголовок и содержание для каждого сообщения. Мы также можем получить дополнительную информацию, такую ​​как дата публикации поста, автор поста, комментарии, связанные с каждым постом, и так далее.

Шаг 8: Добавление Bootstrap

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

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

Чтобы наша тема выглядела как Bootstrap, нам нужно включить файлы Bootstrap в наш проект.

Давайте возьмем файл Bootstrap ZIP из getbootstrap.com и скопируйте файлы в нашу тему. (Для организационных целей мы можем добавить папки css и js в наш проект и поместить соответствующие файлы в соответствующую папку.)

Наша структура папок должна выглядеть так:

- bs-theme - style.css - footer.php - functions.php - header.php - index.php - single.php - css - bootstrap.min.css - js - вендор - bootstrap.bundle.min.css

Далее мы сделаем следующее:

• Ставить Таблица стилей начальной загрузки и файлы JavaScript
• использование WordPress хуки вставить файлы Bootstrap на веб-страницу.

Давайте начнем с открытия functions.php и добавления следующего кода:

<? php function themebs_enqueue_styles () {wp_enqueue_style ('bootstrap', get_template_directory_uri (). '/css/bootstrap.min.css'); wp_enqueue_style ('core', get_template_directory_uri (). '/style.css'); } add_action ('wp_enqueue_scripts', 'themebs_enqueue_styles'); function themebs_enqueue_scripts () {wp_enqueue_script ('bootstrap', get_template_directory_uri (). '/js/vendor/bootstrap.bundle.min.js', array ('jquery')); } add_action ('wp_enqueue_scripts', 'themebs_enqueue_scripts');

Здесь мы использовали различные методы WordPress, поэтому давайте кратко рассмотрим каждый из них:

• wp_enqueue_style (): этот метод ставит в очередь и загружает таблицу стилей, переданную в качестве параметра. В приведенном выше коде мы используем его для загрузки таблицы стилей Bootstrap и нашего пользовательского файла CSS.
• wp_enqueue_script (): этот метод ставит в очередь и загружает файл сценария. Мы использовали его для загрузки пакета Bootstrap JavaScript, указывая библиотека jQuery как зависимость. jQuery уже поставляется в комплекте с WordPress, поэтому нам не нужно загружать его, используя URL. (WordPress точно знает, где его взять.)
• get_template_directory_uri (): этот метод получает URI текущего активированного каталога темы.
• add_action ('wp_enqueue_scripts', '...'): этот метод подключает наши функции к действию wp_enqueue_scripts (используется при добавлении в очередь стилей и сценариев, которые должны появиться в интерфейсе веб-сайта).

Вы можете найти больше информации о включении файлов CSS и JavaScript в WordPress тематические документы ,

Это наша тема теперь с ее блестящим внешним видом Bootstrap:

Заключение

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

С этим новым умением под вашим поясом для разработчиков вы теперь готовы создать свою собственную классную тему WordPress на основе Bootstrap и поделиться ею со всем миром!

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

Похожие

Комментарии