プラグインを使わずにWordPressで列を作成する方法

WordPress Columns ブロックのおかげで、コンテンツを列に整理するのは簡単です。このブロックは、すべての WP テーマで使用される可能性のあるコア ブロックに属します。列ブロックには最大 6 列を含めることができます。したがって、6 つの異なるコンテンツを並べて表示できます。

今日は、Columns ブロックを使用して、プラグインなしで WordPress で列を作成する方法を説明します。のまとめもお届けします WP 5.3 バージョンの最新機能 アップデート。

このチュートリアルでは、次の情報が得られます。

• コラムの目的は何ですか
• 古いエディターでの列の動作方法
• プラグインを使わずにWordPressで列を作成する方法（ブロックエディター）
• 列ブロックの基本設定
• WordPress Columns ブロックの操作方法
• ネストされたブロックを編集する方法
• カラムブロックの利点

コラムの目的は何ですか

ウェブサイト上のコラムには複数の用途があります。まず第一に、コンテンツを適切に配置し、読みやすく、ブラウザしやすくすることができます。コンテンツを列に整理することで、重要な情報やパラメーターを強調表示できます。

たとえば、複数列レイアウトを使用してサービスを表示できます。そこにイラスト画像、説明、またはボタンを追加します。もちろん画像をクリック可能にすることもできます。

サービスと同様に、WordPress の列を使用して製品または製品カテゴリを表示できます。シンプルなビジネス Web サイトをお持ちの場合に最適です。

ブログ投稿では、列を使用してコンテンツを区切ることができます。テキスト、箇条書き、または画像を並べて配置できます。

古いエディターでの列の動作方法

WordPress 5 以降より前は、複数列のコンテンツを作成したい場合はテーブルを使用する必要がありました。最新のエディタよりもはるかに難しかったです。さらに、モバイル デバイス上のスタイルと表の表示には通常問題がありました。以前はどのように機能していましたか?

WordPress Web サイトで列を作成する方法には複数のオプションがあります。

1. HTML コードをテキスト エディタに手動で挿入します。

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

このアプローチは主に開発者によって使用され、要件に基づいてテーブルや列を迅速に作成できました。欠点は、すべての WordPress テーマが列を適切に処理できるわけではないことでした。通常、テーブルは完璧ではなく、平均的なユーザーは考えられるすべての問題を簡単に解決することはできません。

2. WordPressエディターでのテーブルの許可

WordPress は TinyMCE エディターを使用していたため、テーブルを編集する関数を許可することができました。さらに詳しく知りたい場合は、すべての詳細を見つけることができます このフォーラムで。 AIT テーマに対して同じことを行うと、テーブルは正しく機能します。

3. AIT テーマでの Columns 要素の使用

古い WordPress テーマのいずれかを使用している場合は、Columns 要素をご存知でしょう。この要素は、ページ内に列を追加するために使用できます。これは順序付け可能な要素であるため、必要な場所に配置できます。利点は、ページ内での可変性です。

4. テーブルを管理するためのサードパーティのプラグインをダウンロードする

WordPress の投稿やページに列を作成する方法に関するもう 1 つの解決策は、テーブルを作成するために利用可能なプラグインの 1 つをダウンロードすることでした。これらのプラグインを使用すると、コーディングなしで数回クリックするだけで列やテーブルを追加できます。経験の浅いユーザーでもこれを使用することは可能でした。

プラグインを使わずにWordPressで列を作成する方法（ブロックエディター）

新しいブロックエディターのおかげで、列の作成が非常に簡単になりました。まだ古い WordPress を使用している場合は、今が最新バージョンに更新する適切な時期です。列ブロックを使用すると、数回クリックするだけで列を簡単に追加および管理できます。

このブロックは、複数列のコンテンツを操作したり、製品を紹介したり、ブログを書いたりしたいと考えているが、プログラミングの経験がない人にとっては歓迎される変更です。

Columns ブロックを追加する方法と、プラグインを使用せずに WordPress で列を作成する方法を見てみましょう。

• 最初のオプションは、上部バーの「+」をクリックし、利用可能なブロックから列ブロックを選択することです。
• 2 番目のオプションは、エディター内の任意の場所で「+」をクリックすることです。

WordPress Columns ブロックの定義済みレイアウト (WP 5.3 からの新機能)

最新バージョンでは、列設定が大幅に改善されました。まず、デフォルトのレイアウト スタイルが利用可能です。どういう意味ですか？

ユーザーは、コンテンツ領域に新しいブロックを追加する過程で、レイアウトと配置スタイルを選択できます。事前定義されたレイアウトは、特に高度な WordPress スキルを持たないユーザーにとって非常に役立ちます。この機能は、WordPress で (プラグインやその他のアドオンなしで) 列を作成する方法をどのように想像しているかを表します。

 

WordPress 列ブロックで事前定義されたレイアウトを選択したくない場合は、スキップしてください。このステップをスキップすると、コンテンツは 2 つの同じ部分/編集可能な 2 つの個別の列に分割されます。

列ブロックの基本設定

WordPress Columns ブロック自体には多くのオプションがありません。なぜそうなるのかは後ほど説明します。上部のバーで、配置を幅広または全幅に変更できます。アクティブなテーマでサポートされている場合は、この配置を変更できます。

最も重要な列ブロック設定は、右側のインスペクター サイドバーの列数です。デフォルトでは 2 列ですが、この数を 6 に増やすことができます。マウスを使用して変更するか、数値を入力できます。列を増減すると、どのように見えるかがすぐにわかります。ブロックはスライダーに応じて動的に変化します。

設定やコーディングに難しい変更を加えることなく、文字どおり数秒で列数を変更できるため、非常に実用的です。

WordPress エディターの他のブロックと同様に、Columns ブロックにもカスタム CSS クラスを挿入できます。

ブロックアペンダによるブロックの操作をよりスムーズに

Columns ブロックは、複数のブロックを作成できるため特別です。新しいバージョンがリリースされるまで、個々のブロックを操作するのはかなり困難でした。ブロックを追加したいとき、どこをクリックすればよいのか正確にわかりませんでした。ブロック アペンダー (および背景色による区別) のおかげで、コンテンツを適切な列に簡単に挿入できます。

WordPress 列ブロックの使用方法

Columns ブロックの利点は、各列が他のブロックをネストできることです。段落、画像ブロック、またはボタン ブロックにすることができます。最大列数は 6 であるため、必要に応じて複数列のコンテンツを作成できます。前述したように、製品を提示するには、製品画像、名前、価格、ボタンを並べて追加できます。

複数の列ブロックを上下に使用してグリッドを作成することもできます。サービスを紹介したり、重要な機能を宣伝したりするために使用できます。

ネストされたブロックの編集

すでに述べたように、列内に他のブロックをネストできます。ネストされた各ブロックには、使用可能なすべての設定があります。つまり、画像ブロックを列に追加すると、スタンドアロンの場合とまったく同じ方法で編集できます。 画像ブロック.

結論: 列が利点をブロックする

WordPress ブロック エディターのリリースと、ページや投稿で列を使用できるようになったことで、ユーザーがコンテンツを操作する方法が大幅に簡素化されました。 WordPress Columns ブロックのおかげで、サードパーティのソリューションを使用したり、HTML コードを作成したりする必要はなくなりました。数回クリックするだけで列の追加または削除が可能です。すべてが非常に直感的で、技術に詳しくないユーザーにとっても高速です。

複数列レイアウトのコンテンツは、グリッドに適切に配置されます。レスポンシブバージョンでもすぐに見栄えが良くなります。

私たちは、WordPress ブロックエディター用に特別に開発された新しい Citadela WordPress テーマに熱心に取り組んでいました。 Citadela テーマと利用可能なレイアウト パックの詳細をご覧ください。