対応
グーテンベルク時代の
WordPressノート
テーマの作り方
（入門編）
WordPress 5.xの新しいブロックエディタ「Gutenberg」を活かしたオリジナルテーマの作成方法をステップ・バイ・ステップで解説
※プリント・レプリカ形式は無料のKindleアプリ（PC、Mac、Android、iOS用）やFireタブレットでご利用いただけます。Kindle Paperwhiteなどの電子書籍リーダーやKindle Cloud Readerでは利用できません。対応デバイスをご確認のうえ、ご利用ください。
■ WordPress 5.8 への対応はサポートPDFを参照してください
書籍のページサンプル
はじめに
WordPressが5.0となり、大きな変化を選択しました。ブロックエディタのグーテンベルク（Gutenberg）を中心に据えた大きな変化です。これは、複雑になってしまったWordPressをよりシンプルで、より柔軟なものへと変化させるための選択です。
いやいや、ちょっと待て! といった声が聞こえてきそうですね。確かに、現在のWordPressを取り巻く環境はグーテンベルクの登場によって混乱した状況になっています。非常に複雑になったように感じますし、グーテンベルクも馴染みませんし…。
しかし、これにも理由があります。WordPressは今回の大きな変化を、過去の資産をできる限り失うことなく進めるという、非常に難しいチャレンジを選択をしました。バッサリと切ってしまえばもっとシンプルにできたはずなのに。
結果として、グーテンベルクがポテンシャルを引き出せない環境で評価されるという、非常に厳しい状況を生み出してしまうことになっています。
これは、非常にもったいない。
そこで本書では、このグーテンベルクのポテンシャルを引き出すテーマを作成するために必要なことを、現時点で可能な限り詰め込みました。
グーテンベルク、想像以上におもしろい存在だと思います。
本書について
オリジナルのテーマを作りながら、サイト構築のノウハウを身に付ける
本書では、WordPressのテーマを実際にステップ・バイ・ステップで作ることにより、サイト構築のノウハウが身に付くように構成しています。
グーテンベルクのブロックを活かした基本的な制作方法をマスター
作成するテーマはWordPressのブロックエディタ「グーテンベルク」に対応させます。このとき、グーテンベルクのブロックが持つHTMLやCSSをそのまま活かし、最低限のオーバーライドで形にしていきますので、完成したテーマを元に自由にアレンジ・カスタマイズしていただけると思います。
WordPress 5.5 対応
グーテンベルクはまだまだ進化の途中であり、どんどん変化していくと思われます。本書は2019 年５月時点の情報を元に執筆し、2020 年8 月に変更を加えてWordPress のバー ジョン5.5 に対応しています。5.5 での変更箇所についてはP.219 にまとめています。
モバイルファースト＆レスポンシブで作成
サイトを構成するページはモバイルファーストでレイアウトやデザインを設定し、レスポンシブでスマートフォン、タブレット、PC といった多様な閲覧環境に対応します。また、レイアウトのコントロールにはCSSグリッドを使用し、HTMLとCSSもシンプルな設定になっていますので、自由にアレンジして利用してください。
※本書ではHTML&CSSについての詳しい解説は行っていません。
構築するサイト
※本書で作成するサンプルは主要ブラウザでの表示に対応しています。ただし、IEはサポート対象外です。
※作成するテーマのソースコードや、インポート用の記事データについては、ダウンロード＆サポートサイトに用意しています。詳しくは本書のP.8を参照してください。
もくじ
- 本書で作成するサンプル
- 完成見本
- ５つのパーツでページを構成
- 完成見本
- WordPressのインストールと基本設定
- CMSとは何か
- WordPressの仕組み
- テンプレートとテーマ
- サーバーの必要要件
- WordPressが利用できるサーバー
- PHPとMySQLのサポート期限の問題
- どのバージョンのPHPやMySQL/Maria DBを利用するか
- WordPressのインストール
- WordPressの設定
- サイトに関する設定
- URLの形式（パーマリンク）
- パーマリンクの仕組み
- パーマリンクの設定に必要なサーバーの要件
- 日本語関係のプラグイン
- 「WP Multibyte Patch」をインストールする
- デフォルトテーマの確認
- 「Twenty Nineteen」が有効化されていることを確認する
- CMSとは何か
- テーマ作成の準備 - コンテンツの投稿とメニューの作成
- テーマ作成のための記事＆固定ページの投稿
- ２つのコンテンツのタイプ
- 標準で投稿されている記事＆固定ページを削除する
- グーテンベルクの基本操作
- 画面構成
- テキストの入力方法
- ブロック単位の操作
- ブロックの並び順の調整
- ブロックの追加
- メニューを使ったブロックの追加
- ブロックの種類
- ブロックの種類の変換
- ブロックのオプション設定
- ブロックの再利用
- ブロック設定の「高度な設定」
- グーテンベルクとの付き合い方
- グーテンベルクの評判が悪い理由
- ブロックが持つCSS
- ブロックが持つHTML
- HTMLコードを編集した場合
- どうしてもグーテンベルクを使いたくない場合
- グーテンベルクによるサンプル記事の投稿
- カテゴリーの管理
- メディアの管理
- サンプル記事のインポート
- メニューの作成
- WordPressにおけるメニューの扱い
- メニューとウィジェット
- ナビゲーションメニューの作成
- サイドメニューの作成
- ウィジェットの追加と削除
- 表示の確認
- テーマ作成のための記事＆固定ページの投稿
- テーマの作成 - ５つのパーツの出力
- テーマフォルダを作成する
- テーマを有効化する
- テーマに関する情報を記述する
- 基本設定を追加する
- HTMLの基本設定を追加する
- 出力コードを確認する
- ブラウザの開発ツールでコードを確認する
- 言語の種類を出力する
- エンコードの種類を出力する
- WordPressが各種コードを出力できるようにする
- ページを区別するクラス名を出力する
- ページのタイトルを出力する
- <link> <style> <script>をHTML5に対応させる
- add_action()について
- ５つのパーツを用意する
- 記事に関するデータを出力する
- 記事のタイトルを出力する
- 記事の本文を出力する
- 記事のアイキャッチ画像を出力する
- 記事全体をarticleでマークアップする
- ループ
- テンプレートタグ
- 自動生成される画像のサイズ
- サイトに関するデータを出力する
- サイト名を出力する
- トップページへのリンクを設定する
- エスケープ処理について
- ナビゲーションメニューを出力する
- メニューの配置場所を用意する
- テーマを切り替えてメニューの設定を引き継ぐ
- サイドメニューを出力する
- ウィジェットの配置場所を用意する
- テーマを切り替えてウィジェットの設定を引き継ぐ
- テーマの作成 - パーツのデザインとレイアウト
- ブロックのCSSの扱い
- ブロックのCSSをオーバーライドしてデザインをアレンジする場合
- テーマのCSSを用意する
- テーマのCSSをページに読み込ませる
- CSSのURLに付加する文字列を変更する
- CSSの基本的な設定を追加する
- フォントの設定を追加する
- パーツの配置を指定する
- iPhoneの画面サイズに設定する
- グリッドを作成する
- パーツを中央の列に配置する
- ヘッダーの配置を指定する
- ナビゲーションメニューの配置を指定する（１）
- ナビゲーションメニューの配置を指定する（２）
- コンテンツの配置を指定する
- サイドメニューの配置を指定する
- フッターの配置を指定する
- コンテンツのデザインを設定する
- グーテンベルクのフォントサイズ
- 本文の行の間隔を広げる
- ヘッダーとフッターのデザインを設定する
- Google Fontsを利用できるようにする
- フォントの設定を行う
- リンクのデザインを指定する
- ヘッダーのバーを追加する
- フッターのバーを追加する
- メニューのデザインを設定する
- ナビゲーションメニューのリンクの間に余白を入れる
- サイドメニューのリストマークを削除する
- サイドメニューのリンクの間に余白を入れる
- サイドメニューの見出しのデザインを指定する
- サイドメニューをカード型のデザインにする
- サイドメニューに装飾を追加する
- レスポンシブにする
- 画面の横幅を大きくする
- PC版のグリッドを作成する
- コンテンツとサイドメニューを横に並べる
- モバイル版とPC版のレイアウトを切り替える
- グーテンベルクにテーマと同じCSSを適用する
- グーテンベルクでの表示
- 編集画面用のCSSを追加する
- 編集画面用のCSSをオンにする
- フォントと行の高さを指定する
- タイトルのフォントを指定する
- 記事の横幅を広くする
- 編集画面の記事の横幅と両サイドの余白
- ブロックのCSSの扱い
- テーマの作成 - ページの種類ごとのカスタマイズ
- ページの表示を確認する
- 共通のパーツをテンプレートパーツ化する
- テンプレートパーツ用のファイルを追加する
- 各パーツの設定をコピーする
- テンプレートパーツを読み込む
- 記事ページをカスタマイズする
- single.phpを作成する
- 記事が属するカテゴリーを出力する
- 記事が属するカテゴリーのデザインを指定する
- 投稿日を出力する
- Font Awesomeを利用できるようにする
- integrity／crossorigin属性を追加する
- アイコンを表示する
- 前後の記事へのリンクを出力する
- スクリーンリーダー用のテキストを隠す
- 前後の記事へのリンクのデザインを指定する
- 大きい画面での表示を確認する
- トップページをカスタマイズする
- home.phpを作成する
- 記事の本文を削除する
- 記事ページへのリンクを設定する
- 記事をカード型のデザインにする
- 記事一覧を２列のレイアウトにする
- １件目の記事を大きく表示する
- 出力する記事の数を変更する
- ページネーションを出力する
- ページネーションの配置を指定する
- ページネーションのデザインを指定する
- ページネーションに矢印アイコンを表示する
- 画像の高さを揃える
- アイキャッチ画像がないときの表示
- カテゴリー＆月別ページをカスタマイズする
- archive.phpを作成する
- カテゴリー名の見出しを追加する
- 見出しのデザインを指定する
- 月別ページの表示を確認する
- ページの種類ごとに異なるアイコンを追加する
- 固定ページをカスタマイズする
- 固定ページのテンプレート
- ギャラリーを追加する
- ギャラリーの列の数
- ギャラリーの画像の切り抜き
- 投稿フォームを追加する
- 投稿フォームのデザインを指定する
- 投稿フォームの利用
- テンプレート階層（テンプレートヒエラルキー）
- テーマの仕上げ
- 仕上げの設定を追加する
- もう１つのグーテンベルク由来のCSSを適用する
- 埋め込みブロックをレスポンシブにする
- ブロックに影響するテーマのCSSを修正する
- ブロックの配置に対応する
- ボックスの横幅の処理方法を指定する
- ブロックのオプション設定を解除する
- ブロックの色設定
- ブロックの文字サイズ設定
- カスタムフォントサイズとカスタムカラー
- グーテンベルクの活かし方
- グーテンベルク由来のCSSを無効化する
- グーテンベルク由来のCSSをエディタとフロントの両方で無効化する
- 使用できるブロックを限定する
- ブロックをリストアップしたallowed_block_typesの設定
- 投稿タイプ（投稿／固定ページ）ごとに使用できるブロックを指定する
- ブロックテンプレートで定形のブロックの並びを設定する
- グーテンベルクの開発フェーズとClassicPress
- 仕上げの設定を追加する
