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

WordPressサイトを自由自在にカスタマイズ! すぐに使える各種テクニックが習得できる

WordPressで構築したサイトをさまざまな形にカスタマイズする方法をステップ・バイ・ステップで解説します。カスタマイズの際には3.0以降の新機能やプラグイン、jQueryなどを利用します。

出版日 2011年09月
ISBN 4883377830
ISBN-13 978-4883377831
出版社 ソシム株式会社
ページ数 320ページ
判型 B5変型

はじめに

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

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 記事ごとに1枚の画像を決まった位置に表示する
STEP 3-4 カスタムフィールドに入力した付加情報を表示する
TIPS カスタムフィールドの情報を出力する
TIPS カスタムフィールドを使いやすくする
STEP 3-5 関連記事を表示する
TIPS 内部リンクの設定
STEP 3-6 記事の個別ページのデザインをカスタマイズする
STEP 3-7 1つの記事を複数ページに分割する
TIPS アイキャッチ画像と天気の情報を1ページ目のみに表示する
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 最新の2件の記事のみサムネイル画像と概要を表示する
TIPS 2ページ目に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 1ページしかないときに番号を表示しないようにする
TIPS ページ番号のリンクの表示範囲を指定する
TIPS フッターに3段組みでメニューを表示する

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)
バックアップ
デバッグ機能の利用