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