WordPress【Gutenberg】のコードエディタの使い方

この記事はプロモーションが含まれています。
WordPress【Gutenberg】のコードエディタの使い方

WordPressの使い方

コードエディタの使い方

Gutenberg は、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやCSSの知識を必要としない、編集方法になっています。また旧ビジュアルエディタよりさらに機能が追加されテーマのデフォルト装飾に依存することなく装飾をすることも可能になっています。

WordPress【Gutenberg】のコードエディタの使い方

Gutenbergは、「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor」 は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

コードエディタ

ソースコードで直接編集をしたいときには画面右端のオプションボタンをクリックします。少し下部にビジュアルエディターとコードエディターが上下に表示されているので、コードエディタをクリックします。

ブロックエディタで編集すると各ブロックがコメントアウトによって囲まれていることを確認できます。コメントアウトを削除してしまうとビジュアルエディタに表示されなくなったり、カラムレイアウトを使っている場合などはレイアウトが崩れてしまったりするので注意が必要です。

Crayon Syntax Highlighter でソースを色分け表示しています。

上記図のように意図しないところに空タグが作られてしまうことがあります。このことによって悪影響が出ることはないといえますが、あまり多いようなら削除しておきましょう。無駄にファイル容量を多くしてしまうと、表示スピードに影響を与えてしまうこともあります。

HTMLタグを手打ち編集される方も多いのではないかと思いますが、ブロックエディタで作成したページに追加もしくは挿入でコードを編集するとコメントアウトで囲むことはされませんので注意が必要です。保存時にWordPressが修正してくれることがありますが、正確でないこともまだあります。ブロックエディタで編集、コードエディタで確認と微調整程度の使い方がいいかもしれません。

ブロックエディタに変換

グーテンベルグ以前に作成したページをブロックエディタに変換するには、ブロックに変換機能を使います。まず、ページを編集モードで読み込みます。ブロックが設定されていないのでページ先頭部に下図のように クラシック と表示されているので、ここをクリックします。

すると ブロックへ変換 と表示されるのでこちらをクリック、これでページ全体がブロック化され、各ブロックがコメントアウトで囲まれます。

なお、ページ全体をブロック化せず、部分的にブロック化した部分をコピー挿入しても表示には問題ないようです。

メリットとデメリット

「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。」

サポート終了が近くなっていますが、「Gutenberg」への移行率が低くしばらくは「Classic Editor」も利用できそうです。

メリットデメリット
ブロックの種類が多い、カラムを分割することができる、ギャラリーやボタン、ウイジェットなども挿入できる。高度なデザインのページ編集ができる高度なデザインの記事を作るには便利ですが、高機能なことで操作が難しく感じられる
コンテンツの色やサイズを細かく設定できるブロックの生成作業が面倒、記事を書き進めるたびにブロックを選択して生成する手間が発生する
ブロックごとに簡単にコピーしたり入れ替えたりできるクラッシックブロックがビジュアルエディタにしか対応していない
Gutenberg のメリットとデメリット

Gutenberg への移行

「Gutenberg」はいづれWordPressのデフォルトエディタになることは間違いないでしょう。当初の予定では2021年12月31日で「Classic Editor」のサポートを終了するはずでした。しかし、その後思ったほど「Gutenberg」の使用率が高くないため、2022年以降、必要ならばサポート保守される方針に変更されました。

WordPress導入時から「Gutenberg」を利用しているサイトは問題ありませんが、「Classic Editor」でサイトを構築している場合はそれなりに準備をされることが推奨されます。エディタを切り替えることで表示されない等はありませんが、編集に戸惑ってしまう、編集に関するプラグインが利用できないといったことは発生します。(「Add Quick Tag」は機能しなくなります。)この際徐々に変更されるのがお勧めかもしれません。

WordPressのブロックエディタ(Gutenberg)は直感的に編集できる優れたエディタですが、記事を装飾したり、レイアウトデザインをしたいときには少し戸惑うこともあるかもしれません。編集機能がサポートされているテーマを利用すと悩みを解決できるかも。凝ったデザインや複雑なレイアウトを提供してくれる業者やフリーターを探すサービスも利用価値があるのでは?

有料で販売されているテーマにはWordPressのデフォルト機能をさらに拡張したものが多くページのデザインを細かく変更できるようになっています。

用途テーマ
コーポレートサイト・メディアEmanon LIQUID PRESS STORK19
SEOを強化したいザ・トール 賢威

※カスタマイズが自力で困難な場合プロに依頼すると実現でき、オリジナルなサイトを構築することができます。

ココナラ

【ココナラ】は クリエイターへの制作依頼から個人の悩み解決までできる、スキルのオンラインマーケットです。
《Webサイト制作・Webデザイン》 ホームページ制作/ECサイト制作/LP制作/WordPressカスタマイズ

《デザイン》 ロゴデザイン/チラシデザイン/図面・CAD/名刺デザイン

《動画・アニメーション・撮影》 動画広告/結婚式ムービー/YouTubeOP作成/アニメ制作

《イラスト・漫画》 SNSやTwitterのアイコン/キャラクター作成/2D・3Dモデリング

WordPressサイトの運用の注意点
WordPressは、プラグインの利用によって多くの拡張機能を簡単にサイト内に取り込むことができ、大変便利なものです。しかしながら全ての処理をサーバー上で行うため、突然のトラブルや表示速度に影響が出てしまうことがあります。レンタルサーバーのバックアップ機能や表示速度にも注目しておきましょう。

★レンタルサーバーを比較★