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 на страницу. Если при заходе на сайт вы были авторизованы в качестве администратора, то вы могли заметить, что сверху пропала панель администратора. Код, который показывает панель администратора подхватывается с хуком wp_footer().

Мы также добавим семантические элементы HTML5 <footer></footer>, чтобы явно определить наш футер.

<footer>
      <p>Copyright &copy; 2017</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

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

single.php

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

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

Главный контент будет занимать всю ширину страницы, так как мы задали ему класс content-full-width из таблицы стилей. Ссылка была удалена из заголовка, так как она здесь не нужна. Функция для отображения всего поста это the_content():

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

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

page.php

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

Обратите внимание, что если файл шаблона не существует, то будет использован файл шаблона index.php. Если вы не создадите page.php, то шаблон не будет использовать такой же макет, как и posts.php.

Чтобы сделать различия более явными, мы снова добавим боковую панель в этот макет, и зададим контенту страницы 70% ее ширины.

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

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

style.css

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

.my-logo,
footer {
  width: 100%;
  padding-left: 1%;
  margin-bottom: 8px;
  background-color: #78baff;
  border: 1px solid #78baff;
}
body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {

}
footer {
  margin-top: 4px;
}

a {
  text-decoration: none;
}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 10px;
}

.article-full {
  width: 99%;
  padding: 1%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 4px;
}

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

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

Использование медиа-запросов

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

Для этого руководства по WordPress мы изменим ширину записей в списке записей, когда окно браузера будет меньше 800px. Вместо 2 записей расположенных бок о бок, каждая запись будет на своей линии. Мы сделаем это с помощью добавления медиа-запросов. Если вы хотите освежить в памяти информацию о медиа-запросах, вернитесь к разделу Что такое адаптивный дизайн? этого руководства.

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

Для начала мы напишем медиа-запрос, который будет влиять на класс .article-loop, который имеет ширину 49% по умолчанию. Мы напишем его прямо под исходным определением. Медиа-запрос будет звучать так, если окно браузера меньше 800px в ширину, то класс .article-loop должен использовать 99% доступного пространства вместо изначального значения.

Затем мы напишем медиа-запрос, который опустит боковую панель под основной контент и расширит основной контент и саму панель до 100% ширины, если окно браузера меньше 600px. Это будет наиболее подходящий макет для мобильных устройств, когда место ограничено.

Вновь в файле style.css найдите определение .article-loop, которое должно быть на строке 73. Ниже класса .article-loop впишите следующее:

@media screen and (max-width: 800px) {
  .article-loop {
    width: 99%;
 }
}

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

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

Следующий медиа-запрос, который мы добавим будет похож на предыдущий. Он скажет основному контенту и боковой панели занимать 100% доступного пространства, и боковая панель уйдет под основной контент.

ЗАМЕТКА: Так как этот медиа-запрос влияет на различные классы, которые находятся в различных места таблицы стилей, стоит поместить такого рода медиа-запрос в конец файла таблицы стилей.

@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

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

 

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

Объяснение тегов шаблона и хуков-события WordPress

Чтобы полностью интегрировать ваш шаблон с WordPress, вы должны использовать теги шаблона и хуки-события. Это две совершенно разные вещи.

Теги шаблона

Теги шаблона – это PHP функции, предоставляемые WordPress, чтобы легко включить файлы шаблонов (вроде header.php) из вашей темы в другой файл или показать какую-либо информацию из базы данных.

Например, чтобы показать футер на главной странице, но не на какой-либо другой, добавьте get_footer() в конец файла index.php, а не в page.php.

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

Шаблоны тегов, чтобы вставить в файлы шаблона:

  • get_header() – включает шаблон файла header.php
  • get_sidebar() – включает шаблон файла sidebar.php
  • get_footer() – включает шаблон файла footer.php
  • get_search_form() – включает шаблон файла searchform.php

Теги шаблонов, чтобы отобразить информацию из базы данных

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

  • bloginfo() – отображает информацию запрошенную в качестве параметра, например, bloginfo(“name”) показывает имя вашего сайта, которое задано в панели управления (посмотрите список параметров)
  • single_post_title() – отображает заголовок текущей записи, когда используется в single.php
  • the_author() – отображает автора текущей записи
  • the_content() – отображает основной текст записи или страницы
  • the_excerpt() – выдержка из поста или страницы

Полный список тегов шаблона вы можете найти здесь.

Хуки-события

Хуки-события – это PHP функции, предоставляемые WordPress, которые обычно имеют другие функции прикрепленные к ним. Некоторые хуки не имеют таковых и существуют исключительно для плагинов. Хуки-события позволяют плагинам прикреплять их собственные функции и запускать их в различных точках в процессе загрузки страницы.

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

В разделе футера вашего шаблона хук-событие wp_footer() вызвано, чтобы включить стандартный HTML и JavaScript и запустить любую функцию прикрепленную к ним плагинами

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

К примеру, если не вызвать wp_footer() в файле шаблона footer.php, то вы не сможете увидеть панель администратора, даже если вы авторизованы как админ. Базовый код WordPress, который вызывает появление панели прикреплен к хуку-событию wp_footer() и прикрепленная функция не может быть запущена, если хука-события не существует.

Для более полного объяснения понятия хук-событие, прочитайте соответствующий раздел в руководстве по созданию своего плагина.

Цикл WordPress

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

Для отображения одной записи, вы можете использовать тег шаблона the_content() внутри цикла, это отобразит контент записи. Для отображения списка опубликованных записей, вы можете использовать the_excerpt() внутри цикла, таким образом вся запись отображаться не будет.

Цикл является многострочным сокращением if…then… состоящим из 4 строчек кода. Первая строка говорит, что если запись была найдена, то будет использован следующий код для ее отображения, пока она существует. Если не найдено подходящих записей, то вы можете определить заменяющий текст. Обычный пример WordPress выглядит примерно вот так:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// Здесь HTML и теги шаблонов, чтобы определить макет, и то, что показано из записи
<?php endwhile; else : ?>
  <p><?php _e( 'Извините, не найдено записей соответствующих критериям.' ); ?></p>
<?php endif; ?>

Заключение

Поздравляем! Вы узнали, как сделать адаптивный шаблон WordPress с помощью HTML5!

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

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

1 комментарий

Нажмите здесь, чтобы оставить комментарий

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Присоединяйтесь к тысячам других подписчиков по всему миру

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

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00