WordPressの投稿やページにテーブルを追加すると、データを整理し、読者が理解しやすくなります。WordPressでは、デフォルトのテーブルブロックでこれを非常に簡単に行えます。
WPBeginnerでは、最近、まとめ記事でトップ5または10のプラグインを表示するためにテーブルを使用し始めました。この簡単な変更により、読者からのエンゲージメントが向上しました。
最も良い点は、デフォルトのブロックに強力なスタイリングオプションが含まれており、テーブルを魅力的に見せることができることです。このガイドでは、WordPressでテーブルを簡単に作成および管理する方法を説明します。
テーブルの挿入の基本と、コーディングを知らなくてもソートや検索などの高度な機能でテーブルを改善する方法を学びます。
WordPressの投稿やページにテーブルを追加する理由
WordPress の投稿やページにテーブルを追加すると、情報を整理するのに役立ちます。コンテンツを簡単に消化できるチャンクに分割し、読者にとってより親しみやすいものにします。
比較チャート、リスト、または統計情報を表示している場合でも、テーブルはデータを提示するためのクリーンで構造化された方法を提供します。
さらに、テーブルは全体的なユーザーエクスペリエンスを向上させることができます。長い段落をスクロールする代わりに、読者は探している情報をすばやく見つけることができます。
これにより、コンテンツはクリーンでプロフェッショナルな外観になり、より魅力的になります。
とはいえ、WordPressの投稿やページに簡単にテーブルを追加する方法を見てみましょう。
WordPressブロックエディターでテーブルを作成する
WordPressでは、デフォルトのWordPressブロックエディターを使用して、テーブルを非常に簡単に追加できます。
新しい投稿またはページを作成するか、既存のものを編集します。コンテンツエディターに入ったら、「+」記号をクリックして新しいブロックを追加し、テーブルブロックを選択します。
「Text」セクションの下にあります。または、検索バーに「Table」と入力することもできます。
次に、テーブルに必要な列数と行数を入力するように求められます。両方の数値はデフォルトで2になっています。
正確な数について100％確信がなくても心配しないでください。テーブル列や行は後でいつでも追加/削除できます。
行数と列数を入力し、「テーブルを作成」ボタンをクリックするだけです。
ブロックはテーブルを生成し、画面に表示します。
テーブルセルにテキストを入力でき、各セル内のコンテンツ量に基づいて自動的にサイズが変更されます。
セルを固定幅にしたい場合は、右側でこのオプションを設定できます。ここで、テーブルのヘッダーまたはフッターセクションを追加することもできます。
テーブルヘッダーを使用することは、アクセシビリティのために強く推奨されます。なぜなら、視覚障害のあるユーザーのために、スクリーンリーダーがテーブルデータを正しく解釈するのに役立つからです。
設定パネルから、スタイルタブに切り替えることもできます。
あなたのWordPressテーマは、テーブルブロックのさまざまなスタイルを提供している場合があります。または、背景色とテキスト色を選択することもできます。
新しい行または列を追加したい場合は、追加したいテーブル内のセルをクリックしてください。次に、「テーブルの編集」ボタン（鉛筆アイコンが付いた小さなテーブルのようなアイコン）をクリックします。
これにより、テーブルに行や列を追加または削除するためのいくつかのオプションが表示されます。
デフォルトでは、テーブルの列のテキストは左揃えになっています。
列内をクリックしてから「列の配置を変更」ボタンをクリックすることで、これを変更できます。
また、投稿またはページ内のテーブル全体の配置を変更することもできます。
「配置を変更」ボタンをクリックして、リストからオプションを選択するだけです。
これらのオプションにより、テーブルが投稿エリアの通常の境界を超えて表示される可能性があることに注意してください。
いくつかのテーブルは、WordPressウェブサイトでは奇妙に見える場合がありますので、テーブルがどのように表示されるかを確認するために、投稿またはページをプレビューしてください。
デモサイトに表示されるテーブルを「ワイド幅」に設定した例を以下に示します。
ご覧のとおり、投稿エリアの左右のマージンを超えて伸びています。
Gutenbergエディターに組み込まれているテーブルツールは、テーブルの表示に大きな柔軟性をもたらします。Tableブロックを使用して、データを読者にとってわかりやすい形式で表示できます。
ただし、このブロックには検索フィルタリング、カスタムソートなどの高度な機能はありません。
また、サイドバーウィジェットや他のページなど、WordPressサイトの複数の領域で同じテーブルを効率的に使用することもできません。
高度なテーブルを作成するには、WordPressのテーブルプラグインを使用する必要があります。
TablePressプラグインを使用したテーブルの作成
TablePress は、市場にある 最高のWordPressテーブルプラグイン の1つです。コアプラグインは100%無料で、テーブルを簡単に作成・管理できます。追加機能のためのプレミアム拡張機能も利用可能です。
テーブル機能がない古いクラシックWordPressエディターを使用している場合は、TablePressが投稿やページにテーブルを追加する最良の方法となります。
まず、TablePress プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
その後、WordPressダッシュボードにTablePressメニュー項目が表示されます。新しいテーブルを作成するには、TablePress » 新規追加に移動してください。
テーブルの名前を入力し、行数と列数を決定する必要があります。後でテーブルの行や列を追加/削除することもできます。
テーブル名、行、列を追加したら、「テーブルを追加」ボタンをクリックしてテーブルを作成してください。
次に、テーブルの情報が表示され、コンテンツを追加できる領域が表示されます。
テーブルのセルに、入力したいデータを単純に入力してください。
行や列を追加または削除したり、並べ替え操作を実行したりするには、テーブル内を右クリックするだけです。オプションメニューが表示され、さらに変更を加えることができます。
「テーブル操作」などの高度なオプションは、「テーブルコンテンツ」エリアの下にあります。
ここから、行を追加、削除、複製できます。
「テーブルオプション」では、ヘッダー行やフッター行を追加できます。これらはデータと一緒にソートされません。
テーブル名と説明を表示する場所も決定できます。
最後に、「サイト訪問者向けテーブル機能」セクションでさまざまなオプションを設定できます。
これらの設定により、読者がフィルター、検索、並べ替えできるレスポンシブテーブルを作成できます。
テーブルに満足したら、「変更を保存」をクリックするだけです。
その後、Tableのショートコードをコピーします。次のステップで必要になります。
💡プロのヒント: ショートコードを使用する最大の利点の1つは、同じテーブルを複数の投稿、ページ、またはサイドバーウィジェットに配置できることです。
テーブルを更新する必要がある場合は、1か所を編集するだけで、ショートコードが使用されているすべての場所に自動的に変更が表示されます。これにより、多くの時間を節約できます！
次に、テーブルを表示したい投稿またはページを編集し、エディターにショートコードブロックを追加します。
その後、先ほどコピーしたショートコードをショートコードブロックに追加します。
変更を更新または保存することを忘れないでください。
一方、クラシックエディターを使用している場合は、投稿に直接ショートコードを追加するだけです。
将来的にテーブルを変更したい場合は、ダッシュボードのTablePressに戻って変更できます。テーブルは、使用したすべての投稿やページで自動的に更新されます。
TablePressでは、スプレッドシートやCSVファイルからデータをインポートすることもできます。同様に、TablePressテーブルデータをCSVファイルにエクスポートすることもできます。これは、Microsoft ExcelやGoogle Sheetsなどの任意の表計算プログラムで開くことができます。
動画チュートリアル
文章での説明よりも動画での説明がお好みであれば、こちらのビデオチュートリアルをご覧ください。
WordPressテーブルに関するよくある質問
WordPressウェブサイトにテーブルを追加することについて、よく寄せられる質問を以下に示します。
WordPressでテーブルをレスポンシブにするにはどうすればよいですか？
デフォルトのWordPressテーブルブロックには、レスポンシブ設定が限定されています。モバイルデバイスで見栄えの良いテーブルには、TablePressのようなプラグインが最善の解決策です。
小さな画面で横スクロール可能なテーブルを作成できるため、サイトの使いやすさを維持するのに役立ちます。
テーブルの外観をカスタマイズできますか？
はい。組み込みのテーブルブロックには、背景色とテキスト色を変更するための基本的なスタイルオプションがあります。WordPress テーマも独自のスタイルを追加する場合があります。
より高度なデザイン制御のために、プラグインを使用すると、カスタムCSSでテーブルをカスタマイズする力がさらに増します。
ExcelまたはGoogleスプレッドシートからWordPressにデータをインポートするにはどうすればよいですか？
ExcelやGoogle Sheetsのようなスプレッドシートからデータをインポートする最も簡単な方法は、プラグインを使用することです。
TablePressには、CSVファイルを直接アップロードできる組み込みのインポート機能があります。これにより、手動でデータを入力するよりも大幅に時間を節約できます。
ソート可能で検索可能なテーブルを作成する最良の方法は何ですか？
デフォルトのWordPressテーブルブロックは、単純なデータ表示には適していますが、並べ替えや検索はサポートしていません。
これらのインタラクティブな機能を追加するには、プラグインが必要です。TablePressは、訪問者が列を並べ替えたり、テーブル内の特定の情報を検索したりできる優れた無料の選択肢です。
この記事が、HTMLを使用せずにWordPressの投稿やページにテーブルを追加する方法を学ぶのに役立ったことを願っています。また、WordPressで目次を作成する方法に関するガイドや、WordPressエディターで特定のユーザーからブロックを非表示にする方法のチュートリアルも役立つかもしれません。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス
最新バージョンのWORDPRESSにテーブルを追加できません
+はありません
WPBeginnerサポート
プラス記号はWordPressの現在のバージョンでも利用可能です。ビルダーや同様のツールを使用しており、ブロックエディターを使用していない場合、それが見えない最も一般的な理由です。
管理者
ラルフ
WordPressのデフォルトのテーブルを使用していますが、デスクトップブラウザでは問題なく動作しますが、携帯電話ではすべてがめちゃくちゃになります。最大10文字しか許可されず、きれいなテーブルがゴミになります。
これに関して何かできる方法はありますか？ 押しつぶすのではなく、スケーリングするような？ テーブルは小さくなりますが読めるか、同じサイズでスワイプできるか？
WPBeginnerサポート
テーブルの構成方法に大きく依存します。テーブルをより細かく制御するには、TablePressを検討すると良いでしょう。
管理者
Shafi
フロントエンドでレンダリングされずにHTMLを表示する方法はありますか？例えば、テーブルセルに `![]()
` と表示したいのですが、テーブルはそれを画像として扱ってしまいます。どうすれば解決できますか？
WPBeginnerサポート
It would depend on the method used but in your toolbar when you have a cell selected you should have the option of setting it as inline code for what you’re wanting to do
管理者
ウォーレン・コントレラス
このテーブルはまさに私が求めているものですが、数字を入力して、下段に行の合計を表示できる場合に限ります。
WPBeginnerサポート
For what you are wanting, you would want to use TablePress
管理者
イェミ
長いテーブルをページに分割して、ユーザーが「次へ」をクリックできるようにする方法はありますか？
WPBeginnerサポート
テーブル内のコンテンツを異なるページに分割するには、TablePressとそのページネーションオプションを使用します。
管理者
Anita
背景色が機能しないのは、引用符をバックスペースして独自の引用符を入力する必要があるためです。偶然見つけました。もし誰かがすでにそれを理解していたら申し訳ありませんが、確認するために100件以上のコメントを読み通すつもりはありませんでした。
WPBeginnerサポート
Thank you for sharing that should someone run into the background color not working for them
管理者
アンドレ・ビクター
こんにちは。6列750行の既存のテーブルがあります。Wordpressのページに空白のテーブルに再入力するのは難しいです。テーブル全体（ExcelまたはWord）をインポートする方法、またはセルの内容を空白のテーブルにコピー＆ペーストする方法を教えてください。
WPBeginnerサポート
TablePressとそのインポートオプションを確認して、テーブルを取り込むことをお勧めします。
管理者
マーガレット
こんにちは！既存のドキュメントからテーブルをWordPressにコピー＆ペーストすることは可能ですか？試してみましたが、うまくいかないようです。何かコツがあるのでしょうか？よろしくお願いします！
WPBeginnerサポート
ドキュメントによりますが、通常はWordPressでテーブルを再作成することをお勧めします
管理者
Nicole
こんにちは！WordPressについてもっと学びたいです！
WPBeginnerサポート
Our site should be able to help you then
管理者
ジム・ガリブ
クラシックエディターにはテーブル機能があり、そのエディターを使用する場合はプラグインは必要ありません。ぜひ試してみてください。
WPBeginnerサポート
You would need to use a plugin to enable the classic editor and normally that would require using HTML
管理者
Matthews Otalike
なんということでしょう、WordPressでのテーブル作成に関するガイダンスや、その他提供してくださったリソースに感謝します。素晴らしいです。
WPBeginnerサポート
You’re welcome, glad our guide was helpful
管理者
TheFrugalChoice
個人の金融および経済的自立ブログで利用できる役立つ投稿です。
WPBeginnerサポート
Thank you
管理者
Monique Robinson
素晴らしい記事と素晴らしいプラグインです。簡潔で要点を押さえています。本当にありがとうございます。
WPBeginnerサポート
Glad you liked our article
管理者
Annapurna agrawal
こんにちは
TablePressプラグインをインストールしました。
ユーザー権限に問題があります。ユーザーロールプラグインで、「edit_other_user_tables」の権限を付与していません。しかし、私のコントリビューターユーザーロールは、他のユーザーのテーブルを編集したり削除したりできます。
他の人のテーブルへのアクセスをどのように回避すればよいですか？
WPBeginnerサポート
他のテーブルの編集を防ぐための組み込みまたは推奨される方法があるかどうか、TablePressに問い合わせる必要があります。
管理者
Nabil Nawaz
素晴らしい記事です。これを親子関係にするにはどうすればよいですか？たとえば、最初の列の最初のセルが親セルで、その横に子情報の情報があります。たとえば、その最初のセルの横に3行説明が必要です。
sumit kumar gupta
Visual EditorでTablePressオプションをクリックすると、テーブルのリストしか表示されません。Visual Editorにはテーブル作成オプションがありません。投稿エディタで新しいテーブルを作成するにはどうすればよいですか？
Wyce Ghiacy
動画をありがとうございます。
フォーマットされたExcelシートを埋め込み、登録済みWPユーザーからデータを収集するにはどうすればよいですか？（月次使用レポートのようなもので、Excelシートは四半期/年次使用量も計算します）
ルイーズ・ウッディング
こんにちは
動画をありがとうございます。テーブルを作成し、セルの一つに「画像を挿入」を選択しました。画像を選択することはできましたが、画像そのものではなく、そのURLが入力されました。何か手順を飛ばしてしまいましたか？
ありがとうございます。
ルイーズ
トム・カレン
素晴らしい共有、ありがとうございます！
Owolabi
ボス、この記事は良いですね。
共有ありがとうございます。
ただ、質問があります。
WordPressの投稿のアイコンにテーブル挿入オプションを追加できるプラグインはありませんか？
返信をお待ちしています。
Ravi Kanani
仕様の表を追加したいのですが、最初の列はすべての投稿で同じで、2番目の列は異なります。
このタイプの表を投稿に追加するにはどうすればよいですか？
スーザン・ホーソーン
It would be very nice if, in the article about TAblePress it said that you have to upgrade to a business plan to use a plugin!!!!!!!!!!!!
WPBeginnerサポート
スーザンさん、こんにちは。
おそらくWordPress.comを使用しています。セルフホスト型WordPress.orgと無料のWordPress.comブログの違いに関するガイドをご覧ください。
管理者
Barbara
テーブルのテキストの一部を太字にする方法はありますか？すべてプレーンテキストなので、簡単に太字を追加できる方法があればいいのですが。
アビー
単語にHTMLの テキスト を追加するだけ
マイケル・カーター
実際には、CSSを使用できます。強調したい単語を使用してください…
バンクス・ダダ
このプラグインに心から感謝します。必要なのは、Excelでリストを準備してWordPressにインポートすることでした。
甘くて時間のかからないツールです。
この記事、本当にありがとう
サダ
テーブル内にリンクを作成し、行番号または行の任意のフィールドを渡して別のページに転送するにはどうすればよいですか？
直接的ではないと思われるオプション
1) localStorage\sessionStorageを使用する
2) URLに値を渡すが、次のページはロード時にこれを読み取る必要がある – 悪くないアイデアかもしれない？
モリー・グレーガー
すごい！なんて素晴らしいツールなんでしょう！！でも：色がとても薄くて何も見えません？？行/列の色を変更するにはどうすればよいですか？
varalakshmi
ありがとうございます……これはある程度役立ちました。投稿には満足しています。
アレックス・ニコルソン
これはWordpress.orgのユーザーにしか機能しないようです。私のようなWordpress.comユーザー向けの同様のガイドはありますか？特に、テーブルのセルの背景色を変更できるものはありますか？
Ray
こんにちは
データベースからデータを取得するクエリを使用する、これに似たインタラクティブなテーブルを作成しようとしていました。
WordPressとMySQL/phpMyAdminデータベースを使用しています。
phpmyadminではクエリが機能しますが、WordPressでは値が表示されません？
SELECT * FROM `MyTablename` WHERE 1
リストやprintコマンド、データベース名を使用する必要がありますか？
ジョン・カール
私も同じ問題を抱えています。もう解決策は見つかりましたか？
キャロリン
このプラグインは間違いなくお勧めします。ホスティングサービスを別のサービスに移行するブロガーへの注意：テーブルのバックアップを忘れないでください。データを復旧する方法はありません。もし方法を知っているなら、情報を共有してください。
Dimitar
最近、見栄えの良いテーブルを追加する方法を理解するのに苦労していました。これは非常に役立つでしょう。公開していただきありがとうございます。
WPBeginnerサポート
You are welcome
管理者
オマール・カーン
タグ/カテゴリページにテーブルを作成する方法
パコ・ヒメネス
皆さん、こんにちは。
サポートいただき、誠にありがとうございます。
このTablePressは興味深いです。
私はそのようなことを行うシステムを探していました。
私のテーブルには、いくつかの情報と列があります。例えばtable1です。
マップ上の特定の地域をクリックしたときに、/map#sectionのようなURLを読み込みたいです。
同じテーブルを別の順序で読み込むことはできますか？特定の列などで？列をクリックし、領域をクリックして、必要な順序でこのテーブルの「#」を含む同じURLを読み込むのではなく。
サポートいただき、誠にありがとうございます。
ベン・K
この記事のスクリーンショットを更新することを検討しましたか？
ディバイン
ありがとうWP。皆さんは最高です！4.5スター
アリンダム
情報ありがとうございます。ショートコードにSEO価値があるかどうか疑問に思っていました。ショートコードで表示されるテーブルがGoogleのFeatured Snippetに表示される可能性はありますか？