同人小説サイト作成時のタグとコードのメモ 2014

2014.10.30

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

2014年、また自サイト用のテーマを作りました。その時に使用したタグと、その他メモです。

リニューアルはCSSいじるだけで済むようにするんじゃなかったのか…と思うのですが、非推奨になったタグなどを一々確認するのも面倒だし、折角の勉強の機会だし、でまた一から作っています。

3回目の自分用テーマ作成、毎回同じサイトを参考に見ている…覚えられない…。
長々と以下書いていますが、長期間運営するサイトじゃなければ（期間限定サイトとか、オンリーイベントのティザーサイトとか）プラグインで楽にできることも多いので調べてみてください。（普通にプラグイン使えばいいんですが、たまに更新止まってたりするし、それに対応できる力ないし）

普通にhtmlとcssファイル作る
テーマの素ファイルを用意
ヘッダ部分を作る（header.php）
メニューを作ります（header.phpかな）
カスタムメニュー、各ページのアドレス
ブログ用テンプレートを作る（index.php）
タイトル、ループ、ページネーション
サブメニューを作る（index.php、sidebar.php）
カテゴリ･タグ名と記事数、他パーツの読み込み
フッター（footer.php）
西暦の自動更新
トップページ（固定ページpage-top.php）
更新履歴、特定記事の読み込み
小説タイトル一覧ページ（category.phpなど）
指定したカテゴリーのタイトル一覧表示
小説本文ページ（single.php）
カテゴリーごとに違うシングルテンプレート、ページ区切り

1.普通にhtmlファイルとcssファイル作る

これまで手書きラフ見ながらいきなりテーマ作ってました(無謀)。htmlファイルを後で修正する必要がないくらいキッチリ作ると、結局あとで楽なんですね。

今回はこんな感じです。
トップページ

メモとかショートとかブログとか
ブログっぽいページ

メインのお話タイトル一覧ページ

お話本文シングルページ
おはなし

その他記事のシングルページ（ブログとかと同じデザイン）
その他単独記事

2.テーマの素ファイルを用意

いよいよテーマを作ります。深呼吸してから、結局これに尽きるので、何度もよーく読む。

で、

wp-content/themesフォルダにテーマファイルをぶっこむフォルダを新規作成します。

作ったフォルダ内に、以下三種類のファイルがあればテーマだと認識してくれ、管理画面のテーマ選択画面で選べるそうです。

1. テンプレートファイル（とりあえず白紙でいい）を新規作成

・header.php
・index.php（←これは絶対いる）
・footer.php

とりあえず3つ作る。文字コードがUTF-8になっているのを確認。

2. style.css
作成済みのスタイル設定cssをstyle.cssという名前にする。置き場所はテーマフォルダのルートと決まっているので、htmlファイル内のパス変更の必要があれば即変えておく。
あとは、テーマ用ファイルだと認識させるために頭にコメントを書く。
いろいろありますが、テーマ名だけあれば大丈夫だそうです。
注意点としては公式のテーマと名前がかぶると後日「アップデートしますか」と聞かれてギョッとするので、かぶらなさそうな名前にしとくといいです。
たとえば日付の数字くっつけるとか。

/*
Theme Name: テーマの名前
*/

デフォルトの画像挿入機能とか使うならその他自動で付与されるスタイルも設定しちゃいましょう。

3. screenshot.png
テーマ選択画面で出てくるスクリーンショット画像です。画質その他どうでもよければ、サイズは300px × 225pxで十分。あと、ついでに、どうせ後で使うので、function.php（白紙）もとりあえず作成しておく。

ここまでやって、外観→テーマで選択して表示。
内容を表示させるものを一切書いていないので、当然ながら画面は真っ白です。

3.ヘッダ部分を作る（header.php）

白紙のheader.phpに作成しておいたhtmlファイルのhead部分（と、全ページで使いまわすパーツがあるならその部分まで）をコピペ。

cssとかjavaScriptファイルとかの読み込みは、フルパスじゃないといけないので書き換えます。ローカルで作業してるとアップ後url変えなきゃいけなくて面倒なので、

<?php echo get_template_directory_uri(); ?>

とします。これで、テンプレートフォルダまでのフルパスが出てきます。
たとえば、（省略）theme/example/js/exam.js なら

<?php echo get_template_directory_uri(); ?>/js/exam.js

にする。

サイト名は

<?php bloginfo( 'name' ); ?>

で。

蛇足ですが、header（body前）に

<?php wp_head(); ?>

を入れ忘れると、あとあと泣くことになるのでちゃんと入れたのを確認。

wp_head()のせいで自動で出る大量のタグを整理したいなら、参考サイトがたくさんあります。

ヘッダーが終わったらbodyタグを入れます。読み込むテンプレートごとに自動でクラスがつく（categoryとかsingleとかarchiveとか）ように、

<body <?php body_class(); ?>>

とします。何か特定のクラスを足したいとき、たとえば「kuma」を足したければ body_class(‘kuma’) とします。

4.メニューを作ります（header.phpかな）

リストで出すことが多いんじゃなかろうかと思いますがどうだろう。

<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">メインテキスト</a></li>
<li><a href="#">オフライン</a></li>
</ul>

こんな感じ？

カスタムメニューを使うと簡単です。

カスタムメニューを使わず、テーマ内に直に書いてしまう場合、リンク先はこれ。
アドレスバーに出るurlを本当に書いてしまうと、あとで困ることがあるので避けたい気持ちです（実際アップデート時にリンク階層が変わってアクセスできなくなったことがあります）。

トップページへのリンク

<a href="<?php echo home_url(); ?>">

カテゴリーページへのリンク（「5」はカテゴリーID）

<a href="<?php echo get_category_link(5);?>">

固定ページへのリンク（「7」はページID）

<a href="<?php echo get_page_link(7); ?>">

シングルページへのリンク（「11」は投稿ID）

<a href="<?php echo get_permalink(11); ?>">

5.ブログ用テンプレートを作る（index.php）

楽しい楽しいトップページから作りたいのはやまやまなんですが、一番汎用性の高いところから済ませてしまおうと思います。地味だけど。
ブログはもちろんネタメモやショート、オフのお知らせなどブログっぽい見かけの部分はすべてこのテンプレートで賄えます、わーい。

まずさっきつくったヘッダを読み込み。

<?php get_header(); ?>

ついでに後でつくるフッタも読みこんどこ。

<?php get_footer(); ?>

んで、本文。
最初に作ったhtmlファイルのメイン部分をindex.phpにコピペします。その後、日付とか本文とかその他もろもろ、ページによって変わる部分をWordPressタグに置き換えていくだけです。

カテゴリーアーカイブのページとかタグのアーカイブページとかなんとなくタイトルを出したいときは

<?php wp_title(''); ?>

それぞれのページの説明を入れたいときは、設定画面のカテゴリーとかタグの所の「説明」に入れた文を出してみたりしたらどうだろう。

<?php echo category_description(); ?>

これで出るかな。

ループはごく普通に。こう出したいので。

<section>
<h2>記事タイトル</h2>
<span>○月△日 11:23 <a href="#">タグ名</a></span>
～～ここに本文がきます～～
</section>

今回はこうしますー。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<section>
<h2><?php the_title(); ?></h2>
<span><?php the_time('Y年m月d日'); ?> <?php the_time('H:i'); ?> 
<?php echo get_the_tag_list(); ?></span>
<?php the_content(); ?>
</section>
<?php endwhile; ?>
<?php endif; ?>

最後にはページネーションを忘れずに（よく忘れるのです）。プラグイン「wp_pagenavi」を使っているので、

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

を表示させたい箇所に入れます。

6. サブメニューを作る（index.phpでもsidebar.phpでも）

上の図でいうと「子カテゴリーとかタグ名とその記事数」のところです。
複数のテンプレートで使い回しするならsidebar.phpに切り分け、読ませたいテンプレートファイルに

<?php get_sidebar(); ?>

を書き込んでsidebar.phpを読み込みます。

タグ名の一覧の横に、そのタグの記事数を表示します。

<a href="タグ">
<span>タグの名前</span>タグの説明
<span class="badge">記事数</span>
</a>

にしたいときは、

<?php $tags = get_terms('post_tag','hide_empty=1&include=表示に含めたいタグID'); ?>
<?php foreach($tags as $value): ?>
<a href="<?php echo get_tag_link($value -> term_taxonomy_id); ?>">
<span><?php echo $value->name; ?></span> <?php echo $value->description; ?>
<span class="badge"><?php echo $value->count; ?></span>
</a>
<?php endforeach; ?>

子カテゴリーはやったことないからわかりませんすいません。

えと、カテゴリーごとに別のサブメニューを読ませたい場合はどうするか。
上の図でもメモとかショートを表示する場合はサブメニューに「子カテゴリとかタグ」、シングルページのときは「なんかお知らせ」としておりますが。

その1：条件分岐をつかう
同じテンプレートファイル（sidebar.php）に条件分岐でずらずらと書くもよし。ファイルの数を増やさずに済むから後で楽かもしれません。読み込み速度…うん…企業サイトじゃないからそんなにガツガツしなくてもいけるんちゃうかな…。

その2：別のテンプレートファイルを読み込む
別のファイル、たとえばシングルページ用だったら「sidebar-single.php」（single部分が名前、任意）を作ってget_sidebar(‘single’)で呼び出す。もし全然違う名前で作るんだったら、get_template_part()を使います。

あ。
これ、投稿以外の任意のテキストを読み込むのにも使えるね。

7.フッター（footer.php）

最初に作ったhtmlのフッター部分（bodyの閉じタグとかそのへん）をコピペ。これで1ファイル分、全部コピーし終わったはずです。

まずbody内の末尾あたりにwp_footerを追加。

<?php wp_footer(); ?>

これを忘れるとheadと同じくプラグインが動かなかったりして後から地味に泣くことがあります。てかなんでheadとfooterやねん。erの立場は。

コピーライトをもし入れるなら。そして現在の年を入れるなら、年の部分は自動更新させると後々楽です。

<?php echo date('Y'); ?>

これで今の西暦が出ます。

コピーライト表示についてはこちらを（もちろん一次の場合）。

二次の場合はいろいろ調べてみてください。ね。
私は「転載禁止」と入れています。

ここまで終えて、サイトを表示すればなにかが表示されるはず！
されなかったり、エラーが出てたらミスや抜けがあるのでやり直しです。

8.トップページ（固定ページpage-top.php）

ヘッダとナビ（メニュー）部分は先程のブログ部分と同じくheader.phpを読み込んで済ませます。

まずは更新記録。
カテゴリーを絞った上で、こんな感じで5件分出したいとき（自サイトでは記事内容の説明（あらすじ）をカスタムフィールドで設定しています）、

<dl>
<dt>2014.1.1. カテゴリー名 <a href="">タイトル</a></dt>
<dd>あらすじ（カスタムフィールド）</dt>
</dl>

は、こう。

<dl>
<?php $posts = get_posts('numberposts=5&order=desc&cat=表示カテゴリID指定'); ?>
<?php foreach($posts as $post): ?>
<dt><?php the_time('Y.m.d.') ?>
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
<dd><?php echo post_custom('カスタムフィールド名'); ?></dd>
<?php endforeach; ?>
</dl>

ちなみに更新日順にしたい場合はorderby=modifiedを指定します（指定しないと投稿日時になります）。
その他指定できるものは、Codexを参照。

もひとつちなみに。
カテゴリーを指定してタイトル一覧を表示したい場合にも同じコードが使えます。その場合は表示カテゴリを指定し、並べ替え順も指定、あと「指定カテゴリの記事『全件』」なので上で5件（「numberpost=5」）となっているのを全件（「numberposts=-1」）に変えます。

get_postが楽なのでついこればっか使ってしまうのですが、WP_Queryも使いたいと思っているのです。場面によっては。

ここを見ると、鬼のように便利じゃん！と思ってしまいます。

さて。
オフのお知らせなど、トップページに特定の記事の本文を表示させたいことがあります。テーマに直接書いてもいいんですが、ちょいちょい更新しなきゃいけない場合、投稿画面でサクッと変更できた方が便利だったりする。多分。
個別記事の本文呼び出しはget_postでできます。下記はオフ情報（$off_infoって名前にしてる）の「続きを読む（moreタグ）」前までを表示する場合です。

<?php $off_info = get_post(投稿ID);
$content = get_extended($off_info -> post_content);
$before_more= $content['main'];
echo $before_more; ?>

9.小説タイトル一覧ページ（category.phpなど）

要は、カテゴリーを指定した記事タイトル一覧ページです。
テンプレートの名前はおそらく、カテゴリ―指定で「category-カテゴリ名.php」とか、固定ページにして「page-ページ名.php」になるんじゃないだろうか。

自サイトでは今回はこうしてます。

<dl>
<dt>カテゴリー名（CP名）</dt>
<dd>
   <dl class="title_list">
   <dt><a href="">タイトル</a>2014.01.01.</dt>
   <dd>あらすじカスタムフィールドの内容</dd>
   </dl>
</dd>
</dl>

カテゴリーをスラッグ名の順番に並び替え、定義リストでタイトル、更新日、あらすじを表示しています。

<dl>
<?php $categories = get_categories('orderby=slug&include=表示させるカテゴリID');	foreach($categories as $category) : ?>
<dt><?php echo $category->cat_name; ?></dt>
<dd>
  <dl class="title_list">
  <?php query_posts('cat='.$category->cat_ID.'&nopaging=1'); if (have_posts()) : while (have_posts()) : the_post(); ?>
  <dt><a href="<?php the_permalink() ?>"><?php the_title(); ?></a><span><?php the_time('Y.m.d.'); ?></span></dt>
  <dd><?php echo post_custom('あらすじカスタムフィールド'); ?></dd>
  <?php endwhile; endif; ?>
  </dl>
</dd>
<?php endforeach; ?>
</dl>

※2014年12月5日追記　nopaging=1がないとデフォルトの表示件数分しかタイトル表示されなかったので、足しました。

今ふと思ったんだけど、もし表紙画像も作ってるならアイキャッチ機能を使えばいいんじゃなかろうか。そしたら、しぶの作品一覧みたいな表紙付の並べ方もできますね。

追記：作ってみた「アイキャッチを使ってPixiv風に作品一覧表示」

参照サイトは以下です。

10.小説本文ページ（single.php）

さて、最後に小説本文ページ。
個別記事（になることがほとんど）なので、single.phpになります。こちらもこれまでと同じく、header.phpとfooter.phpを読み込んで、そのあとでメインを入れていきます。

…でもこのテンプレートで表示するの、小説だけじゃないと不味い。
他のお知らせ的な記事もこれで読み込まれちゃあ、不味い。

分岐させ方1. カテゴリーごとに別のsingle.phpに飛ばす
まずsingle.phpが読み込まれるので、single.php内に「このカテゴリの時はこのテンプレートを読んでねっ」と書いておきます。
テンプレートファイルの数が増えてしまいますが、それぞれの内容はシンプルになります。分ける先がたくさんあるときはお勧め。
あと個別記事ページなので、条件分岐はis_category()ではなくin_category()です。
カテゴリー用テンプレートと同じくsingle-xxx.phpとすれば飛びそうな気がしますが、これはカスタム投稿タイプ用の作り方だそうです。残念。

ただしinclude( TEMPLATEPATH . ‘/テンプレート名.php’ )は現在非推奨だそうなのでget_template_part(‘テンプレート名’)をご利用ください。index.phpを読ませたいときはget_template_part(‘index’)って感じです。

分岐させ方2. single.php内でカテゴリ―ごとに条件分岐する
（やってることは1.と同じですけど）
大した内容がないなら、こちらで（小説ページならタイトル、日付、本文くらいだからね）。
カテゴリー「小説」のときはこの内容、それ以外はindex.php（さっき作ったブログっぽい見かけのもの）を読み込み、とします。
（デザイン用のタグは省略してあります）

<?php if(in_category('小説カテゴリID')): ?> //小説カテゴリなら下記を
<?php get_header(); ?>
<?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_time('Y.m.d.'); ?>
著者名: <?php the_author(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>

<?php else: ?> //それ以外ならindex.phpを読み込み
<?php get_template_part('index'); ?>
<?php endif; ?>

これだけです。

さて、話は変わりますが。
長い話を1ページに収めると読みにくいので、数ページに分割したい時があります。
「nextpage」タグでページを分け分けできる便利な機能があるのですが、それを使うのに「ページネーション」を入れ忘れると…次のページに行けない悲劇が起きます。これまで何度も悲劇を起こしました、ええ。

相変わらず公式テーマの中身って参考にするには難しいね…。
えと、たとえば、こういう風に…

<div>pages:
<span class="クラス名"><a href="">1</a></span>
<span class="クラス名"><a href="">2</a></span>
<span class="クラス名"><a href="">3</a></span>
</div>

出したい時は、

<?php $args = array(
    'before' => '<div> . pages: ', 
    'after' => '</div>', 
    'link_before' => '<span class="クラス名">', 
    'link_after' => '</span>'
);
wp_link_pages( $args );
?>

と書きます。クラス名とかはデザインに合わせて適当に付けてください。

今回使ったコードは以上です！
また追加とか修正あったらこそっと直しときます。

前の記事
初回訪問時に全画面で入室前の注意書きを表示
category: WordPress備忘録

次の記事
はじめてのギックリ
category: 日々のつれづれ