現場でかならず使われている WordPressデザインのメソッド [アップデート版]
相原 知栄子 / 石川 栄和 / 大串 肇 / 大曲 仁 / 北村 崇 / 後藤 賢司 / 土肥 牧人 / 鳥山 優子 / 服部 久純 / 星野 邦敏 / 松田 千尋 / 吉澤 富美 / 吉田 裕介 著、WP-D 監修
エムディエヌコーポレーション / 2500円+税 / 2016
装丁: 米谷テツヤ (PASS)
WordPress は仕事とは一切関係なく、このサイトも趣味で作成しています。これまで Codex とオンラインの検索だけで場当たり的に我流で作ってきました。お客様にサイトを納品するわけでも、何かの講師をするわけでもないので、それで別に構わないのですが、一方で「WordCamp Tokyo 2016」のセッションとか聞いていると、あまりに経験も知識も足らないのは寂しいなぁと思ったのもまた事実。
そこで割りと新しいので良さげな本を買ってみました。
「アップデート版」ということで、初版の青本から環境構築部をカットしてページが減った分、値段を抑えた形。内容に大きな変更はなく基本は準備されたテーマを使ってサイトを構築するパターンです。要所要所でプラグインを導入したり、PHP や CSS を変更していきます。
勉強不足の人間にはすべてが新鮮、かつ、勉強になりました。
テンプレートタグの使い方や課題の解決は Codex やオンラインの Q&A サイトでも何とかなりますが、出力するタグにどんなクラスをどの程度の粒度で割り当て CSS で記述するかなど、一歩踏み込んだところでプロの解説や作品は本当に参考になります。読んでて楽しいです。
ところでこの本は複数人で書いているのでそれぞれに色があります。写り込んでいる URL を見てもこんな感じ。
megane-blog.com P.014 P.089 P.128
localhost P.072
vccw2.dev P.104
example.com P.122
localhost:8888 P.125
あと「Debug」がツールバーに表示されているものもありましたね(P.063)。
以下はエラーとコメント。
はじめに http://wp-d.org -> https://wp-d.org
P.007 「記事の投稿と同時に、自動的にSNSにも投稿する」 -> 本文には読点はない
P.007 ページトップへ戻るボタンの導入する -> ボタンを
P.008 Part3 環境構築とテーマの準備 -> Part3 多彩なカスタマイズ
P.008 下から7行目 http://ja.wordpress.org/… -> https:// …
P.011 WordPress -> WordPress 2か所
P.020 2段目 comment.php -> comments.php
P.021 表の網掛け fontフォルダ、imgフォルダ、jsフォルダ はそれぞれ白、緑、白
P.025 上段 staff-arcive.php -> staff-archive.php
P.026 下段 comment.php -> comments.php 2か所
P.032 http://ja.naoko.cc/… -> https:// …
P.040 http://learnboost.github.io/stylus -> http://stylus-lang.com/
P.041 http://alphapixels.com/prepros/ -> https://prepros.io/
P.043 404ページの設置 -> 404ページを設置する
P.046 get_posts() に関連して p.130 への参照があってもよいのでは?
P.051 COLUMN 左段 JS -> JavaScript
P.052 MEMO 日本語版 codex あり。https://wpdocs.osdn.jp/テンプレートタグ/wp_nav_menu
P.053 10-1 キャプション 着色してないよ
P.058 MEMO http://wordpress.org/plugins/wp-sitemanager/ -> https://ja.wordpress.org/plugins/wp-sitemanager/
P.060 MEMO P.061 に移動
P.061 MEMO https://wordpress.org/plugins/wp-sitemanager/ -> https://ja.wordpress.org/plugins/wp-sitemanager/
P.063 MEMO カスタマイザーを使用すればプレビューできるし、保存ボタンもあるよ
P.067 末尾 Twenty Fourteen でもいいけど、Version 4.5 標準の Twenty Sixteen じゃだめ?
P.069 Attention PS Taxonomy Expander P.114 に使用手順があるかのように書かれているが、P.114 ではオプション的な表現で、扱いがずれているように思える。
P.070 GMT -> UTC
P.073 2-1 キャプション OK だ。ここだけ馴れ馴れしい。
P.078 7-1 キャプション http://wordpress.org/plugins/search-everything/ -> https://ja.wordpress.org/plugins/search-everything/ ちなみに画面コピーは日本語サイト
P.079 9-2 説明では商品メニューだが、ここはスタッフ
P.081 TIPS 「Creating an Error 404 Page (http://wpdocs.sourceforge.jp/Creating_an_Error_404_Page)」-> 「404エラーページの作成 (https://wpdocs.osdn.jp/404エラーページの作成)」
P.084 手順5 左下 -> 右下
P.085 MEMO http://wordpress.org/plugins/auto-post-thumbnail/ -> https://ja.wordpress.org/plugins/auto-post-thumbnail/
P.094 13-2、13-3 サイトキーとシークレットキーがマスクされていないけど大丈夫かな?
P.097 17-1 http://wordpress.org/plugins/flamingo/ -> https://ja.wordpress.org/plugins/flamingo/ ちなみに画面コピーは英語サイト
P.098 https://wordpress.org/plugins/simple-map -> https://ja.wordpress.org/plugins/simple-map/
P.101 http://www.advancedcustomfields.com/add-ons/repeater-field/ -> https
P.107 手順12 中段 サムネイル -> アイキャッチ
P.109 3-1 キャプション フィールドグループを追加 -> フィールドを追加
P.111 COLUMN 左段 インストールをして -> インストールして
P.117 COLUMN 右段 「スタッフ紹介」 -> 「スタッフ」
P.118 「WordPress の安全性」を高める -> 「WordPress の安全性を高める」
P.119 記事の投稿と同時に、自動的にSNSにも投稿する -> 本文には読点はない
P.119 ページトップへ戻るボタンの導入する -> ボタンを
P.125 3-1 http://wordpress.org/plugins/advanced-custom-fields/ -> https://ja.wordpress.org/plugins/advanced-custom-fields/
P.131 ATTENTION P.046 手順3への参照を加えてもよいのでは?
P.137 表内のカルーセル P.176 に参照してもよいのでは?
P.137 表内のタイルギャラリー P.176 に参照してもよいのでは?
P.137 表内のパブリサイズ P.134、P.144 に参照してもよいのでは?
P.137 表内の無限スクロール P.156 に参照してもよいのでは?
P.137 表内の追加サイドバーウィジェット P.142 に参照してもよいのでは?
P.137 まとめ オススメとなります。… であれば、P.123 手順5は不要では? 複数著者だから仕方ないかなぁ… と思いつつコメント。
P.154 wp_reset_postdata() がないけどいいの? p.132 のあとでは括弧でなく endforeach が良いのでは?
P.155 まとめ Simple Map P.098 への参照があってもよいのでは?
P.160 http://wordpress.org/plugins/easing-slider/ -> https://ja.wordpress.org/plugins/easing-slider/
P.166 http://wordpres.org/plugins/wp-easy-responsive-tabs-to-accordion/ -> https://wordpress.org/plugins/wp-easy-responsive-tabs-to-accordion/
P.172 http://wordpress.org/plugins/simple-lightbox/ -> https://ja.wordpress.org/plugins/simple-lightbox/
P.172 http://wordpress.org/plugins/wp-jquery-lightbox/ -> https://ja.wordpress.org/plugins/wp-jquery-lightbox/
P.173 http://wordpress.org/plugins/easy-fancybox -> https://ja.wordpress.org/plugins/easy-fancybox/ ちなみに P.170 は正しい。
P.173 https://wordpress.org/plugins/responsive-lightbox/ -> https://ja.wordpress.org/plugins/responsive-lightbox/
P.176 http://jetpack.me -> https://jetpack.com ちなみに p.134 1-1 参照。あるいは https://ja.wordpress.org/plugins/jetpack/
P.177 http://wordpress.org/plugins/nextgen-gallery/ -> https://ja.wordpress.org/plugins/nextgen-gallery/
P.189 http://wordpress.org/plugins/… -> https://ja.wordpress.org/plugins/… 3か所
P.203 https://wordpress.org/plugins/wp-responsive-menu/ -> https://ja.wordpress.org/plugins/wp-responsive-menu/
P.204 https://wordpress.org/plugins/mcl-slidein-nav/ -> https://ja.wordpress.org/plugins/mcl-slidein-nav/
P.207 http://wordpress.org/plugins/tablepress/ -> https://ja.wordpress.org/plugins/tablepress/
P.207 TIPS内 JS -> JavaScript
P.209 http://tablepress.org/extensions/responsive-tables/ -> https://tablepress.org/extensions/responsive-tables/
P.212 the_date 「3.0以降は」はさすがに不要では?
P.214 the_excerpt 120文字 -> 110文字
P.215 wp_attachment_is_image 返 -> 返す
P.215 投稿サムネイルタグ、およびその表内の「サムネイル」->「アイキャッチ」
P.218 – 219 索引は全般に不足。例えば front-page.php なら P.124、P.130、P.166、P.182 は含めても良いのでは?
P.220 Advanced Custom Fields -> 010 124 が抜けている
P.220 Jetpack by WordPress.com -> 174 が抜けている
P.222 土肥牧人はフリーランスでプライムテクノロジー社員なの?
以下、デザイン的なコメント
P.005-007 見出しの3桁の数字がプロフォーショナルフォントというのはないんじゃない? P.005 の 011 とか凹んで見える
全体 見出し(例:P.010の「>テーマとプラグインのインストール」)が緑色背景の箱に対して上詰めなんだけど、これデザインかなぁ。ホントは中間揃いなのでは?