PHP WordPress

Как Сделать Адаптивный Шаблон WordPress с Помощью HTML5

Как Сделать Адаптивный Шаблон WordPress с Помощью HTML5

Введение

Шаблон WordPress – это набор файлов, который определяет внешний вид вашего сайта. Шаблон включает в себя HTML, PHP и CSS, а также довольно часто JavaScript/jQuery.

В этом руководстве по WordPress, вы узнаете, как сделать адаптивный шаблон WordPress с помощью HTML5, CSS3 и принципов адаптивного дизайна. Вы также узнаете, как разделить разные части вашего сайта на “шаблоны”.

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

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Чтобы успешно следовать данному руководству, вам понадобится текстовый редактор, вроде Notepad++ или NetBeans.

Что такое HTML5 и почему вы должны его использовать

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

Самым большим изменением является появление нового набора семантических элементов HTML. К примеру, теперь footer (футер) любой HTML страницы может быть обозначен с помощью элемента <footer></footer>, который подскажет браузеру, что данная часть сайта является футером. В более ранних версиях HTML, футер создавался такими элементами как <div></div>.

Обычный документ HTML5 выглядит примерно так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Моя страница HTML5</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <h1>Мой сайт</h1>
    </header>
    <main>
      <section>
        <header>
          <h2>Мои статьи</h2>
        </header>
        <article>
          <header> 
            <h2>Статья</h2> 
          </header>
          <p class="inline-text-box">Левый</p><p class="inline-text-box">Правый</p>
        </article>
      </section>
    </main>
    <footer>
        <p>Все права защищены &copy; 2017</p>
    </footer>
  </body>
</html>

Что такое адаптивный дизайн и адаптивный шаблон?

Адаптивный дизайн означает, что ваш сайт автоматически отображается в лучшем формате для посетителя на основе размера его экрана. Макет страницы в буквальном смысле ‘реагирует’ на доступное место на экране посетителя. Содержимое должно быть расположено идеально, чтобы ничего не было обрезано, не уплывало за экран и в общем сайт должен быть чист настолько, насколько это возможно.

Что такое адаптивный дизайн

Вы должны думать о макете вашего сайта, как о серии сеток и задать содержимому процент от ширины сетки. Например, div может забрать 50% доступного места, вместо указания его ширины в 800px. Ширина div полной страницы занимает 100% свободного пространства, поэтому, если вы хотите вместить четыре div на одной линии, каждая должна занимать 25% всего пространства.

Для изображений, вы можете задать максимальную ширину в 100% его настоящего размера и задать высоту как auto. Когда контейнер с изображением в нём будет уменьшаться в размерах, следом за ним автоматически будет уменьшаться изображение в ширине и высоте.

Для изображений, использование (ширины) width: 100% вместо (максимальной ширины) max-width: 100% приведет к тому, что изображение будет занимать 100% доступного ему пространства, вместо того, чтобы остановиться на его настоящей ширине и высоте. Если изображение в ширину 200px, но находится в внутри div, который занимает 100% пространства экрана, max-width обеспечит, чтобы изображение не увеличивалось больше своего настоящего размера 200px в ширину.

/* ХОРОШИЙ ПРИМЕР WIDTH */
.inline-text-box {
  width: 50%;
}
/* ПЛОХОЙ ПРИМЕР WIDTH */
.inline-text-box {
  width: 800px;
}
/* ХОРОШЕЕ ИЗОБРАЖЕНИЕ */
img {
  max-width: 100%;
  height: auto;
}
/* ПЛОХОЕ ИЗОБРАЖЕНИЕ */
img {
  width: 100%;
  height: auto;
}

Чтобы сделать шаблон полностью отзывчивым, вы также можете использовать функцию CSS3 под названием медиа-запросы. В медиа-запросах вы можете определить медиа тип (экран, печать и т.д.) на который будет влиять хотя бы одна медиа функция (max-width, orientation и т.д.). Медиа функции могут быть связаны между собой ключевым словом and.

/* Медиа Тип and Медиа Функция and Медиа Функция*/
@media only screen and (min-width: 400px) and (max-width: 800px) {
  .inline-text-box {
    width: 100%;
    display: block;
  }
}
/* Только Медиа Функция */
@media (max-width: 1200px) {
  .inline-text-box {
    width: 50%;
  }
}
  • В первом примере CSS будет применен к любому экрану (монитору, телефону и т.д.), которые имеют видимую ширину (область внутри браузера, не всё окно) между 400px и 800px.
  • Второй пример будет применен для любого медиа типа, который ее просматривает.
  • Еще один интересный медиа тип ‘print’ означает, что CSS будет применен только в том случае, если пользователь предварительно просматривает страницу в окне ее печати.

Полный список медиа типов и медиа функций доступен на сайте веб-документации Mozila Developer Network.

В вашей таблице стилей CSS вы определяете правила, которые указывают когда содержимое меняется, какое содержимое меняется и как оно меняется. Этим способом вы можете изменить любой CSS атрибут, вроде ширины любого текстового блока или задний фон div. Вот некоторые примеры правил медиа функций, которые указывают когда правило будет применено:

  • max-width – максимальная ширина видимой области браузера, любое значение больше нее и правило не будет применено
  • min-width – минимальная ширина для видимой области, любое значение меньше данного и правило не будет применено
  • orientation – находится ли экран в альбомном или портретном режиме

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

Шаг 1 – Хранение темы и ее файлов

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

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

Давайте начнем руководство и узнаем, как сделать адаптивный шаблон WordPress!

WordPress шаблоны находятся в собственных папка в каталоге wp-content/themes/.

В каталоге wp-content/themes/ создайте новую папку под названием my-theme. Папка должна иметь уникальное и короткое имя, чтобы ее было легче найти.

ЗАМЕТКА: Папка темы не должна содержать числа или пробелы. Ваша тема не должна иметь то же название, что и другая. Если вы планируете поделиться вашей темой, то удостоверьтесь в том, что тема с данным именем уже не была загружена в каталог тем WordPress.

Шаблон WordPress может быть создан даже с двумя файлами – index.php и style.css – и WordPress будет использовать их для отображения каждой из страниц и записей на вашем сайте.

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

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

Каждый файл шаблона должен иметь корректное имя, которое определенно в документации WordPress.

Вот некоторые из файлов шаблона помимо index.php:

  • header.php – содержит любой HTML, который идет вверху вашей страницы, начиная от <!DOCTYPE html>
  • single.php – используется при отображении одной Записи из вашего блога
  • page.php – используется при отображении одной Страницы из вашего блога
  • comments.php – определяет как комментарии и блок с комментариями будут отображаться
  • footer.php – содержит любой HTML, который идет внизу вашей страницы, включая </html>

Для ознакомления с полным списком шаблонов, посетите данный сайт WordPress Theme Developer Handbook.

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

Шаг 2 – Создание файлов шаблона и таблицы стилей CSS 

В папке my-theme создайте следующие PHP файлы:

  • header.php
  • index.php
  • footer.php
  • functions.php
  • sidebar.php
  • single.php
  • page.php

В дополнение к PHP файлам создайте новый CSS файл под названием style.css (основная таблица стилей должна называться style.css).
Создать WordPress файлы адаптивного шаблона WordPress

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

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

Существует определенное число ключевых слов заголовка, которые помогут вам указать информацию об авторе (ваше имя), сайт автора, описание темы, имя темы, версию темы и т.д. Для получения полного списка ключевых слов заголовка посетите страницу WordPress Codex – File Header.

Вот формат для написания заголовка Ключевое слово: Информация

/*
Theme Name: My Theme
Author: Hostinger
Author URI: http://www.hostinger.ru/rukovodstva
Description: Мой первый адаптивный шаблон WordPress
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

ЗАМЕТКА: Седьмая и восьмая строка необходима лишь, если вы планируете поделиться своей темой на WordPress.org. Если вы будете использовать тему на вашем собственном сайте, вы можете пропустить эти две строки и закрыть раздел комментария.

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

My Theme Адаптивный шаблон

Если вы активируете тему сейчас, то вы увидите пустую главную страницу вашего сайта, так как файл index.php пуст, и пока еще не создано никаких шаблонов.

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

Добавьте пустую строку после закрытия комментария */ на строке 10.

На следующей строке после новой пустой строки (11 строка в файле), напишите следующее.

* {
  box-sizing: border-box;

}

body {
    background-color: #f9f9f9;
    font-family: Helvetica;
}

Первая запись является важной частью адаптивного дизайна.  Знак * является подстановочным и соответствует каждому классу, который может быть найден в HTML документе. Он означает, что окончательная ширина и высота каждого объекта на странице должна включать содержимое, padding и border. Если вы не зададите такие параметры, и у вас будет два блока с шириной 50% расположенных бок о бок с любым значением padding (поля вокруг элемента) или border (границы вокруг элемента), они не будут находится бок о бок, так как их настоящий размер будет больше чем 100%. Блок с шириной в 100% и padding в 1% будет занимать 102%, так как padding добавляется с левой и правой стороны. Вместо этого, правило добавляет padding внутрь блока, вместо его добавления снаружи.

Вторая запись просто меняет белый задний фон, таким образом мы сможем быстро увидеть используется ли таблица стилей. Мы также задали шрифт, который будет использоваться в нашем шаблоне.

Шаг 3 – Перед началом создания

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

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

Первое, мы добавим CSS файл под названием normalize.css. Различные браузеры, имеют различные стандартные настройки для таких вещей как padding и border. Normalize.css устанавливает несколько наборов атрибутов, чтобы обеспечить, что все браузеры отображают вашу страницу одинаково. Если не использовать такую таблицу стилей, то частой проблемой может стать то, что когда вы захотите, чтобы ваш заголовок начинался с самого верха левого края вашей страницы, в конечном результате вы все равно обнаружите пустое место над ним.

functions.php

Откройте functions.php и добавьте следующий код:

<?php
// Эта функция помещает файл Normalize.css в очередь для использования. Первый параметр это имя таблицы стилей, второе это URL. Здесь мы
// используем онлайн версию css файла.
function add_normalize_CSS() {
    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}

Далее, вам понадобиться включить боковые виджеты. Если вы не включите этот код, ссылка на меню виджетов не будет видна в панели управления, и вы не сможете добавить никаких виджетов. Пока вы еще находитесь в файле functions.php, ниже предыдущей функции добавьте следующий код:

// Регистрирует новую боковую панель под названием 'sidebar'
function add_widget_Support() {
                register_sidebar( array(
                                'name' => 'Sidebar',
                                'id' => 'sidebar',
                                'before_widget' => '<div>',
                                'after_widget' => '</div>',
                                'before_title' => '<h2>',
                                'after_title' => '</h2>',
                ) );
}
// Подхватывает(hook) инициацию виджета и запускает нашу функцию
add_action( 'widgets_init', 'add_Widget_Support' );

Теперь нам необходимо зарегистрировать пользовательское навигационное меню, чтобы разрешить использование Внешний вид → Меню в панели администратора. Добавьте следующие строки после предыдущего кода:

// Регистрирует новое навигационное меню
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Подхватывает (hook) init хук-событие, запускает функцию нашего навигационного меню
add_action( 'init', 'add_Main_Nav' );

Сохраните файл functions.php и загрузите его в папку с вашим шаблоном.

sidebar.php

Теперь откройте файл sidebar.php и добавьте следующий код. Он даст возможность боковой панели и вашим виджетам появляться тогда get_sidebar(), когда его вызывают.

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
  <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </aside>
<?php endif; ?>

Первая строка говорит WordPress, если виджеты не включены, то боковая панель HTML не должна быть показана. Вторая строка устанавливает атрибуты для элемента, который содержит виджет. HTML5 предоставляет элемент ‘aside’ для боковой панели. Третья строка – это функция WordPress для фактического отображения виджетов. Последняя строка закрывает начальный оператор if.

Сохраните и загрузите файл sidebar.php в папку вашего шаблона.

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

Шаг 4 – Построение макета с помощью шаблонов

header.php

header.php определит самый верх нашего документа, начиная с DOCTYPE.

Все HTML документы должны начинаться с DOCTYPE, который даст браузеру знать, как воспринимать документ. Тип документа HTML5 просто html. Открывающему тегу <html> нужен языковой атрибут, и WordPress предоставляет функцию для ввода корректного кода языка, который вы выбрали в процессе установки – language_attributes().

В поле заголовка, вы используете строчку кода, которая отобразит название вашего сайта с последующими if…then… операторами, чтобы отобразить описание вашего сайта ИЛИ заголовок текущей страницы/записи.

Знак ? это условный оператор PHP называемый тернарным оператором. В этой строчке кода is_front_page() это функция WordPress, которая возвращает TRUE, если просматривается главная страница или FALSE, если просматривается любая запись или страница. Функция перед двоеточием используется, если было возвращено TRUE, а функция после двоеточия используется, если возвращено FALSE.

Как вы можете увидеть чуть ниже в коде, функция bloginfo() используется довольно часто с разными параметрами, чтобы получить различные части информации из базы данных WordPress. Перед тегом <head> закрытым </head>, вы должны вставить хук-событие wp_head() , чтобы гарантировать то, что любая привязанная к ней функция запущена.

Функция body_class() дает вашему body стандартные CSS классы установленные WordPress. Последняя строка разрешает отображение навигационного меню, если оно было создано в панели управления. Окончательный вид файла header.php будет таким:

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
   <header class="my-logo">
   <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
   </header>
 <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

Если вы хотите использовать лого в качестве заголовка, замените <?php bloginfo(‘name’); ?> на код вашего изображения внутри тегов <header>.

Сохраните header.php и загрузите его в папку вашего шаблона.

index.php

index.php определяет главную страницу, а также будет использоваться в качестве стандартного макета, если определенные файлы шаблонов (например single.phppage.php) не будут найдены.

Мы используем теги шаблонов, чтобы убедиться в том, что коды header (get_header), sidebar (get_sidebar) и footer (get_footer) включены в нашу главную страницу.

Цикл WordPress будет всегда отображать список записей и их выдержки с большим количеством тегов шаблона. Мы также используем семантические элементы HTML5 <section><main><header> и <article>. Некоторые из наших элементов будут иметь назначенные для них классы, они будут написаны когда мы перейдем к файлу style.css.

<?php get_header(); ?>
<main class="wrap">
  <section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
          Автор: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Извините, записи не были найдены!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

Цикл начинается с <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> и заканчивается на <?php endif; ?>. Внутри цикла используются следующие теги шаблонов:

  • <?php the_permalink(); ?> – выводит URL настоящей записи
  • <?php the_title_attribute(); ?> – выводит заголовок записи в безопасном формате для атрибута заголовка ссылки
  • <?php the_title(); ?> – выводит заголовок записи
  • <?php the_author(); ?> – выводит имя автора
  • <?php the_excerpt(); ?> – выводит выдержку из записи, которая будет автоматически сгенерирована, если вы не написали свою собственную

Теги <header></header> могут быть использованы несколько раз на любой странице и не обязательно ссылаться на хедер страницы.
Разделы и статьи должны иметь элементы хедера, когда используется любой текст внутри <h1>,<h2> и т.д. Если раздел или статья еще не имеют текста хедера, то их можно оставить без внимания.

Сохраните файл index.php и загрузите его в папку вашего шаблона. Если вы зайдете сейчас на ваш сайт, то увидите довольно простую страницу.

Как сделать адаптивный шаблон WordPress

Вы можете заметить, что заголовок во вкладке браузера состоит из имени вашего сайта и его описания. В верхней части имеется название вашего сайта (или лого, если вы использовали его). Также любая запись, которая есть у вас на сайте отображается со своим заголовком, автором и выдержкой. Несмотря на то, что сайт загружается без проблем, вам все равно необходимо закрыть открытые теги <body> и <html> в footer.php.

footer.php

footer.php определяет футер каждой страницы и должен закрывать любые открытые теги HTML в других файлах шаблонов. В данном случае <body> и <html> до сих пор являются открытыми из header.php.

Он также должен включать в себя хук-событие wp_footer() , чтобы обеспечить добавление любого конечного кода WordPress и JavaScript