雨過天晴

WordPressで同人小説サイトを作ってみた

2011.05.24

img from: PAKUTASO

この記事は2011年5月24日に書かれたものです。古い内容や非推奨要素を含む可能性がありますのでご注意ください。

10年くらいぶりに某所で小説サイトを始めました。
どうせなら(x)htmlとCSSの勉強しようと、色々確認しながらエディタで手打ち。
これはこれで出来上がったのですが…
更新作業が面倒になってきました。
メモ帳で小説書いて「よし終わった!」の勢いをもってしても、

1.小説用htmlテンプレファイルにコピペして
2.<p>とか<br />とかポチポチ入れて
3.目次ページ更新して、リンク貼って
4.トップページの更新履歴(新着情報)にも追加する

2.の改行タグ入れてるくらいはいいんですが、3.辺りまでくると「きいいぃぃぃっ」となります。それに話の数が増えてくると当然ファイル数も増殖する訳で…。
「そうだ、ブログサイトにすればええんやん?」
とは思いました。
ただカテゴリ別に見づらいのと、時系列に並んじゃう(一般的に)ので連載した場合に最新作から表示されることに…それは嫌だ。

そういえば、ブログ的投稿の仕方で普通のサイトっぽく見せられるCMSあるよねw
わーどぷれす とか むーばぶるたいぷ とか。
自分何年か前に触ったことあるよね、流行り物には一応手を出そうと思って。
当時は全部英語だったもんで単に動かすところまでで挫折したけど、今は日本語になってるらしいよーw
だとすると。

「テーマ…自作するか…(やれやれ)」

というわけで、PHPなんぞ全く分からないくせにテーマ作成に手を出すことにいたしました。
以下、かなり長いですが、そのときに参考にしたサイトやブログの備忘録です。
ほんとお世話になりました。

※2011年の記事のため、古い情報や非推奨要素も含まれております
 

 

1.とりあえずどうやって作業すればいいの?

なにせ、どこから手をつければいいのか分からない状態でしたから(あ、ちなみに職業はwebとは全く関係ないただの事務員です)。下のブログ読んで、何となく分かった気になってみる。

↑ものすごく丁寧な記事なので、これを参考に見ながら、とりあえずローカルにWordPressをインストール。問題なく終了。ついでに、デフォルトのテーマでとりあえず表示させようと、小説データをいくつか投稿してみることにする。
ん?
「…投稿前に『パーマリンクの設定』をしておかないと、もしかして後でこのパーマリンク設定変えるとリンク先が変わって色々ややこしいことになったりするんじゃぁ…?」
という気がひしひしとしてきたので、先に設定をしてみました。
デフォルト設定だとurlが「/?p=234」なんていう「なんじゃこりゃ胡散臭いにゃ」な表示になるので、選択肢から好みのものを選んでみたよ。
(SEO的にはカスタム設定用のプラグイン入れた方が、とあちこちで見かけますが、サイトの性質故、むしろ検索されたくないので日付ベースとか数字ベースで構わない)
よし、出来た。表示…した!ブログ画面に見慣れた小説が出てて、変な感じです(苦笑)。
 
 

2.どんなサイトにするか決めてテンプレ探す

現在運営中のサイトのデザインもどうせなら変えたかったので、もう1から作り直すことに。もとのテーマはものすごくシンプルな中身にして、CSSの入れ替えでドーン!と変えられるように、と決めました。
内容はこんな感じです。
テンプレート計画
トップページはサイトの説明と注意書き(あくまで同人サイトですから)、あとは小説展示ページ以外に、普通のブログのように表示される更新履歴(日記)も作ることに。
単に無精でお返事出来ないからコメントとトラックバック機能は全部不要。
このくらいの中身なら超シンプルなテキストベースのテーマをいただいてきて、改変すれば出来る!筈なので、早速いただいて参りました。

ありがとうごじゃります、ありがとうごじゃります。
利用規約は頑張って読んだよ(当たり前だ)!英語だったよ…。
(でも結局原型残らなかったので、コードの勉強させてもらっただけになった)

テーマファイルのフォルダを明けると色んなファイルが入ってます。(ちなみに「デフォルトのテーマtwenty tenを見て勉強するといいよ!」と書いてあるサイトを見かけますが、正直初心者には機能過多であのテーマはわけがわかりません)意外とファイル数が多いことにグッタリしながら、折角だし以下の公式サイトでお勉強。

…最初は分からなかったけど、3回熟読したら実はすっげ分かりやすかった。感謝。
あとお勉強用に分かりやすいテーマを配布されてるところがあったので、こちら。

ちなみに文中に出てくるライセンスについてはWebデザイナーが覚えておく、代表的なライセンスまとめを参照。
 
 

3.固定ページでトップページを作ってみる

ブログではない、普通のサイトっぽくする第一歩です。
設定画面から固定ページ新規作成して、topって名前つけて、内容をテキスト打ちして、はい終わり。簡単!
メールフォームは定番プラグイン「Contact Form 7」にお世話になることに。便利。
これであと、更新履歴が自動で表示されるようになれば終わりやーん、と思ったらこれが意外と壁だった。
小説を新規投稿したときに、トップページに「タイトル」「カテゴリ(カップリング)」「更新日時」等が自動で掲載されるようにしたい。でも更新記録(日記)の投稿は表示させたくない。
ということは、表示させたくないカテゴリを除外する<? php うにゃうにゃ~とかいう奴をどうしても書かなくてはならない。しかし固定ページ内ではPHPコードを記入することができない…? なんだと…。
(プラグイン使えば出来るそうですが、有効化しただけでエラーが出たのであっさり諦めた)

これは固定ページを投稿画面ではなく、トップページ専用のテンプレートファイルで作成することで解決。

まずindex.phpをコピーして「page-xxx.php」(xxxは固定ページ名)に名前を変える。
(詳しくはWordPress Codexのテンプレート階層の「固定ページ表示」を)
この「page-xxx.php」に直接「サイトについての注意書き」などトップページの内容を書き込めば、固定ページとして表示される。おおお凄い!
固定ページのテンプレートで作ったら、今度は「Contact Form 7」のショートコードが使えなくなったので、ちょっと困ったけどこれも解決。ここに載ってます。

さて、更新履歴の表示。クエリとかいうのを生まれて初めていじるんだよ。

基本はググって出てきたこのコードで(リンク先が削除された模様 2014.2月修正)。
正直全然意味がわからないので、コード?(関数っていうの?)を一つずつググってお勉強。
自分のサイトは「更新履歴(日記)」などのカテゴリの新着情報は出したくないので、除外するカテゴリを指定してやって、

<?php $posts = get_posts('numberposts=5&amp;order=desc&amp;cat=-1,-2'); ?>
<?php foreach($posts as $post): ?>
<li><?php the_time('Y.m.d') ?>
<a href="#"> <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
</li>
<?php endforeach; ?>

こうしました。
新しい物が上から並ぶリストで「更新日」「タイトル」「カテゴリ名(うちの場合はカップリング名)」が表示されます。
「cat=-1,-2」が除外しているカテゴリID。カテゴリ「1」と「2」ですね。

(たったこれだけに何時間かかったことか…。思い通りに出来たときは半泣きだったけど嬉しかったけど。PHP分かる人は鼻ほじりながら「こんなんプーだぜプー」って感じで書けるんだろうな…凄えなあ…)

そもそもカテゴリIDとスラッグは何が違うのか、カテゴリIDをどこで調べればいいのかわからず四苦八苦。カテゴリIDは「設定画面カテゴリページのカテゴリへのリンクにマウスポインタ当てる」とブラウザ下部にリンク先として表示されます。なんてこった。

よし、これでトップページ終わり!ちょっとサイトっぽい!

4.検索窓を作ってみる

ベースに選んだテーマがシンプルすぎて、検索窓は付いてませんでした(へこー)。
ウィジェット対応テーマなら設定画面からサクッといけるし、ウィジェットに対応させればいいのですが(【WordPress】ウィジェット非対応のテーマをウィジェットに対応させる方法)ウィジェットってなんかよく分からんし、折角の自作改変テーマなんだから勉強がてら、
…検索窓作るかー。

はい、出来た。

試しに検索してみると、検索結果に全文が表示される。こりゃマズイ、小説のタイトルと最初の数行だけでいいのに。でも抜粋だと文字数が…抜粋の文字数指定ってどうやってするのさー。あと検索結果専用の表示をして欲しいから、検索結果表示用のテンプレート作りましたよ。
・テーマで投稿の一覧を抜粋表示。文字数指定(リンク切れのため削除)
検索フォームを設置する[WordPressテンプレート作成#8]

ついでに検索結果に「○○での検索結果 □件」と出したくなったので、こちら。

おおお、思ったとおりに検索、動いた…楽しい、これは楽しい。

5.小説の目次ページを作る

さて、本題。
カテゴリ(カップリング)別に小説タイトルがずらっと並ぶ(ずらっ、ってほど沢山書いてないだろというツッコミは不要)ページを作ります。
カテゴリ(カップリング名)の一覧を表示させ、その後で選んだカップリングの小説タイトル一覧ページに飛ぶ、という形なら手間はかからない(気がする)んです。それって普通のブログのサイドバーにある「カテゴリ一覧」をメインに持って来ればいいだけですもん。
でも、1ページに全タイトルをカテゴリ(カップリング)ごとにソートしながら表示させたいんだ…。なので固定ページを作成することにしました。
トップページを作ったのと同じ要領でテンプレート作成。なぜなら、またもや固定ページにPHPコードを書かなければならないからですよ…。苦痛だ。はははは…。

このページ、そのものズバリでした。助かった!
ついでにこちらも参考に。

カテゴリ(カテゴリへのリンク付き)表示のコードはよく載ってるんだけど、カテゴリ名だけ表示するコードってなかなか見当たらなかったので、覚え書き。

実際やってみると、表示カテゴリの指定をしていないので、小説目次ページには表示させたくないカテゴリも出てきます。私の場合、更新記録(日記)です。
・特定のカテゴリのみ除去して表示 OR 特定のカテゴリのみ表示する方法(リンク切れのため削除)
(「query posts」の制御が全く分からず、なんか参考にしたらしい記事の備忘録をついでに。 特定のユーザーの記事のみ表示する

「カテゴリ(カップリング)」「タイトル」「更新日時」の他に、ここではお話の説明を入れなければなりません(小説本文の抜粋ではなく、シチュや注意書きなどです)。なので「カスタムフィールド」ってもんを設定いたしました。

名前は恐ろしげな「カスタムフィールド」、地味に便利。これすごい。
適当な名前でカスタムフィールドを設定して、上記ページを参考に、小説目次ページの表示させたいところに表示コードを書き込めば…よし、終わり!

参考までに、コードはこんな感じ。
(お詳しい方、ま、間違ってたらお知らせ下さいお願いします)
出てくるhtmlはこれ—————

<a id="カテゴリ名"></a>
<h4></h4>
<dl>
<dt><a href="小説本文へのリンク">小説タイトル</a>更新日</dt>
<dd>シチュや注意書き</dd>
</dl>

(アンカー付けてるのはページが縦長なのでサクッと目的のカップリングに飛ぶためです)
コードはこれ—————

<?php
// カテゴリスラッグ順に、そして表示カテゴリを指定(ここではカテゴリ4と5と6)して並べる
$categories=get_categories('orderby=slug&include=4,5,6');
foreach($categories as $category) { 
echo '<a id="' . $category->slug.'"></a><h4>' . $category->name.'</h4><dl>';
?>
<?php
global $post;
// カテゴリ内の全投稿(numberposts=-1)を日付順。タグに「short」と付けた記事だけ。
$myposts = get_posts('numberposts=-1&category=' . $category->term_id . "&orderby=post_date&order=DESC&tag=short");
foreach($myposts as $post) :
setup_postdata($post);
?>
<dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php the_time('Y/m/d'); ?></dt>
// 「シチュや注意書き」はカスタムフィールド名に変更すべし
<dd><?php echo post_custom('シチュや注意書き'); ?></dd>
<?php endforeach; ?>
</dl>

(このままだと定義リストに改行が入らないので、ソースがちょっと見にくくなるよ)

6.小説本文専用のページを作る

これは色々やり方迷ったのです…。
小説カテゴリの時だけ違うスタイルを設定するか、
・WordPressでカテゴリー毎に表示スタイルを変更する方法(リンク切れのため削除)
それとも小説用のテンプレートを別に用意するか(結局こちらにした)。

小説一作は「個別ページ」扱いになるので「1ページに1投稿」表示することになります。このとき読んでくるテンプレートファイルはsingle.php(なければindex.php)。カテゴリなら「category-xxx.php(xxxはカテゴリスラッグとかカテゴリID)」でカテゴリごとに違うテンプレート読ませられるんだけど、どうやら個別ページでは出来ない、みたい(WordPress Codexのテンプレート階層)。

というわけで、
・WordPressで属しているカテゴリごとに異なるsingle.phpを使う
これで小説のときは小説専用の固定ページ用ファイル(single2.phpって名前にしました)、その他の記事の時は別のファイル(面倒だからindex.phpにした。どうせ小説以外の記事に個別ページへのリンクを貼らない)を読ませることに。

んー、とは言えファイルが増えてきたので、この時点でのテンプレートファイルを整理してみます。ファイル名は私が実際に付けた名前です。

・基本ファイル:header.php、index.php、footer.php
・トップページ(固定ページ):page-top.php
・検索フォーム用ファイル:search.php、searchform.php
・小説目次ページ(固定ページ):page-novels.php
・小説本文専用ページ:single2.php
・(小説本文専用ページへの分岐用ファイル:single.php)

うーん、結構増えたね。

ついでに。
連載なんかで「次へ」にしたいとき、長い話なら別の投稿にしたり、短い話なら1つの投稿の中でページを区切ったり(知っておいて損しない、地味に便利なWordPressのデフォルト機能 の二つ目「記事を複数ページに分割」)したらいいと思います。

7.更新履歴(日記)ページを作る

これは普通のブログ状の表示をさせるだけだから、簡単。「category.php」を更新履歴(日記)用になんとなくカスタマイズすれば終わり。(普通のサイトっぽく見せるため、記事タイトルの、個別ページへのリンクは外しました)
 

8.中身が出来たところでメニューを作る(挫折)

※追記:この時の挫折は「WordPressで同人小説サイトを作り直してみた」で解決しました

さて、ここでサイトを眺めてみると…お気づきですね、それぞれのページに飛ぶリンクがない。
メニュー部分を作んなきゃ…というところで私、困ってしまいました。

・トップページ(固定ページ)
・小説目次ページ(固定ページ)
・更新履歴(日記)(投稿ページ)

種類の違うこのページを、同じリスト内に並べる…え?どうやってやるの?
関数?いやそりゃ無理だよね?
この辺(固定ページ設定で投稿ページに指定したURLの取得方法)見てみたりしたけどよく分からず仕舞いで。
上手いやり方が多分あると思いますが、最後の最後で力尽き、「別にどこかに納品するわけじゃなし、どうせ自分のサイトだからいいや…」とテンプレートファイル内に直接リンクアドレス書き込んでしまいました。ううううう、情けない。
うわー、最後がこれって本当情けなくてなんかすいません。

(追記:設計時点ではバージョン2.xだったからカスタム投稿タイプなかったんだけど、今から作るならこれ使えばすんなりいったんじゃないの…?という気がしないでもない 「WordPressでサイト設計をする時に覚えておきたいポストタイプの特徴などいろいろ」)

ところで、メニュー部分は全ページで使い回しするので「header.php」に書くのが普通だと思います。
たとえばもし小説目次ページを見てるとき、現在地っぽくメニューの「小説ページ」って項目がハイライトしてたりすると…ちょっといいよね。
・WordPressテーマ(テンプレート)カスタマイズのまとめ(日本語訳)
の「ダイナミックハイライトメニュー」の辺り。

ここまで数ある解説サイトで何度もお目にかかった「条件分岐」って言葉ですが、ここで改めて。
・条件分岐タグ
実は私、ここに至ってやっと飲み込みました。遅!

ということで、元のテーマはできあがり!
CSSファイルをガシガシ書き込んで…ると、きっとカテゴリ別にデザインも変えたくなると思う。以下備忘録です。

満足するまでいじくったところで動作確認して、サーバにアップして、(直書きしたリンクアドレスとカテゴリID直して)…
はい、出来た!!!
疲れた疲れまくった…けどサイトの更新は確実に楽になりました。よかった!