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


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

1.テーマを探す

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

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

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

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

■WSC5 WordPress フリーテーマ 無料ダウンロード
image

2.インストールする

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

image

3.スタイルシートをいじる

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

4.テンプレートをいじる

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

4.1.テンプレートの構造

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

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

4.2.archive.phpを作る

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

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

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

image

ソースコードはこちら。

<?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=”http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>”
alt=”このエントリのはてなブックマークを見る”
title=”このエントリのはてなブックマークを見る”
/>
</a>
</li>
<?php endwhile; ?>

4.3.トップページは抜粋だけにする

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

image

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

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

update wp_posts set post_excerpt = “”;

4.4.ページあたりのエントリー数

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

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

—-
(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 日本語版

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

—-

4.5.コメントまわりをいじる

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

ソースコードはこちら。

<?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は他にもいじったところ満載なのですが、プラグインにまつわる修正なのでまた後日。

4.6.シングルページをいじる

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

image

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

<h2 class=”pagename”>
<?php the_title(); ?>
<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>”>
<img src=”http://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>

そんなところですかね。他にもいじった気がしますが、本質なところはその程度。こう見ていくとあれですね。一発ではてなサービスいろいろに対応する「All-in-one-Hatena」みたいなプラグイン作りたくなってしまいますなぁ。落ち着いたらやってみようかな。

さて、次はプラグイン、ウィジェットと進めていきますよ。

▼関連記事
■SeesaaからWordPressへ引っ越し中です。Seesaa側の作業メモ。 | 本質思考道場
■SeesaaからWordPressへ引っ越し中です。Wordpress側の作業メモ。 | 本質思考道場

P.S.
それより早くドメイン移行してくれないかなー。あと1週間くらいかな。