デザイン

WordPressのテーマちょびっとカスタマイズ

高橋文樹

2010 年 8 月 21 日
読了3分（1,716文字）
WordPress

この投稿は 14年前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

縦書きっぽくしました

ずっと放置していたテーマファイルですが、ちょっとカスタマイズしました。トップページに縦書きを実装しようとしたんですが、面倒になって途中でやめました。

変更点はこんな感じです。

TopページにYoutubeとスライドショーを入れた。
色数を減らした。
Twitterは公式ウィジェットにした。
ポップアップをMultiBoxに変えた。最近オーバーレイのないポップアップがはやってますね。
右カラムにLast.fmのウィジェットを入れてみた。これって普段聞いている曲が出ちゃうので、かなり緊張感ありますね！　アニソンとか聞けない！

とまあ、いろいろあります。

ところで、今回テーマをカスタマイズしていて思ったのは、CSSとかJavascriptのキャッシュ問題が結構メンドイということです。

WordPressはデフォルトだとstyle.cssというファイルを必須とするため、なんとなくこれを読み込んでしまいますが、このファイルをそのままこんな感じで読み込んでしまうと、更新性が悪くなってしまいます。

<link rel="stylesheet" type="text/css" href="<?php bloginfo("stylesheet_url"); ?>" />

これまではstyle1.0.cssとかいうようにナンバリングすることで別のCSSを読み込ませて、ユーザにキャッシュさせない方法を取っていましたが、ちょこちょこ直す場合は結構面倒だと思っていた次第であります。

これはJavascriptも一緒です。リリースした直後にエラーが発覚した場合なんかは面倒ですよね。バグを直すのに精一杯で、なんとか修正したと思ったらお客さんから「直ってないんですけど」と言われて、「F5を押してみてください」というはめになったり。

そんなことを考えていたら、WordPressにはそこら辺を解消させる方法がありました。

wp_enqueue_styleとwp_enqueue_scriptです。

この2つの関数は依存関係の解消とバージョン管理を行いながら、cssとjsの読み込んでくれます。

こんな風に使います。

//テーマフォルダのfunctions.phpに以下のコードを書く
//バージョンの定義
define("MY_THEME_VERSION", "1.0");

//initアクションにフックをかける
function my_thmeme_init(){
	//管理画面じゃないかどうかを確認して、読み込み開始
	if(!is_admin()){
		add_action("wp_enqueue_scripts", "my_enqueue_script");
		add_action("wp_enqueue_styles", "my_enqueue_style");
	}
}
add_action("init", "my_theme_init");

//CSSを読み込む関数
function my_enqueue_style(){
	wp_enqueue_style(
		"my-theme",
		get_bloginfo("stylesheet_url"),
		array(),
		MY_THEME_VERSION   //ここでバージョンを指定,
		"screen"
	);
	global $is_winIE; //WordPressにはブラウザ判別用のグローバル関数もあります
	if($is_winIE){
		wp_enqueue_style(){
			"ie6",
			get_bloginfo("template_directory")."/js/ie6.css"
		}
	}
}

//JSを読み込む関数
function my_enqueue_script(){
	wp_enqueue_script(
		"my-script",
		get_bloginfo("template_directory")."/js/my.js",
		array("jquery"),  //依存関係にあるものを指定する
		MY_THEME_VERSION, //ここでバージョンを指定
		true              //trueにするとフッターに出力。falseでヘッダーに出力
	);
	if(is_singular()){ //この時点で条件タグが有効なので、ページごとに異なるJSを読み込むことも可能
		wp_enqueue_script(
			"my-single",
			get_bloginfo("template_directory")."/js/single.js",
			array("prototype"),
			MY_THEME_VERSION,
			true
		);
	}
}

とまあ、こんな感じで読み込んでくれます。

こうして登録されたCSSは、たとえばバージョン付きのURLで読み込まれます

<link id="my-theme-css" rel="stylesheet" type="text/css" href="http://example.jp/wp-content/themes/style.css?ver=1.0" media="screen" />

バージョンが変わればURLも変わるので、ユーザのキャッシュには残らないというわけですね。

style.cssだけだと面倒ですが、大量のCSSとJSを利用しているテーマの場合、外部ファイルはこの方法で読み込んで、修正が終わったらfunctions.phpのMY_THEME_VERSIONの数値を変えるだけで済むので、わりと便利なんじゃないでしょうか。

僕はMooToolsをよく使うので、wp_register_scriptを使ってmootoolsというエイリアスを登録しています。wp_register_styleという関数もありますね。

登録さえしておけば、依存関係にあるファイルを読み込んだときに自動で読み込んでくれるというわけです。

あとは画像のキャッシュが残っていた場合ですが、これはファイル名を変更することで対処するしかないですね。

今回はめんどくさくてやらなかったので、右カラムとかカレンダーとかがおかしくなってるかもしれませんが、そんなときは何も言わずにF5キーを押してください。

gzipにするドロップレットも作った

最近はWebサイトのレスポンスについて云々されることが多いため、CSSやJSをgzipにしている人も多いかと思いますが、これが意外と面倒なので、ドラッグ＆ドロップで作れるドロップレットを作りました。

ドロップレットのダウンロード

Mac限定ですが、D＆Dしたファイルに.gzをつけたgzip圧縮ファイルを同じ階層に作ります。

こんな感じの.htaccessファイルをサーバに上げておけば、更新前にちょちょいと動かすだけで、いつでも小さいサイズのファイルになります。

<IfModule mod_rewrite.c>
   RewriteEngine on
   RewriteCond %{HTTP:Accept-Encoding} gzip
   RewriteCond %{REQUEST_FILENAME} \.js$
   RewriteCond %{REQUEST_FILENAME}\.gz -s
   RewriteRule .+ %{REQUEST_URI}.gz

   RewriteCond %{HTTP:Accept-Encoding} gzip
   RewriteCond %{REQUEST_FILENAME} \.css$
   RewriteCond %{REQUEST_FILENAME}¥.gz -s
   RewriteRule .+ %{REQUEST_URI}.gz
</IfModule>
<FilesMatch "\.js\.gz$">
   ForceType text/javascript
   AddEncoding x-gzip .gz
</FilesMatch>
<FilesMatch "\.css\.gz$">
   ForceType text/css
   AddEncoding x-gzip .gz
</FilesMatch>

この.htaccessが合ってるかどうかわかりませんが、もう朝なので寝ます。