>wordpressで・・・

wordpressでcssやjsを圧縮する自作プラグインを作成

wordpressには圧縮プラグインも色々ありますが、これを自分で作ってしまおうという記事です。プラグインは簡単に導入できて開発する手間を省けるのですが、時として愛用していたものが放置されて、しかもきちんと動作しなくなった時に結構焦るものです。wordpressを長く運用しているとそんな体験をすることもあるのではないでしょうか。

[ 目次 ]

wordpress圧縮プラグインのコード
圧縮プラグインのコードの解説
まとめ

wordpress圧縮プラグインのコード

以下のようなコードを記述したファイルに適当な名前をつけ、同じく適当な名称をつけたフォルダに入れます。それをFTPなどでwordpressの「wp-content/plugins/」ディレクトリにアップロードすると管理画面でcssとjsの圧縮ファイルが作れます。

<?php

Plugin Name: AAjoint

Description: cssとjsファイルを結合して圧縮

class AAjoint_wordpress {

function __construct() {

add_action('network_admin_menu', [$this, 'wordpress_joint']);

add_action('admin_menu', [$this, 'wordpress_joint']);

}

function wordpress_joint() {

add_menu_page('joint','AAJOINT', 'level_8', __FILE__, [$this,'css_js_joint'], '', 101);

}

function css_js_joint() {

$_POST["template"]="aaa"; // テンプレートのフォルダ名を指定

$csstop=$jsbottom=$cookie=$self=$style=$all="";

if(isset($_POST['joint-top-css'])){

$jointcss= $_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/'.$_POST["template"].'/css/joint-top.css';

$style=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/'.$_POST["template"].'/style.css');

$all=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/'.$_POST["template"].'/css/all.css');

$csstop=$style.$all;

$csstop = preg_replace_callback_array(

[

'`([\r\n]+)`'=>function ($match){return;},

'`(/\*.*?\*/)`'=>function ($match){return;},

'`(\t)`'=>function ($match){return;},

'`\s+([;:}{,]{1})`'=>function ($match){return $match[1];},

'`([;:}{,]{1})\s+`'=>function ($match){return $match[1];},

'`(\s+)`'=>function ($match){return " ";},

], $csstop);

file_put_contents($jointcss, $csstop, LOCK_EX);

}

$hs="htmlspecialchars";

$nt=preg_replace('/\/$/', '', network_home_url('','https'));

$nt=$nt.$_SERVER['REQUEST_URI'];

echo <<< EOM

<textarea rows="10" cols="100" name="joint-top-css" onclick="this.focus(); this.select()" style="margin:0 0 5px 0">{$hs($csstop)}</textarea>

</form>

EOM;

if(isset($_POST['joint-bottom-js'])){

$jointjs= $_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/'.$_POST["template"].'/js/joint-bottom.js';

$cookie=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/'.$_POST["template"].'/js/jquery.cookie.js');

$self=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/'.$_POST["template"].'/js/my.js');

$jsbottom=$cookie.$self;

$jsbottom = preg_replace_callback_array(

[

'`(//.*)`'=>function ($match){return;},

'`([\r\n]+)`'=>function ($match){return;},

'`(/\*.*?\*/)`'=>function ($match){return;},

'`(\t)`'=>function ($match){return;},

'`\s+([=}{,]{1,2})`'=>function ($match){return $match[1];},

'`([=}{,]{1,2})\s+`'=>function ($match){return $match[1];},

'`(\s+)`'=>function ($match){return " ";},

], $jsbottom);

file_put_contents($jointjs, $jsbottom, LOCK_EX);

}

echo <<< EOM

<textarea rows="10" cols="100" name="joint-bottom-js" onclick="this.focus(); this.select()" style="margin:0 0 5px 0">{$hs($jsbottom)}</textarea>

</form>

</div>

EOM;

}

new AAjoint_wordpress;

圧縮プラグインのコードの解説

wordpressに認識させる

これはwordpressにプラグインであることを認識させるための記述です。他にも色々指定できますが、動作させるにはこれだけで十分です。

Plugin Name: AAjoint

wordpressのcssとjsファイルへの読み書き

この部分は使用しているワードプレステンプレートのディレクトリ名を指定します。file_get_contentsとfile_put_contents関数でファイルを読み書きする際に必要です。

$_POST["template"]="aaa"; // テンプレートのフォルダ名を指定

file_get_contents

以下のようにURLを指定している部分ですが、末尾のstyle.cssはご自身の環境に合わせて変更して下さい。下の例ではcssファイルですが、これはjavascriptのファイルでも同様です。

また、複数のファイルを結合して圧縮するには必要な分だけドットで連結して代入すれば可能です。上記の例では「$csstop=$style.$all;」や「$jsbottom=$cookie.$self;」といった感じです。

$style=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/'.$_POST["template"].'/style.css');

preg_replace_callback_array

この関数はpreg_replace関数が拡張されたものですが、preg_replace関数でも同様の処理は可能です。また、jsは作成者の癖みたいなものがあるので、正規表現を追加しなければ上手く圧縮できないこともあります。細かいことを気にしないのであれば、改行や空白、コメントを削除するだけでかなり圧縮できると思います。

textarea

上記のコードではテキストエリアに圧縮した結果を表示させていますが、必要なければtextareaタグを削除しても問題ありません。ただ、ワードプレスの管理画面上からきちんと圧縮されているかどうかを確認するのには便利です。基本的にはコピーアンドペーストで他のエディタで一行表示させて確認します。FTPでjsとcssファイルをダウンロードすれば済む話ですが、ワードプレスの管理画面上からのほうが筆者は楽です。

まとめ

いかがでしたでしょうか？ワープレで自作する圧縮プラグイン。phpがある程度理解できるのであれば、自分で管理したほうがワープレの仕様が変更されても安心できます。プラグインはとかく不要な処理が多く、必要のないものまで入っていたりしますから。ワープレは基本的にプラグインが有効化されているとページを閲覧するだけでもコードを読込みますので、不要なものやしばらく使わないものは無効化しておいたほうが無難です。

GAROP.NET