検索対象:

WordPressはじめてのデザイン＆カスタマイズ：概要

WordPressはじめてのデザイン＆カスタマイズ
WordPressはじめてのデザイン＆カスタマイズ

『WordPress はじめてのデザイン＆カスタマイズ入門』に興味を持っていただき有難うございます。

本書は、WordPress 5を使ったカスタマイズ入門書です。WordPress 5とGutenbergでWebサイトを制作＆カスタマイズするための必要な情報を盛り込みました。

  • WordPressを今回初めて使うけれど、自分にも使えるの？
  • 設計してもらったWordPressで記事は書いているけれど、仕組みは把握できていない……
  • 新しいブロック機能、使っても大丈夫？　どうやって使うの？
  • WordPressサイトをもう少しオリジナルデザインに変えたい！

段組み（カラム）の設計、背景画像や動画の上にテキストを重ねたデザインなど、従来はPHPやCSS、プラグインで設計していたデザインが、Gutenbergのブロックを選択するだけで再現されます。

手軽に楽しく、WordPressサイトのカスタマイズに挑戦いただけることと思います。

HTMLやCSS、PHPの機能のうち、「カスタマイズのためには、ここだけはぜひ押さえておきたい」事項も解説しています。併せてご活用ください。

活版印刷技術の発明者Johannes Gutenbergにあやかって命名されたGutenbergエディターが、これからどのように広がっていくのか、とても楽しみです。

ぜひワクワクしながら、WordPress 5のカスタマイズの世界をお楽しみください。

目次

Chapter1：WordPressの機能をおさらいしよう

  1. 「誰のため？　何のため？」を意識しよう
  2. WordPressって何だろう？
  3. WordPressフォルダの中は、どうなっている？
  4. 新エディターGutenberg、登場！
  5. WordPressを使ってみよう
  6. WordPressの環境を整えよう
  7. Webサイトのデザインを決めよう

Chapter2：「投稿」や「固定ページ」で記事を書いてみよう

  1.   Gutenbergエディターを使ってみよう
  2. 「投稿」と「固定ページ」の相違点
  3. 「投稿」で記事を書いてみよう
  4.   記事一覧を管理しよう
  5. 「投稿」を使いこなさおう
  6. 「固定ページ」を使いこなそう
  7.   公開方法をコントロールする

Chapter3：Gutenbergエディターを使いこなそう

  1. ブロックを使いこなそう
  2. ブロックでページにメリハリをつける
  3. ブロックを再利用する
  4. 「コードエディター」でコードを確認する

Chapter4：Webページのコンテンツを充実させよう

  1. 画像を挿入する
  2. 動画やファイルを挿入する
  3. 「ウィジェット」でサイト内を自由に回れるようにする
  4. 「プラグイン」で機能を拡張する
  5. 「ホームページ設定」で固定ページを表示させる
  6. 「メニュー」を設定する

Chapter5：サイトのデザインをカスタマイズしよう

  1. カスタマイズの方法を知ろう
  2. ［カスタマイズ］画面でカスタマイズする
  3. HTMLとCSSの基本を知ろう
  4. ［CSS編集］画面でCSSを編集する

Chapter6：「テンプレート」の働きを理解しよう

  1. 「テンプレート」の役目を理解しよう
  2. PHPの基本的な読み方を理解しよう
  3. 代表的なテンプレートファイル
  4. テンプレートファイルを編集する

Chapter7：サイトの機能を強化して本格的な運用に備えよう

  1. SEOを強化する
  2. SNSとの連携を強化する

『WordPress はじめてのデザイン＆カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン＆カスタマイズ

著　者：茂木葉子、岩本修
監修者：星野邦敏、吉田裕介
出版社：技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売

Gutenbergと旧エディターを併用する

WordPressはじめてのデザイン＆カスタマイズ
WordPressはじめてのデザイン＆カスタマイズ

Gutenbergと旧エディターの併用も、かなり安定してきました。

とはいえ、すぐにGutenberg完全対応にすることは、現段階ではまだお勧めしません。
特に、WordPress 4.9.Xで緻密に作ったサイトや、旧エディターで作り込んだページがある場合は、段階を追ってGutenberg対応型に馴染ませていくほうが無難です。

ここでは、旧エディターで書いたページをGutenberg対応型にする方法をご紹介します。

  1. Gutenbergプラグインのインストール＆有効化
  2. 旧エディターページをGutenbergで開いてみる
  3. クラシックブロック上で入力・更新してみる
  4. ブロックへ変換する

Gutenbergプラグインのインストール＆有効化

WordPress 5にしたら、Gutenbergがデフォルトエディターになるはずですが、タイミングによってはGutenbergプラグインがインストールされなかったり、自動アップデートの際にGutenbergの有効化まで共にOFFになってしまう場合があります。

まずは、［インストール済みプラグイン］を確認しましょう。

  • 「Gutenberg」がリストにある
  • ［有効化］されている（メニュー記述が「停止」のみならばOK）

旧エディターページをGutenbergで開いてみる

旧エディターページをGutenbergで開くには、［投稿一覧］画面で投稿名をクリックするか、「編集」をクリックします。

投稿名をクリックすると、（通常は）Gutenberg環境で開きます。旧エディターでの画面とは異なっていることを確認しましょう。

Gutenbergエディターで開くと、右側に［文書］［ブロック］のパネルが表示されます。右上には「下書きへ切り替え」［プレビュー］［更新］といったボタンが並んでいます。

旧エディターで作ったページ全体が、「クラシック」という箱（ブロック）でくるまれていることを確認しましょう。これが、Gutenbergエディターの特徴です。

※Classic Editorプラグインもインストール＆有効化している場合、投稿名をクリックしたときに自動的に旧エディターで開いてしまう場合があります。その場合は、［投稿設定］の「デフォルトエディター」で「ブロックエディター」を選択し直してください。

クラシックブロック上で入力・更新してみる

Gutenbergでは、すべてのコンテンツをそれぞれ専用の「ブロック」で整理しています。［クラシック］ブロックは、このGutenbergブロックの1つですが、少し特殊な位置づけになっています。

Gutenbergのブロックには、それぞれ専用のブロックコード（コメントタグ）が付与されています。［クラシック］ブロックだけは、このブロックコードがありません。
「旧エディターページの救済ブロック」と考えるとよいかもしれません。

Gutenbergで旧エディターページを開くと、この［クラシック］ブロックでコンテンツ全体がまるごと包まれます。

［クラシック］ブロック内でテキストの編集をして、［更新］してみましょう。

何のエラーもなく更新された場合は、そのページは、Gutenberg完全対応に移行しても問題ありません。

エラーメッセージが出てしまった場合は……

エラーメッセージが出てしまった場合は、このページのどこかにGutenberg対応にするには問題があるので、旧エディターを使ってページを編集してください。

なお、エラーメッセージが出た場合、すべてのページがNGなのではなく、旧エディターで作ったページのみ（あるいはこのページのみ）がNGです。
また、Gutenbergエディターでの保存は時間がかかる傾向が強いので、何度か試していくうちに、保存OKになることもあります。

なお、新たに１から作るページは、Gutenbergで作っても問題は発生しません。

※エラーが出てしまった場合の対処方法は、
「WordPress5「真っ白画面」の直し方」を参照してください。

ブロックへ変換する

旧エディターで記事を追加して更新したときに、「更新しました」と表示されて何のエラーも出なかった場合は、Gutenbergへ移行できます。ブロックへ変換して、Gutenbergの機能をフルに利用しましょう。

［クラシック］と記載されたタイトルバー左端のボタンをクリックし、表示されるメニューで［ブロックへ変換］を選択します。

ブロックへ変換すると、あまりにスムーズに変換されるので、何が起きたかわかりにくいかもしれません。右側の［パネル］を確認しましょう。

スムーズに変換できると、［クラシック］の表示が変化します。下例の場合では、「WordPressが……」から「……整えていきたいです。」までが、［段落］ブロックに変換されたことがわかります。
ここまでの範囲に枠線が表示され、1つの段落であることが把握できます。

さらに、次の部分、「新エディター……」をクリックしてみると、［見出し］ブロックに変換されたことがわかります。H2（見出し2）に変換されています。旧エディター上でH2の設定をしていたので、正しく変換されたわけです。

同様にして、それぞれをクリックしていくと、右側のパネル表示が変化します。画像をクリックすると、［画像］ブロックになったことがわかります。
［画像］ブロックでは、Altテキスト（代替テキスト）や画像サイズなどを設定できます。
旧エディターで設定していた場合は、自動的に受け継がれます。

複数のブロックをまとめて選択する

ブロックは複数を選択できます。［段落］ブロックや［見出し］ブロックのように、同じテキスト系ブロックはドラッグして複数をまとめて選択できます。
［段落］ブロックと［画像］ブロックのようにタイプが異なる場合は、1つ目でクリック、2つ目で［Shift］+クリックして複数選択できます。

複数のブロックを選択すると、「2個のブロック」のように、パネル表示が変わります。

複数のブロックを選択すると、何がよいことがあるの？？？？

それは、また次回に。

Gutenbergのブロック機能は、かなり楽しいです。
ぜひ、使い倒してみてください。

『WordPress はじめてのデザイン＆カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン＆カスタマイズ

著　者：茂木葉子、岩本修
監修者：星野邦敏、吉田裕介
出版社：技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売

WordPress5「真っ白画面」の直し方

WordPressはじめてのデザイン＆カスタマイズ
WordPressはじめてのデザイン＆カスタマイズ

ずいぶん安定してきたWordPress5ですが、過去に制作したページをWordPress5上で開こうとすると、エラーが発生することがあります。
特に、WordPress4.9.X環境で作りこんできたサイトほどエラー頻度が高いようです。

WordPress5で「投稿」や「固定ページ」を開こうとしたときに、真っ白画面が表示される場合があります。
その際に、WordPress4.9.Xにダウングレードせずに、回避する方法をご紹介します。

  • Classic Editorプラグインをインストール＆有効化
  • 設定画面で［クラシックエディター］を選択する

Classic Editorプラグインのインストール＆有効化

［プラグイン］メニューの［新規追加］を選択し、［プラグインを追加］画面の「注目」をクリックします。

Classic Editorの［今すぐインストール］ボタンをクリックしてインストール、さらに［有効化］ボタンをクリックして有効化します。
［有効］が薄く表示される状態になったら準備完了です。

設定画面で［クラシックエディター］を選択

インストールが完了すると、［インストール済プラグイン］画面に追加されるので、「設定」をクリックします。

［投稿設定］画面が表示され、「すべてのユーザーのデフォルトエディター」と「ユーザーにエディターの切り替えを許可します」が着色して表示されます。
「すべてのユーザーのデフォルトエディター」を「クラシックエディター」に切り替えます。

「ユーザーにエディターの切り替えを許可します」は、「いいえ」を念のため選択し、この設定値を保存してください。
これで、クラシック環境で今までの作業を続行できます。

できれば、Gutenbergも使ってみましょう

WordPress 5になって、Gutenbergがデフォルト環境になりました。
旧エディター環境は、プラグインをインストールしなくても一覧画面上で切り替えて使えるようになっています。

通常は、この設定で正しく機能します。
ですが、うまくいかないときもたまにあります。まだまだ移行期のため、仕方がないかなと。
そんなときは、ダウングレードではなく、上記の方法を試してみてください。

ただ、個人的には、ぜひGutenbergを使ってみていただきたいです。

最初は、あまりの変貌ぶりに脳が拒絶しました。

しかし、Gutenbergを使い始めて半年ほど経過した今は、プラグインやCSSを駆使しなければできなかったことが、Gutenbergエディターのみで再現できてしまうことを楽しんでいます。

脳は、慣れるのも早いです。
そして、楽しいほうをワクワクと選んで実践したがります。
ぜひ、そのあたりを楽しんでいただきたいなーと思います。

『WordPress はじめてのデザイン＆カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン＆カスタマイズ

著　者：茂木葉子、岩本修
監修者：星野邦敏、吉田裕介
出版社：技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売

Yoast SEO、Gutenbergブロックに対応

WordPressはじめてのデザイン＆カスタマイズ
WordPressはじめてのデザイン＆カスタマイズ

Yoast SEOプラグインを有効化すると、Gutenberg用のブロックが追加されます。
早い段階からGutenbergのブロック機能に興味を示していただけあって素早い反応です。

Yoast SEOプラグインが有効化されていると、Gutenbergのブロックメニューに［Yoast Structured Data Blocks］が追加されます（いずれ日本語化されそうですね）。

現在、ブロックは2種類。

Q&Aを簡単に作れる「FAQ」と、使用法リストの作成に便利な「使用方法」。
スタイルも設定されているので、ユーザーは内容を書いていくだけで、手軽にQ&Aや使用法のコンテンツを追加できます。

ちょっと使ってみましたが、おぉ、なかなか便利です。
簡単なスタイルもその場で当てられるし、もう少し高度なCSSもできそうです。

こういう構造をシンプルに入力できるのが、ブロック機能の醍醐味であると思います。

従来は、こういったデザインをWordPressで実現するには、プラグインを入れたりCSSを書いたり……。一般ユーザーには敷居の高いものであったことは否めません。
その敷居を低くしたいというのが、Gutenbergの目指す方向です。

自分たちが作ったブロックも保存可能で、再利用できます。
今回作ったブロックを、他ページで流用したいときは、

  1. ブロックを再利用ブロックとして登録する
  2. 別ページを開く
  3. ブロックリストからブロックを読み込む（クリック）

これだけで済むのですから、本当に簡単です。
もちろん、そのために、背後では思いっきり無理がかかってはいるのです。

が。その話は、またいずれ改めて。

『WordPress はじめてのデザイン＆カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン＆カスタマイズ

著　者：茂木葉子、岩本修
監修者：星野邦敏、吉田裕介
出版社：技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売

Gutenberg発信

WordPressが、いよいよ「WordPress 5」になります（2018/12/6）。
これに伴い、当サイトもWordPress 5仕様に切り替えています。

新エディター「Gutenberg」とは？

「Gutenberg：ぐーてんべるぐ」は、WordPress 5に搭載される新エディターです。WordPress 4.9.8から試せるようになりました。WordPressにアクセスすると、かなりしつっこく勧誘されますので、すでにご存じの方々も多いことでしょう。

実際に使ってみた感想

2018年8月からは、Gutenbergを本格的に操作してあれこれ制作しています。

Gutenbergの評価は、クリエイター諸氏からはさんざんな点数になっています。
実際に操作してみて、点数が低い理由もひじょうに理解できます。

しかし、個人的にはかなり評価しています。

もちろん、「むむむ……」なところも多々あります。
けれど、何故、こういう構造にしようとしたのか、意図が伝わってきます。
その方向性も間違っていないと感じます。

ただ、つじつま合わせのために、かなり無理をして方向転換をしているので、内部的にひどく不安定な設計になってしまっています。うまく反映しなかったり、エラーが出たり……。

そのあたりとどのようにお付き合いしていくか？
これが、今後の大きな課題になりそうです。

Gutenbergの登場は、個人的にはかなり期待しています。
いろいろ難があるからこそ可愛いとも言えます。

その魅力を、お伝えしていこうと思います。

さっそくコケたGutenberg

この投稿は、新エディターGutenbergで書く予定でした。

しかし、何度やっても、保存の途中でエラーが出ました。
自動保存でエラー、［下書き保存］ボタンをクリックしようとしてもエラーが出ました。

コードエディター上で書いてみたり、クラシックブロックを作って書いてみたり、あれこれ試しましたが、エラーエラーエラー（……）。

Gutenbergは、すでにかなり大量に使っていますので、当方の使い方の間違いではありません（と思います）。

エラーが出たときには、以下を確認してみてください。

  • レンタルサーバー（対応が遅れている場合があります）
  • 使用しているテーマ
  • インストールされているプラグイン
  • カスタム投稿タイプなどのカスタマイズしている内容

どうやら、現在使用しているテーマまたはプラグインが、Gutenbergに対応していないようです。
あるいは、サーバーのセキュリティの関係かもしれません。

こういった問題があちこちで発生することは、今後、大いにありそうです。

旧エディターのインストールは必須です

あまりにもエラーが出るようだったら、以下の手順を試してみてください。

  1. 旧エディター（クラシックエディター）で書く
  2. Gutenbergで開く（クラシックブロックとして開かれる）
  3. Gutenberg上でブロックに変換する

旧エディター上で開くときも要注意。安直に投稿名をクリックすると、初期設定では、Gutenbergの世界へ導かれるようになっています。

旧エディターで開いたり新規作成するときは、以下の方法を使います。

  • 旧エディターで新規作成するには、
    ［投稿］画面の［新規追加］メニューで［旧エディター］を選択する
  • 旧エディターで開くには、
    ［投稿］画面の投稿下の「旧エディター」を選択する

［新規追加］メニューからでは機能しないことも!?

旧エディターで新規記事を書くには、［投稿］や［固定ページ］脇の［新規追加］メニューの［旧エディター］を選択します。
しかし、真っ白画面になってしまって、うまく機能しないこともあります（多々）。

もちろん、「Gutenbergはいっさい使わない！」という選択肢を選べば、こんな煩雑なことはしなくて済みます。

しかし、Yoast SEOのように、Gutenberg対応のブロックをすでに搭載しているツールを使いたいときは、Gutenberg併用にしておくほうがよさそうです。

Gutenbergのみの環境で、Gutenberg対応のテーマやプラグインで制作した場合は、ほとんど問題は発生しません。特殊なコードは、見なければ済みますし。

一方、すでに大型のWebサイトを制作していて、かつ、テーマやプラグインがGutenbergに完全対応できていないときは、エラー発生の可能性がとても高いです。
テーマをばりばりにカスタマイズしている場合には、あちこち問題が発生しそうです。

ぜひ、共存の道を探っていきましょう。

『WordPress はじめてのデザイン＆カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン＆カスタマイズ

著　者：茂木葉子、岩本修
監修者：星野邦敏、吉田裕介
出版社：技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売