グーテンベルクE01：ワードプレスグーテンベルクとは何ですか？

公開: 2018-07-09

PressidiumによるWordPressGutenberg開発シリーズの最初のエピソードへようこそ。 私たちのプロジェクトの今シーズンは、新しいWordPressEditorインターフェースをご案内します。 それが終わるまでに、グーテンベルクが何であるか、そしてそれがあなたのコンテンツで何ができるかをよく理解するでしょう。

しかし、そもそもなぜWordPressGutenbergを気にする必要があるのでしょうか。

では、WordPress Gutenbergとは何ですか？なぜそれが作成されたのですか？

WordPress Gutenbergは、バージョン5.0で導入される新しいWordPressエディターです。 その名前は、印刷機の発明者であるヨハネス・グーテンベルクに由来しています。 グーテンベルクの印刷機と同じように、ワードプレスグーテンベルクエディターは、人々がデジタルコンテンツを公開する方法に革命をもたらし、プロセス全体を直感的で使いやすいものにすることを目的としています。

「これはWordPressコミュニティにとって大きな変化であることを認識し、公式開発チームは、グーテンベルクの準備が整い、十分にテストされた後にのみ更新が行われることを発表しました。」

新しいグーテンベルク編集投稿画面！

さて、既存の編集投稿ページを新しいWordPressGutenbergエディターと比較してみましょう。

前

グーテンベルクエディター

後

ワードプレスグーテンベルクエディター

大きな違いですね

WordPressGutenbergでコンテンツを追加する方法

ブロックはあなたの新しい友達です

TinyMCEを使用すると、ショートコード、テキスト、見出し、リンク、ファイル、画像などを追加できる単一のリッチテキスト領域を持つ投稿本文フィールドがあります。

ワードプレスグーテンベルクエディターの前

一方、グーテンベルクはあなたの投稿本文をブロックのコレクションに変換します。

ブロックはコンテンツの個々の部分であり、コレクションにまとめると、最終的な投稿の本文を構成します。 ブロックには、テキスト、画像、リスト、表、地図、レシピ、カードなど、何でもかまいません。

グーテンベルクエディターブロック

ブロック構造を使用すると、コンテンツの移動、再配置、および個別の編集が簡単になります。 これは、すべてのページビルダーが達成しようと努力していることです。

このことを念頭に置いて、「グーテンベルクは高度で、最小限で、使いやすいページビルダーである」と言っても過言ではありません。 他のすべてのページビルダーが目指していることを簡単に実現できます。

なぜグーテンベルクエディターが作成されたのですか？

真実は、何年にもわたって、TinyMCEはコンテンツを編集するための有効で信頼できる選択でした。 WYSIWYGエディターに期待するすべてのものを提供し（表示されるものは取得するもの）、長年にわたって機能と信頼性を着実に向上させてきました。

それでも、TinyMCEにはいくつかの重要な機能がありません。

TinyMCEはもう適切ではありません

WordPressが最初に登場したとき、それは主にブログプラットフォームとして使用されていました。 これは、投稿の内容が非常に単純であることを意味しました。 当時は、タイトルと投稿本文だけを追加するだけで十分でした。 しかし最近では、これはもはや当てはまりません。

WordPressは強力で柔軟なCMSになりました。 この間にサイトも進化し、単純なテキストではもはやそれをカットできません。 ダイナミックコンテンツ、リッチメディア、およびこれらすべてをWordPressコアに統合する方法の必要性により、WordPressチームは旅を始めたエディターを放棄することになりました。

絶え間ない進化にもかかわらず、TinyMCEはWordPressで最初に出荷されたときと同じように見えます。 これは、ツールバーと、ユーザーがコンテンツを書き込むことができるメインの投稿本文のみで構成されています。 残念ながら、エディターの状況は以前とは異なります。 media.comやwix.comのようなコンテンツを編集するための多くのモダンで直感的なインターフェースがあります。

最新バージョンのWordPressのTinyMCE

Medium.comの編集者

wix.comのページエディタ

wixページエディタ

所有権と保守性–グーテンベルクの利点

TinyMCEは、Ephoxによって開発されたサードパーティのソフトウェアです。 確かに、ホイールを作り直さずにツールを使用することは有益ですが、そのツールは常にWordPressの現在または将来のニーズに合わせる必要のない別のものになります。

拡張性

テーマおよびプラグインの開発者は、コンテンツエディターにカスタム機能を提供するために、エディターにカスタムボタンを追加する必要があります。 残念ながら、TinyMCEはJavaScriptで記述された外部ツールであり、開発者は、WordPress（https://codex.wordpress.org/TinyMCE_Custom_Buttons）にフックするTinyMCEプラグインを作成する必要があります。

言い換えれば、これは、WordPress開発者も、単純な機能を追加するために、ある程度まではTinyMCE開発者である必要があることを意味します。

カスタムページとフィールドのデザインはメタボックスの狂気です

TinyMCEの弱点を考慮して、WordPress開発者コミュニティはそれらを克服するためにさまざまなプラグインとカスタムテーマ関数を作成しました。 ただし、多様性に加えて、一貫性が大幅に欠如しています。

WordPressの世界では、動的ページを作成する標準的な方法はありません。 したがって、すべてのWordPressサイトは、目的の結果を達成するために、テーマとプラグインの異なるカクテルを使用することになります。

Pressidiumであなたのウェブサイトをホストする

60日間の返金保証

私たちの計画を見る

編集投稿ページで同様のメタボックスを見たことがあるでしょう？

一方では、ご想像のとおり、これは信頼できるソリューションではありません。これは、各WP-Adminページが最終的に異なるため、ユーザーは異なる公開ワークフローに精通する必要があるためです。

一方、メタボックスはある程度の柔軟性を備えているため、非常に貴重です。 このため、WordPressチームはそれらをWordPressコアに統合することを決定し、すべての欠点を取り除きました。

ページビルダーとショートコードの狂気

「テーマフォレストで売れているテーマのトップ10には、すべてページビルダーが含まれています。 CodeCanyonで最も売れているプラ​​グインはPageBuilderです（残りはスライダーです…たくさんのスライダーです）」

ご覧のとおり、WordPressコミュニティではビジュアルコンテンツビルダーの必要性は明白です。   ただし、このジョブを外部プラグインに依存することには、多くの欠点があります。

  • ユーザーは、別のページビルダーを使用するたびに、新しいユーザーインターフェイスを学習する必要があります。 彼らは彼らの背後にある同じ哲学を持っているかもしれませんが、それでもコンテンツの新しいブロックを作成するための異なるフローを持っています。
  • すべてのビルダーには独自のAPIとアーキテクチャがあるため、開発者はメンテナンスと拡張性に関して苦労しています。

これは、Elementorページビルダーインターフェイスがどのように見えるかです。 他のWordPress管理者との一貫性はありません。

ページビルダーを使用すると、WordPressの最も基本的な機能であるコンテンツの編集と公開に取って代わると言っても過言ではありません。 それらの使用法は多くのホラーストーリーにつながりました。WordPressGutenbergは、コアコンテンツエディター機能を再考することでこの問題に対処することを目指しています。

さらに、ショートコードはWordPressのもう1つの強力ですが使い古された機能です。 ショートコードは、TinyMCEエディターができないものをコンテンツに挿入するために使用されます。 たとえば、列、カスタムボタン、お問い合わせフォームは、使用される最も一般的なショートコードの一部です。 残念ながら、ショートコードを多用すると、コンテンツが不明瞭になり、保守が困難になります。 ショートコードは、エディター内で、公開されたときにコンテンツがどのように表示されるかを示していないため、コーディングのように感じると言えます。

これは、ショートコードを使用してコンテンツに列を追加する方法です。

キャッチは何ですか？

グーテンベルクはWordPressに非常によく適合しており、その欠陥をカバーし、他の最新のツールと同等にしています。

ただし、WordPress Gutenbergは、コンテンツの作成方法とテーマおよびプラグインの開発方法に重大な変更を導入する予定です。

お気に入りの環境が再設計されたときに動揺し、すべてがどこに行ったのかを見つけようとする人の1人なら、新しいWordPressGutenbergエディターインターフェイスを詳細に紹介する次のエピソードをきっと気に入るはずです。 以下のリンクを使用して、興味のあるエピソードにスキップしてください！

  • グーテンベルクE02：新しいグーテンベルク編集投稿画面
  • Gutenberg E03：新しいGutenbergPostEditorの使用
  • Gutenberg E04：デフォルトのブロックの詳細
  • グーテンベルクE05：カスタムブロック
  • Gutenberg E06：WordPressサイトにGutenbergをインストールします
  • Gutenberg E07：追加のGutenbergリソースとツール