WordPressブロックエディタのコードエディタの使い方

この記事はプロモーションが含まれています。

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

コードエディタ

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

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

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

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

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とは

WordPressは無料で利用できるCMS(Contents Management System)であることから、多くの企業やブロガー、アフェリエイターによって運用されています。特徴の一つにテーマ・テンプレートを切り替えることで簡単にサイトのデザインを変更できることです。なかでも、Wordpress有料テーマはおしゃれでカスタマイズしやすいのが大きなメリットです。 WEBサイト運用するための機能も標準として装備されているので、プラグインの追加をしなくても十分使用することが可能です。

WordPress運用のポイント

WordPressは非常に人気のあるコンテンツ管理システム(CMS)で、ブログやウェブサイトの作成・運営に広く利用されています。そんなWordPressの運用にあたっては考慮すべきポイントがいくつかあります。

テーマの選定とカスタマイズ】適切なテーマを選び、必要に応じてカスタマイズすることで、サイトのデザインやユーザビリティを向上させることができます。

【プラグインの管理】必要な機能を追加するためにプラグインを使用しますが、不要なプラグインは削除し、定期的に更新することが推奨されます。これにより、セキュリティリスクを軽減できます。

※有料WordPressテーマはカスタマイズが容易で、豊富な機能が装備されているのでおすすめといえるでしょう。

【定期的なバックアップ】データの損失を防ぐために、定期的にバックアップを取ることが重要です。プラグインを利用することやレンタルサーバーのバックアップを活用しましょう。

セキュリティ対策】WordPressは人気があるため、攻撃の対象になりやすいです。セキュリティプラグインの導入や、定期的なパスワード変更、SSL証明書の導入などが推奨されます。

パフォーマンスの最適化】サイトの表示速度を向上させるために、キャッシュプラグインの利用や画像の最適化を行うことが重要です。

【SEO対策】検索エンジン最適化(SEO)を意識したコンテンツ作成や、SEOプラグインの活用が重要です。これにより、検索結果での表示順位を向上させることができます。

ユーザーエンゲージメント】コメント機能やSNSとの連携を活用し、訪問者とのコミュニケーションを促進することも大切です。

※SEO対策やSNSとの連携は専門知識も要求されます、外部サービスの利用を検討されてはいかがでしょう。

有料WordPressテーマのメリット

WordPressテーマには、テーマディレクトリからダウンロードして利用できるものの他に、無料で公開されているもの、WEB制作会社等から販売されているものがあります。有料テーマを利用するメリットには以下のものがあります。

  • デザイン性が高くなる
  • 業種・目的に合ったテーマを選びやすい
  • カスタマイズをしなくても使える
  • プラグイン・ウィジェットの機能が充実している
  • 記事の装飾機能が充実している
  • 記事の作成に集中できる
  • 無料テーマよりもSEOが強い

wordpress.org で公開されているテーマは無料で利用できることが魅力ですが、カスタマイズやプラグインの導入などが必要です。その点有料テーマはカスタマイズの柔軟性やプラグインを利用しなくても十分機能をもたされているので、関連のスキルを学習することなくサイトの運用を開始できます。