WordPressデザインブック 3.x対応

はじめに

「ブログから一歩進んだサイトを作りたい」

WordPressはブログ構築ツールとしてだけでなく、さまざまなサイトを構築するCMSツールとしても利用することができます。定期的なバージョンアップを重ねることで、WordPress 3.0以降にサポートされたCMS的な機能も、より安定して利用できるようになっています。

本書では、ブログタイプの基本的な構造のサイトを元に、表示する記事の内容やデザイン、メニューの構成などをカスタマイズして、ブログから一歩進んだサイトにアレンジしていきます。

たとえば、トップページでは最新記事のサムネイル画像と概要をリストアップして一覧性を高くしたり、カテゴリーページでは古い記事から順に閲覧できるようにカスタマイズします。おすすめ記事や人気記事、関連記事などを表示して回遊率を高くしたり、TwitterやFacebook、Google+といったソーシャルサービスと連携する方法なども紹介します。

制作過程を通して、WordPressのさまざまな機能や、プラグインの活用方法、スタイルシートの設定ポイントなどを修得して、オリジナルのサイト構築に役立てていただければ幸いです。

もくじ

Chapter1　基本サイトの構築

STEP 1-1　構築するページとテンプレート
STEP 1-2　繰り返し利用するパーツとパーツテンプレート
STEP 1-3　テーマの準備
STEP 1-4　基本設定
STEP 1-5　コンテンツの投稿
STEP 1-6　ヘッダーとフッターの作成
TIPS　HTML5の利用について
TIPS　HTML5におけるタグの記述
TIPS　HTML5で廃止されたタグや属性
STEP 1-7　ナビゲーションバーとヘッダー画像の追加
STEP 1-8　記事の表示
STEP 1-9　サイドバーの表示
TIPS　CSS3の利用について
TIPS　Internet Explorer 6のサポート
STEP 1-10　トップページ以外のページの作成
TIPS　本書で作成するテンプレート
TIPS　ページの生成に使用するテンプレート
TIPS　パーツテンプレート

Chapter2　カスタマイズの準備

STEP 2-1　プラグインを利用するための準備
TIPS　プラグインの利用とリスク
TIPS　プラグインの検索とインストール
STEP 2-2　WordPressのバージョン情報を出力しないようにする
STEP 2-3　RSSフィードの情報を出力する
STEP 2-4　ライブラリの設定を出力する
STEP 2-5　テーマエディタのソースを色分け表示する
TIPS　テーマエディタのソースを色分け表示するプラグイン
STEP 2-6　ビジュアルエディタの表示と完成ページのデザインを揃える
TIPS　ビジュアルエディタの編集機能を拡張する
STEP 2-7　ページの種類を識別できるようにする

Chapter3　記事の個別ページのカスタマイズ

STEP 3-1　フリーで利用できる画像を表示する
TIPS　クリエイティブ・コモンズのライセンス
TIPS　URLの記述のみでFlickrやYouTubeなどのコンテンツを表示する
STEP 3-2　複数の画像を横に並べて一覧表示する
STEP 3-3　記事ごとに１枚の画像を決まった位置に表示する
STEP 3-4　カスタムフィールドに入力した付加情報を表示する
TIPS　カスタムフィールドの情報を出力する
TIPS　カスタムフィールドを使いやすくする
STEP 3-5　関連記事を表示する
TIPS　内部リンクの設定
STEP 3-6　記事の個別ページのデザインをカスタマイズする
STEP 3-7　1つの記事を複数ページに分割する
TIPS　アイキャッチ画像と天気の情報を１ページ目のみに表示する
STEP 3-8　画像の個別ページのデザインをカスタマイズする

Chapter4　記事の一覧ページのカスタマイズ

STEP 4-1　記事のタイトルのみをリストアップする
STEP 4-2　記事のタイトルと概要をリストアップする
TIPS　概要（抜粋）の末尾に改行を入れずにリンクを追加する
TIPS　概要（抜粋）の文字数を指定する
STEP 4-3　記事ごとにサムネイル画像を表示する
TIPS　自動生成する画像サイズを増やす
TIPS　アップロード済みの画像を生成しなおす
TIPS　記事に挿入した画像のサムネイルを表示する
STEP 4-4　表示する記事の数をテンプレート内で指定する
TIPS　1ページに表示する記事の数を少なくする場合の注意点
TIPS　トップページや月別ページに表示する記事の数を指定する
TIPS　カテゴリーごとに表示する記事の数を変える
TIPS　<?php query_posts(); ?>で指定できるループのパラメータ
STEP 4-5　古い記事から順に表示する
TIPS　更新日の新しい記事から順に表示する
STEP 4-6　最新の２件の記事のみサムネイル画像と概要を表示する
TIPS　２ページ目に11件目以降のタイトルをリストアップする
STEP 4-7　おすすめ記事を表示する
TIPS　おすすめ記事の判別に利用できるクラス名
TIPS　おすすめ記事をランダムに表示する
STEP 4-8　特定の投稿フォーマットの記事を表示する
TIPS　TwentyElevenの投稿フォーマットの表示
TIPS　子テーマを利用したテンプレートの編集

Chapter5　ナビゲーションのカスタマイズ

STEP 5-1　オリジナルのウィジェットを作成するための準備
STEP 5-2　ウィジェットで特定の投稿フォーマットの記事を表示する
TIPS　複数の投稿フォーマットの記事を表示する場合
TIPS　投稿フォーマットごとに出力内容を変える
STEP 5-3　特定のカテゴリーに属する記事のメニューを表示する
TIPS　メニューに表示する記事の数や表示順序を指定する
STEP 5-4　カテゴリーメニューの表示をカスタマイズする
STEP 5-5　人気記事ランキングを表示する
STEP 5-6　microdataを使ったパンくずリストを作成する
TIPS　microdataで記述した情報をテストする
TIPS　階層化したカテゴリーに対応したパンくずリストを作成する
TIPS　パンくずリストを出力するプラグイン
STEP 5-7　ページ番号を並べて古い記事にアクセスしやすくする
TIPS　１ページしかないときに番号を表示しないようにする
TIPS　ページ番号のリンクの表示範囲を指定する
TIPS　フッターに３段組みでメニューを表示する

Chapter6　固定ページのカスタマイズ

STEP 6-1　お問い合わせページの作成
STEP 6-2　インデックスページを作成する
TIPS　ウィジェットエリアに名前をつける

Chapter7　コンテンツの分類と検索

STEP 7-1　投稿タグで記事を分類する
TIPS　タグクラウドを表示する
STEP 7-2　カスタム投稿タイプを利用してニュース記事を投稿する
TIPS　標準で用意された投稿タイプ
TIPS　複数の投稿タイプの記事をリストアップする
TIPS　投稿タイプのメニューの表示位置を指定する
TIPS　カスタム投稿タイプの記事をカスタムタクソノミーのカテゴリーで分類する
STEP 7-3　サイト内のコンテンツを検索できるようにする
TIPS　検索結果に表示する投稿タイプを指定する
TIPS　RSSフィードに出力する投稿タイプを指定する

Chapter8　ヘッダーと画像のカスタマイズ

STEP 8-1　カスタムヘッダーの画像をランダムに表示する
TIPS　ヘッダー画像の削除とリセット
TIPS　ランダムに表示する画像をテンプレートに含める
STEP 8-2　カスタムヘッダーの画像をスライドショー形式で表示する
TIPS　「ランダム」を選択したときにのみスライドショー形式で表示する
TIPS　カスタムヘッダーのデフォルト画像をスライドショー形式で表示する
STEP 8-3　ヘッダー画像の代わりにおすすめ記事を表示する
TIPS　おすすめ記事やアイキャッチ画像がない場合はヘッダー画像を表示する
STEP 8-4　画像をライトボックス形式でポップアップ表示する
TIPS　ライトボックスの背景の透明度を変更する
TIPS　記事の本文以外の画像をライトボックス形式で表示する

Chapter9　外部サービスとの連携

STEP 9-1　ソーシャルブックマークのリンクを設置する
TIPS　プラグインを利用せずにソーシャルブックマークのリンクを表示する場合
STEP 9-2　Twitterと連携する
STEP 9-3　OGPを記述してFacebookと連携する
TIPS　固定ページのコンテンツの種類を指定する
STEP 9-4　Facebookにも記事を投稿して連携する
TIPS　Facebookページのウォールをサイトに表示する
STEP 9-5　外部サービスと連携できるコメント投稿フォームを設置する
TIPS　コメントの投稿
STEP 9-6　Google+ と連携する

APPENDIX

WebMatrixを利用したローカルサーバーの構築（Windows）
バックアップ
デバッグ機能の利用