WordPressGutenbergを使い始めるために必要なすべて

公開: 2018-01-23

2018年、WordPressは、グーテンベルクによるコンテンツ作成エクスペリエンスの近代化と簡素化を目指しています。その名前は、印刷機の創設者であるヨハネス・グーテンベルクに由来しています。これは、WordPressのユーザーエクスペリエンスとテーマ開発ワークフローにとって最大の変更の1つと見なされています。

グーテンベルクとは何ですか？

私たちのほとんどは、グーテンベルクは単なる新しい編集者だと思っていますが、それだけではありません。現在、エディターに焦点が当てられていますが、プロジェクトは最終的に、カスタマイズを含むパブリッシングエクスペリエンス全体に影響を与えます。

これまで、ページを編集するということは、タイトル、本文、カスタムフィールドを微調整することを意味していました。グーテンベルクでは、このロジックが完全に変更され、ブロックの概念が導入されています。ブロックは、wp-adminを介して動的に追加される、スタンドアロンの分離された動的なユーザーインターフェイスコンポーネントです。次のビデオですべてを詳細に説明しているので、これについては詳しく説明しません。

State of theWord2017に関するMattMullenwegGutenbergのプレゼンテーション

Gutenbergはすでにプラグインとして利用可能であり、2018年4月にリリースが予定されているWordPress 5.0に統合されます。その背後にあるチームは、現在、編集後のエクスペリエンスに重点を置いています。しかし、それ以降は、テンプレートの作成、サイトの作成などを含むようにアプローチを拡張します。グーテンベルクへの移行をスムーズにするために、クラシックエディターと呼ばれるプラグインがあります。これにより、チームは移行の作業中に現在のエディターを使用できます。

グーテンベルクが私にとって良いのはなぜですか？これはWordPressの将来にとって何を意味しますか？

グーテンベルクは間違いなく大きな変化であり、多くの開発者はそれに適応する必要があります。しかし、私の意見では、これはWordPressがこれまでに経験した中で最高の変化の1つです。 テーマ開発プロセスを最新化し、よりクリーンなコードベース、より優れたメンテナンスと編集によりモジュール化するためです。それはより高い信頼性を提供し、古いモノリシックなハッキング可能なアプローチを取り除きます。

ブロックを使用することで、ページを作成するすべての方法（ショートコード、ウィジェット、カスタムHTML、メディア、テキストフォーマット、埋め込み、メタボックス）を最適化および簡素化します。マットが彼の投稿で説明しているように：

開発者や代理店は、クライアントが物事を壊したり、カスタム投稿タイプを処理したりすることなく簡単に更新できるインタラクティブなテンプレートを作成できるようになります。
プラグイン開発者は、WordPressのすべての部分に完全に統合できるようになります。 TinyMCEをハックしたり、ツールバーボタンの後ろに機能全体を詰め込んだりすることなく、投稿、ページ、カスタム投稿タイプ、サイドバーを含めることができます。
テーマ開発者は、大量のプラグインをバンドルしたり、独自のページビルダーを作成したりする必要はありません。投稿用の豊富なレイアウトを作成し、インターフェイスでセットアップをガイドするための標準的なポータブルな方法があります。 20ステップのチュートリアルまたは長いビデオが必要です。
コア開発者は、最新のテクノロジで作業でき、15年間の下位互換性について心配する必要はありません。
ユーザーはついに自分の想像力で構築したサイトを作成できるようになります。彼らは、これまでやったことのないモバイルで何かをすることができるようになります。彼らは二度とショートコードを見る必要はありません。 Wordから貼り付けられたテキストはクリーンアップされ、自動的かつ瞬時にブロックに変換されます。

デモと例

WordCamp US 2017からのこの講演で、Mortenは、WordPress開発者が何に焦点を合わせる必要があるか、そしてWordPressがGutenbergでどのように変換されるかを説明します。

モルテンランドヘンドリクセン：グーテンベルクと明日のワードプレス

このスクリーンキャストでは、HumanMadeがGutenbergブロックの一連の高度な実装を示しています。

どうやって始めるのか

グーテンベルクエディターの限定フロントエンドライブデモであるフロンテンベルクで遊んでください。グーテンベルク編集環境に慣れることができます。

フロンテンバーグ–すぐにテストできるログアウトしたグテンバーグプレイグラウンド

グーテンベルクの背後にいる主任エンジニアの1人であるマティアスベンチュラバウセロからの次の記事を読んでください。

グーテンベルク、またはテセウスの船–大幅に変更することなく、システムを根本的に進化させるにはどうすればよいでしょうか。

これらのスケッチシンボルを試して、独自のカスタムブロックをデザインしてみてください。

Automattic / gutenberg-themes-sketch – gutenberg-themes-sketch –ブロック駆動型のWordPressテーマの設計に役立つスケッチファイルのセット

wordpress.orgの公式開発者ハンドブックを読んでください。クリーンで読みやすく、絶えず進化しています。また、更新を受け取るには、メーリングリストに登録する必要があります。

はじめに–「Gutenberg」は2017年のWordPressエディターフォーカスのコードネームです。

グーテンベルクはその上に構築されているので、ReactJSを掘り下げてください。

React –ユーザーインターフェイスを構築するためのJavaScriptライブラリ–ユーザーインターフェイスを構築するためのJavaScriptライブラリ

WordPressコアチームによって作成されたこれらのグーテンベルクの例をチェックしてください。

WordPress / gutenberg-examples = gutenberg-examples –ブロックを使用してWordPress/Gutenbergを拡張するための例

Human Made（最高のWP開発機関の1つ）によるこの詳細な電子書籍をお読みください。

新しいWordPressエディターであるGutenberg（ホワイトペーパー）–このホワイトペーパーでは、実装と採用における主要な課題と、企業が現在どのように行動できるかについてのアドバイスについて説明します。

最も人気のある教育プラットフォームFrontendMasters、Treehouse、Udemyの教育者であるZacGordonによるこの開発コースをチェックしてください。

ザックゴードンのグーテンベルク開発コース–グーテンベルクコース

最後に、AhmadAwaisによるWordPressGutenbergブロックプラグインを構築するためのこのゼロ構成開発者ツールキットをインストールします

ahmadawais / create-guten-block – WordPress Gutenbergブロックを構築するためのゼロ構成＃0CJS開発者ツールキット。

今のところこれですべてです。この投稿を読んでいただきありがとうございます。ご意見、ご質問、ご提案がございましたら、コメントを残してください。

ウェブサイトのパフォーマンス、セキュリティ、ホスティングエクスペリエンスのレベルアップを検討している代理店、企業、またはWordPress開発者の場合は、エンジニアリングチームにご相談ください。 当社のマネージドWordPressホスティングプラットフォームは、比類のないパフォーマンス、信頼性、技術的なカスタマーサポートを備えた業界最高のプラットフォームの1つと見なされています。

私たちのチームは、WordPress開発者がウェブサイトを構築、ホスト、拡張する方法を再定義する使命を帯びています。連絡を取り合い、気軽にご相談ください。