【仕切り直し】WordPressテーマ「Simple Journal」ができるまで

前回の更新から半年以上が経過してしまいました。

「SimpleJounrl」という名前のWordPressテーマの作成途中ですが、仕切り直しとおさらいの意味を込めて、またゼロから作り始めていこうと思います。

テーマ作成の手順は以下のとおり。
以前のものを踏襲しつつも、より実際に近い手順を紹介していくつもりです。

1. WordPressテーマ作成の準備

1. モックアップを作成する

1-1. モックアップのディレクトリ構造
1-2. SASS+CompassでCSSを編集
1-3. HTMLを編集

2. テーマ開発環境を準備する

2-1. VCCWの導入
2-2. テーマのディレクト構造
2-3. 必要最小限のテーマを作成(style.css + index.php)

3. テーマを作り込む

3-1. テーマのパーツを作成
3-1-1. ヘッダーを作成(header.php)
3-1-2. フッターを作成(footer.php)
3-1-3. 関数ファイルを作成(functions.php)
3-2. 固定ページのテンプレートを作成(page.php)
3-3. 投稿ページのテンプレートを作成(single.php)
3-4. コメント欄を作成(comments.php)
3-5. アーカイブページのテンプレートを作成(archive.php)
3-6. 検索ページのテンプレートを作成(search.php)
3-7. NotFoundページのテンプレートを作成(404.php)
3-8. トップページのテンプレートを作成(index.php)

4. テーマを配布する

4-1. テーマ配布の準備をする
4-1-1. スクリーンショットを追加
4-1-2. バージョン情報を付加
4-2. テーマをzipにして配布する

 

それでは早速、次回からモックアップの作成にはいりたいと思います。

SimpleJournal – アーカイブページの作り込み

本日はカテゴリーごとの投稿一覧やタグごとの投稿一覧を表示するためのページテンプレート archive.php を作りこんでいきたいと思います。

01. index.php をコピーして archive.php を作成

まずはじめに、index.php をコピーして、archive.php という名前のファイルを作成します。

archive

 

02. archive.php を編集

上記の手順で作成した archive.php に、アーカイブページのタイトルを表示するコードを追記します(9〜15行目)。

 

利用したのは以下のテンプレートタグ。

the_archive_title

クエリの内容に基づいてアーカイブのタイトルを表示します。
ターム(カテゴリー、タグ、カスタムタクソノミー)、日付、投稿タイプ、投稿フォーマット、作成者などのアーカイブページが対象です。

 

Webブラウザでカテゴリーごとの投稿一覧を表示すると、以下のようになります。

ArchivePage01

「カテゴリー:」という文字を勝手につけてくれるのが微妙ではあります・・・・

 

03. the_archive_title テンプレートタグをカスタマイズ

テンプレートタグ「the_archive_title」が出力するタイトルがいまいちなので、今回のテーマ向けにカスタマイズしてみます。

 

functions.php に以下のコードを追記。
※デザイン上不要な日本語化も無効にしています。

 

Webブラウザで先ほどのページを見ると、以下のようになります。

CategoryArchive

 

例えばタグのアーカイブだと、

TagArchive

月別のアーカイブだと、

MonthlyArchive

・・・といった感じに、動的にタイトルが変化してくれます。

SimpleJournal – トップページをさらに作り込む

前回までで、「投稿」や「固定ページ」の詳細画面のページテンプレートの作り込みが一通り完了しました。

今回は再びトップページのページテンプレート(index.php)に戻り、以下の変更を加えていこうと思います。

  • 投稿のタイトルクリックで詳細ページに遷移
  • 投稿の本文全体ではなく、抜粋を表示
  • 「続きを読む」リンクを追加(クリックで詳細ページに遷移)

 

ちなみに、以下が編集前のトップページ。

Current Toppage

 

01. 投稿のタイトルに詳細ページへのリンクを追加

現在以下のようになっている index.php の18行目を、

次のように置き換えます。

 

利用したのは、以下のテンプレートタグおよび関数です。

the_permalink

投稿の詳細ページのURLを表示します。

get_the_title

投稿のタイトルを取得します(表示はしません)。

esc_attr

< > & ” ‘ (小なり、大なり、アンパサンド、ダブルクォート、シングルクォート) 文字参照をエンコードした結果を取得します。

Webブラウザでトップページを表示すると、以下のようになります。

Add permalink

投稿のタイトルがリンク表示となり、クリックすることで投稿の詳細画面に遷移します。

02. 投稿の本文の抜粋を表示

次に、投稿の本文がすべて表示されているところを、抜粋のみ表示するようにします。

index.php の 21行目の「the_content」テンプレートタグを以下のように変更します。

the_excerpt

現在の投稿の抜粋を表示します。
抜粋を入力していない場合は、投稿の本文の最初の55文字(WP Multibyte Patch プラグインを有効にしている場合は 110文字)までを表示します。

上記の変更により、トップページは以下のように表示されます。

the_excerpt 01

投稿の抜粋の末尾に […]が表示されてしまうので、 functions.php に以下のコードを追記して末尾の表示をカスタマイズします(ついでに抜粋する文字数もカスタマイズしています)。

 

これにより、トップページは以下のように表示されます。

the_excerpt 02

 

03. 抜粋の最後に「続きを読む」リンクを追加

index.php の 22行目に以下のコードを挿入します。

また、 style.css に以下のスタイルの指定を追記。

 

これにより、本文の抜粋の後に「続きを読む」というリンクが表示され、クリックすることで投稿の詳細画面に遷移できるようになります。

Webブラウザで表示すると以下のようになります。

add more link

 

以上で、トップページの作り込みもひととおり完了です。

次回以降は、カテゴリーごとの投稿一覧ページやタグごとの投稿一覧ページを作り込んでいく予定です。