WordPressのデザインテーマを「WSC5」に決めて、少しいじった。

SeesaaからWordPressに移行中です。前回まででデータの移行は完了。今度はサイトデザインを決めていきます。WordPressでは「テーマ」と呼ぶようです。

１．テーマを探す

探し始めるとすぐに迷いました。というのもかっこいいテーマが多すぎるのですよ。参考にしたのはこちら。

■WordPress › WordPress Themes
本家サイトのテーマ集。

■無料のWordpressテーマ100選 | DesignWalker
この年末年始を使って移行するための人向けにDesignWalkerさんがまとめてくれたもの。

で、結局選んだのはこちら。シンプルで、リキッドレイアウト（ブラウザ幅にあわせてレイアウトが可変）で、サイドバーの数を変えられるものを基準にしたら、これに行きつきました。

２．インストールする

WordPressのテーマインストールはすごく簡単でした。ダウンロードしたものをサーバの/wp-content/themes配下にディレクトリ毎アップロードして、ダッシュボードの「外観：テーマ」で選ぶだけ。MovableTypeのSeesaaだと再構築が必要でしたが、アクセスの都度動的生成してくれるWordPressだから再構築不要。色々試してみるのに便利です。

３．スタイルシートをいじる

デザインが得意な方ではないので基本はインストールのまま。h3とかh4とか4つほどオリジナルスタイル追加。インストールしたテーマディレクトリの配下にあるstyle.cssをいじれば良いようです。

４．テンプレートをいじる

使うことにしたWSC5のテーマで気に入らないところがいくつかあったので、手を入れることにしました。テーマ配下のテンプレートphpファイルをいじることになるので、ここまでにテーマは固めておきましょう。

４．１．テンプレートの構造

全くマニュアル読まずに始めてしまい最初はトライアンドエラーを繰り返しました。しかし、テンプレート階層図を見てすっきり。

■テンプレート階層 – WordPress Codex 日本語版

４．２．archive.phpを作る

カテゴリーやタグ、年月といったエントリー一覧を表示したいページを作りたかったのですが、WSC5テーマではエントリー内容まで表示されてしまい、とても一覧性があるとは言えません。最初はindex.phpに手を入れ始めたのですが、前述の階層図を見てすっきり。これらはarchive.phpがあればarchive.phpを使って処理されるようです。

そこで、index.phpをコピーしてarchive.phpを作り、while文の中の本文表示をスパッとなくした。これで、一覧性あるアーカイブページが出来ました。

ついでに、はてブマーク数を表示するように改造して、こんな感じに。

ソースコードはこちら。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<?php the_date(‘Y/m/d’); ?> :
<a href=”<?php the_permalink() ?>” class=”title”>
<?php the_title(); ?>
</a>
<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>”>
<img src=”https://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>”
alt=”このエントリのはてなブックマークを見る”
title=”このエントリのはてなブックマークを見る”
/>
</a>
</li>
<?php endwhile; ?>

４．３．トップページは抜粋だけにする

Seesaa時代はトップページに最新エントリーだけを表示していましたが、トップページはザーっとナナメ読みできるようにしたくて、タイトル、日付、カテゴリ、および抜粋だけに変更。index.phpをいじってこんな感じ。

トップページだけはイメージフォトを入れることにして、季節の写真をお届け。

抜粋文はSeesaa時代には書いてませんでした。
今から400エントリー全部書くのは面倒なので、「All-in-one-SEO」プラグインの「Autogenerate Descriptions」オプションをオン！これで先頭の50文字を自動的に抜粋文として表示してくれるようになりました。このオプション、wp_postsテーブルのpost_excerptフィールドが空っぽの場合に自動生成してくれるようです。何だかうまく表示されないエントリーがいくつかあったので、えいやとばかりに全部クリアしてプラグインにお任せ。手抜きですなぁww。クリアのSQLはこちら。

update wp_posts set post_excerpt = “”;

４．４．ページあたりのエントリー数

ここで気付いたのですが、１ページに複数のエントリーを表示する場合、ページ種類毎に件数を変えることが出来ない。トップページも、アーカイブ系ページも、ケータイも、１ページに表示する件数は１か所でしか設定できないようです。何かやりようがあるかも知れませんが調べきれていません。ちょっといやだな。

ダッシュボードの「設定：表示設定」で変更するのですが、「１ページに表示する投稿数」でしか決められないようです。どなたか知ってたら教えて下さい。

—-
(2008/01/05追記)
早くも解決しました。周りにWordPress仲間がいるのは嬉しいですね。
下の赤字のコードをwhile文でエントリー取得ループする前に入れると良いとのことです。実験したらうまくいきました。

<?php query_posts($query_string . “&showposts=50”); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
・・・・
<?php endwhile; ?>

参考になるのはこのページ。showpostsパラメータをquery_stringにくっつけて、数を指定すればよいだけ。分かってしまえば簡単。ダッシュボードで設定しようとしてたのが頭が固かったですね。
■テンプレートタグ/query posts – WordPress Codex 日本語版

情報を提供いただいたみなさん、ありがとうございました。

くまめがねのくまさん
akiyan.comのあきやん

—-

４．５．コメントまわりをいじる

WSC5テーマではトラックバックURLが表示されていなかったので、comments.phpをいじって表示することに。WordPress同士ではピンバックという概念があって、エントリー内で相手にリンクするだけで、相手へのトラックバックのような動きをする。素晴らしい！ただ、WordPress以外からもトラックバックを頂くこともあるでしょうから、表示させておかないとね。

ソースコードはこちら。

<?php if ( pings_open() ) : ?>
<h3 id=”respond”>このエントリーにトラックバックする</h3>
<p><input type=”text” name=”TrackbackURL” id=”TrackbackURL” size=”100″ value=”<?php trackback_url() ?>” readonly=”readonly” onfocus=”this.select()” />
<?php endif; ?>

comments.phpは他にもいじったところ満載なのですが、プラグインにまつわる修正なのでまた後日。

４．６．シングルページをいじる

はてブ関連をエントリーのタイトル部分に表示させるために修正。

ソースコードはこちら。はてなスターはプラグインで実現。ソースには現れていません。

<h2 class=”pagename”>
<?php the_title(); ?>
<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>”>
<img src=”https://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>”
alt=”このエントリのはてなブックマークを見る”
title=”このエントリのはてなブックマークを見る”
/>
</a>
<a href=”http://b.hatena.ne.jp/append?<?php the_permalink(); ?>”>
<img src=”http://d.hatena.ne.jp/images/b_entry.gif”
alt=”このエントリをはてなブックマークに追加”
title=”このエントリをはてなブックマークに追加”
/>
</a>
</h2>