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

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

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

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

Еще в ноябре 2013 года Мэтт Каттс, глава группы Google по борьбе со спамом, выпустил видео, в котором объяснялось, что адаптивный дизайн не окажет негативного влияния на вас в результатах поиска. Кроме того, Google также опубликовал свои рекомендации по веб-сайтам , оптимизированным для мобильных устройств , в которых содержится подробная информация о том, как Google обращается с адаптивными веб-сайтами.

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

WordPress и адаптивный Интернет

WordPress - самая популярная CMS, на которой работает значительная часть Интернета. Он пользуется поддержкой сильного сообщества разработчиков и дизайнеров с открытым исходным кодом. С появлением отзывчивого веб-дизайна многие известные разработчики тем перешли на адаптивный дизайн и представили простые для понимания фреймворки, такие как Redux Framework, Carrington Core и Bootstrap , которые идеально подходят для создания адаптивной темы WordPress с нуля.

Что такое бутстрап?

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

Bootstrap - это набор инструментов, который упрощает процесс разработки для сложных веб-приложений. Это детище команды разработчиков Twitter, и оно стало доступным для сообщества разработчиков ПО с открытым исходным кодом. Фреймворк стал популярным из-за его легкой структуры, поскольку он написан на LessCSS.

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

Создайте тему WordPress Bootstrap

Создание темы начальной загрузки WordPress - это на самом деле 8-этапный процесс. Хорошая новость - создать тему на основе Bootstrap легко.

Шаг 1. Распакуйте Bootstrap

1. Прежде всего, установите WordPress на свой домен.
2. Загрузите и разархивируйте Bootstrap.
3. После этого подключитесь с помощью FTP-клиента, например FileZilla.
4. Перейдите в wp-content > themes .
5. Создайте новую папку в папке Themes и назовите ее BootSTheme . Загрузите в эту папку содержимое разархивированного Bootstrap.
6. Практически каждая установка WordPress содержит следующие файлы:

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

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

Шаг 2: настройка Bootstrap

В папке BootSTheme откройте style.css и вставьте следующий код.

 / *
Название темы: MyTheme
URI темы: https://cloudways.com
Описание: Mytheme Построен на начальной загрузке
Версия: 1.1
Автор: Ахсан Парвез
URI автора: https://cloudways.com
* /

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

Шаг 3: копирование кода

В этом руководстве я не буду использовать все файлы CSS и JS, предоставленные в пакете Bootstrap. Чтобы запустить процесс разработки, скопируйте код из файла bootstrap.min.css и вставьте его в файл style.css . На этом этапе файл style.css должен выглядеть так.

Примечание. Вы можете получить полный миниатюрный код CSS на веб-сайте Bootstrap.

Шаг 4. Настройка HTML-шаблона

Мне нужен базовый шаблон HTML для работы. Чтобы упростить задачу, я буду использовать эту тему HTML . Я рекомендую вам скачать, чтобы продолжить обучение.

WordPress имеет встроенные функции get_header () и get_footer (), которые по умолчанию вызывают файлы header.php и footer.php соответственно.

Начните с вырезания HTML-кода сверху до первого контейнера div и вставьте его в файл header.php . Файл будет выглядеть так:

Файл footer.php будет содержать остальной код:

На этом этапе, если вы загрузите тему Bootstrap WordPress и активируете ее, вы ничего не увидите, потому что index.php ничего не содержит.

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

 <? php get_header (); ?>

<? php get_footer (); ?>

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

Шаг 5. Установка верхнего и нижнего колонтитула

В файле header.php я импортирую таблицу стилей Bootstrap с помощью функции WordPress echo get_stylesheet_uri () (подробнее о функции см. В Кодексе WordPress ). Он импортирует style.css на сайт, и теперь вы увидите верхнюю строку меню.

Вы также можете добавить style.css , добавив следующий код вверху файла header.php .

 <link rel = "stylesheet" type = "text / css" href = "<? php echo get_stylesheet_directory_uri (). '/style.css'?>"> 

Но это еще не все, функции JavaScript на нашей странице по-прежнему не будут работать, и мы не увидим никаких раскрывающихся меню. Чтобы включить это, мы собираемся импортировать наши файлы js, напрямую импортируя файл по URL-адресу в footer.php . Вставьте следующий код перед закрывающим тегом тела .

 <script src = "../ wp-content / themes / MyBSTheme / js / bootstrap.min.js"> </script>

WordPress известен своими настройками и плагинами. Чтобы указать WordPress, где разместить хуки плагинов, мы собираемся вставить <? Php wp_head (); ?> и <? php wp_footer (); ?> в файлах header.php и footer.php . Также, чтобы установить динамические заголовки веб-сайта, мы будем использовать wp_title (); в файле header.php между тегами <title> .

 <заголовок> <? php wp_title ('|', true, 'right'); > </title>

Приведенный выше код вызовет заголовок сообщения, разделенный знаком "|" чем название сайта. Логическое значение true отобразит заголовок. Если вы установите для него значение false , он просто вернет значение, а не отобразит его. 'right' определяет расположение заголовка сообщения справа от разделителя.

Шаг 6. Отображение избранных сообщений

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

Напишите следующий код в свой index.php :

 <? php

query_posts ('posts_per_page = 1');

в то время как (имеют_посты ()): the_post (); ?>
<div>
<h2> <a href="<?php the_permalink(); ?> "> <? php the_title (); ?> </a> </h2>
<p> <? php the_excerpt (); ?> & lt; / p>
</div>

<? php end while; wp_reset_query (); ?>

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

Класс jumbotron определен в файле bootstrap.min.css . Я буду использовать его для стилизации избранных сообщений с помощью тегов <h2> и the_permalink (); функция. Гиперссылка создается на заголовке сообщения, а the_permalink (); функция ссылается на URL всего сообщения. Чтобы показать отрывок из сообщения, я использовал другую встроенную функцию WordPress, the_excerpt () ;.

Шаг 7: внесение ваших категорий в список

Теперь я перечислю категории слева на главной странице. Я создам несколько экземпляров div в стиле классов Bootstrap и функции WordPress wp_list_categories (); .

Вставьте следующий код в index.php :

 <div class = "панель по умолчанию панель-тело">
<div>
<div>

<ul>
<? php wp_list_categories ('orderby = name & title_li ='); ?>
</ul>

</div>
</div>
</div>

Это отобразит категории по имени с приятным эффектом наведения.

Шаг 8. Отображение последних сообщений и авторов

Наконец, мы собираемся показать последние сообщения блога на главной странице. Мы собираемся запустить другой DIV тег и под этим DIV, мы будем использовать подобную технику во время цикла , который мы использовали в признаках поста, но мы не будем ограничивать его query_posts (); .

 <div>

<? php while (have_posts ()): the_post (); ?>

<h3> <a href="<?php the_permalink(); ?> "> <? php the_title (); ?> </a> </h3>
<p> <? php the_excerpt (); ?> </p>
<p> отправлено <? php the_author (); ?>

<? php end while; wp_reset_query (); ?>

</div>

WordPress функции the_author () ; и получите имя пользователя автора сообщения. Мы можем использовать его для динамического отображения имени автора в каждом посте.

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

Добавление Bootstrap в существующую тему WordPress

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

Добавление Bootstrap с помощью CDN

Вы можете начать использовать элементы Bootstrap, просто добавив их CDN в свой файл header.php.

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

 <! - Последний скомпилированный и минимизированный CSS ->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<! - Последний скомпилированный и минимизированный JavaScript ->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script>

Вы можете получить доступ к файлу header.php с помощью FTP или плагина. Приведенный выше код содержит уменьшенные версии файлов CSS и JS, которые обеспечивают лучшую производительность.

Добавление Bootstrap в functions.php

В этом методе вам необходимо загрузить библиотеку Bootstrap. Загрузите файлы Bootstrap.min.css и Bootstrap-theme.min.css в папку CSS вашей темы и загрузите файл Bootstrap.js в папку с названием «js» вашей темы WordPress.

Теперь откройте свой файл functions.php, чтобы поставить эти скрипты в очередь.

Добавьте следующий код в свой файл functions.php.

 function reg_scripts () {
    wp_enqueue_style ('стиль начальной загрузки', get_template_directory_uri (). '/css/bootstrap.min.css');
    wp_enqueue_style ('bootstrapthemestyle', get_template_directory_uri (). '/css/bootstrap-theme.min.css');
    wp_enqueue_script ('сценарий начальной загрузки', get_template_directory_uri (). '/js/bootstrap.min.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'reg_scripts');

Вы также можете пропустить часть загрузки и напрямую поставить в очередь загрузочный CDN, вот так.

 function my_scripts_enqueue () {
    wp_register_script ('bootstrap-js', ': //maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array ('jquery'), NULL, true);
    wp_register_style ('bootstrap-css', ': //maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'все');

    wp_enqueue_script ('bootstrap-js');
    wp_enqueue_style ('бутстрап-CSS');
}
add_action ('wp_enqueue_scripts', 'my_scripts_enqueue');

Сохраните файл и загрузите его обратно на сервер.

Что дальше?

В этом руководстве основное внимание уделяется созданию базовой темы WordPress из шаблона HTML и адаптации к ней с помощью Bootstrap 3.x. В будущих публикациях я буду делать больше страниц, таких как single.php, front-page.php и functions.php. Я также объясню, как импортировать таблицы стилей и сценарии JavaScripts из файла functions.php.

Если вам нужна помощь, просто оставьте комментарий ниже, и я свяжусь с вами.