広告 WORDPRESS

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】

専業ブロガー7年目のあかね猫です

WordPressの一新されたエディタ「グーテンベルグ」の登場から4年以上が経つなかで、今なお絶大な人気を誇っている…

従来の標準エディタ「クラシックエディタ」

の導入方法と、それ以前に…

 

そもそも「クラシックエディタ」と「グーテンベルグ」とは?

 

といった点について、ブログ初心者さん向けに1から解説していきます

 



 

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド top-01

 

まずWordPressでは…

  • Classic Editor(クラシックエディタ)
  • Gutenberg(グーテンベルグ)

という「2種類の編集エディタ」のうちどちらか一方を選び、そのエディタ内で日々記事を作っていくことになります

つまり、記事を書くときの「編集画面のタイプ」のこと!
 

関連

「クラシックエディタとグーテンベルグ、結局どっちがおすすめ?」「クラシックエディタっていつまで使えるの?」という場合は、こちらをどうぞ ↓

WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【代替プラグインもあり】
WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【代替プラグインもあり】

続きを見る

 

で!

 

どちらのエディタを使っていくにしても、両者の「最低限のポイント」については、最初にしっかり押さえておくのがおすすめです

 

なぜなら、例えば「記事の作り方」についてググったりした際にも…

  • 「クラシックエディタ」用の解説
  • 「グーテンベルグ」用の解説

ここがごちゃ混ぜになってしまうと…

 

なんか自分の画面と全然違うんだけど…泣

 

といったケースにもなりかねないからですね(ブロガーあるある)

ということで、さっそく見ていこー!

\当ブログで愛用しています/

ACTION AFFINGER6 バナー 01-300px

インフォトップ
2023年度 WordPressテーマ売上

ACTION AFFINGER6

WordPress記事作成ガイド付き
(印刷もできる、初心者にうれしい実践型マニュアル!)

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【2024年4月】AFFINGER6の購入&導入手順を徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】

【1番の本質】AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー6年目が本気レビュー【WordPress愛用テーマ】
【1番の本質】AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー7年目が本気レビュー【WordPress愛用テーマ】

続きを見る

ACTION AFFINGER6は「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」ももちろん使用できます

 

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

WordPressのクラシックエディタとグーテンベルグ(ブロックエディタ)とは?

WordPress ヘッダー a-01

 

まずは、WordPressにおける2タイプの編集エディタ…

クラシックエディタとグーテンベルグとは?

という点について

 

この「クラシックエディタ」と「グーテンベルグ」とは、2018年冬にリリースされた…

WordPress5.0

という大型アップデートによって、結果的にユーザーが ”二分化” された編集エディタです

 

そもそも!

 

「WordPress5.0」がリリースされるまで、WordPressの編集エディタというのは通常…

クラシックエディタ

のみでした

以前はそれ一本だったから、「クラシックエディタ」っていう名前すらなかったよ
 

そこに、2018年末から登場した「WordPress5.0」によって…

 

編集エディタが抜本的に生まれ変わります

 

この生まれ変わった「新しい編集エディタ」というのが、ズバリ…

グーテンベルグ

のこと

 

従来のクラシックエディタが「Office Word」感覚のスタンダードな仕様だったのに対して、グーテンベルグは…

 

直感的な操作性

 

というのが、まず一番の特徴になります

 
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-01

「クラシックエディタ」の画面例

 
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-02

「グーテンベルグ」の画面例

 

そもそも「クラシックエディタ」では…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-03-a

↑ こちらの「ツールバー」エリアを中心に、例えば…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-03-b

↑ 任意のテキストを選択した状態で…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-03-c

↑「太字」アイコンをクリックすると…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-03-d

↑「太字」に変えられるなど、まさに「Office Word」のような ”基本に忠実な操作感” となっていて、ブログ初心者さんでも極めてとっつきやすい仕様です

安心感がハンパない
 

一方で!

 

WordPress5.0から登場した「グーテンベルグ」の場合、まず大前提として…

ブロックエディタ

という、少し特殊なスタイルが採用されています

 

この「ブロックエディタ」とは、例えば…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-04-a

↑ こういった記事の「段落」や「見出し」があったとしたら、その1つ1つを…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-04-b

↑ このように、それぞれを独立した ”ブロック” として扱っていくんですね

 

この「ブロック」という意味合いがよくわかる機能として、例えば…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-05-a

↑ こちらの「見出し」になっているブロックを選択した状態で…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-05-b

↑「上矢印」のアイコンをクリックしてみると…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-05-c

↑ このように、1つ上のブロックに「丸々移動」させることができます

スマホのアイコンみたいな感じだね
 

また!

 

グーテンベルグでは編集画面も ”最小限まで簡略化” されていて、使いたい機能があったときには…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-06-a

↑ その最小限しか表示されていないアイコンから…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-06-b

↑ このように「詳細メニュー」を呼び出す、といったスタイルが基本となっています

よくも悪くも ”スッキリさ” が追求されまくったエディタである
 

そんな ”今っぽい” 仕様に一新されたグーテンベルグでしたが、いざリリースされると…

「前の画面と変わりすぎて困ってる…」

「操作方法がサッパリわからない…」

「フツーに今までの画面で使わせてほしい…」

といった困惑の声が、SNS上などで続出したんですね

 

するとそういった切実な要望に応えるように、WordPress5.0以降のバージョンでも「以前の標準エディタ」に戻すことができる…

Classic Editor(クラシックエディタ)

というプラグインが登場します

 

この「Classic Editor」は、2023年時点でリリースからまだ「4年程度」にも関わらず…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 1-07

↑ 有効インストール数「500万以上」という驚異的な数字で、それだけ「クラシックエディタ」の需要や人気が高いことを示しています

 

もちろんClassic Editorは「無料」のプラグインで、導入方法も「インストール&有効化」だけと一瞬です

具体的な導入手順については、このあと解説するよ!
 

結果!

 

「WordPress5.0」がリリースされて以降、WordPressの編集エディタというのは…

  • 新エディタ → グーテンベルグ(ブロックエディタ)
  • 旧エディタ → クラシックエディタ(以前の標準エディタ)

にユーザーが実質 ”二分化” されることになったというのが、大筋の流れになります

 

個人的な体感としては、クラシックエディタが「Office Word」で、グーテンベルグが「スマホアプリ」のような印象です

参考までに、このブログでは「クラシックエディタ」を愛用してるよ!
 

関連

「クラシックエディタとグーテンベルグ、結局どっちがおすすめなの?」「クラシックエディタのサポート期限っていつまで?」という点については、別途こちらをどうぞ ↓

WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【代替プラグインもあり】
WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【代替プラグインもあり】

続きを見る

 

ということで、お次は「クラシックエディタ」の導入方法を見ていきましょう🐥

 



 

WordPressプラグイン「Classic Editor」の導入方法【デフォルトの「グーテンベルグ」から「クラシックエディタ」に変更するやり方】

WordPress ヘッダー a-02

 

つづいて、WordPressにデフォルトで設定されている「グーテンベルグ」から…

クラシックエディタ

へ編集エディタを変更する手順についてです

 

さきほどもお伝えしたように…

Classic Editor

という公式のプラグインを使います

「インストール」と「有効化」だけだから、1分もかからないよ!
 

はじめに

 

プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)

BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】
BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】

続きを見る

 

「AFFINGER6」ユーザーの方は…

WordPressテーマ「ACTION AFFINGER6」ユーザーさんで、今回のプラグイン「Classic Editor」を導入する場合は、AFFINGERに付属の…

Gutenbergプラグイン2

使用しませんので、有効化を「停止」しておきましょう(最初から有効化していなければ、気にしなくてOK!)

 

※上記の「Gutenbergプラグイン2」は、AFFINGER6で「クラシックエディタ」ではなく「グーテンベルグ」を使うとき用のプラグインです

 

WordPress管理画面の左側一覧から…

WordPressプラグインの導入手順(インストールと有効化) 1-01

↑【プラグイン】という項目にカーソルを合わせ、その右側に表示される【新規追加】をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグインの導入手順(インストールと有効化) 1-02

↑ こちらの検索フォームに Classic Editor と入力し、その下の検索結果から…

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド 2-01

↑ このアイコンが目印のプラグイン「Classic Editor」を探して、右上の「今すぐインストール」ボタンをクリックします

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ!
 

【今すぐインストール】ボタンが【有効化】という表示に切り替わったら、つづいて…

有効化

というボタンもクリックしましょう

 

WordPressプラグインの導入手順(インストールと有効化) 1-03

↑ このように「プラグインを有効化しました」というメッセージが表示されたら、プラグインの「インストール&有効化」はもう完了です

 

なお、この「Classic Editor」は有効化すればあとは勝手に機能してくれるので、特にプラグインの設定などは必要ありません🐥

 

関連

WordPressテーマ「ACTION AFFINGER6」における「クラシックエディタでの記事作成」については、当ブログガイドの第7章「記事投稿」編にて1から解説しています ↓

AFFINGER6の記事作成でおすすめな機能&使い方まとめ【ワードプレスブログ完全初心者ガイド/第7章TOP】
AFFINGER6の記事作成でおすすめな機能&使い方まとめ【ワードプレスブログ完全初心者ガイド/第7章TOP】

続きを見る

 

また同テーマの「デザイン・カスタマイズ設定」については、第6章「デザイン」編をどうぞ ↓

AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章TOP】
AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章TOP】

続きを見る

 

人気記事

 
 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

ワードプレスブログ「完全初心者」ガイド!

全8章の「総合TOP」ページです

ワードプレスブログ「完全初心者」ガイド

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS