WordPressで同人小説サイトを作り直してみた
2012.02.10
category: WordPress備忘録
この記事は2012年2月10日に書かれたものです。古い内容や非推奨要素を含む可能性がありますのでご注意ください。
サイト作ってから一年弱。なんだかトップページのデザインに飽きてきたり、前回妥協した色々が気になってきたので「もっかいテーマ作るか！」と決意いたしました。
サイトの内容はトップページ、小説タイトル一覧、小説本文ページ。それに更新記録ブログがくっついたものです。
※2011年の記事のため、古い情報や非推奨要素も含まれております
こんな感じ。
前回の記事と内容かぶりもありますが、個人的備忘録ってことでご勘弁くださいまし。今回も、長い記事になるよ！
１．ＷＰで普通のサイトを作る方法
前回記事から今までの間にWP3でのテーマの作り方記事とか「カスタム投稿タイプ」使った場合の記事とか沢山出てきたのでお勉強。
正直、上記記事は懇切丁寧なので、今から作る場合はこれ読んだらもう十分だと思うのですよ…。
読んだ上で、それでも「『ワタシが』テンプレート作るときにちょっと困った」ことを書いていきますね。
２．ヘッダとメニュー
うちのサイトは上の図でいうと「ヘッダー＋メニュー」がheader.phpに書いてあります。ここはそんなに変わったことはしてません。
とりあえずの中身を少しでもスッキリさせたいのでfunction.phpにいらんものを抜くコードを書いてみました。あちこちのサイトに参考例が載ってます。
さて。
前回挫折した「中身が出来たところでメニューを作る(挫折)」。（メニューって「ホーム」「更新状況」「小説」とか、サイト上部によくあるやつです）
「固定ページ」と「カテゴリーページ」が入り交じってるから自動で表示させることができず、前回はテンプレートに直にurl書いていたのですが、これ実はそんなに悩むことでもなかったのです。
『全部固定ページにすればいい』んです。馬鹿だなあ、ワタシ…。
（※追記 もっと簡単なカスタムナビゲーションというものがver.3から付いてるそうです。
1.固定ページでメニューに必要なページを全部作る
（サイト図でいうと「トップ」「更新履歴」「小説」の三種）
2.固定ページそれぞれ用のテンプレート(とりあえず中身は空でも可)を作る
（（名前は適当ですが）top.php、rireki.php、novels.phpの三種）
・テンプレートファイルの最初にテンプレート名を記載
（詳しくは「WordPressページを表示する際、どのテンプレートが使われますか？」を）
3.固定ページの設定画面で「テンプレート」を選べるようになるのでそれぞれ設定する。ついでに表示順(ページ順序)も設定しておく。
これで、下記コード書けば全ページがリストで並ぶよー。簡単だ―。
※見出し無し（リストの前に「Pages」って自動で出ちゃうので消す）、並び順はページ順序、の場合
<ul>
<?php wp_list_pages('sort_column=menu_order','title_li='); ?>
</ul>
そしてこの方法で作るともう二つ良いことが。
まず現在のページclassが付いてくれます。小説一覧ページにいる場合、メニュー（全ページリスト）の「novels」にclass="current_page_item"が自動で出るのです。このおかげでスタイルを設定すれば現在地を表示できます。素敵！
さらに「page-xxx.php（xxxは任意のテンプレート名）」だとbodyタグのクラスが「page」としか出なかったのに、テンプレート名で出るようになるのです。
bodyタグを<body <?php body_class(); ?>>にしてやると、「novels」というテンプレートの場合class="(前略)page-template-novels-php (後略)"と出てきます。これでページ毎の設定し放題！これは嬉しい！
３．jQueryのおはなし
jQuery：これを使うと複雑な動きが簡単なコードで実現できる、らしい。
つまり「jQueryを読み込んでいるページに『コナミコマンド グラディウスで！』と書くだけで自動的に『ポーズして上上下下左右左右BAって入力してフル装備にしてくれてついでにラストまで行ってくれるイヤッホイ！』」ってことかね。
jQueryに憧れる年頃なのですよ。
だけどjavaScript書けないのですよ。
でも「画像がぼんやり切り替わるギャラリー」とか「スクロールするとぼんやり浮き上がるTOPへ戻るのアイコン」とか「ツールチップとか言う奴」をくっつけたくなったワケですよ。
jQueryプラグインの解説サイトだとすごく簡単そうに書いてありますよね。「ダウンロードして読み込ませて設定したら終わり」って。いやいや。
全 然 分 か ら ん わ ！ ！
しかも疑問が初級すぎてそんなことまで解説してるサイトはそうそう無いんだぜ…。
（解説本などには「echoを使って『Hello!』と出力してみよう」とかあって「出力したから何やねん」という気分になりますが、これって本当に大事な基本なんですね。もっと真面目に勉強しておけばよかった、とこの歳になってようやく反省しておりますよ）
とりあえず、どういうふうにするとどんなことができるのかを、しみじみ見てみる
ふむふむ。出来そうな気がする、してきた、しようよ！
…ま、そういうわけで、格闘の記録。WP版。
あくまでワタシの場合、そしてプラグイン使うまでは到達してないのでご勘弁を(汗
1.まずこれを読む
複雑なプラグイン入れるほどのことはしない予定なので、
基本的にWordPressでjQueryを使いたいなら$() の代わりに jQuery() を使えと、こういうわけですが
今回はこれに従います。
（なので、header.phpには特別な記載はしてません）
2.使いたいコードを見つけてくる
今回は、これ！
を付けるよ！
テーマフォルダ内に適当な名前で新規フォルダを作り(例：js)、適当な名前で拡張子jsの新規ファイルを作り（例：tooltip.js）、コード（jQuery）をコピペして保存します。
3.さっきのコードを読み込む
header.phpのヘッダ内、<?php wp_head(); ?>の下に読み込むコードを書く（wp_head()でWP内蔵のjQueryを読み込むので、使いたいコードはその後で読まないと動かないらしい）。
前述のファイル名の場合、これで読める↓
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/tooltip.js"></script>
4.設定する
（あくまで今回のツールチップの場合ですが）
・ツールチップを出したい対象のclassをサンプル通りにする。リンク先は必要に応じて変更。
・CSSファイルを設定する
（大抵サンプルと一緒に記載されているので深く頭を下げながら使わせていただく。適宜変更）
通常ならこれで完了ですが、WPの場合、これでは動きません。
5.さっきのコードを変更する
1.で読んだとおり、このままでは動かないので「tooltip.js」内の「$」を全部「jQuery」に置き換える。
これで出来たはず！
他に使いたいものあったら追加してくだしあ。ちなみに「tooltip.js」に別のコード一緒に書き込んでも大丈夫です。ファイル名は適当に付けたらいいよ。
４．検索フォームをもちっといい感じにする
検索フォームは前回記事で作りました。今回は応用編。いやね、別に普通の検索でいいんですが。でも「小説ページにある検索窓で日記ページばっかり引っ掛かってきたら嫌」な気がするのですよ。
ついでに
・CSS3とjQueryでフォームを美しく装飾する方法
もうjQueryも使えるもんね！大丈夫！
５．小説タイトル一覧を「長編」「短編」別に並べる(挫折)
なんか最後は「挫折」で締めるのが習慣になったみたいよね…。
うちのサイトの小説はカテゴリ「小説 カップリング１」「小説 カップリング２」「小説 カップリング３」って感じになっております。「小説 カップリング１」の中に長編と短編があり、これはカテゴリが分かれてません。
（親カテゴリ「小説」、子カテゴリ「カップリング１」「カップリング２」「カップリング３」にするべきか、とは当初から悩み、未だにどっちがいいのか結論が出ていません）
とにかく、カテゴリ別にタイトルが並び、タイトルをクリックすると本文（single.php）が表示されるようになってます（コードはリンク先を参照ください）。
お話の数がそれなりに多くなってきたので、長編と短編、分けて表示したい。
理想は１つのループで「長編のみをカテゴリ別にソートして表示し、その後ろに短編のみをカテゴリ別にソートして表示」したかったのです。
出 来 ま せ ん で し た。
（…いや、多分どうにかすれば出来るんだよな。←まだ諦めてない）
とりあえずやったことの記録。
1.長編には「long」、短編には「short」の「タグ」を付ける。
（カテゴリ分けてもいいんだけど、カテゴリー名が増えすぎて、投稿の度に一覧から選ぶのが面倒。ちなみにタグは一括操作で付けられるので楽ちん）
2.タグ「long」が付いたタイトルだけをカテゴリ別に並べるループを書き、
その次にタグ「short」が付いたタイトルだけをカテゴリ別に並べるループを書く。
（get_postsの変数にtag=longまたはshortを追加する）
3.エラーが出て愕然とする(；´Д｀)
なになに、ループ二つあると動かないの？
ループ条件を指定して複数のループを設置したい場合、query_posts を使った複数のループはWordPressサイトの設定を変更することになり、いろいろと不具合が生じる可能性が高いようです。
表示条件を指定したコンテンツメニューやカテゴリーメニューを、複数設置する場合は get_posts を使います。
すいません、読んで色々試したけど上手くいかなくて(；´Д｀)
逃げの手段。
4.ループの片方を別のテンプレートに移し、それを読み込む。
ワタシの場合は「長編」のループを「novels_long.php」に書いて、外部ファイルを呼び出す
<?php include ( TEMPLATEPATH . ‘/novels_long.php’); ?>
で読み込みました。
これで動いた！なんか色々駄目な気がするけど、まあいいや！
次回はもうちょっと成長した姿をお見せできればいいなあ、と思います。では！