Clever Geek Handbook

Shortcode APIを使用したFlickr画像ギャラリー



Flickrなどの人気のある写真ホスティングからギャラリーをダウンロードするプラグインを探しているのが本当にうんざりしている場合は、繰り返します-それはギャラリーです（WPではデフォルトで個々の写真の挿入が有効になっています）。



当初、プラグインを選択する際の主要な基準の1つはその使いやすさでしたが、適切なオプションが見つからなかったため、すぐに気付くものを思いつくことにしました。



救済を準備するには、次の材料が必要です。







Functions.phpファイル



テーマの「magic」 functions.php



ファイルを開き、GalleriaスクリプトをjsDelivr CDNに接続します。 

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


これを行う方法を理解するために、220行目のデフォルトのtwentyfifteenテーマのfunctions.php



ファイルの例を示します。



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');




次に、GenerateWPサービスのShortratedes Generatorツールを使用して生成したファイルの最後に、ショートコード自体を挿入します。

ショートコード 
 // 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.noConflict（）行がjquery.jsファイルの最後に追加されます（wp-includes / js / jquery / jquery.js ）。 削除することができます-これは完全に正しいものではないか、コードを使用してCDNからjQueryに再接続します。 

  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' );


長所



私の意見では、この決定の最も重要な要素は使いやすさです。 ほんの数行を実行できる場合でも、数千行のコードを記述する必要はありません。 ガレリアの公式ドキュメントでより細かい設定を見つけることができます。



短所



http://schema.org/ImageGalleryマイクロマークアップをギャラリーに埋め込むことはできません。



More articles:


All Articles