0
56
2017-02-21

Создаем галерею записей в WordPress

В этом уроке мы будем использовать две из самых мощных функций WordPress get_posts() и дополнительные поля для создания галереи записей в стиле лайтбоксов для ваших изображений.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

Скриншот галереи заголовков случайных заголовков в стиле лайтбокс

Случайная функция отображения после отображения со всплывающим изображением в стиле лайтбокса и ссылкой для заголовка.

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

Настройка настраиваемых полей

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

Снимок экрана с данными пользовательского поля

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

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

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

Редактирование файлов темы WordPress

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

<?php $random = get_posts('showposts=1&orderby=rand'); foreach($random as $post) : setup_postdata($post); ?>

<p>
    <a href="http://domain.tld<?php echo get_post_meta($post->ID, 'randomImage', true); ?>" title="<?php echo get_post_meta($post->ID, 'randomCaption', true); ?>" class="thickbox">
        <img src="http://domain.tld<?php echo get_post_meta($post->ID, 'randomBanner', true); ?>" alt="" />
    </a>
    <small><a href="http://domain.tld<?php echo get_post_meta($post->ID, 'randomLink', true); ?>"><?php echo get_post_meta($post->ID, 'randomTitle', true); ?></a></small>
</p>

<?php endforeach; ?>

Как уже упоминалось, этот код идет до обычного цикла WordPress и вызывает данные из каждого из пяти настраиваемых полей, которые были добавлены в ваши сообщения. Вместо использования более мощного query_posts() для этого случайного отображения сообщений мы вместо этого используем более простую функцию get_posts. Она делает все, что нам нужно, устраняя ненужные переменные и возможные осложнения.

Несколько других точек интереса для этого фрагмента WordPress; обратите внимание, что мы устанавливаем случайность и ограничиваем отображение сообщений одним ( 1 ) через два параметра в get_posts() функции. После того, как запрос был настроен, мы используем тег get_post_meta чтобы заполнить следующую разметку с их соответствующими значениями настраиваемого поля:

<p>
    <a href="[randomImage]" title="[randomCaption]" class="thickbox">
        <img src="[randomBanner]" alt="" />
    </a>
    <small><a href="[randomLink]">[randomTitle]</a></small>
<p>

Это демонстрирует невероятную гибкость дизайна, поддерживаемую пользовательскими полями WordPress. Как только этот код будет на месте, пришло время обернуться, реализовав функциональность лайтбокса с поддержкой JavaScript.

Добавление JavaScript

Чтобы закончить работу, давайте сделаем так, чтобы изображение случайного баннера действительно «открывалось», реализовав некоторые функции лайтбокса с поддержкой JavaScript. Как вы, наверное, знаете, есть много легких клонов, из которых можно выбирать, но для этого урока мы переходим к превосходному сценарию Thickbox Коди Линдли .

ThickBox - это виджет диалогового окна веб-страницы, написанный на JavaScript поверх библиотеки jQuery. Его функция состоит в том, чтобы показать единое изображение, несколько изображений, встроенный контент, iframed-контент или контент, передаваемый через AJAX в гибридной модели.

Использование Thickbox так просто, мне кажется, что я просто ленив для его использования. Фактически, мы уже установили наш код WordPress для использования с Thickbox, просто добавив class="thickbox" атрибут к элементу привязки случайного баннера. Единственное, что действительно нужно сделать, это загрузить сценарий Thickbox и сопроводительный файл CSS на ваш сервер и связать их с

разделом вашего header.phpфайла:
<link rel="stylesheet" href="http://domain.tld/wp-content/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://domain.tld/wp-content/javascript/thickbox-compressed.js"></script>

Когда все будет на месте, ваша галерея случайных сообщений должна работать.

Статья была переведена для блога TechBlog.SDStudio.top
Источник: https://digwp.com