Как получить URL следующего/предыдущего изображение на странице вложения

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

CSS3 Lightbox — плагин для всплывающих изображений, использующий только CSS3
Использование скрипта Nivo Slider для автоматического создания слайдера из изображений, добавленных в пост
GPP Slideshow – простой плагин для показа слайдшоу и галереи изображений, добавленных в пост
Стандартная галерея со встроенным слайд-шоу – Gallery Carousel Without JetPack
Вывод изображений и видео поверх содержимого – плагин prettyPhoto Media
Fotorama – прекрасная галерея фотографий
Как вывести все изображения поста в слайдере – плагин WordPress Gallery Plugin

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

Шаблоны в WordPress
Порядок загрузки файлов при отображении страниц блога на WordPress – система шаблонов

Шаблон image.php позволяет создавать отдельную страницу для вывода изображения, на которой вы можете делать все, что угодно: показывать изображение в полный размер, выводить его данные (размеры, формат, тип камеры, снявшей фотографию, место съемки, копирайт, и другие данные), название. Если к этому еще добавить навигацию по изображениям (ссылки на страницы предыдущего и следующего изображений), то получится удобный слайдер, на который можно попасть по ссылке.

В WordPress есть встроенные функции, с помощью которых можно вывести ссылки на страницы предыдущего и следующего изображений: previous_image_link(), next_image_link() и adjacent_image_link(). Функции удобные, но имеют один недостаток — они выводят уже готовый HTML-код ссылки. Я же привык работать с запчастями, то есть с данными, которые потом сам компоную в нужной мне последовательности.

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

function adjacent_image_src($prev = true) {
    $post = get_post();
    $attachments = array_values( get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );

    foreach ( $attachments as $k => $attachment ) {
        if ( $attachment->ID == $post->ID ) {
            break;
        }
    }

    $attachment_id = false;
    $src = false;

    if ( $attachments ) {
        $k = $prev ? $k - 1 : $k + 1;

        if ( isset( $attachments[ $k ] ) ) {
            $attachment_id = $attachments[ $k ]->ID;
            $src = wp_get_attachment_image_src( $attachment_id );
        }
    }

    return $src[0];
}

Этот код следует помещать в файл functions.php используемой вами темы. Функция adjacent_image_src() выводит URL предыдущего или следующего изображения.

У функции есть параметр $prev, указывающий, какой URL получать:

$prev = false — получать URL предыдущего изображения
$prev = true — получать URL следующего изображения (используется по-умолчанию)

Получить URL предыдущего изображения:

Пример использования URL предыдущего изображения:

<div style="background: url() no-repeat center center; background-size: cover;">
    
</div>

Код выводит ссылку на предыдущее изображение, расположенное в блоке с фоном, которым является предыдущее изображение.

Получить URL следующего изображения:

Пример использования URL следующего изображения:

<div style="background: url() no-repeat center center; background-size: cover;">
    
</div>

Код выводит ссылку на следующее изображение, расположенное в блоке с фоном, которым является следующее изображение.