Thematicのこと

WordPress

WordPressのテーマにThematicというのがある。テーマ･フレームワークと呼ばれて採用している人はけっこう多いみたいだけど、実際にちょっと触ってみた感じではとてつもなくカスタマイズ性に富んだテーマの一つという感じ。子テーマを作ってカスタマイズする前提なので、その意味ではWebアプリケーション系のフレームワークに近いといえば近い。ときとして思い通りに行かないことが多々ある点も似ている。

Thematicの説明と簡単な使い方については、おでさんという方が作ったスライドがわかりやすい。

zazie@tokyoさんによる説明。

CSSでデザインを変える

これはとても簡単。最初から2カラム・3カラムのよくあるレイアウトが選べるようになっていて、基本的なレイアウトは簡単にだせる。細かいところをCSSをいじって変更するのもけっこう簡単。FireBugなんかで変更したい要素を調べて、子テーマ用のstyle.cssに追記するだけでよい。

出力HTMLを変える

いくつかやりかたがあるようで、まずおでさんという方のスライドにあるフックをいじる方法。

これ、割と簡単に実現できた。header.phpとは、親テーマフォルダ直下にあるファイルを指す。
まずheader.phpはこんな感じ。

<div id="header">
  <?php  
  // action hook creating the theme header
  thematic_header();
  ?>
</div><!-- #header-->
<?php
// action hook for placing content below the theme header
thematic_belowheader();
?>   
<div id="main">

実際に吐き出されたHTMLはこうなっている。

<div id="header"> 
  <div id="branding">
    <div id="blog-title">
      <span>
        <a href="http://localhost/" title="test blog title" rel="home">
          test blog title
        </a>
      </span>
    </div>
    <h1 id="blog-description">Just another WordPress site</h1>
  </div><!--  #branding -->
  <div id="access">
    <div class="skip-link">
      <a href="#content" title="Skip navigation to the content">Skip to content</a>
    </div>
    <div class="menu">
      <ul class="sf-menu">
        <li class="page_item page-item-2">
          <a href="http://localhost/?page_id=2" title="紹介">紹介</a>
        </li>
      </ul>
    </div>
  </div><!-- #access -->      
</div><!-- #header-->
<div id="main">

このスライドでは、ブログタイトル部分をイメージに変更したいということだから、ブログタイトル部分あたりで呼び出されている関数やタグやIDでGrepをかければどこで出力しているかが分かる。答えは「thematic_blogtitle」という関数。親テーマのフォルダ以下にある「.library\extensions\header-extensions.php」にある。

// Create the blog title
// In the header div
function thematic_blogtitle() { ?>
  <div id="blog-title">
    <span>
      <a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home">
        <?php bloginfo('name') ?>
      </a>
    </span>
  </div>
<?php }

つまりここを変更してやれば出力内容が変わるけど、子テーマ用フォルダにあるfunction.phpを使ってそれを実現できるのがテーマフレームワークのいいところ。この関数のコードをfunction.phpにコピペして、画像出力させるように修正する。関数名は変える。

//header_extensions.phpにあるthematic_blogtitleの中身をコピペし、
//イメージ出力させるように書き換える
function ur_thematic_blogtitle() { ?>
	<div id="blog-title">
		<a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home">
			<img src="<?php bloginfo('stylesheet_directory');?>/logo.jpg" alt="sitename" />
		</a>
	</div>
<?php }

そして、既存のthematic_blogtitleを無効にし、代わりに追加した関数・ur_thematic_blogtitleを有効にするためのコードが必要。それらを追記したものがこれ。

//タイトル部分を文字列出力している現在の関数（フック？）を削除する(remove）
function remove_thematic_blogtitle() {
  remove_action('thematic_header', 'thematic_blogtitle', 3);
}

//上記関数・remove_thematic_blogtitleを無効とする
add_action('init', 'remove_thematic_blogtitle');
//header_extensions.phpにあるthematic_blogtitleの中身をコピペし、
//イメージ出力させるように書き換える
function ur_thematic_blogtitle() { ?>
	<div id="blog-title">
		<a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home">
			<img src="<?php bloginfo('stylesheet_directory');?>/logo.jpg" alt="sitename" />
		</a>
	</div>
<?php }
//ur_thematic_blogtitleを有効にする
add_action('thematic_header', 'ur_thematic_blogtitle', 4);

これでおでさんという方のスライドの方法は実現できる。

出力HTMLを変えるもう一つの方法

zazie@tokyoで紹介されている方法で、add_filter関数で既存の関数の代わりにfunctions.phpに追記した関数を利用するやりかた。function.phpに示されている例の方法でもあるんだけど、これがうまくいかない。
functions.phpの例にある「HOMEリンクを出す方法」はできるんだけどね。

function childtheme_menu_args($args) {
  $args = array(
  'show_home' => 'Home',
  'sort_column' => 'menu_order',
  'menu_class' => 'menu',
  'echo' => true
  );
	return $args;
}
add_filter('wp_page_menu_args','childtheme_menu_args');

たとえば、あるタグを含む記事を一覧表示させたとき、全文表示されないようになっている。Grepで調べていくと、content-extensions.phpにある関数・thematic_contentでその辺が実現されていることがわかる。

//creates the content
function thematic_content() {
	if (is_home() || is_front_page()) { 
		$content = 'full';
	} elseif (is_single()) {
		$content = 'full';
	} elseif (is_tag()) {
		$content = 'excerpt';
	} elseif (is_search()) {
		$content = 'excerpt';	
	} elseif (is_category()) {
		$content = 'excerpt';
	} elseif (is_author()) {
		$content = 'excerpt';
	} elseif (is_archive()) {
		$content = 'excerpt';
	}
……

この関数をまるまるfunctions.phpにコピペして別名保存し、記事を全文表示させるようにしてadd_filter関数を足して保存すると、エラーで表示されなくなってしまう。

add_filter('thematic_content', 'new_thematic_content');
function new_thematic_content() {

	if (is_home() || is_front_page()) { 
		$content = 'full';
	} elseif (is_single()) {
		$content = 'full';
	} elseif (is_tag()) {
		$content = 'full';
	} elseif (is_search()) {
		$content = 'excerpt';	
	} elseif (is_category()) {
		$content = 'excerpt';
	} elseif (is_author()) {
		$content = 'excerpt';
	} elseif (is_archive()) {
		$content = 'excerpt';
……
}

まあ、何かが間違ってるんだとは思うけど、情報を見つけることができていない。