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

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

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

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

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

Необходимые условия для следования

В этом руководстве я предполагаю, что у вас есть среда разработки с установленными PHP, MySQL и WordPress, например Homestead Improved . Этот быстрый совет поможет вам быстро освоиться с новой 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 , чтобы выложить разделы верхнего и footer.php колонтитула нашей темы WordPress соответственно, которые отображаются на каждой странице нашей темы
• functions.php , где мы собираемся написать код для загрузки пользовательской таблицы стилей нашей темы, стилей и сценариев Bootstrap и многого другого.

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

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

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

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

 /* Theme Name: BS 4 Theme Theme URI: <THEME_URI> Description: A Theme for WordPress with Bootstrap for styling. Author: <AUTHOR_NAME> Author URI: <AUTHOR_URI> Version: 1.0 */ 

 @import url(https://fonts.googleapis.com/css?family=Montserrat:700); body { padding-top: 4.5rem; font-family: 'Montserrat','Helvetica Neue',Arial,sans-serif; color: #001A33; } 

 <!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-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title><?php wp_title('&laquo;', true, 'right'); ?> <?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'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#"> <?php bloginfo('name'); ?> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <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="/"> Home <span class="sr-only">(current)</span> </a> </li> </ul> </div> </nav> 

 require_once('bs4navwalker.php'); 

 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#"> <?php bloginfo('name'); ?> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <?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', 'depth' => 0, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> </nav> 

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

 <?php get_header(); ?> <!-- Other Content here --> <?php get_footer(); ?> 

 <div> <?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>There no posts to show</p> <?php endif; ?> </div> 

 - bs-theme - style.css - footer.php - functions.php - header.php - index.php - single.php - css - bootstrap.min.css - js - vendor - bootstrap.bundle.min.css 

 <?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');