ミニマルで読みやすいWorepressテーマ “imbalance2″をちょっとだけカスタマイズ

WorePressのテーマを今まで使っていた”inove“から”imbalance2“へ変更しました。最近できたらしく、ミニマルかつスタイリッシュなテーマで気に入りました。

使うにあたって必要な変更、自分なりのカスタマイズを書いておきます。

インストール

WP管理画面のテーマからは今のところインストールする事ができません。

Imbalance 2 WordPress Theme

へアクセスし、zipでダウンロードして下さい。

解凍したら/wp/wp-content/themesフォルダの下にimbalance2フォルダごと配置します。その後

chown -R nobody::apache ./imbalance2

として管理画面から書き換えられるよう、所有権を変更します(上記は自分の場合)

2011/06/26 追記
管理画面から直接zipファイルをアップロード&適用できるの知りませんでした。「テーマ」メニュー→「テーマのインストール」タブ→上の方にあるメニューの中から「アップロード」をクリック→ダウンロードしたimbalance2のzipをアップロードして有効化でOK。こんな機能あったのね・・・

トップ画面に冒頭だけを表示する

普通にテーマを適用してしまうと、それぞれの記事の全文がズラズラと掲載されてしまいます。美しくない！

調べたところ、function.phpの末尾にある関数

if ( ! function_exists( 'imbalance2_intro' ) ) :
function imbalance2_intro() {
	$content = get_the_content();
	$pos = strpos($content, '.');
	if ($pos) $pos = strpos($content, '.', $pos + 1);
	if ($pos) $content = substr($content, 0, $pos +1);
	return strip_tags($content);
}

にて判別を行っています。
英文らしく2個目の「.(ピリオド)」が出た所で冒頭終了、と判断している模様。ここを日本後対応に直しました。

管理画面の「外観」→「テーマ編集」からfunctions.phpを開き、

if ( ! function_exists( 'imbalance2_intro' ) ) :
function imbalance2_intro() {
	$content = get_the_content();
	$pos = strpos($content, '。');
	if ($pos) $pos = strpos($content, '。', $pos + 1);
	if ($pos) $content = substr($content, 0, $pos);
	return strip_tags($content);
}

へ変更。二個目の$posから+1を消しているのは、最後の「。」が表示されず化ける為。これで綺麗に2文節でた所でカットしてくれます。最初は全文「MORE」を使って書き直す必要があるのかとうんざりしましたが良かった。

フォントを変更する

英文を表示する場合はHelveticaが大変お美しいのですが、日本後だと汚いMSゴシックになってｵｩｼｯﾄ。14px以上なら結構気に入ってるメイリオを使うように変更しました。
同じくfunction.phpを開き

// font output for css
function getFonts()
{
	global $imbalance2_theme_options;

	if ($imbalance2_theme_options['font'] == 0) return 'Georgia, "Times New Roman", Serif';
	return '"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "Helvetica Neue", Helvetica, Arial, "Sans-Serif"';
}

日本語フォントを追加。Macの人ごめんなさい。

LightBoxが動かない

今まで使っていたLightbox系プラグイン、Lightbox 2は動かなくなってしまう様です。いろいろ探した結果、Lightbox Plus 2.2.2が無事動作。こちらも特にrel=などを入れる必要はなく、後付で使えます。

トップページに画像を出したい

Demoページみたいにオシャレな画像をタイル状に並べたい。これも調べたところ、WorePress3.x移行から実装されている「アイキャッチ画像」という物を記事に有効にすると使ってくれる様です。

ここをクリックして、トップにしたい画像を選んで「アイキャッチに設定」を選ぶだけ。しかし残念ながら、今まで書いた記事にアイキャッチ画像を一気に設定する方法は見つけられませんでした。
Thumbnail for Excerptsがやってくれるかも、なんて淡い期待を抱いたりもしましたが違うみたい。

この記事は随時追加するかもしれません。

現在のimbalance 2について

2012/07/02 追記

色々疑問がありましたが、質問と確認した事があったので更新します。元の記事を書いたときは”Imbalance 2 ver1.00″で、現時点でダウンロードされるものは”Imbalance 2 ver1.03″になるようです。

トップページが縦一列表示になってしまう

こういった現象があるようです。あわせて、MouseOverしても色を変更してくれない問題もあります。自分のテスト環境で試したところ再現しました。

diffなどとって調べた所、functions.phpのjquery_js定義に問題があるようです。

ダッシュボードの[外観]→[テーマ編集]と選び、直接funtions.phpを編集します。冒頭にある

	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', get_bloginfo('stylesheet_directory').'/libs/jquery-1.6.1.min.js' );
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'jquery_masonry', get_bloginfo('stylesheet_directory').'/libs/jquery.masonry.min.js' );
	wp_enqueue_script( 'jquery_ui', get_bloginfo('stylesheet_directory').'/libs/jquery-ui.custom.min.js' );

を

	wp_enqueue_script( 'jquery_js', get_bloginfo('stylesheet_directory').'/libs/jquery-1.6.1.min.js' );
	wp_enqueue_script( 'jquery_masonry', get_bloginfo('stylesheet_directory').'/libs/jquery.masonry.min.js' );
	wp_enqueue_script( 'jquery_ui', get_bloginfo('stylesheet_directory').'/libs/jquery-ui.custom.min.js' );

に変更します(ソースの右上のView Sourceボタンをお使い下さい)。

これで表示とMouseOverの動作が修正できました。これが正解か、と言われると自信はないけど対処の一つとして。

トップページの記事表示が変更

これも以前コメントで質問いただいて返せてなかったのですが・・・

当初のバージョンではトップページの本文が全文掲載されてしまい、対処が必要でした。現在のバージョンではどうやら英語、日本語に関わらず40文字で勝手に区切ってくれるようです。

よって自分が書いた対処はもう必要無いでしょう（その部分のコード”imbalance2_intro()”はもう無くなっています）