Hi, I detected your main language is not Japanese. I have an english version of about me, so please try it!

この投稿は6年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2010 年 8 月 21 日 2,532日前)
4,021文字 (読了時間10分)

SPONSORED LINK

縦書きっぽくしました
縦書きっぽくしました

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

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

  • 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_stylewp_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が合ってるかどうかわかりませんが、もう朝なので寝ます。

 

SPONSORED LINK

この記事について

この記事はが2010 年 8 月 21 日にデザインの記事として公開しました。

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。