Галерея изображений 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:

/**  * 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:

// 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.
 

ссылка на оригинал статьи http://habrahabr.ru/post/259747/