Как создать слайдер изображений в шапке сайта

Современные шаблоны (темы) WordPress, как правило, имеют встроенный функционал добавления на страницы и в записи сайта фотогалерей. Когда вы добавляете в статью галерею из фотографий через кнопку «Добавить медиафайл», в текст автоматически добавляется шорткод: gallery ids="id зображения, id зображения, id зображения".

Чтобы преобразовать этот шорткод в произвольный код, который будет выводить слайдер изображений из библиотеки медиафайлов, нужно установить фильтр post_gallery.

как-создать-слайдер-в-шапке-сайта

ПОШАГОВАЯ ИНСТРУКЦИЯ ПРЕОБРАЗОВАНИЯ ГАЛЕРЕИ ИЗОБРАЖЕНИЙ В СЛАЙДЕР ИЗОБРАЖЕНИЙ:

  • Сначала подключаем к сайту любой jQuery-плагин.
  • Далее, в конец файла functions.php, перед закрывающим тегом ?>, вставляем код:
// слайдер в шапку сайта
function gallery_slider($output, $attr) {
  $ids = explode(',', $attr['ids']);
  $images = get_posts(array(
    'include' => $ids,
    'post_status' => 'inherit',
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'orderby' => 'post__in',
  ));
  if ($images) {
     $output = gallery_slider_template($images);
     return $output;
  }
}
add_filter('post_gallery', 'gallery_slider', 10, 2);

function gallery_slider_template($images) {
  ob_start();
  include 'gallery-slider.php';
  $output = ob_get_clean();
  return $output;
}
  • В директории вашего шаблона /wp-content/themes/имя вашей темы создайте файл gallery-slider.php и вставьте в него следующий код:
 <ul class="slider">
<?php
foreach ($images as $image) {
  $src = wp_get_attachment_url($image->ID); // ссылка на изображение
  $alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true); // атрибут alt
?>
  <li><img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" /></li>
<?php } ?>
</ul>
  • Чтобы добавить к слайду заголовок, подпись или описание в этом же файле добавьте код:
<ul class="slider">
<?php
foreach ($images as $image) {
  $src = wp_get_attachment_url($image->ID); // ссылка на изображение
  $alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true); // атрибут alt
  $title = $image->post_title; // заголовок изображения
  $caption = $image->post_excerpt; // подпись к изображению
  $description = $image->post_content; // описание изображения
?>
  <li>
    <p><?php echo $title; ?></p>
    <p><img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" /></p>
    <p><?php echo $caption; ?></p>
    <p><?php echo $description; ?></p>
  </li>
<?php } ?>
</ul>
  • Установите из депозитария самый простой плагин слайдера.

 

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