MdNCORPORATION

WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作

WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作

ハヤシユタカ 著
本体 2800円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2012-09-20
仕様 B5変型判/288pP
ISBN 978-4-8443-6288-3
バージョン3以降でCMSとしての機能が充実したことにより、ブログだけでなく、一般的なコーポレートサイトへの導入も盛んになっているWordPress。HTMLやCSSを知らなくてもブログ感覚でコンテンツを追加できるため、いったんWordPressでサイトを構築しておき、日常的な更新はクライアント側で行えるようにするケースも増えてきました。 本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。さらに、jQueryの組み込みやソーシャルメディアとの連携、ギャラリー制作、スマートフォン対応といった実践的な技術も満載。WordPressでサイト構築を目指す方、必携の一冊です!! →サンプルサイトの閲覧 http://wordpress-book.webdesignmatome.com

バージョン3以降でCMSとしての機能が充実したことにより、ブログだけでなく、一般的なコーポレートサイトへの導入も盛んになっているWordPress。HTMLやCSSを知らなくてもブログ感覚でコンテンツを追加できるため、いったんWordPressでサイトを構築しておき、日常的な更新はクライアント側で行えるようにするケースも増えてきました。
本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。さらに、jQueryの組み込みやソーシャルメディアとの連携、ギャラリー制作、スマートフォン対応といった実践的な技術も満載。WordPressでサイト構築を目指す方、必携の一冊です!!

→サンプルサイトの閲覧

→サンプルデータのダウンロードはこちら



■ページ見本










目次

【WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作】

本書の使い方
WordPressを利用するのに必要な準備
サンプルサイトのページ一覧
サンプルサイトのサイトマップ
サイトを構築する前に知っておきたいこと


───────────
CHAPTER 1 WordPressの初期設定の確認
───────────
■LESSON 001 基本設定
STEP 1 サイト名とキャッチフレーズの入力
STEP 2 投稿記事の表示設定の確認
STEP 3 投稿画像のサイズ設定
STEP 4 パーマリンクの設定
STEP 5 サイトのツールバーの非表示設定

■LESSON 002 初期登録されている情報の削除
STEP 1 はじめから投稿されている記事の削除
STEP 2 はじめから投稿されている固定ページの削除
STEP 3 はじめから登録されているリンクの削除
STEP 4 はじめから用意されているカテゴリー名の変更
STEP 5 新しいカテゴリーの追加
STEP 6 新しい固定ページの追加

■LESSON 003 記事の投稿
STEP 1 「新規投稿を追加」ページでタイトルを入力
STEP 2 パーマリンクの設定
STEP 3 投稿記事の本文を入力
STEP 4 カテゴリーの選択
STEP 5 その他の項目の設定について
STEP 6 記事の公開
STEP 7 記事の表示を確認
STEP 8 サイト表示を確認
STEP 9 投稿記事の管理方法

〈COLUMN〉
WordPressのパーマリンク設定とは?
一覧画面からの記事の削除方法
カテゴリー名とスラッグ名について
WordPressの管理画面の左側にあるメニューの項目について
カテゴリーとパーマリンクについて
表示オプションについて
プレビューと公開日時について


───────────
CHAPTER 2 WordPressの基本
───────────
■LESSON 001 サイト構築をする手順
STEP 1 テンプレートの変更について

■LESSON 002 WordPressのテンプレートファイル
STEP 1 テンプレートファイルと優先順位

■LESSON 003 新しいテーマの作成とテーマの選択
STEP 1 テーマフォルダの制作
STEP 2 テンプレートファイルを作成
STEP 3 スタイルシートファイルを作成
STEP 4 テーマのサムネイル画像を作成
STEP 5 テーマフォルダのアップロード
STEP 6 テーマの切り替え
STEP 7 テーマの編集画面を確認

■LESSON 004 bloginfoタグでのブログ情報の確認
STEP 1 WEBページの基本HTMLコードを記述
STEP 2 ブログのタイトルの表示
STEP 3 コンテンツタイプとエンコードの指定
STEP 4 画面上に取得した情報を表示

■LESSON 005 パーツテンプレートの作成
STEP 1 モジュールテンプレート
STEP 2 各領域をdivタグで囲む
STEP 3 header.phpにコードを記述
STEP 4 header.phpをindex.phpに読み込む
STEP 5 footer.phpにコードを記述
STEP 6 footer.phpをindex.phpに読み込む
STEP 7 カスタムテンプレートの作成
STEP 8 カスタムテンプレートの読み込み

■LESSON 006 投稿した記事のタイトルと本文を出力
STEP 1 投稿した記事のタイトルの表示
STEP 2 投稿した記事の本文を表示
STEP 3 記事を追加投稿して複数記事の表示を確認

〈COLUMN〉
コーポレートサイトを構築するために
WordPressに編集したファイルを反映させる方法
WordPressのテンプレートタグ
初期設定以外でもよく使用する「bloginfo」タグ
もし投稿記事がなかった場合


───────────
CHAPTER 3 サイトのベース制作
───────────
■LESSON 001 ヘッダーエリアの作成
STEP 1 制作準備
STEP 2 ロゴマークを画像に変更
STEP 3 ヘッダーエリアのスタイルの調整
STEP 4 サイトマップ・RSSフィードのリンクを設置
STEP 5 サイトマップとRSSフィードのスタイルの調整
STEP 6 カスタムメニュー機能を有効化
STEP 7 カスタムメニューの作成
STEP 8 カスタムメニューの表示
STEP 9 ナビゲーションの装飾
STEP 10 メイングラフィックの設置

■LESSON 002 フッターとサイドバーの作成
STEP 1 フッターの装飾
STEP 2 コンテンツとサイドバーエリアの設定
STEP 3 サイドバーにバナーを表示

〈COLUMN〉
WordPress3.0からの新機能~カスタムメニュー


───────────
CHAPTER 4 ニュースページの作成
───────────
■LESSON 001 トップページにニュース記事を表示
STEP 1 投稿の準備
STEP 2 ナビゲーションの表示
STEP 3 カテゴリー「お知らせ」の投稿
STEP 4 カテゴリー「セミナー」の投稿
STEP 5 記事のカテゴリーによってアイコンを変更

■LESSON 002 ニュース記事のインデックスページ(一覧ページ)を作成
STEP 1 ニュース関連記事一覧ページの作成
STEP 2 ニュース記事のタイトル画像を変更

■LESSON 003 ニュース記事の個別投稿を表示
STEP 1 ニュース記事の個別投稿の表示
STEP 2 ニュース記事の個別投稿の基本レイアウトを作成
STEP 3 個別記事ページでのカテゴリーに合わせたアイコンの表示
STEP 4 個別記事に「次へ」「前へ」のリンク表示

〈COLUMN〉
時間や日付を出力する「the_date()」「the_time()」について
ビジュアルエディタのツールボタンについて
カテゴリースラッグを取得する
if(is_home())の分岐の使用例
previous_post_linkとnext_post_linkの引数について


───────────
CHAPTER 5 プラグインの設定方法
───────────
■LESSON 001 プラグインの使い方の基本
STEP 1 プラグインを利用する前の準備
STEP 2 デフォルトのプラグイン「WP Multibyte Patch」の使用
STEP 3 プラグインのインストール方法

■LESSON 002 プラグインの使用
STEP 1 「WP No Category Base」の使用
STEP 2 「Breadcrumb NavXT」の使用
STEP 3 「WP-PageNavi」の使用
STEP 4 「All in One SEO Pack」の使用
STEP 5 「Head Cleaner」の使

〈COLUMN〉
プラグインのアップロードを利用した場合
「Breadcrumb NavXT」のタグを利用してパンくずリストを表示する


───────────
CHAPTER 6 製品ページの作成
───────────
■LESSON 001 トップページに製品記事を表示
STEP 1 製品記事の投稿の準備
STEP 2 製品記事の投稿
STEP 3 トップページに製品記事を表示
STEP 4 トップページの製品記事を装飾

■LESSON 002 製品記事のインデックスページ(一覧ページ)の作成
STEP 1 タイトル画像を変更
STEP 2 専用のカテゴリーテンプレートを作成
STEP 3 「製品一覧」ページに子カテゴリーごとの一覧を表示
STEP 4 各「製品一覧」ページを作成

■LESSON 003 製品記事の個別投稿ページを作成
STEP 1 個別記事ページ表示方法の変更
STEP 2 個別記事ページでもタイトル画像を変更
STEP 3 個別記事ページのレイアウトを整える

■LESSON 004 製品記事をタグで管理
STEP 1 サイドバーにタグメニューを表示
STEP 2 タグの一覧ページを作成
STEP 3 タグを個別記事にも反映

〈COLUMN〉
カスタムフィールドとは?
ループの条件を変更する「query_posts」について
カスタムフィールドに値が複数ある場合
アイキャッチ画像の有無を調べる「has_post_thumbnail()」タグ
query_postsで表示数を指定した場合のページナビゲーション
「tag」の文字列をURLから消す


───────────
CHAPTER 7 各固定ページの作成
───────────
■LESSON 001 会社概要ページの作成
STEP 1 投稿の準備(ビジュアルエディタの拡張)
STEP 2 会社情報ページを編集
STEP 3 会社情報ページを表示

■LESSON 002 アクセスページの作成
STEP 1 投稿の準備(カスタムテンプレートの作成)
STEP 2 アクセスページの表示(Googleマップの表示)

■LESSON 003 お問い合わせページの作成
STEP 1 プラグイン「Contact Form 7」の利用
STEP 2 お問い合わせフォームの設定
STEP 3 お問い合わせフォームの表示の調整

■LESSON 004 サイトマップページの作成
STEP 1 サイトマップ用のカスタムメニューの作成
STEP 2 サイトマップの表示
STEP 3 サイトマップの表示の調整

〈COLUMN〉
スパム対策プラグイン「Akismet」の有効化


───────────
CHAPTER 8 トピックスページの作成
───────────
■LESSON 001 トピックスページの作成
STEP 1 投稿の準備(カスタム投稿タイプの利用)
STEP 2 トピックスの投稿とトップページに記事を表示
STEP 3 トピックスの一覧ページを作成
STEP 4 トピックスの個別ページを作成
STEP 5 トピックスのカテゴリーページを作成(カスタムタクソノミーの利用)
STEP 6 パンくずリスト(Breadcrumb NavXT)とサイトマップの調整

〈COLUMN〉
カスタム投稿タイプのパラメーター
「wp_list_categories()」の表示とパラメーター
カスタムタクソノミーのURL


───────────
CHAPTER 9 サイトのカスタマイズ
───────────
■LESSON 001 各ページに機能を追加
STEP 1 404(NOT FOUND)ページの設定
STEP 2 検索フォームの設置
STEP 3 サイトナビゲーションをアニメーションで表現
STEP 4 トップページの画像を管理画面から管理
STEP 5 トップページにピックアップ記事を表示
STEP 6 サイドバー内に自由なコメント欄を表示
STEP 7 写真画像をColorboxでポップアップ表示
STEP 8 ギャラリー記事を投稿する

■LESSON 002 ソーシャルボタンの設置
STEP 1 ソーシャルボタンの設置(twitter、FaceBook、Google+1)
STEP 2 OGP(Open Graph Protocol)の設定

〈COLUMN〉
複数のお知らせを表示する
通常フォーマットとその他の投稿フォーマットを分ける方法
FacebookのユーザーIDの取得方法
FacebookのApp IDの取得方法


───────────
APPENDIX
───────────
■APPENDIX 001 スマートフォン対応について
■APPENDIX 002 WordPressのページテンプレートファイル
■APPENDIX 003 WordPressのモジュールテンプレート
■APPENDIX 004 本書にでてくるPHPの基本的なコードまとめ


INDEX

ダウンロードデータ

現場のワークフローで覚えるビジネスサイト制作

サンプルデータダウンロード

このたびは、「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」をご購入いただきまして、誠にありがとうございます。
以下に本書の解説で使用したサンプルデータを用意しましたのでご利用ください。


・MdN_WordPressSite.zip(4.7MB)


■ダウンロードにあたってのご注意■

ダウンロードファイルは、ZIP形式で圧縮されています。
Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

解凍したフォルダ内のデータは「配布素材」フォルダ(本書の009ページ参照)のほか、「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。


■ダウンロードファイル解凍時のご注意■

Windowsをご利用の場合は、ダブルクリックしてもダウンロードファイルを正しく解凍できない場合があります。
リンク画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしjQueryや各種プラグインなどの一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているPHP、HTML、CSS、JavaScript等のコメントやインデント、改行位置等は、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※WordPressのサンプルデータは、WordPressがインストール・動作しているサーバ環境にアップロードしないと動作しません。また、投稿記事などもサーバ上でアップロードしないと表示されません。

Webビジネスを成功に導く指南書・売れ筋ラインナップ

創作の力になるデザインと配色の基本が学べるシリーズ