Делаем главную страницу своего WordPress сайта похожей на обложку журнала

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

Однако как быть, если вы хотите сделать домашнюю страницу для своего журнала, которая будет напоминать, скажем, настоящий журнал?

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

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

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

Примечание: тестовые данные, используемые в данной статье, были предоставлены wptest.io.

Создание своей главной страницы для обложки журнала

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

Шаг 1. Установка плагина.

Плагин доступен на Github. Скачиваем zip-файл и устанавливаем, как  любой другой плагин, после чего активируем его. Плагин добавляет новый шорткод, заголовок (описанный на шаге 2), а также использует фильтр template_include для перезаписи шаблона, применяемого при генерации главной страницы.

Шаг 2. Создание страницы.

Сначала мы создаем страницу. Заголовок не используется, поэтому вы можете ввести в качестве его что-то описательное, как, скажем, «июньская обложка».

Вам нужно присвоить миниатюру для страницы, поскольку это изображение будет использоваться в качестве фона обложки. Обязательно убедитесь в том, что для обложки выбрано достаточно крупное изображение (изображение, которое приведено в примере, имеет размеры 900 пикселей на 1363 пикселей).

Чтобы добавить заголовки, вы можете воспользоваться шорткодом [ headline ], которые принимает следующие атрибуты:

• Type: добавляется к сгенерированному DIV элементу в качестве класса, который вы можете описать в CSS.
• Id: идентификатор записи или список идентификаторов, разделенных запятыми. Элемент H2 создается для каждого id, используя соответствующий пермалинк и заголовок записи.
• Image: определяет, будет ли выводиться на экран миниатюра записи. Значение может быть либо yes, либо no, по умолчанию задано no.
• Text: заголовок записи может быть переопределен путем задания нового текста. Вы можете задать список заголовков, разделенных запятыми, если это требуется.

Вот пример:

[headline type="primary" id="861" text="primary headline"]
[headline type="secondary" id="919" image="yes" text="secondary headline"]
[headline type="standard" id="946,555,559" text="standard headline 1,standard headline2,standard headline 3"]

Будет сгенерирована следующая HTML-разметка:

<div class="primary"><a href="http://www.test.dev/title-with-markup/"><h2>primary headline</h2></a></div>
<div class="secondary"><a href="http://www.test.dev/markup-and-formatting/"><h2>secondary headline</h2><img width="625" height="434" src="http://www.test.dev/wp-content/uploads/2013/01/man-of-steel2.jpg" class="attachment-large wp-post-image" alt="man-of-steel2" /></a></div>
<div class="standard"><a href="http://www.test.dev/post-format-standard/"><h2>standard headline 1</h2></a><a href="http://www.test.dev/post-format-gallery/"><h2>standard headline2</h2></a><a href="http://www.test.dev/post-format-aside/"><h2>standard headline 3</h2></a></div>

Добавьте столько заголовков, сколько вам нужно, после чего опубликуйте страницу.

Шаг 3. Выбираем новую страницу в качестве статичной главной страницы.

Переходим в раздел Параметры – Чтение, и выбираем статичную страницу в параметрах вывода главной страницы. Выберите вашу новую страницу из выпадающего списка.

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

После задания статичной страницы перейдите на главную страницу вашего сайта.

Шаг 4. Настраиваем CSS.

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

Есть несколько способов настроить CSS:

• Произвольные поля – создайте произвольное поле на странице под названием custom_css и поместите CSS-код в поле value (значение). Если плагин найдет это произвольное поле на странице, то он обернет значение в теги style и вставит код в HTML. Использование произвольного поля позволяет вам внедрить стили для страницы.
• Редактирование style.css – вы можете напрямую отредактировать CSS-файл в хранилище плагинов.

Плагины для добавления произвольных CSS-стилей не будут работать, поскольку шаблон является минималистичным, и не поддерживает общие действия и фильтры, такие как wp_head и wp_footer.

Фоновое изображение добавляется в шаблоне cover.php. В нем добавляются необходимые CSS-стили в хэдер:

html {
background: url('page thumbnail url') no-repeat center center fixed;
background-size: cover;
}

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

Что изменить?

Переопределить CSS не так трудно. Как уже было сказано выше, каждый из шорткодов для заголовков преобразуется в DIV элемент с классом, определенным в атрибуте type, который содержит h2 для каждой записи.

Расположение div является достаточно простой задачей – достаточно использовать абсолютное позиционирование и задать соответствующие значения top, right, bottom и left. Чтобы изменить представление h2, используйте CSS-правило для a h2 (поскольку заголовок связан со ссылкой):

.primary {
position: absolute;
bottom: 3%;
left: 1%;
text-transform: uppercase;
padding: 0;
margin: 0;
width: 45%;
}

.primary a h2 {
font-size: 400%;
}

Единственный id в CSS – это #site-title. Заголовок вашего сайта автоматически будет получен и выведен в самом верху экрана.

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

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

Сделайте вашу главную страницу обложкой реального журнала!

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

Скорее всего, вы (или ваш дизайнер) сможете создать более продвинутый CSS-код, а также настроить шаблон самостоятельно, cover.php.

Хочется надеяться, что эта статья дала вам нужную дозу вдохновения, чтобы вы могли оформить свою собственную домашнюю страницу в журнальном стиле!

Источник: wpmu.org