読者です 読者をやめる 読者になる 読者になる

WordPressで複数のcssファイル、jsファイルをそれぞれ結合(単一ファイル化)する

Webサイトをブラウザに表示するためには、Webサーバに『Webサイトを構成する

  • htmlファイル(phpファイル)
  • cssファイル
  • jsファイル
  • imgファイル

、などを格納したフォルダ』がアップロードされていて、且つ、このWebサーバに対して『Webサイトのデータを下さいという要求』を送る必要があります。
この要求のことを『HTTPリクエスト』といいます。

Webサイトを構成するファイル数が多い程、『HTTPリクエスト』は増えブラウザでの表示(パソコンや携帯の画面への出力)に時間がかかってしまいます。

 

そこで今回は、プラグインなどでファイル数が非常に増えてしまうWordPress複数cssファイル、jsファイルを結合(単一ファイル化=1つのファイルにする)することで、HTTPリクエストを削減し、WordPressの処理を高速化することを目指します。

HTTPリクエストの削減にはファイルの結合の他にも

  • CSSスプライト
  • Webフォント
  • DataURI

などの手法があります。

 

Cドライブ直下にXAMPPを置き、その中のhtdocsの中にWordPressをインストールしていて、今回は『twentyfourteen』というテーマを使ってます。

C:\xampp\htdocs\wordpress\wp-content\themes\twentyfourteen

 

 

css、jsファイルをグループ分け

  • <head>に配置 ⇒
    『First View(ファーストビュー)』または『Above The Hold』ともいうコンテンツに必要なリソース(ファイル)。
  • </body>に配置 
    ページがブラウザに読み込まれてから動作して欲しいリソース(ファイル)
    サイト全体を通して共通なリソース(ファイル)

 

キューイング(WordPressに登録) されているリソース(css、jsファイル)のハンドル名を調べる

functions.phpに以下記載

functions.php

 /**
* Make the list of enqueued resources
**/
function my_get_dependency( $dependency ) {
    $dep = " ";

/* $dependencyが_WP_Dependencyクラスを基にしたオブジェクト、または_WP_Dependencyクラスをその親クラスの1つとしている場合

例:$dependency = new _WP_Dependency( )

例:interface test {

          public function A( );
       }

       class _WP_Dependency implements test {
          public function A ( ) {
          print "A";
          }
        }

        $dependency = new _WP_Dependency( )*/

    if ( is_a( $dependency, "_WP_Dependency" ) ) {

/* $dependencyオブジェクトからhandleプロパティ( $handle )にアクセス

プロパティは_WP_Dependencyクラスのもの( wordpressのwp-includesフォルダの中のclass.wp-dependencies.phpファイル424行目あたりから)

$dep .= "$dependency->handle"; $dep = $dep"$dependency->handle"; に同じ*/
        $dep .= "$dependency->handle";

/* $dependencyオブジェクトからdepsプロパティ( $deps = array( ? ) )にアクセス

array( )にはキューイング(WordPressに登録) されているcss、jsファイルの情報が入ってる、たぶん。ファイルによって情報が変わるので『?』としてます。

implode( )で$dependency->depsの要素(配列)を『" "』文字列を挿み1つの文字列に */
        $dep .= " [" . implode( " ", $dependency->deps ) . "]";

/* $dependencyオブジェクトからsrcプロパティ( $src )にアクセス */
        $dep .= " '$dependency->src'";

/* $dependencyオブジェクトからverプロパティ( $ver )にアクセス */
        $dep .= " '$dependency->ver'";

/* $dependencyオブジェクトからargsプロパティ( $args = null )にアクセス */
        $dep .= " '$dependency->args'";

/* $dependencyオブジェクトからextraプロパティ( $extra = array( ? ) )にアクセス

implode( )で$dependency->extraの要素(配列)を『" "』文字列を挿み1つの文字列に */

        $dep .= " (" . implode( " ", $dependency->extra ) . ")";
    }
    return "$dep\n";
}

function my_style_queues( ) {

// global変数$wp_stylesを関数内で使えるようにする
    global $wp_styles;
    echo "<!-- WP_Dependencies for styles\n";

/* $wp_stylesオブジェクトからqueueプロパティ( $queue = array( ? ) )にアクセス

プロパティはWP_Dependenciesクラスのもの( wordpressのwp-includesフォルダの中のclass.wp-dependencies.phpファイル13行目あたりから

foreach( )で$wp_styles->queueの要素(配列)の値を$valに代入し、

$wp_stylesオブジェクトからregisteredプロパティ( $resitered = array( ? ) )にアクセスしたもの( 配列registeredに$valが入る )を引数としたmy_get_dependency( )関数の結果を表示する処理』をしたら、$valに次の値を代入し『$valの値以外同上の処理』の処理をするの流れを$wp_styles->queueの要素が無くなるまで繰り返す */
    foreach ( $wp_styles->queue as $val ) {
        echo my_get_dependency( $wp_styles->registered[ $val ] );
    }
    echo "-->\n";
}

/* wp_print_stylesにmy_style_queues( )をフック、$priority = 9999で関数実行の優先順序を決定。数字が小さいほど優先されます。 */
add_action( 'wp_print_styles', 'my_style_queues', 9999 );

function my_script_queues( ) {
    global $wp_scripts;
    echo "<!-- WP_Dependencies for scripts\n";
    foreach ( $wp_scripts->queue as $val ) {
    echo my_get_dependency( $wp_scripts->registered[ $val ] );
    }
    echo "-->\n";
}
add_action( 'wp_print_scripts', 'my_script_queues', 9999 );

 

⇩ キューについて(キューイングについて見つかりませんでしたので。)

プログラミング言語2 - キューとスタック

キュー( queue )

先入れ先出しFIFO)方式でデータを操作する際に利用されるデータ構造のこと。
待ち行列とも呼ぶ。主にOSが行うジョブの制御や、プリンタースプーラーなどで利用される、キューを管理する機能をキューイングという。

エンキュー( enqueue )

キューにデータを格納すること。

デキュー( dequeue )

キューからデータを取り出すこと。

ページを表示し、HTML ソースから以下のようなコメントを抜き出します。

 <!-- WP_Dependencies for styles
ハンドル名 [依存するハンドル名...] 'パス' 'バージョン' '属性' (付加情報...)
...
-->

<!-- WP_Dependencies for scripts
ハンドル名 [依存するハンドル名...] 'パス' 'バージョン' '属性' (付加情報...)
...
-->

  • ハンドル名
    wp_enqueue_style( )、wp_enqueue_script( ) でキューに挿入されるリソース(ファイル)のハンドル名。
  • 依存するハンドル名
    先立って読み込んでおくべきリソース(ファイル)のハンドル名が上位から順に並びます。
  • パス
    wp_register_style()、wp_register_script() で登録されたリソース(ファイル)へのパスです。
  • バージョン
    登録時に指定されたバージョン文字列です。
  • 属性
    css の場合はメディアタイプが表示されます。同一タイプであれば結合が可能です。
  • 付加情報
    css であれば IE 用の条件付コメントがここに表示されます。js の場合、1 (true) が立っていればフッターで読み込まれることを示します。

 

ハンドル名 jqueryjQuery本体 ) には パス が表示されず、『jquery-core』 と 『jquery-migrate』 への依存が指定されています。それぞれのパスは次の通りです。

パスが空のハンドル名が出てきたら、 Handles and Their Script Paths Registered by WordPress で調べられます。

minifyのインストールと基本設定

下記サイトでダウンロード、解凍し『min』フォルダを wp-content の直下に配置。

Downloads-minify- Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.-Google Project Hosting

f:id:ts0818:20150909131605p:plain

 

キャッシュ保存用フォルダの設定

『min』フォルダの中に『cache』フォルダを作成したら、min/config.phpの55行目あたりに『$min_cachePath = dirname(__FILE__) . '/cache';』と記述。

 

config.php

 /**
* For best performance, specify your temp directory here. Otherwise Minify
* will have to load extra code to guess. Some examples below:
*/
//$min_cachePath = 'c:\\WINDOWS\\Temp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());

// ⇩書き足すとこ

$min_cachePath = dirname(__FILE__) . '/cache';
/**

キャッシュの有効期限

ブラウザやプロキシー・サーバーに保持させるキャッシュ期間を変更。min/config.phpの105行目あたりデフォルトで『$min_serveOptions['maxAge'] = 1800;』となっているのを『$min_serveOptions['maxAge'] = 2592000; /* one month */』に書き換えます。

 

config,php

/**
* Cache-Control: max-age value sent to browser (in seconds). After this period,
* the browser will send another conditional GET. Use a longer period for lower
* traffic but you may want to shorten this before making changes if it's crucial
* those changes are seen immediately.
*
* Note: Despite this setting, if you include a number at the end of the
* querystring, maxAge will be set to one year. E.g. /min/f=hello.css&123456
*/

// ⇩書き換えるとこ
$min_serveOptions['maxAge'] = 2592000; /* one month */
 

groupsConfig.php に結合対象のファイルをグループとして登録する

 結合対象の css と js を、サイト共通のファイル・グループとして min/groupsConfig.php に登録します。条件付きコメントで読み込まれる IEcss は含まないよう注意してください。

 

今回は、<head>に置く 『site-css 』と 『site-js』 をグループとして登録しました。

グループは幾つでも定義する事ができます。

min/groupsConfig.phpの14行目あたりの『return array(
// 'js' => array('//js/file1.js', '//js/file2.js'),
// 'css' => array('//css/file1.css', '//css/file2.css'),
);』を書き換えます。

 

groupsConfig.php

/**
* Groups configuration for default Minify implementation
* @package Minify
*/

/**
* You may wish to use the Minify URI Builder app to suggest
* changes. http://yourdomain/min/builder/
*
* See http://code.google.com/p/minify/wiki/CustomSource for other ideas
**/

// ⇩ここから書き換え

return array(
    // 'css' => array('//css/file1.css', '//css/file2.css'),
    'site-css' => array(
        '//wp-content/themes/twentyfourteen/genericons/genericons.css',
        '//wp-content/themes/twentyfourteen/style.css',
        '//wp-content/plugins/meteor-slides/css/meteor-slides.css',
        '//wp-content/plugins/jquery-smooth-scroll/css/jss-style.min.css',
    ),

    // 'js' => array('//js/file1.js', '//js/file2.js'),
    'site-js' => array(
        '//wp-includes/js/jquery/jquery.js',
        '//wp-includes/js/jquery/jquery-migrate.min.js',
        '//wp-content/plugins/meteor-slides/js/jquery.cycle.all.js',
        '//wp-content/plugins/meteor-slides/js/jquery.metadata.v2.js',
        '//wp-content/plugins/meteor-slides/js/jquery.touchwipe.1.1.1.js',
        '//wp-content/plugins/meteor-slides/js/slideshow.js',
        '//wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js',
        '//wp-content/themes/twentyfourteen/js/functions.js',
    ),
);

 

(コメント以外の)先頭の // は minify 独自の表記法で、ドキュメント・ルート(今回はhttp://localhost/wordpress/)を表します。

 今回デフォルトのjQuery本体(『jquery.js』) を結合対象にしていますが、CDN を使いたい場合には外してください。

 

functions.php でグループ化した各リソースをキューから削除する

結合対象の各ファイルをキューから削除するコードを追加します。同時にこれらと依存関係のある IEcss も解除しておきます。

functions.php

 /**
* Dequeue resources
**/
function my_dequeue_styles() {
    wp_dequeue_style( 'genericons' );
    wp_dequeue_style( 'twentyfourteen-style' );
    wp_dequeue_style( 'twentyfourteen-ie' );
    wp_dequeue_style( 'meteor-slides' );
    wp_dequeue_style( 'blogsynthesis-scroll-to-top-style' );
}
add_action( 'wp_print_styles', 'my_dequeue_styles' );

function my_dequeue_scripts( ) {
    wp_dequeue_script( 'jquery' );
    wp_dequeue_script( 'jquery-cycle' );
    wp_dequeue_script( 'jquery-metadata' );
    wp_dequeue_script( 'jquery-touchwipe' );
    wp_dequeue_script( 'meteorslides-script' );
    wp_dequeue_script( 'twentyfourteen-script' );
    wp_dequeue_script( 'blogsynthesis-scroll-to-top-script' );
}
add_action( 'wp_print_scripts', 'my_dequeue_scripts' );

functions.php でグループをキューに登録する

cssの挿入( site-css 

ポイントは IEcss の再挿入です。wp_enqueue_scripts() と wp_print_styles() とでは、後者の方が後に実行されるため、ハンドル名を変えて再登録します。

functions.php

/**
* Eequeue resources
**/
function my_enqueue_styles( ) {
    wp_enqueue_style( 'site-css', site_url( ) . '/wp-content/min/?g=site-css', array( ), '1.0' );
    wp_enqueue_style( 'my-enqueue-ie', get_template_directory_uri( ) . '/css/ie.css', array( 'site-css' ) );
    wp_style_add_data( 'my-enqueue-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' )

 

jsの挿入( site-js 

今回 site-js はに配置するので、wp_enqueue_script( ) の5番目の引数 $in_footer には false を設定します。

functions.php

 function my_enqueue_scripts( ) {
    wp_enqueue_script( 'site-js', site_url( ) . '/wp-content/min/?g=site-js', array( ), '1.0', false );

// site.jsにmeteorslidessettingsオブジェクトの値(arrayの中身)を渡す

    wp_localize_script( 'site-js', 'meteorslidessettings', array(
        "meteorslideshowspeed" => "2000",
        "meteorslideshowduration" => "5000",
        "meteorslideshowheight" => "200",
        "meteorslideshowwidth" => "940",
        "meteorslideshowtransition" => "fade",
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

 

wp_localize_script($handle, $object_name, $data);

動的なオプション値を外部スクリプトに渡す

$namestring) (必須) ⇒ 値を使用するスクリプトをハンドル名で設定。wp_enqueue_scriptで定義した名前です。

$object_namestring) (必須 ⇒ 任意のオブジェクト名を設定。

$dataarray) (必須スクリプトに渡す値を配列で設定。

 

 

CDNのjQuery本体を使う場合

functions.php

 function my_enqueue_scripts( ) {

    wp_deregister_script( 'jquery' );
    wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array( ), '1.11.0', false );
    wp_enqueue_script( 'site-js', site_url( ) . '/wp-content/min/?g=site-js', array( 'jquery' ), '1.0', false );

// site.jsにmeteorslidessettingsオブジェクトの値(arrayの中身)を渡す

    wp_localize_script( 'site-js', 'meteorslidessettings', array(
        "meteorslideshowspeed" => "2000",
        "meteorslideshowduration" => "5000",
        "meteorslideshowheight" => "200",
        "meteorslideshowwidth" => "940",
        "meteorslideshowtransition" => "fade",
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

 

結合できてない、していないファイルをプラグインで結合する

WordPressプラグインAutoptimize で残りのファイルを結合し、 </body>直前に配置。

読み込みに先立って実行されるべきファイル( <head>内に置きたいファイル )は除外(今回は『googleapis』,『site-js』,『meteorslides』)。

functions.php

 /*
* Autoptimize filter: Exclude js files
* @see: /wp-content/plugins/autoptimize/autoptimize_helper.php_example
*/
function my_jsexclude( $exclude ) {
  return "googleapis,site-js,meteorslides," . $exclude;
}
add_filter( 'autoptimize_filter_js_exclude', 'my_jsexclude', 10, 1 );

 

⇩ ここまでの手順、詳しくは下記サイトへ

GradeAの先行くWordPress高速化 – 必ず結果の出る実践的HTTPリクエスト削減法 | ゆっくりと

広告を非表示にする