3冊目の著書 – 基礎からのWordPress – を執筆させていただきました！

Posted under - Misc

256

Attention

誤植・補足情報を、記事の最後に追記したました。

基礎からのWordPress

この度、ソフトバンク クリエイティブさんから、私の3冊目の著作となる、「基礎からのWordPress (BASIC LESSON For Web Engineers)」
が発売になりました！この度 … と言っても、1月29日に発売になっているので、ちょっとご報告が遅くなってしましました …。

この本は WordPress のテーマをカスタマイズしたり、オリジナルテーマを作るときに必要となる基礎的なことに重点を置いた入門書になっています。でも Webサイト作成の入門書ではなくて、あくまでも WordPress のテーマ作成の入門書なので、HTML や CSS については解説はしていません。

また、WordPress は PHP で作られているので、テーマを作成する上でも PHP の知識は必要になりますが、「PHP はわからないけど …」という人にも、できるだけそのまま読んでいただけるように、PHP の基礎的なことも織り交ぜながら書きました。

1. はじめに

まずは本の「はじめに」をご紹介です！

Webサイトは一般的にHTMLでマークアップされて CSS でデザインされています。つまり HTML + CSS を習得していれば、Web サイトを制作することができます。しかし最近では、「WordPress を利用してWebサイトを構築する」という事例もとても多くなってきました。

では「WordPress」というのは一体なんなのでしょう?この本を手に取ってくれた方のなかには、そういった疑問を持っている方も多いと思います。簡単に言ってしまうと、WordPress は「ブログ」を作成することを目的に開発が始まった「ブログツール」です。その後もどんどん機能が拡張され、単なるブログツールとしてだけでなく、CMS(コンテンツマネージメントシステム – Webサイトを管理運営するシステム)として利用されるシーンも最近では増えてきました。

この書籍では WordPress とは何なのか?というところから始まり、WordPress でのサイト構築の基本とも言える、ブログサイトの構築とカスタマイズを紹介し、その後ブログではない一般的な Webサイトの構築法を紹介していくという構成になっています。WordPress での Webサイト構築という主旨なので、HTML + CSS を修得済みの方が対象となっています。

また、WordPress で Webサイトを構築する上では、PHP というプログラム言語を使用します。PHP はわからないという方でも読み進めていけるように、できるだけ PHP の基礎も収録しています。WordPress は拡張性に優れた、世界中で人気のツールです。ぜひこの書籍をきっかけにして、WordPress でのサイト構築を楽しんでいただければ著者として幸せです。
高橋 のり

2. ブログテーマの構造の理解、カスタマイズ … そしてコーポレートサイト

おおまかに「どんなことを学習するのか？」といった感じで、本の全体の構成をご紹介しますね！

2.1. シンプルなブログテーマを使って、構造の理解

WordPress はもともとブログツールですから、まずはブログサイトの構造の理解からはじめます。最近のデフォルトのテーマは高機能で、ちょっと構造を勉強するのに敷居が高い感じがしたので、シンプルなブログテーマを利用しての学習からはじめます。

過去記事：はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）でも利用した Simple Simple というシンプルなテーマを使っての学習になります。

ブログテーマ「Simple Simple」

2.2. ブログテーマをカスタマイズ

ブログテーマの基本を学習したあとは、いわゆるカスタマイズ的な部分に挑戦です。カスタムヘッダーやアイキャッチ画像を使って、ブログのトップページのデザインを変更したりします。

個別記事ページでは、関連記事を表示したり、コメント欄を編集したりします。また、サイト全体を通して、パンくずリストを表示させたり、サイドバーにアイキャッチ画像付きで最近の記事やコメントの多い記事の表示などにも挑戦します。

2.3. 固定ページを利用して小規模サイトの構築

ブログサイトの次は、コーポレートサイト用のテーマを利用して、小規模サイトの作成に挑戦します。テーマは過去記事：WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）でも利用した、「Green」というテーマを使って学習を進めます。

ここでは主に固定ページ機能と、ナビゲーションを作成するためにカスタムメニュー機能を取り上げています。また、固定ページならではの、ページの親子関係を意識したサイドバーの作成にも挑戦します。

Green

コーポレートサイトのデモ：Green

2.4. カスタム投稿タイプとカスタム分類

最後のパートでは、カスタム投稿とカスタム分類というものを学習します。カスタム投稿を使うと、ブログとは別に、更新型コンテンツを作成することができます。例えばブログとは別に、「ニュース」とか「お知らせ」を更新するといったイメージです。

もちろんお知らせ的なものに限らず、アイデア次第でいろいろな利用方法があります。サンプルサイトは「家具家さん」なので、テーブルやベッドなどの「製品」を、カスタム投稿で作成しています。また、カスタム分類についても学習します。

カスタム投稿タイプ

3. 基礎からのWordPress – 目次の紹介

それでは本の目次をご紹介します！本ではもっと細かく分かれてるんですけど、大見出しまでを掲載しますね！

part 1. 学習の準備

基礎からのWordPress - 目次

  • WordPress とは
  • PHP と MySQL
  • 開発環境の構築
  • WordPress をインストール

WordPress ってなに？っていうところから始まって、ローカル環境に開発環境を作って、WordPress をインストールします。

part 2 WordPressの基礎を知ろう

  • 管理画面の使い方とサイト構築のための初期設定
  • 記事を投稿してみよう
  • WordPress のテーマとテンプレートファイル

管理画面の使い方を学習したあと、実際に記事を投稿したりしながら、テーマとサイトの関連を学習します。

part 3 WordPressサイト構築の基礎

  • まずは既存のテーマに触れてみよう
  • メインテンプレートと WordPress ループ
  • 個別記事テンプレートとコメント欄
  • Webサイトのサイドバーとフッター
  • 固定ページとナビゲーション
  • テーマのカスタマイズと子テーマ

テーマファイルの中身を実際に見ながら学習を進めます。基本的な WordPress のファイル郡の構造と、サイトの構造との関連を理解します。

part 4 ブログサイトのカスタマイズ

ところどころで、PHP基礎解説

ところどころでPHP基礎解説をしています。

  • ブログのトップページをカスタマイズ
  • カスタムヘッダーを使う
  • パンくずリストの作成
  • 関連記事を表示する
  • コメント欄のテンプレートを変更する
  • コメントフォームのカスタマイズ
  • ブログ用サイドバーのカスタマイズ

基本的な構造を理解した上で、さらにカスタマイズを施していきます。

part 5 固定ページ機能で小規模サイトの作成

  • 固定ページ機能でコンテンツを作成
  • コーポレートサイトのサイドバーを作成

基本機能を使って、ブログじゃない Webサイトのコンテンツ作成を学習します。また、サイドバーはブログサイトとは違ったアプローチで構築します。

part 6 カスタム投稿タイプで中規模サイトの作成

  • カスタム投稿タイプで更新型コンテンツ
  • カスタム投稿タイプとカスタム分類
  • WordPress で jQuery を使う

コーポレートサイトならではの、カスタム投稿タイプ、カスタム分類の使い方です。一番最後の jQuery のパートは、「WordPress で jQuery が動かないんだけど …」というトラブルでの質問が多いので、付け足し … という感じで書きました。

全部で 400ページくらいの本になってしましました …。

基礎からのWordPress

「基礎からのWordPress (BASIC LESSON For Web Engineers)」

PHP 初心者さんでも読んでもらえるように、PHP の文法の基礎も織り交ぜながら書きました。408P、フルカラー、WordPress 3.5 対応です。税込 3,129円です。

4. あとがき

出版社さんであるソフトバンククリエイティブさんから、「WordPress の本を書いて見ませんか？」と声をかけていただいたのが、2011年の暮れだったと思います。年が明けてから構成を練ったりして、実際に原稿を書き始めたのは春頃でした。書き始めたころは WordPress も Ver3.3 で、この本が発売になったちょっと前には、もう 3.5 になりました。

私が WordPress を使い始めたのは、2.X（もう忘れちゃいました…）の頃で、まだブログツールという印象の方が強かったように思います。あれからカスタムヘッダーとかカスタムメニュー、カスタム投稿など、いろいろな機能が追加されてきて、どんどん CMS っぽく WordPress も進化してきました。

基礎からのWordPress

最近ではブログじゃない Webサイトも、WordPress で作ってみたいっていう声を、たくさん聞くようになったような気がします。でも、WordPress はもともとブログツールから始まっているので、この本を書くとき、はじめから「WordPress でブログじゃない Webサイトを作る本」じゃなくて、「ブログツールとしての基本機能をしっかり学習してから、ブログじゃない Webサイト作りに応用していく …」っていう感じの内容にしたいなーと思っていました。

結果、ブログサイトから始まり、ブログじゃない Webサイトを作成するまでの道のりが、とても長く感じるような内容になってしまったかな？とも思います。でも、ブログという基礎的な部分（WordPress って、まずはブログがあって、他の機能がどんどん追加になってきた … っていう作りになってるので！）のあとに、徐々に応用していく … というステップを大事にしたかったので、こういう構成にさせていただきました。

4.1. 編集の N.H さん、お疲れ様でした！

いつものんびり屋の私ですが、のんびりしすぎて、原稿を書いてる間に WordPress がどんどんアップデートしてしましました … X( 書き始めた頃は 3.3 で、途中 3.4 になって、若干の仕様変更がありました …。そこを直して、校正をまたのんびりやっていたら、そろそろ 3.5 がリリースですよー … という噂が出てきてしまい、そのころから急にバタバタしてしまいました … X(

WordPress 3.5 がリリースになってから、仕様変更などを確認して、書籍内で使う画像を 3.5 のものに全部取り直したり …。クリスマス・イヴの朝までの数日、徹夜続きで編集の H.N さんを付きあわせてしまいました …。ちょっと怖い印象のある編集長さんですが、クリスマス・イヴの朝の 5時頃、「私もおじさんなので、そろそろ限界です …。ちょっと休ませていただきますね ..。」のひと言に、急に親近感が湧いちゃいました ;D H.N さん、最後の最後まで、本当にお疲れ様でした！

4.2. いつもブログを読んでくれてるみなさんへ

このブログでも、WordPress について、いくつか記事を書いてきました。頂いた記事へのコメントなどで、参考にしてもらってるんだなーって思って、ブログを書いててよかったなー … なんて思っていました。今回、WordPress の本を書くにあたって、ブログでは書き飛ばしたことや、もっと基本的なところから書いてみました。その逆に、ちょっとケースバイケース的な内容ものは、ブログの方に書いてあったりもするので、本の内容との違いなど、合わせて読んでいただけたら嬉しく思います。


イラスト by はざくみさん

この本を書く機会はもちろん、どんな内容にしようかなー？というインスピレーション的なものも、いつもこのブログを読んでくれてる読者さんに頂いています。本当にありがとうございます！

のんびりで更新が遅いブログですが、また記事をアップしたら読んでいただけるとうれしいです。これからもよろしくお願いします ;D

誤植の訂正

本書の初版本の中、101P のサポートページの URL の記載に誤りがありました。

コードの訂正

170P、171Pのカスタムメニューに関するコードで訂正がありました。

170P List12-04 header.php：修正前
    

  1. wp_nav_menu( 'theme_location => header_navi' ));
    2.
170P List12-04 header.php：修正後
    

  1. wp_nav_menu( array('theme_location' => 'header-navi' ) );
    2.
170P List12-05 sidebar.php：修正前
    

  1. wp_nav_menu( 'theme_location => sidebar-navi' ));
    2.
170P List12-05 sidebar.php：修正後
    

  1. wp_nav_menu( array('theme_location' => 'sidebar-navi' ) );
    2.
171P List12-06 footer.php：修正前
    

  1. wp_nav_menu( 'theme_location => footer-navi' ));
    2.
170P List12-06 footer.php：修正後
    

  1. wp_nav_menu( array('theme_location' => 'footer-navi' ) );
    2.

お手数をお掛けいたしますが、よろしくお願いします。

2013年9月追記：Custom Post Type UI アップデートに伴う注意事項

書籍内のテーマで利用しているプラグイン「Custom Post Type UI」がアップデートされ、少し機能が追加されたので、それに伴い補足させてください。

Custom Post Type UI

P337 のカスタム投稿タイプの作成の画面

P337、「カスタム投稿タイプの作成」で、Custom Post Type UI の画面を記載してありますが、プラグインのアップデートに伴い、図のように「Post Format」（投稿フォーマット）の項目が追加されました。

テーマ「Green」では、Post Format のチェックを外してください。

これをチェックした場合、投稿フォーマットが有効になり、カスタム投稿表示時、body タグに single-format-standard というクラスが自動的に付き、レイアウトが誌面サンプルと左右逆になってしまいます。

誌面と同じように表示させたい場合は、「Post Format」のチェックを外してください。

2014年9月追記：WordPress4.0アップデートに伴うサイドバーのアコーディオン不具合の修正方法

WordPress 4.0へのアップデートに伴い、jQuery、jQuery UI もアップデートされました。書籍内のサンプルテーマ「Green」のサイドバーには、jQuery UI のアコーディオンを利用しているのですが、WordPress 4.0で不具合が発生しました。アコーディオンが動かない … という方は、テーマ「Green」の sidebar.php 内の下記の2箇所を修正してください。

sidebar.php

347行目：修正前
    

  1. 'title_li' => '<a class="header" href="#">ルームタイプから探す</a>',
    2.
347行目：修正後
    

  1. 'title_li' => '<a class="header">ルームタイプから探す</a>',
    2.

href属性を削除してください。

355行目：修正前
    

  1. 'title_li' => '<a class="header" href="#">家具の種類から探す</a>',
    2.
355行目：修正後
    

  1. 'title_li' => '<a class="header">家具の種類から探す</a>',
    2.

こちらも同様に、href属性を削除してください。

2016年11月追記：WordPress4.6アップデートに伴うjQuery UI タブの不具合の修正方法

WordPress 4.6 へのアップデートに伴い、jQuery がアップデートされました。書籍内のサンプルテーマ「Green」では、動作に jQuery を利用しているのですが、WordPress 4.6で不具合が発生しました。不具合としては、一部ページ内で利用している jQuery UI のタブ、アコーディオンが動かないというものです。原因はテーマ「Green」内の js/green.js ファイルのコードの一部分でエラーが発生しているためです。js/green.js の下記の部分を修正してみてください。

green.js

20行目あたり：修正前
    

  1. jQuery('a[href*=#]:not(#tabs li > a)').click(function() {
    2.
20行目あたり：修正後
    

  1. jQuery('a[href*=#]').not("#tabs > ul a").click(function() {
    2.

jQuery の :not セレクタを利用していましたが、.not() メソッドに変更しました。
これで問題なく動作しますので、お手数ですがよろしくお願いします。

Comments

Thank you for the comment.