WordPress Gutenberg テーブルブロックを使用する

WordPressはいくつかの方法で、表を挿入することができます。 プラグインを使用したり、HTMLコードに直接テーブルを挿入したり、ページの場合、ページビルダーで提供されるテーブル要素（Avada テーマ表（Table）エレメントを使用する 参照）を利用することができます。 今のプラグインに依存せずに、デフォルトのエディタである Gutenberg テーブルブロックを使用することも可能です。

최근 Gutenbergで提供されるテーブル（表）のブロックを使用して表を挿入してみると思ったよりも機能が大丈夫に感じました。 ただし、テーマに沿って、テーブルのレイアウトが少しずつ異なって表示されます。 CSSを使用して、テーブルのスタイルを調整すると、サードパーティのプラグインを使用する必要がないようです。

複雑なテーブルを作成したい場合は、プラグインを使用するか、オンラインテーブル作成ツールを使用して作成できます。

• WordPress: 複雑なテーブルを挿入する

チャットGPTを使用すると、テキストテーブルデータまたはHTMLコードテーブルをブロックエディタのテーブルブロックに変換してすばやく挿入できます。英語、日本語、中国語など外国語のコンテンツにすぐに翻訳し、テーブルブロックとして生成できます。

• テーブル/エクセル形式のデータ WordPress テーブルブロックに変換する方法（feat。Chat GPT）

WordPress Gutenberg テーブルブロックを使用する

Gutenberg テーブル（表）ブロックを追加する

Gutenberg（Gutenberg）エディタで表を挿入するには、 ブロックを追加するでテーブル（表）を選択します。

新しい段落ブロックに「/テーブル」と入力すると、より簡単にテーブルブロックを選択できます（「時間と効率を向上させる WordPress Gutenberg キーボードショートカット"参照）。

表を設定する

テーブルブロックを挿入すると、列の数と行数を設定することができます。 開くことができ와 行数を指定し、 表作成 ボタンをクリックします。

表を挿入した後、表にデータを入力することができます。 そして、左のブロックの設定で表スタイルを指定することができます。

スタイルは、次のXNUMXつのオプションの中から選択が可能です。

• 기본
• ストライプ

기본は、一般的な表の形で、このスタイルを選択すると、境界線は表が作成されます。 ストライプストライプが交互に表示されます。

テーブルの設定セクションでは、 固定幅のテーブルのセルは、ヘッダ領域、フッター領域 などのXNUMXつのオプションを有効/無効にすることができます。

表に入力されたコンテンツの長さが短い場合、完成した表全体の幅が小さすぎて表示が良くないことがあります。 そのような場合に 固定幅のテーブルセルを有効にすると幅に合わせて表が拡張されます。 表のヘッダ（ヘッダ）セクションがある場合 ヘッダ領域を有効にします。

カスタムCSSでテーブルスタイルを変更する

基本的な表をそのまま使用してもよいが CSSに少し慣れれば、カスタムCSSを使用してテーブルをカスタマイズできます。

まず、次のようなCSSコードを 外観 » カスタム » 追加 CSS(WordPress バージョンに応じて、 ルックス » カスタマイズ » 追加 CSS）に追加するようにします。

.table-style-1 thead {
    background-color: #8f919e;
    color: white;
}

.wp-block-table table {
    border-collapse: collapse;
}

.wp-block-table figcaption {
    text-align: center;
}

次に、上記のスタイルを適用するテーブルにCSSクラスを指定します。テーブルブロック設定でデフォルトのスタイルを指定し、 高級から追加のCSSクラスフィールドに table-style-1を追加します。

その後、テーブルが次のように表示されます。 GeneratePress テーマを基準にしたものであり、テーマに沿って、スタイルが少し異なって表示されることがあります。

도시	人口
カラチ	24,600,000
上海	24,230,000
デリー	24,230,000
ラゴス	16,060,303
イスタンブール	13,710,512
東京	13,297,629
ムンバイ	12,478,447
モスクワ	11,977,988
サンパウロ	11,821,876
北京	11,716,000

例CSSコードを適用すると、基本的なスタイルで、ヘッダーの境界線の色を変更して、テーブルの説明部分の整列を中央に配置に変更されます。

ストライプスタイルを選択すると、次のように表が表示されます。

都市名	人口
カラチ	24,600,000
上海	24,230,000
デリー	24,230,000
ラゴス	16,060,303
イスタンブール	13,710,512
東京	13,297,629
ムンバイ	12,478,447
モスクワ	11,977,988
サンパウロ	11,821,876
北京	11,716,000

CSSを使用して次のようにテーブルスタイルを作成することもできます。 （下表は WordPressで提供される アクションフック リストの一部を示しています。）

フック名	설명
muplugins_loaded	必須プラグインがロードされた後の呼び出し
registered_taxonomy	カテゴリ、タグなどに関連するジョブ処理
registered_post_type	投稿（投稿）、ページなどに関連するジョブ処理
plugins_loaded	有効なプラグインがロードされた後、プラグ機能が定義される前に呼び出されます。
sanitize_comment_cookies	コメントクッキーを整理するときに呼び出す
setup_theme	テーマがロードされる前に呼び出す
load_textdomain	`default`ドメインを使用するときに呼び出す
after_setup_theme	通常、テーマ設定またはオプションを初期化するときに使用されます。このフックは、アクティブテーマの関数ファイルfunctions.phpがロードされた直後に呼び出され、テーマで使用可能な最初のアクションフックです。theme_support() 関数はこの時点で呼び出す必要があり、init アクションフックでは一部の機能の追加が遅すぎます。

スタイルが気に入らない場合は、CSSを使用して調整を試してみてください。 それでも気に入らなければ TablePressのようなテーブルのプラグインを使用してみることができます。

参照

• WordPressには、Googleタグマネージャのコードを追加する
• WordPress 文/ページをワンクリックで複製する方法