Очумелые ручки! Строим галерею с «бэком» на Wordpress и фронтом на fancybox 3
Йоу-йоу! Работал я над сайтом компании, которая занимается производством домов из древисины. Им очень хотелось сделать сайт с огромным количеством фоторгафии и сделать это на одной странице с разделением на несколько галлерей. Дело это всё «крутиться» на WordPress’е. А сейчас уже работает как часики) Так, что погнали
Нам понадобиться
Да-да! Всё как в очумелых ручках! Так вот, нам понадобитья:
- Рабочий сайт на WordPress
- Плагин real.PostImages (для добавления картинок к записи)
- Подключенный jQuery 3
- Подключенный fancybox 3
Подготовка
Нужно создать папку в которой будет хранится весь наш код внутри темы. Я у себя создал папку modiles > fancy-gallery. А там создал файлы: index.php и app.js. И подключил в function.php
|
1 2 3 4 5 6 |
// Подключение index.php if(file_exists(get_template_directory() . "/modules/fancy-gallery/index.php")){ require_once get_template_directory() . "/modules/fancy-gallery/index.php"; } // Подключение app.js wp_enqueue_script( 'application', get_template_directory_uri() . '/js/app.js', array('gjQuery', 'fancybox'), '0.1.0', true ); |
О том как правильно подключать скрипты в wordpress вы можете прочитать в моей статье в моей статье.
Шаг 1. Создание произвольного типа записи
Это нужно для того, чтобы можно было в аднимке создавать несколько галлерей. Так что в index.php пишем
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
add_action('init', 'fgb_fs_materials'); function fgb_fs_materials(){ register_post_type('x_gallery', array( 'labels' => array( 'name' => 'xGallery', // Основное название типа записи 'singular_name' => 'xGallery', // отдельное название записи типа 'add_new' => 'Add item', 'add_new_item' => 'Add item', 'edit_item' => 'Edit item', 'new_item' => 'New item', 'view_item' => 'View item', 'search_items' => 'Search', 'not_found' => 'Not found', 'not_found_in_trash' => 'No Material found in the basket', 'parent_item_colon' => '', 'menu_name' => 'xGallery' ), 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title','editor', 'thumbnail','excerpt') ) ); } |
Проверяем появился ли новый тип записей в админке. Добавляем произвольное поле для id галереии. Мы позже будем его использовать в JS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
add_action('add_meta_boxes_fgb_fs_gallery', 'fgb_fs_gallery_add_custom_box_id'); function fgb_fs_gallery_add_custom_box_id(){ add_meta_box( 'x_id', __('ID', 'fgb'), 'fgb_fs_gallery_id_callback', 'fgb_fs_gallery' ); } // HTML код блока function fgb_fs_gallery_id_callback( $post, $meta ){ $screens = $meta['args']; // Используем nonce для верификации wp_nonce_field( plugin_basename(__FILE__), 'x_id_noncename' ); // Поля формы для введения данных echo '<label for="x_id">' . __("Put gallery id", 'fgb' ) . '</label> '; echo '<input type="text" id= "x_id" name="x_id" size="2" value="'. get_post_meta( $post->ID, '_x_id',true ) .'"/>'; } // Сохраняем данные, когда пост сохраняется add_action( 'save_post', 'x_id_save_postdata' ); function x_id_save_postdata( $post_id ) { // Убедимся что поле установлено. if ( ! isset( $_POST['x_id'] ) ) return; // проверяем nonce нашей страницы, потому что save_post может быть вызван с другого места. if ( ! wp_verify_nonce( $_POST['x_id_noncename'], plugin_basename(__FILE__) ) ) return; // если это автосохранение ничего не делаем if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return; // проверяем права юзера if( ! current_user_can( 'edit_post', $post_id ) ) return; // Все ОК. Теперь, нужно найти и сохранить данные // Очищаем значение поля input. $my_data = sanitize_text_field( $_POST['x_id'] ); // Обновляем данные в базе данных. update_post_meta( $post_id, '_x_id', $my_data ); } |
Шаг 2. Выводим в цилке записи на странице.
Для вывода на странице нужно вызвать событие и повесить на него хук. На странице на которой вывожим пищем do_action(‘x_gallery’); а в нашем php файле продолжаем.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
add_action('x_gallery', 'x_gallery'); function x_gallery(){ $argm = [ 'post_type'=>'fgb_fs_gallery', 'orderby'=>'date', 'order'=>'ASC' ]; $query = new WP_query($argm); // Сюда в цикле собираем данные о картинках прикреплённых к записям $arr_x = []; $home_url = get_home_url(); while ( $query->have_posts() ) : $query->the_post(); $postID = get_the_ID(); // Для фансибокса $needPostMetaValue = get_post_meta($postID, '_x_id', true); // Кладём в ассоциативнй массив данные о картинках $arr_x[$needPostMetaValue] = get_post_images(); ?> <!-- Вёрстка блока который мы выведем --> <!-- data-x-fancy селектор для fancybox --> <div> <a data-x-fancy="<?php echo $needPostMetaValue; ?>" data-src="<?php echo get_the_post_thumbnail_url($postID, 'full');?>" href="javascript:;"> <?php echo get_the_post_thumbnail($postID, 'x_face', ['class'=>'w-100']);?> </a> </div> <?php endwhile; // Сюда получаем будем собирать ссылки на картинки $images = []; foreach ($arr_x as $gallery=>$arr){ foreach ($arr as $item){ $el = wp_get_attachment_image_src( $item['id'], 'full'); $images[$gallery][] = $el[0]; } } ?> <!-- Печатаем скрипт с вызовам js части --> <script> window.addEventListener('load', function () { <?php foreach ($images as $key=>$value): ?> var <?php echo $key; ?> = new XSLICK({ galleryId: '<?php echo $key; ?>', images: [ <?php foreach ($value as $item): ?> <?php echo '"' . $item . '",' . PHP_EOL ?> <?php endforeach; ?> ] }, $); <?php endforeach; ?> }); </script> <?php } |
Шаг 3. JS
Вы уже увидел, что мы коснулись в предудущем шаге и чтобы внести ясность, что за скрипт в итогре будет я вам напишу пример кода.
|
1 2 3 4 5 6 7 8 9 |
var new3 = new XSLICK({ galleryId: 'new3', images: [ "https://xakplant.ru/wp-content/uploads/2018/11/1.jpg", "https://xakplant.ru/wp-content/uploads/2018/11/2.jpg", "https://xakplant.ru/wp-content/uploads/2018/11/3.jpg", "https://xakplant.ru/wp-content/uploads/2018/11/4.jpg", ], }, $); |
Это вызов моего js, который создаёт галлерею во время загрузки страницы. В конструктор передан объект с моими данныйми и объект jquery. В моем объекте есть id галлереи и массив с адресами всех картинок. Собственно к делу. В app.js пишем
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
var XSLICK = function (object, $) { this.galleryId = object.galleryId; this.images = object.images; // Создаём элементы галереи this.createGallery(); // Вставляем их на стараницу this.appendeElement(); // Вызываем для них fancybox this.call($); }; XSLICK.prototype.createGallery = function () { // Создаём блок в котором будут все элменеты var gallery = document.createElement('div'); gallery.id = this.galleryId; this.images.map(function (img) { // В цикле создаём ссылку, внутри которой картинка var el = new Image(); el.src = img; var link = document.createElement('a'); link.setAttribute('href', img); // Ссылке даём атрибут data-x-fancy c id галлереи link.setAttribute('data-x-fancy', gallery.id); // Прячем link.style.display = 'none'; // Вставляем всё в наш блок gallery.insertAdjacentElement('beforeend', link); link.insertAdjacentElement('beforeend', el); }); this.gallery = gallery; return this; }; XSLICK.prototype.appendeElement = function () { // Вставляем всю галлерею в body document.body.insertAdjacentElement('beforeend', this.gallery); }; XSLICK.prototype.call = function ($) { // Вызываем fancybox $().fancybox({selector : '[data-x-fancy="'+this.galleryId+'"]'}); } |
Нужно заметить, что в fancybox3 распределении галлерей несколько иначе, чем в версии 2.x и теперь инициализация разных галлерей делается с помощью javascript.
|
1 2 3 |
$().fancybox({ selector : 'селектор' }); |
И теперь данный вызов будет следить за появлением новых элементов галлереи. Это очень удобно. Но с документации fancybox пришлось вчитываться)
Финиш
Все готово! Можете пользоваться. В итоге у вас получиться примерно это:
