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

ミニマルで読みやすい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()”はもう無くなっています)

7 thoughts on “0

  1. ぶっちーさま
    imbalance2を使おうと思い、ぶっちーさまと同じように日本語対応ができていないことに悩み検索してきたteraraと申します。

    ぶっちーさまが「トップ画面に冒頭だけを表示する」でご説明いただいているコードがimbalance2を昨日DLして作業してみたところ、何処にもなく、困ってしまっておりました。

    もし、うまい方法などご存知でしたら、ご教授いただければ幸いです。
    大変お忙しい中、恐縮ですが、よろしくお願い申し上げます。

  2. >teraraさん
     いらっしゃいませ。
    自分も今imbalanceをDLしてみたところ、素の状態ではfunctions.phpに目的のコードが入って居ませんね。
    おそらく設定画面で何かを有効にする事で追記される類と思うのですが、それが何なのかつかめていません。
     もう少し調べてみますので、またわかったら追記します

  3. はじめまして。
    さんざん検索した結果
    ぶっちー様のHPにたどりつきました。
    急に質問で申し訳ないのですが、
    imbalance2のテンプレートについて、質問がございます。
    例えば、1ページあたりの最大投稿数を10件と設定した場合
    縦1列に10件の記事が並び、ぶっちー様のサイトのように
    縦横方向に並びません。
    また、マウスオーバーしても色が変わりません。。。。

    何か必要なプラグインや設定があるのでしょうか?

    申し訳ございませんが、アドバイス頂けると幸いです。

  4. >BONOさん
     いらっしゃいませ。

     自分のテスト環境でも発生を確認したので、対処を本文に追記しました。お試し下さい。

     もし直ったらここで結果教えていただけると助かりますw

  5. ぶっちー様へ
    お忙しい中、対応して頂きましてありがとうございます。

    ソースを書き換える前に、問題が解決しましたが、、、、
    Slimbox Pluginというlightboxのプラグインを有効にすると
    縦1列の現象が現れ、これを無効にすると正常に戻りました。
    ただ、lightbox自体も無効になるので、どうしたものかと思っていたら
    ぶっちー神のお告げで、ソースを指示通り書き換え
    さらに問題のプラグインを有効化してみたら
    マーベラスです。ちゃんと両方動きます!
    ありがとうございます!

    このテーマはいいのですが、唯一、残念なのは
    インデックスのページから下にスクロールして
    古い記事を読み込んでどんどんさかのぼって行き
    気に入った記事をクリックして見た後
    ブラウザーの戻るボタンで戻ると
    一番最初のインデックスのページに行くので
    それが使いづらいですね。

    ブラウザーの戻るボタンで戻った後も
    元のクリックした読み込み状態のページに戻れれば
    前後の記事も視覚的にクリックできるので
    どんどん過去のページを見たくなるなぁ〜と思いました。

  6. >BONOさん
     うまく動いたようでなによりです。
    テスト環境にはLightboxを入れていませんでしたが、
    それでもjqueryとなればそのカラミかも、とも思ってました。

    SinglePageを見てからの戻りは、あれ?と思って試してみたら、
     ・Firefox 13
     ・Safari 5.1.7
    ではちゃんと復帰してくれていたようで気づきませんでした。
     ・InternetExplorer(‘A`) 9
    はTopに戻っちゃいますね。ちなみに環境はWin7Ultimです。
    他のブラウザを試してみては如何でしょう。

    自分はその前に滞在してもらえるコンテンツ書かなきゃ・・w

  7. >ぶっちー様へ

    いろいろとアドバイスありがとうございます。
    またHPの内容も面白くて、いろいろ見ています。
    特に、自作されているソファー用のサイドテーブルは
    自分も欲しぃーーと思いました。
    これからもブログ楽しみにしています!

コメントを残す