Галерея изображений Flickr с помощью Shortcode API

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

Изначально одно из самых главных критерий в выборе плагина была его легкость, но так как не было найдено подходящих вариантов я решил на быструю руку что-нибудь придумать.

Для приготовления облегчения нам понадобятся следующие ингредиенты:

• Замечательная JavaScript библиотека Galleria
• Открытая и общедоступная CDN jsDelivr
  
• Немного знаний Shortcode API или инструмент GenerateWP
  
• Надежная связка руки+голова (опционально)
  

Файл functions.php

Открываем "волшебный" файл functions.php нашей темы и подключаем скрипты Galleria с CDN jsDelivr:

wp_register_script( 'galleria', '//cdn.jsdelivr.net/g/galleria@1.4.2(galleria.min.js+plugins/flickr/galleria.flickr.js)', false, false, false );

Чтобы понимать как это сделать я приведу пример файла functions.php действующей по умолчанию темы twentyfifteen со строки 220:

Пример файла functions.php

/**
 * Enqueue scripts and styles.
 *
 * @since Twenty Fifteen 1.0
 */
function twentyfifteen_scripts() {
    // Add custom fonts, used in the main stylesheet.
    wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

    // Add Genericons, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

    // Load the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

    // Load the Internet Explorer 7 specific stylesheet.
    wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

    wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }

    if ( is_singular() && wp_attachment_is_image() ) {
        wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
    }

    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150330', true );
    wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
        'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
        'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
    ) );
    
    wp_register_script( 'galleria', '//cdn.jsdelivr.net/g/galleria@1.4.2(galleria.min.js+plugins/flickr/galleria.flickr.js)', false, false, false ); // эта сточка кода подключает Galleria
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

Если вы хотите, чтобы скрипты подключались только по вызову шорткода, то добавляете условие:

// Add Shortcode scripts
function custom_shortcode_scripts() {
	global $post;
	if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'flickr') ) {
		wp_enqueue_script( 'galleria' ); 
		}
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');

Далее вставляем в конец файла сам Shortcode, который я сгенерировал с помощью инструмента Shortcodes Generator сервиса GenerateWP:

Shortcode

// Add Shortcode
function flickr_gallery_shortcode( $atts ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'set' => '',
        ), $atts )
    );

    // Code
return '<div style="position: relative; padding-bottom: 71%; height: 0; overflow: hidden;">
<div id="galleria"></div>
</div>
<script>
var speed = 5000;
var clickNext = true;
Galleria.loadTheme("//cdn.jsdelivr.net/galleria/1.4.2/themes/classic/galleria.classic.js");
Galleria.on("image", function(e) {
	var img = e.imageTarget;
	var picSource = $(img).attr("src");
	if (picSource == undefined) {
		picSource = $("img:first").attr("src");
	}
	var slashPieces = picSource.split("/");
	var lastSlash = (slashPieces[slashPieces.length - 1]);
	var lastPieces = lastSlash.split("_");
});
Galleria.run("#galleria", {
	responsive: true,
	preload: 4,
	initialTransition: "fade",
	debug: true,
	idleMode: false,
	pauseOnInteraction: true,
	fullscreenDoubleTap: true,
	backlink: false,
	transition: "fadeslide",
	showInfo: true,
	showCounter: true,
	clicknext: clickNext,
	thumbnails: true,
	flickr: "set:' . $set . '",
	height: 0.7,
	flickrOptions: {
		description: true,
		max: 100,
		imageSize: "big",
		sort: "interestingness-desc",
		thumbSize: "thumb",
	},
	extend: function() {
		var gallery = this;
		this.$("image-nav-right").click(function() {
			if (speed) {
				if (!gallery.isPlaying() && !clickNext) {
					gallery.play();
				} else if (clickNext) {
					if (!gallery.isPlaying()) {
						gallery.play();
					}
				}
			}
		});
		this.$("thumb-nav-left, thumb-nav-right").click(function() {
			if (gallery.isPlaying()) {
				gallery.pause();
			}
		});
		$("#flick").click(function() {
			gallery.pause();
		});
	}
});
$(document).ready(function() {
	var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
	var layout = "responsive";
});
</script>';

}
add_shortcode( 'flickr', 'flickr_gallery_shortcode' );

И наконец сам шорткод: [flickr set="id_вашей_галереи"]

Возможные проблемы

Единственная проблема с которой я столкнулся это jQuery.noConflict(). Оказывается по умолчанию в Wordpress библиотека jQuery идет с функцией jQuery.noConflict(), то есть к конце файла jquery.js (wp-includes/js/jquery/jquery.js) добавлена строчка jQuery.noConflict(); которую можно или удалить, — что будет не совсем правильно, или же переподключить jQuery из CDN с помощью кода:

	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', '//cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js', false, '1.11.3', false );
	wp_enqueue_script( 'jquery' );

	wp_deregister_script( 'jquery-migrate' );
	wp_register_script( 'jquery-migrate', '//cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js', array( 'jquery' ), '1.2.1', false );
	wp_enqueue_script( 'jquery-migrate' );

Плюсы

Самый, на мой взгляд, решающий фактор в данном решении — это легкость. Не нужно писать тысячи строк кода, когда можно обойтись всего несколькими. Более тонкие настройки вы можете найти в официальной документации Galleria.

Минусы

Вы не сможете внедрить в галерею мкроразметку http://schema.org/ImageGallery.