WordPressブロック：詳細ガイド
公開: 2021-10-02WordPressブロックは、WordPressのWebサイト用のドラッグアンドドロップGutenberg編集システムの主要コンポーネントです。
ブロックの使い方を学ぶ最も簡単な方法は、実践的な練習ですが、ブロックとは何か、ブロックで何ができるかを理解することで、ページ作成をより効率的で楽しいものにすることができます。
WordPressサイトの作成に不慣れな場合でも、高度なスキルの開発を検討している場合でも、このガイドでは、ブロックとは何か、人々が使用する一般的なブロック、それらの使用方法、およびサイトを改善できるその他の情報について詳しく説明します。
詳細：WordPress Webサイトのデザイン：WordPressWebサイトを最初から作成する方法
WordPressブロックとは何ですか？
WordPressブロックは、WordPressのGutenberg編集システムを使用してブログ投稿またはWebサイトページに追加できるテキスト、メディア、またはカスタムコードの目立たない要素です。
ほとんどの人はブログでの使用に焦点を合わせていますが、多くのWebサイトの他のほとんどのページでうまく機能します。
WordPressブロックは、各要素を手動でコーディングする必要をなくすことで、読者に見栄えのする投稿やページの作成を簡素化するために存在します。 代わりに、各ブロックをドラッグして再配置し、ページの外観をカスタマイズできます。
各ブロックは機能的にはページ上の自己完結型の要素であるため、1つのブロックを変更しても他のブロックは変更されません。
市場に出回っているブロックタイプの編集システムはこれだけではありません。 Ghostなどの一部の競合サービスには、Webサイトの作成に使用できる堅牢なエディターもあります。
ただし、Ghostは主にブログプラットフォームであり、そのエディターはそれに焦点を当てていますが、WordPressのエディターはWebサイトにブログ以外のページを作成するのにも役立ちます。
これらのブロックは、別のコンテンツ管理システムであるDrupalとも異なります。
DrupalはWebサイトの複数の部分に表示される可能性のあるブロックに焦点を当てていますが、WordPressは1ページの個々の部分に焦点を当てています。
コンテンツは簡単に複製できますが、ブロック自体はリンクされておらず、編集してもすべてが変更されるわけではありません。
詳細：ランディングページのデザイン：10のインスピレーションあふれる、コンバージョン率の高いランディングページ
グーテンベルクの歴史
グーテンベルクはWordPressの現在のエディターです。
当初は2018年にリリースされましたが、その後、Webページやブログ投稿の高速で強力な編集を提供できるより成熟したシステムに成長しました。
開発者が完全なサイト編集に使用したいので、まだ完了していませんが、起動時よりもはるかに多くの機能を備えています。
Gutenbergが存在するのは、多くのWordPressユーザーが、コードを編集せずにブログを作成して、すべてを美しく見せるための、よりクリーンでシンプルな方法を望んでいたためです。
ここで、WordPressはコーディングの知識がほとんどない多くのカジュアルユーザーを引き付けることを理解することが重要です。
これは比較的時間のための知識をコーディング高度いない限り、あなたもウェブサイトを持っていないインターネットの黎明期から、シャープの違いです。 言い換えれば、WordPressは、クリックアンドドラッグプロセスがより理にかなっているカジュアルマーケットをサポートしたいと考えています。
グーテンベルクの二次的な考慮事項は、人々がブログを書く方法と場所です。
一部のWebサイト所有者は、手動で書き出す代わりにテキスト読み上げシステムを使用しますが、ドラッグアンドドロップ編集システムを使用すると、スマートフォン、タブレット、その他のデバイスでWebサイトを簡単に作成できます。
ただし、古い編集システムを好む人もいます。 それでも、コードを管理できるユーザーに対してはるかに多くの制御とサポートを提供するため、これは当然のことです。
グーテンベルクは強力なエディターですが、必然的に、ユーザーが実行できるいくつかのことを制限します。 純粋なコーディングほど柔軟なものはありませんが、グーテンベルクはほとんどのニーズに対してより高速で簡単です。
詳細：コンバージョン率の最適化：完全ガイド
クラシックエディタとブロックエディタの切り替え
WordPressは、柔軟性は通常、すべての人に1つのシステムを使用させるよりも優れていることを知っています。そのため、従来のシステムとブロック編集システムを切り替えることができます。
ほとんどの場合、編集ビューを切り替えるには、サイト管理者である必要があります。
ただし、正しいアカウントでログインすると、画面上部のボタンをクリックして、ページを変更するときに各ページのエディターを変更できます。
これはほとんどのユーザーが知る必要があるすべてですが、さらにカスタマイズすることができます。
多くのWordPressプラグインを使用すると、グーテンベルクのようなドラッグアンドドロップインターフェイスを使用してページを作成できますが、それをお勧めします。 それらは通常、グーテンベルクが提供しない編集の選択肢を提供します。
Divi Builder、SeedProd、人気のある使いやすいElementorなどのプラグインは、Gutenbergが提供するブロックを超えた編集システムを提供します。
これらのプラグインには通常、サイズ変更ツール、複数の部分からなるコンポーネント、およびページ作成のプロセスをさらに削減する拡張テンプレートが含まれています。
外部プラグインは、グーテンベルクがしばしば少し落ちるブログ以外のページに役立ちます。 それらのページの多くを実行できますが、まだ他のシステムと同じ柔軟性はありません。
詳細：カスタマージャーニーマップ：ベストプラクティス+準備ができたテンプレート
グーテンベルクを無効にする方法
特定のユーザーに対してグーテンベルクを無効にできますか？ 完全に無効にすることはできますか？
両方の答えはイエスです。 グーテンベルクをサイトで使用したくない場合は、いくつかの方法で無効にすることができます。
プラグインをインストールしてグーテンベルクを無効にする
最初の方法、そしてほとんどのユーザーにとって最良の方法は、ClassicEditorプラグインを使用することです。 これはWordPressチームの公式プラグインであり、文字通り何百万ものサイトにアクティブなインストールがあります。
クラシックエディタを使用すると、ユーザーごとにデフォルトのエディタを設定でき、ユーザーがエディタを選択できるようになり、作業を簡単にするためのいくつかの追加機能が付属しています。
これは、グーテンベルクを隠すほど技術的に無効にするわけではありませんが、実際の結果は同じです。 または、別の意味では、Classic Editorをインストールするのが賢明です。これは、好きなエディターを使用できるためです。これは、常に1つのエディターにとらわれるよりも優れています。
コミュニティベースの代替手段では、Disable Gutenbergプラグインを使用します。このプラグインは、Classic Editorほど人気はありませんが、公式のサポートに依存していません。
これは、グーテンベルクを完全に無効にしたり、サイトの特定のページ、投稿の種類、役割、またはテーマに対して無効にしたりするための簡単で実用的な方法です。
いずれかのプラグインをインストールするには、手順は簡単です。
- WordPressインターフェースにログインします
- 左側で、[プラグイン]を選択します
- 拡張されたプラグイン画面で、[新規]を選択します
- 上部の検索フィールドに、必要なプラグインの名前を入力します
- 結果から必要なプラグインを選択し、 [今すぐインストール]ボタンをクリックします
- 終了したら、[プラグインのアクティブ化]をクリックします
関数.phpを編集してグーテンベルクを無効にする
最後に、サイトのfunctions.phpファイルを変更して、直接無効にすることができます。
ただし、これを誤って行うとサイトが破損する可能性があるため、カジュアルユーザーにはお勧めしません。 上記のプラグインのいずれかをインストールする方が簡単で、簡単に元に戻すことができます。
プラグインなしでGutenbergを無効にしたい場合で、WordPressコードの初心者の場合は、次の手順に従うことができます。 このメソッドは、すべてのユーザーに対してそれを無効にします。
- WordPressインターフェースにログインします（管理者である必要があります）
- 左側のサイドバーで[外観]を見つけて、その上にカーソルを合わせます
- 「テーマエディタ」を選択します
- 右側のファイルのリストで、 「functions.php」を選択します
- 何かが横向きになった場合に復元できるように、バックアップとして事前にfunctions.phpファイルのコピーを作成します
- エディターがポップアップしたら、以下を正確にコピーしてファイルに貼り付けます。add_filter（ 'use_block_editor_for_post'、 '__ return_false'）;
- 下の[ファイルの更新]ボタンをクリックします
詳細：ヒートマップの説明+ Webサイトのヒートマップを作成する方法
WordPressブロックの一般的なタイプ
基本的なWordPressエディターで利用できる最も一般的なタイプのブロックは次のとおりです。
グーテンベルク以前は、ほとんどの人がこれらのブロックを直接コーディングするか、リッチテキストエディターのテキストおよび画像フォーマットツールを使用してコーディングし、必要に応じてコードを再配置してページのレイアウトを調整していました。
段落
これは、ほとんどの人が他のどのブロックよりも多く使用するブロックです。 名前が示すように、それは書かれた内容に焦点を合わせています。
テキストエディタは各段落をブロックに変換するため、段落を書き込んだ後で移動したり並べ替えたりできます。
画像
画像埋め込みブロックは、ページ内を移動できる単一のグラフィックを保持します。
これらには、画像のサイズ変更や、テーマからの通常の制限を超えた全幅への変更など、さまざまな配置オプションが付属しています。
段落ブロックと画像ブロックを一緒に使用すると、基本的なWebページを作成できます。したがって、基本的な視覚的階層の原則に従って、これらの要素を繰り返して改善するために、他のすべてが最終的に存在します。
見出し
見出しブロックは、ページをセクションに分割し、ユーザーがコンテンツを見つけやすくするために特大のテキストを保持します。 エディターを使用すると、必要に応じて見出しのサイズ、書式設定、ハイパーリンク、およびその他の要素を調整できます。
WordPressは、ページタイトルのh1を含む最大6つの見出しレベルをサポートしていますが、ほとんどの人がh4を超えることはめったにありません。
ギャラリー
ギャラリーブロックは、基本的な画像ブロックの高度なバージョンであり、事前に定義されたレイアウトで複数の画像を追加できます。
現在のエディターは、画像の最大8列に加えて、ページのサイズ変更、リンク、およびその他の書式設定オプションをサポートしています。
リスト
リストブロックは、番号付きまたは箇条書きのリストを作成しました。
これは基本的に段落ブロックの単なるアプリケーションですが、リストを独自のコンポーネントに分割すると、誤ってフォーマットを変更することを簡単に回避できます。
見積もり
引用ブロックは、特に重要なことを呼び出すのに役立つ特別にフォーマットされた段落ブロックです。
ほとんどの人はこれらを特定の人による引用に使用しますが、コメントを提供したり、重要な情報を強調したりするためにも使用できます。
オーディオ
オーディオブロックはウェブサイトでは比較的まれですが、WordPressは引き続きそれらをサポートしています。
これらを使用すると、オーディオの自動再生やループなどの機能を含め、所有しているオーディオファイルを追加できます。
ほとんどのユーザーは、それを望まない限り自動的に再生されるオーディオを嫌うので、予期しないノイズで訪問者を驚かせないようにしてください。
カバー
カバーブロックは、より高度なフォーマット要素です。 このブロックでは、ページにオーバーレイできる画像またはビデオ、場合によってはテキストを選択できます。
このメディアは、バックグラウンドでフロートしたり、繰り返したり、その他の方法で即座に注目を集めることができます。
WordPressは、オーバーレイに透明度がない、または完全な透明度があることをサポートしていますが、テキストを読みやすくするために適度な量をお勧めします。
ファイル
ファイルブロックを使用すると、訪問者がファイルをダウンロードできるように、Webサイト上のファイルへの直接リンクを提供できます。
ほぼすべての種類のファイルをサイトにアップロードできますが、大きすぎるものをアップロードしようとしたり、計画に対してダウンロード数が多すぎたりすると、ホスティングプロバイダーから質問が出る場合があります。
これは、Web開発の相互接続性の良い例です。
基本的なテキストファイルのダウンロードのみを許可している場合は、制限に違反することはないでしょうが、他のファイルを追加する前にWebサイトのホストに相談してください。 彼らはあなたの計画で何が許可されているかを教えたり、必要に応じて代替案を提案したりすることができます。
ビデオ
ビデオブロックを使用すると、マルチメディアコンテンツを直接アップロードするか、別のサイトにリンクすることで、サイトにマルチメディアコンテンツを追加できます。
ビデオファイルは非常に大きくなる傾向があるため、サイトにファイルを配置する場合は、通常、適切なホスティングプランが必要です。
YouTubeやYouTube埋め込みの使用など、外部でのホスティング、 かなり簡単です。 グーテンベルクは、必要に応じて、いくつかのビデオリンクを別のタイプのブロックに自動的に変換します。
WordPressブロックの使用方法
グーテンベルクエディタでブロックを追加する方法はいくつかあります。 上部のアイコンバーから直接追加するか、挿入ボタンをクリックして追加できます。
このボタンはプラスが入った円のように見え、追加するブロックのタイプをクリックできます。
ブロックがページに表示されたら、ブロックの左側にある矢印をクリックして、ブロックを上下に移動できます。 または、6つのドットのグリッドをクリックしてマウスボタンを押したまま、ブロックを目的の場所にドラッグすることもできます。
ブロックを編集するには、スペースをクリックするだけです。 これにより、ブロック情報が自動的に開き、必要に応じてコンポーネントを調整できるようになります。
同じ関数を使用して、ブロックのタイプを変更できます。 コントロールパネルの矢印を使用して、エディターのセクションを展開または閉じることができます。Xボタンを使用すると、ブロックエディターを閉じて、他のことに集中できます。
WordPressブロックとウィジェットの違い
ブロックは主にウェブページのコンテンツであり、画像や音声などのテキストやメディアが含まれます。 では、WordPressウィジェットとは何ですか？それはブロックとどう違うのですか？
対照的に、WordPressウィジェットは、サイドバーやフッターなどの特別な領域に配置できるコンテンツです。 Gutenbergエディターは、これらの領域をほとんど回避しますが、コードブロックを追加することで、ウィジェットのようなものをメインコンテンツに含めることができます。
ブロックインターフェイスは通常、ページエディタが開いているときに画面の右側にあります。 ウィジェットエディタは、[外観]> [カスタマイザ]領域および管理メニューから利用できます。
ウィジェットは通常、Webサイトのすべてのページに表示されるため、ブロックを編集できるのと同じ場所からウィジェットを編集することはできません。
再利用可能なWordPressブロックテンプレートの作成
WordPressでは、再利用可能なブロックテンプレートを作成できます。
これは、毎回正確なレイアウトを再作成することなく、サイトで一貫したブランディングとデザインを実現するのに役立ちます。 これは、VectornatorやAdobeIllustratorなどのソフトウェアを使用して高度なベクターグラフィックやレイアウトを作成している場合に特に便利です。
テンプレート自体の作成は簡単です。 ブロックを選択し、表示されるツールバーの3つのドットをクリックしてから、[再利用可能なブロックに追加]をクリックするだけです。
そこから、覚えやすい名前に変更して、ページでの作業に戻ることができます。
ブロックテンプレートは、ロゴ、グラフィックデザインソフトウェアで作成されたカスタムボタン、デザイン要素、およびWebサイトのブランディングで使用されるものなどを簡素化します。
テンプレートを使用すると、使用するたびに特定のブランド要素やレイアウトをやり直すことなく、要素を好きな場所に簡単に追加できます。
WordPressブロックに関する最終的な考え
WordPressブロックはすべての人にとって理想的ではありませんが、直感的でユーザーフレンドリーな方法でページを作成し、コンテンツを配置するための強力な出発点です。
ただし、ブロックについて読むだけでは、ブロックの使用をマスターするのに十分ではありません。
代わりに、今すぐWordPressサイトにアクセスして、1ページで遊んでみてください。 実践的な練習をすることで、それらの使用法を習得し、サイトで高度なレイアウトの作成を開始できます。
自転車に乗るのと同じように、WordPressブロックは一度習得すると忘れがちで、ほとんどすべての標準的なページデザインを作成するのに役立ちます。