prettyPhotoをfooterで読み込みする様に変更

2016年1月22日2016年5月21日iPad/iPod/iPhone,Web-log・ココログ関連,WordPress,パソコン・インターネット

prettyPhotoと言うJavaScriptを使って、画像をクリックしたらズームする仕掛けを作っています。

• 画像をクリックしたらズームする仕掛け(改訂版) : プラスα空間 (2015年6月25日)

最初は、次のスクリプトで読んでました。

add_action( 'wp_enqueue_scripts', 'theme_prettyPhoto_js' );
function theme_prettyPhoto_js() {
    wp_enqueue_script(
        'theme_prettyPhoto_js',
        network_home_url('/js/').'jquery.prettyPhoto.min.js',
        array( 'jquery' ),
        '3.1.6'
    );
}

WordPressでJavaScriptを読み込むときは、wp_enqueue_scripts()を使うのが定石です。このままだと、PageSpeed Insightsに怒られちゃいます。

wp_enqueue_scripts()に、スクリプトをfooterで読み込むためのオプション($in_footer)があるということを知りました。

• Function Reference/wp enqueue script « WordPress Codex

上記のスクリプトに、8行目の"true"オプションを設定しました。

add_action( 'wp_enqueue_scripts', 'theme_prettyPhoto_js' );
function theme_prettyPhoto_js() {
    wp_enqueue_script(
        'theme_prettyPhoto_js',
        network_home_url('/js/').'jquery.prettyPhoto.min.js',
        array( 'jquery' ),
        '3.1.6',
        true
    );
}

この結果、prettyPhotoがfooterで読み込まれる様になりました。動作にも問題ありません。PageSpeed Insightsのスコアは若干改善されました。

ブログ	モバイル	パソコン
通常読み込み	64	77
in_footer読み込み	65	77