WordPressエディターの使用方法

CMSとしてのWordPressには、非常に堅牢な機能セットがあります。 プラグインとウィジェットは人々をプラットフォームに引き付けますが、中に入ると、本当の力はWordPressエディター自体からもたらされます。 プラットフォームでの目標に関係なく、投稿/ページエディターを大部分使用します。 そこで、WordPressエディターを最大限に活用して、コンテンツを輝かせ、サイトを繁栄させる方法を紹介したいと思います。

私たちのYoutubeチャンネルを購読する

WordPressエディターとは何ですか？

技術的には、3つのWordPressエディターから選択できます。 WordPress 5.0のリリースに伴い、エディターは当時のデフォルトのTinyMCEから現在のブロックエディターに変更されました。 その変更の中で、Gutenbergエディタープラグインは、WordPress Coreに組み込む前に、BlockEditorの新機能をベータテストするためのブリッジとしてリリースされました。

5.0以降のWPではブロックエディタがデフォルトですが、必要な3つのうちのいずれかを使用することを選択できます。 クラシックエディタープラグインをインストールして古いTinyMCEを維持するか、グーテンベルクプラグインをインストールしてエディターの最新機能（不安定になる可能性があります）を維持するか、デフォルトのブロックエディターを維持することができます。

デフォルトのエディター以外の使用に伴う追加の手順（およびGutenbergプラグインの固有の不安定性と変化する性質）を考慮して、この投稿ではデフォルトのブロックエディターのみに焦点を当てます。 ただし、基本はGutenbergと同じであり、Classic Editorプラグインに含まれるTinyMCEは、特定のリッチテキストエディターまたはワードプロセッシングソフトウェアと同等の基本機能を備えていることに注意してください。以上、一般的には機能ではなく、美学のみが異なります。

それでは、WordPressエディターの使い方を学びましょう。

WordPressエディターの基本

ページまたは投稿（またはカスタム投稿タイプ）を作成するときはいつでも、ブロックエディターを使用します。 あなたはそれを開くことに関するチュートリアルモーダルを提示されます、そしてあなたはそれが提供する4つのスライドを通してそれに従うことによって基本を学ぶことができます。 それを閉じると、基本的なエディターが表示されます。

基本的なWordPressブロックエディターは5つの要素で構成されています。 さまざまなプラグインによってさらに追加できますが、これらは、日々作業する基本機能を提供します。

1. タイトルブロック–ここに入力したものはすべて、投稿/ページのプライマリH1タグとして表示されます。
2. ブロック/コンテンツ領域–これは、投稿またはページのコンテンツを構成するさまざまなブロックを追加する領域です。
3. [ブロックの追加]ボタン–円の中に+が表示されているときはいつでも、それをクリックして新しいブロックを追加できます。 ドロップダウンが表示され、そこから挿入するタイプを選択します。 これらはすべてまったく同じように機能するため、ブロックの右側、ブロックの下、または画面の隅にあるものをクリックしても、同じオプションが表示されます。
4. [ドキュメントオプション]タブ–このタブの下には、カテゴリ、タグ、パーマリンク、コメントのオン/オフ切り替えなど、あらゆるものがあります。 プラグインはここにオプションを追加する場合がありますが、それらは常にページ全体または投稿自体に適用されます。
5. [ブロックオプション]タブ–このタブは、強調表示したブロックのオプションを処理します。 段落ブロックをクリックすると、そのブロックのオプションのみを編集します。 他のブロックも、ドキュメント自体も変更されません。

以下では、これらの領域の詳細と、それらを使用して可能な限り最高のコンテンツを作成する方法について説明します。

ブロックとは何ですか？

あなたは私たちがこの投稿でブロックについてすでに言及しているのを見ましたが、それらは何ですか？ ブロックは、ページまたは投稿の単一のカスタマイズ可能な要素です。 単一の段落、リスト、画像、またはギャラリーにすることができます。 これらのブロックは、自由に移動および調整でき、個別にカスタマイズでき、WYSIWYGエディターでは不可能な方法でコンテンツをきめ細かく制御できます。 （Diviユーザーの場合、モジュールは同じように機能するため、すでにこの概念に精通しています。）

上記のように、ページの各要素は独自のブロックに含まれています。 WordPressブロックの完全なリストは、WordPressサポートドキュメントで確認できます。

ブロックのグループを作成する方法

ブロックのグループは、単一のブロックとして機能するように設定したブロックのコレクションです。 それらを移動して、単一のユニットであるかのようにスタイルを設定しますが、グループは複数の要素で構成されています。

グループの作成は簡単です。 ブロックをクリックしてから、ShiftキーまたはCtrlキーを押しながら別のブロックをクリックするだけです。 投稿内のすべてのブロックをグループ化する場合は、CTRL / CMD –Aを押してすべてを選択できます。 次に、左上のアイコンが小さなブロックで構成された正方形に変わったら、それをクリックして[グループに変換]を選択できます。

グループ化を解除する必要がある場合は、3つのドットのドロップダウンボタンをクリックして、[グループ化解除]を選択します。

ブロックは再び個人として機能します。

再利用可能なブロックとは何ですか？

設定メニューから、ワンタイムブロックの任意のブロックを再利用可能なブロックに変えることができます。 再利用可能なブロックはテンプレートではなく、サイトのグローバルブロックです。 ブロックまたはブロックのグループを作成し、[再利用可能なブロックに追加]をクリックします。

その再利用可能なブロックに加えられた変更または編集は、サイト全体に反映され、編集したものだけでなく、ブロックのすべてのインスタンスが変更されます。 再利用可能なブロックの完全なガイドがあり、トピックの詳細を確認できます。

タイトルブロック

上記のタイトルブロックは、投稿またはページのプライマリH1タグです。 また、投稿のパーマリンクスラッグも生成されますが、投稿を少なくとも1回保存すると、編集できます。 これは、 .post-titleや.entry-titleなどのCSSセレクターが取得するものにもなります。 （ただし、SEOプラグインを使用すると、検索エンジンに表示する内容を設定できます。）

これは、WordPressエディター内で削除または再配置できない1つのブロックです。 さらに調整するには、CSSまたは外部のページビルダー設定を使用する必要があります。

ブロック/コンテンツエリア

基本的に、コンテンツ領域は入力する場所と見なすことができます。 必要に応じて、ブロックをまったく考慮せずに、入力を開始し、投稿全体を書き出すことができます。 すべての主要な点で、これはTinyMCEの単純なWYSIWYG領域に置き換わるものであり、WordPressエディターの最大の変更点です。

ただし、ブロックエディタを使用すると、それ以上のことができます。 「Enter」または「Return」を押すたびに、新しい段落ブロックが追加されます。 別の種類のブロック（任意の種類）を追加するには、円の+をクリックすると、使用可能なすべてのブロックのドロップダウンが表示されます。 それらも異なるカテゴリーに設定されているので、必ずスクロールしてください。 必要な種類がわかっている場合は、特定のブロックを検索することもできます。

YouTubeビデオブロック、画像、ギャラリー、オーディオプレーヤー、リスト、引用などを追加できます。 それぞれに独自の設定とスタイリングオプションがあります。 さらに、ブロックを使用すればするほど、WordPressエディターはそれを一般的に使用されるブロックとして認識し、[最も使用されている]の下に一覧表示するため、スクロールしたり検索したりする必要がなくなります。 再利用可能なブロックとブロックのグループは、[最も使用済み]の下にも表示されます。

このセクションの画像を見ると、 （1）は、ブロックが選択されたときに各ブロックに表示される並べ替えボタンを指しています（ブロックをクリックして選択するだけです）。 （2）は、ブロックを削除したり、その内容をHTMLとして編集したり、クローンを作成したり、ブロックの周囲に新しいブロックを追加したりできるドロップダウンを指します。

ただし、これらのオプションと設定は、前述の画面の右上隅にある[ブロックオプション]タブとは異なり、次のセクションで説明します。

ドキュメントの概要、単語数、その他の情報

ページの上部のツールバーに、円の中にiがあります。 それをクリックすると、ドキュメントの構成の完全な概要が表示されます。

見出しブロックを使用している限り、単語数、段落番号、ブロック数に加えて、ドキュメントのアウトラインが表示されます。 見出しブロックがない場合、そのセクションはありません。 ドキュメントアウトラインの任意の要素をクリックすると、そのブロックに直接移動できます。 この機能は、長いドキュメントでは非常に役立ちます。

その横にあるネストされたリストアイコンをクリックすると、アウトラインの見出しだけでなく、投稿内のすべてのブロックの順序付きリストも表示されます。

ここでも、リスト内の任意のものをクリックして、そのブロックに直接移動して選択できます。

[ブロックオプション]タブ

WordPressエディターの右上隅に、[ブロック]というタブが表示されます。 ブロックが選択されている限り、そのブロックタイプのオプションのコンテキストセットを取得します。 ただし、行った変更は、選択した1つのブロックにのみ影響します。

たとえば、このタブで画像のサムネイルサイズを変更したり、段落に色の背景を追加してアラートを作成したり、見出しのフォントサイズを調整したりできます。 [ブロック]タブを開いている場合、オプションは選択した特定のブロックに変わります。 段落ブロックが強調表示されている場合は、これが表示されます。

画像ブロックを選択すると、[ブロック]タブがこれに変わります。

各ブロックには、そのタイプのブロックにのみ適用される（そして、その特定のブロックでのみレンダリングされる）調整可能な特定のオプションがあります。 ただし、すべてのブロックのタブには、CSSクラスをそのブロックに適用できる[詳細]セクションがあります。 次に、外部のスタイルシートとコードを使用して、適切と思われるスタイルを設定できます。

[ドキュメントオプション]タブ

[ブロックオプション]タブの左側には、[ドキュメントオプション]タブがあります。 過去にWordPressを使用したことがある場合、これらはおなじみです。 ここでは、投稿のカテゴリ、タグの調整、注目の画像の追加、パーマリンクスラッグの調整、テーマ/ SEOで使用するための抜粋の追加、コメントの有効化または無効化を行うことができます。

これらの各セクションは、TinyMCEWYSIWYGエディターのどこに何があったかとほとんど同じです。 これらは投稿またはページ全体に適用され、単一のブロックまたはサイト全体には適用されません。 さらに、上の画像でわかるように、WPロケットオプションボックスがあります。 一部のプラグインはこの領域にボックスを適用しますが、コンテンツやブロックではなく、常にドキュメント自体に直接関係します。

追加の投稿メタボックス

投稿のメタボックスは、プラグインがコンテンツ自体の新しいオプションと機能を追加する場所です。 それらは、コンテンツ領域の最後、ブロックの下に表示されます。

このセクションに表示される内容（ある場合）は、インストールしたプラグイン（またはその領域を利用する可能性のあるテーマ機能）によって異なります。 SEOプラグインは、この領域を多く利用し、ドキュメントの詳細ではなく、ページのコンテンツと何らかの方法で対話できるようにする他のすべてのものを利用します。

WordPressエディターオプションのドロップダウン

画面の右上にある3つのドットのドロップダウンアイコンをクリックすると、大きな垂直ドロップダウンが表示されます。 ここでいくつかの設定を調整できます。これらはすべて、ドキュメント、ブロック、またはコンテンツではなく、エディター自体に適用されます。

ほとんどの場合、これらは、再利用可能なブロックの管理、キーボードショートカットのリストの提供、冒頭で説明したウェルカムガイドの再開など、かなり簡単なオプションです。

ただし、最も頻繁に使用されるオプションのいくつかは、最上部近くにあります。 具体的には、トップツールバー、フルスクリーンモード、およびビジュアル/コードエディターモードの切り替えです。

トップツールバーの切り替えは、選択したブロックのオプションが、前述のようにブロックの左上近くにコンテキストメニューとして表示されるのではなく、画面上部の固定領域に表示されることを意味します。

フルスクリーンモードでは、WordPress管理ダッシュボードのオンとオフを切り替えます。 フルスクリーンモードを無効にすると、左側のサイドバーに、投稿、ページ、外観、設定、ツールなどの一般的なダッシュボードオプションが表示されます。

また、ビジュアル/コードエディターの切り替えは、TinyMCEエディターとまったく同じように機能します。 これまでのこの投稿の例は、ビジュアルエディターを使用したものです。 つまり、投稿を書くと、その投稿が視覚的に表示されます。 押すボタン、コンテキストメニュー、および設定を変更するとリアルタイムでレンダリングされます。 ただし、コードエディタはまさにそれです—コード。 プレーンテキストとHTMLで書き込む簡単なテキストボックスがあります。

これは通常、エディターの問題をトラブルシューティングするため、または単一の領域またはブロックを微調整するために行われます。 または、複数のブロックにまたがって正しくフォーマットされない外部エディターで記述されたコンテンツを貼り付けることもできます。

ブロックエディターは特定のHTMLタグを使用して、レンダリングするブロックの種類をWordPressに指示するため、 <！– wp：paragraph –>のようなコードはそのままにしておくようにしてください。 そうしないと、物事がかなり乱雑になる可能性があります。

グローバルWordPressブロックエディターのショートカット

ブロックエディタには、独自の気の利いたショートカットのセットも付属しています。 それらはすべてTinyMCEと同じではありませんが、同様に有用であり、学ぶことも同様に重要です。 最も有用なものをメモリにコミットすることで、経験から言えば、多くの時間と手間を節約できます。 Shift + Alt + Hを押すと、WordPressエディター自体に次のショートカットのリストが表示されます。

ドキュメントのショートカット

• ビジュアルエディターとコードエディターの切り替え– Ctrl + Shift + Alt + M
• ブロックナビゲーションメニューを開く– Shift + Alt + O
• 設定サイドバーの表示または非表示– Ctrl + Shift +、
• エディタの次の部分（ Ctrl + `またはShift + Alt + N）に移動します
• エディタの前の部分に移動します– Ctrl + Shift + `またはShift + Alt + P
• 最も近いツールバーに移動します– Alt + F10
• 変更を保存する– Ctrl + S
• 最後の変更を元に戻す– Ctrl + Z
• 最後の元に戻す– Ctrl + Shift + Z

選択のショートカット

• 入力時にすべてのテキストを選択します。 もう一度押すと、すべてのブロックが選択されます– Ctrl + A
• 明確な選択– ESC

ブロックショートカット

• 選択したブロックを複製します– Ctrl + Shift + D
• 選択したブロックを削除します– Shift + Alt + Z
• 選択したブロックの前に新しいブロックを挿入します– Ctrl + Alt + T
• 選択したブロックの後に新しいブロックを挿入します– Ctrl + Alt + Y
• 選択した複数のブロックを削除する-デルやバックスペースを
• 新しい段落を追加した後、ブロックタイプを変更します– /

テキストショートカット

• 選択したテキストを太字にする– Ctrl + B
• 選択したテキストを斜体にする– Ctrl + I
• 選択したテキストをリンクに変換する– Ctrl + K
• リンクを削除する– Ctrl + Shift + K
• 選択したテキストに下線を引く– Ctrl + U

まとめ

WordPressエディターは、過去10年間で長い道のりを歩んできました。現在のブロックエディターは、次のエディターを実行するのに十分なほど強力です。 ページ上のすべての要素をきめ細かく制御する機能により、以前よりも速く、簡単に、そしてはるかに効率的にコンテンツを作成できます。 ただし、現在のブロックエディターが適切でない場合は、クラシックエディタープラグインが存在します。最先端のプラグインを使用している場合、Gutenbergプラグインは、WordPressコアのデフォルトエディターよりも数リリース進んでいます。 したがって、どちらの方法で作成する場合でも、WordPressで対応できます。

WordPressエディターについて共有したいヒントやコツはありますか？ コメントで教えてください！