Совет недели: как создать Галерею на вашем сайте

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

WordPress позволяет легко создавать фотогалереи в каждой записи. Для этого вам надо в каждую запись загрузить (не вставляя фотографии в запись) через менеджер загрузки медиафайлов какое-то количество картинок и организовать из них фотогалерею.

Я расскажу вам сегодня как это можно сделать проще, легче и качественней. Правда, надо немного повозиться с редактированием файлов шаблона. Если вас это не пугает — тогда вперед!

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

Мы будем редактировать три файла вашего шаблона:

  • single.php
  • functions.php
  • style.css

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

Давайте начнем с файла single.php. Откройте файл, найдите строку:

the_content ()

и вставьте после нее такой код:

pbd_image_gallery();

Важно! Я пишу выше функцию без начального и конечного тега функции PHP (скобка, буквы php, знак вопроса вначале и знак вопроса и скобка в конце). В записях функции можно вставлять только если использовать специальные плагины.

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

Создаем функцию

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

function pbd_image_gallery() {
global $post;

$limitImages = 8; // How many images in total to show after the post?
$perRow = 4; // How many images should be in each row?

$featuredID = get_post_thumbnail_id($post->ID);

// Build our query to return the images attached to this post.
// We query one image more than we intend to show to see if there extra images that won’t fit into the gallery here.
$args = array(
‘post_type’ => ‘attachment’,
‘post_mime_type’ => ‘image’,
‘numberposts’ => $limitImages + 1,
‘orderby’ => ‘menu_order’,
‘order’ => ‘ASC’,
‘post_parent’ => $post->ID,
‘exclude’ => $featuredID
);

$images = get_posts($args);

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

Советую прочитать еще:  Оптимизация страниц сайта: несколько главных правил

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

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

Создаем HTML

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

// Assuming we found some images, display them.
if($images) : ?>
<div id="images">
<h2>Image Gallery</h2>
<ul>
<ul><!--?php <br ?--> // We’ll use the $count here to keep track of what image we’re on.</ul>
</ul>
<ul>
<ul>$count = 1;</ul>
</ul>
// Print each individual image.
foreach($images as $image) {
// Only show the image if it is within our limit.
if($count <= $limitImages) : ?>
<li<!--?php // Each end image in a row gets the "lastimage" class added. if($count % $perRow == 0) { echo ''; } ?-->>

<!--?php echo wp_get_attachment_image($image->ID, 'gallery-thumbnail'); ?-->

Этот код непосредственно проверяет наличие любых изображений, и если он ничего не нашел, то ничего и не произойдет. Затем он выводит некоторые основные теги HTML, имена контейнеров для придания определенных свойств для заголовка и начала списка. Самое интересное начинается в строке 7. Мы начинаем создание переменной, которая отвечает за количество миниатюр и которая должна увеличиваться после каждого шага. Эта переменная будет отслеживать нахождение каждого изображения и вывод нового изображения.

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

Функция wp_get_attachment_image позволяет использовать ID изображения, а также его размер. В этом случае мы добавим в верхней части файла functions.php такой код:

Советую прочитать еще:  Совет недели: как убрать заголовок у страницы или записи на странице просмотра

add_image_size('gallery-thumbnail', 145, 145, true);

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

Последние несколько строк — это закрытие цикла и HTML.

Добавление ссылки «далее»

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

Вставляем этот код ниже последнего добавленного:

<!--?php // Did we have more images than our limit? Then create a "More" link. // This link goes directly to the first image. if( count($images) > $limitImages) : ?-->

View More Images »
<!--?php endif;<br ?--> }

Создаем стили CSS

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

#images ul {
list-style: none;
margin: 0;
height: 1%;
overflow: hidden;
}

#images li {
width: 145px;
height: 145px;
float: left;
margin: 0 20px 20px 0;
}

#images li.lastimage {
margin-right: 0;
}

Вам нужно будет адаптировать некоторые свойства под вашу тему WordPress. В этом примере я использовал дефолтный шаблон Twenty Ten, ширина для вывода контента в котором равна 640px. Я хотел поставить четыре миниатюры в один ряд, 20px между каждой картинкой по ширине, так что 640 — (3 пробела по 20px) = 580px. Затем 580px, деленные на четыре, равняется 145px для каждого изображения по ширине.

Мы это сделали!

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

2 Comments

  • Это всё, конечно, прекрасно, но хотелось бы хотя бы иллюстраций. А ещё лучше — ссылку на страницу с этой галереей. Будете так любезны?

    Ответить
    • Автор · Edit

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

      Ответить

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *