WordPressGutenbergチュートリアル
公開: 2019-03-09最も用途が広く使いやすいCMSとして数十年にわたって人気を博した後、WordPressは常に頻繁な技術的アップグレードでユーザーを感動させることができました。 最新バージョン5.0では、WordPressは新しいビジュアルエディター「Gutenberg」を考案しました。 それでは、グーテンベルクとブロックをわかりやすく説明しましょう。 新しいシステムはどのように機能しますか？ 以前持っていたエディターよりも優れていますか？ グーテンベルクエディタからすべての利点を引き出すために、グーテンベルクと短いチュートリアルを紹介します。
「グーテンベルク」とは何ですか？
Matt Mullenwegは、WordCamp Europe 2018で従来のWordPressエディターを置き換えるための新しいアプローチを考案しました。これは「Gutenberg」と呼ばれ、開発中のプロジェクト名として意味されていました。 WordPress 5.0でリリースされたGutenbergプロジェクトは、より具体的には「WordPressEditor」または「BlockEditor」と呼ばれるようになりました。 ドラッグアンドドロップWebビルダーの今日の傾向に従って、従来のエディターは少し時代遅れになりました。 その結果、WordPress Gutenbergと、Webサイトやページビルダーツールに類似するように設計されたまったく新しいWordPressエディターが完成しました。
グーテンベルクで機能するテーマ
何千ものテーマが利用可能ですが、多くは時代遅れです。 グーテンベルクのテーマをリリースする新しい素晴らしいショップをいくつか紹介します。
Gutenbergで動作するプラグイン
WordPress市場にはたくさんのプラグインがありますが、すべてがGutenbergエディターで動作するわけではありません。 これがいくつかあります。
「ブロック」とは何ですか？
ブロックは単にコンテンツのチャンクです。 それは、テキストの段落、オーディオファイル、写真またはフォトギャラリー、あるいはビデオでさえあり得ます。 これは、グーテンベルクの編集体験の基盤です。 ブロックは、投稿やWebページを作成するために使用されます。 ユーザーが通常WordPressにパックするのは、Gutenbergに組み込まれている標準ブロックであり、Gutenbergエディターを使用しているすべてのWordPressサイトで利用できます。 グーテンベルクは、プログラマーが利用可能なブロックを拡張および拡張できるように作成されました。 ブロックは、プラグインまたはテーマを使用して追加できます。 したがって、ユーザーは標準ブロックに制限されるのではなく、追加のブロックにアクセスできます。
グーテンベルクをWordPressエディターとして使用する
WordPress 5.0を使用している場合は、5.0のデフォルトのテキストエディタとして「ブロックエディタ」または「グーテンベルクエディタ」が組み込まれています。 今日は、新しいブロックエディタに慣れるためのお手伝いをします。 まず、新しい投稿を作成するには、[投稿]の下の[新規追加]を押します。 これで、操作する新しいブロックができました。
これは非常に異なって見えますね？ クラシックエディタからはツールバーがありません。 機能とそれらのボタンに慣れましょう。
トップセクション：
このトップセクションを使用すると、新しいブロックを追加したり、ブロックの変更に対して元に戻すややり直しなどのアクションを実行したりできます。 単語数、見出し数、段落数、ブロック数などのコンテンツ構造情報を表示することもできます。 「i」ボタンを使用してブロック内を移動することもできます。
下書きへの保存、投稿のプレビュー、投稿の公開などの基本的な投稿編集機能の一部は、上部のセクションにあります。 歯車のアイコンは、右側のサイドバーに表示されている設定を示しています。 ここでは、「ドキュメント」と「ブロック」の設定ビューを切り替えることができます。
ドキュメントの断面図は、従来のエディターと非常によく似ています。 ここでは、ステータスと可視性、カテゴリ、タグ、特徴画像、属性を選択することもできます。 ブロック断面図では、追加されたブロックの設定を変更できます。 この機能を使用すると、ブロックの設定を簡単に変更したり、フォントサイズ、ドロップキャップなどの機能を変更したりできます。 各ブロックの個別の背景色、および各ブロックの追加のCSSクラスを個別に有効にすることもここから追加できます。
最後に、上部のセクションにある3つのドットは、追加の設定を示しています。 ここから、ブロックエディタのルックアンドフィールをカスタマイズできます。 ブロックのツールビューを選択できます。 「ビジュアルエディター」と「コードエディター」のどちらかを選択することもできます。 再利用可能なブロックの管理、キーボードショートカットの作成、コンテンツのコピーを行うためのツールもいくつかあります。
ブロックの追加
新しいエディタの主なアイデア、つまりブロックの追加がここにあります。 すでに述べたように、ブロックは新しいブロックエディタのコア部分です。 エディターページの左上を見てください。 これにより、特定の目的のために設計された目的のタイプのブロックを選択できるドロップダウンメニューが表示されます。 検索バーを使用して、ニーズに合った正しいブロックを見つけることができます。
さらに、メニューを下にスクロールすると、基本的な機能に基づいてさらにいくつかのブロックが表示されます。 これらは、共通ブロック、フォーマット、ウィジェット、埋め込みなどです。クリックするだけで、必要な適切なブロックを選択するだけです。
次に、ブロックにコンテンツを追加し始めると、小さなツールバーも表示されます。 このツールバーの機能は、選択したブロックのタイプによって異なります。 これらのツールバーは、配置、スタイル、リンクなどのコンテンツのスタイルの編集を実行するためにあります。 ブロックタイプの変更ボタンは、現在のブロックスタイルを変更するためにあります。 たとえば、段落ブロックを見出し、書式設定済みブロック、リスト、引用、または詩に変更できます。 最後の3つのドットは、ブロック設定の非表示、複製の作成、HTMLとしての編集、再利用可能なブロックへの追加、そしてもちろんブロックの削除など、いくつかのオプションを提供します。 オプションinsertbeforeおよびinsertafterを使用して、さらにブロックを挿入することもできます。 これは、コンテンツを追加したり、いくつかの簡単な修正を行う必要がある場合に便利です。 選択したオプションに応じて、選択したブロックの前または後にブロックを追加するだけです。 システムは非常に直感的で、すぐに意味があります。
ブロック設定の変更
すべてのブロックは、要件を満たすようにカスタマイズできます。 カスタマイズするブロックをクリックするだけで、右側のサイドバーでブロックをカスタマイズできるさまざまなスコープが表示されます。 このオプションは、上部の歯車または特定のブロックのツールバーを使用して表示または非表示にできることに注意してください。 ブロック設定は、選択したブロックのタイプによっても異なります。 たとえば、段落ブロックを使用している場合、ブロック設定では、フォントサイズ、フォントタイプ、または背景色を選択できます。 ブロックをカスタマイズするためのすべてのオプションがあり、通常はそこにあると想定します。 グーテンベルクは非常にユーザーフレンドリーで、新しい開発者が簡単に理解できます。
WordPressGutenbergチュートリアルのまとめ
この短いWordPressGutenbergチュートリアルが、WordPress5.0にパックされた新しいエディターに慣れるために役立つことを願っています。 このガイドを読んだ後は、「グーテンベルク」の初心者ではなくなると確信しています。 新しいブロックエディタは、使いやすいだけでなく、非常に多くのオプションを使用してサイトを非常に高速に作成できるため、強力です。 カスタムブロックを作成し、ツールを使用してルックアンドフィールをカスタマイズすることは、このブロックエディターの強力な機能です。 新しいブロックを追加したり、コンテンツを追加したりするための使いやすいインターフェイスもあります。 実際に古いエディターの方が好きで、新しいエディターが気に入らない場合でも、心配する必要はありません。 いつでもクラシックエディタに戻すことができます。 これは両方の長所であり、人々が最も生産性の高いエディターを使用できるようになります。