テーブル実装プラグイン「TablePress」 + レスポンシブ対応

「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード
デモ (PCの場合はブラウザの幅狭めてみたりして確認してみてください。)

TablePress実装

1. 管理画面のTablePressのページから「新しく追加」でテーブルを作成し、以下を設定します。テーブルのヘッダー(フッター、両方)を使用する場合は、必要な行数分プラスしといて下さい。
テーブルの名前：説明 (省略可)：行数：列数：

TablePress-1

2. 「テーブルを追加」すると以下の画面に移るので、テーブルの値を入力を入力して下さい。
「テーブルの最初の行はテーブル見出しです。」にチェックを入れると最初の行はテーブルのヘッダーとして使用されます。フッタに設置する場合は、「テーブルの最終行は、テーブル フッターです。」にチェック
TablePress-3
TablePress-4
「検索/フィルター」をチェックしておくとテーブル内のデータを検索・フィルタリングしてくれるテキストボックスが生成されます。

3. 「変更を保存」して、"ショートコード"をコピーして、表示したい投稿にペーストしてください。

// 例
[table id=1 /]

レスポンシブ対応化

「TablePress Responsive Tables」をダウンロード・解凍し、pluginsディレクトリにコピーして有効化して下さい。あとはさきほどのShortcode:(ショートコード)に以下のようにresponsive="xxx"を付与して投稿に貼り付けるだけです。それぞれのブレークポイントでテーブルを横並びにしてくれます。

// 768px以下になるとテーブルを横向きにする場合
[table id=1 responsive="phone" /]
// 980px以下になるとテーブルを横向きにする場合
[table id=1 responsive="tablet" /]
// 1200px以下になるとテーブルを横向きにする場合
[table id=1 responsive="desktop" /]

スタイル変更

「プラグインのオプション」タブの"カスタムCSS"にスタイルを追加することで変更が可能です。
ドキュメント Documentation | TablePress
スタイリングやその他に関するよくある質問は、Frequently Asked Questions (FAQ) | TablePressを参照

管理画面は、標準で日本語化されているはずですが、そうでない場合は「プラグインのオプション」タブの"Plugin Language"から変更jaなどに変更が可能です。

その他 テーブル(表組)プラグイン
Websimon Tables

Related

CSS/JSをひとまとめにして軽量化するプラグイン「Minify plugin for CakePHP」 Default Thumbnailスライダー・ギャラリー プラグイン 投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ Twenty Fourteenカスタマイズ用プラグインと派生テーマ Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」 Default Thumbnailパーマリンク・スラッグなどURL カスタマイズ 「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」
  • このエントリーをはてなブックマークに追加

関連記事

Twenty Fourteenカスタマイズ用プラグインと派生テーマ

WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」

このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi

Twenty Twelve 投稿者情報を表示/非表示に

TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「

Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示

日付を表示する部分は、全てtwentyfourteen_posted_onに集約されています。該当部分をコメントアウトしたかたちで子テーマのfunctions.phpに追加して下さい。 「投稿日

「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう

Google 検索結果をみていたら、Wordpressの投稿のURLが実際のものより異様に長くなっているので何かなと思って調査してみました。 このような感じで http://kwski.net/ca

Twenty Thirteen カスタマイズ

WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ

開発やテストに便利なプラグイン

開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ

Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

Comment

  18. 「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。

kwski へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PREV
ウィジェット関連のカスタマイズ・プラグイン
NEXT
ツールチップ実装プラグイン「WordPress Tooltip」

新規投稿

  • ブックマーク

    PAGE TOP ↑