WORDPRESS

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
 

専業ブロガー6年目のあずき猫です

 

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

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

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

 

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

 

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

 



 

WordPressクラシックエディタ・グーテンベルグとは?Classic Editorの導入方法まで top-01

 

まずWordPressでは…

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

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

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

関連

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

WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【ワードプレスブログ完全初心者ガイド/第4章/No.7】
WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【ワードプレスブログ完全初心者ガイド/第4章/No.7】

続きを見る

 

で!

 

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

 

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

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

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

 

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

 

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

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

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

ACTION AFFINGER6 バナー 01-300px

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

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

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

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

続きを見る

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

※2021年発表Infotop Affidemy

 

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

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

WordPress ヘッダー a-01

 

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

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

という点について

 

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

WordPress5.0

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

 

そもそも!

 

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

クラシックエディタ

のみでした

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

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

 

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

 

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

グーテンベルグ

のこと

 

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

 

直感的な操作性

 

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

 
クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-01

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

 
クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-02

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

 

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-03-a

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-03-b

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-03-c

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-03-d

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

安心感がハンパない
 

一方で!

 

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

ブロックエディタ

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

 

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-04-a

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-04-b

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

 

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-05-a

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-05-b

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-05-c

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

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

また!

 

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-06-a

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-06-b

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

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

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

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

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

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

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

 

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

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

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

 

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

クラシックエディタとグーテンベルグとは?「Classic Editor」の導入方法 1-07

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

 

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

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

結果!

 

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

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

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

 

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

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

関連

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

WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【ワードプレスブログ完全初心者ガイド/第4章/No.7】
WordPressクラシックエディタはいつまで使える?グーテンベルグとどっちがおすすめ?【ワードプレスブログ完全初心者ガイド/第4章/No.7】

続きを見る

 

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

 



 

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

WordPress ヘッダー a-02

 

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

クラシックエディタ

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

 

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

Classic Editor

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

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

注意

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

【2023年】BackWPupのおすすめ設定方法。自動バックアッププラグイン【ワードプレスブログ完全初心者ガイド/第4章/No.2】

続きを見る

 

「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】
【2023年】AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章TOP】

続きを見る

 

人気記事

 

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

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

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

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

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

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

当サイトでは、このサイト経由で商品やサービスを購入・契約していただくことで当サイトに紹介料が入る【アフィリエイトリンク】を使用しております

これは私(あずき猫)にとってのサイト運営というものが「1つの事業」であり、必要経費はもちろんのこと、それ以上に「膨大な時間やエネルギー」を費やしているためですが、ただ惜しむらくは当該システムを使用していることによる読者様にとってのメリットは特段ないという点です

せめてもの思いとして、こうして得られた紹介料を糧に「読者様のお役に立てる記事作り」「価値のあるコンテンツ制作」に一層努めていく所存ですので、何卒ご理解のほどお願い申し上げます

当サイトでは可能な限り正確な情報を掲載するよう努めておりますが、必ずしもその正確性を保証するものではありません

読者様におかれましては、当サイトをあくまでも主観的な情報の1つとして捉えていただき、「客観的、俯瞰的な視点」をもって活用していただければ幸いです

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

-WORDPRESS