モンスト中心、映画やアニメ、DIY…興味あることをその都度発信

352 views

[WordPress] 人気のプラグイン「TablePress」で並び替え可能なテーブル作成を可能に

公開日: : PC

はじめに

今回は当サイトに「並び替えが可能なテーブルを記事内に挿入する」ことにしたので、wordpressのプラグイン「Table Press」を使った簡単な設置方法を以下にまとめていきます。「Table Pless」はwordpressのプラグインの中でも有名なので他にもたくさん記事がでてきますが、とても便利なプラグインなので、当サイトでも改めて紹介することにしました。

「Table Pless」のインストールと有効化

プラグイン>新規追加
2016-05-23_13h49_30
まずはお使いのwordpressに「Table Pless」をインストールします。

上の手順で「Table Pless」を検索し、「今すぐインストール」をクリック、その後プラグインを有効化します。
これで「Table Pless」を使う準備は完了です。

「Table Pless」の基本的な使い方

2016-05-23_13h54_05
「Table Pless」を有効化すると、上のように「Table Pless」のページが追加されます。

テーブルを作成する

2016-05-23_14h00_18
新しくテーブルを作成する際は、「新しく追加」をクリック。
そして「テーブルの名前」「説明」「行数・列数」を指定して「テーブルを追加」をクリック。
テーブルの名前は自分がわかりやすければなんでもいいですが、後から探しやすいようにしておくと捗りますね。
行数や列数は後から変更ができるので、不明であれば適当でもOK

作成したテーブルを編集

2016-05-23_14h07_05
「テーブルが正常に作成されました」という表示と同時に、テーブル内容を編集するページが表示されます。

テーブルの内容

2016-05-23_14h10_51
ここに文字列をいれていきます。

テーブルの操作

2016-05-23_14h11_50
こちらからリンクや画像の挿入、行列の追加などが行えます。

テーブルのオプション

2016-05-23_14h13_51
ここではテーブルの表示に関するオプションを選択できます。

DataTables JavaScriptライブラリの機能

2016-05-23_14h15_51
さらに細かい設定

ここまで設定が終わったら「変更を保存」をクリックします。

作成したテーブルを記事内に表示する

「Table Pless」で作ったテーブルは、記事の編集ページにショートコードを挿入することで表示されます。
2016-05-23_14h23_50
テーブルごとにショートコードの確認方法は、上の画像をご確認下さい。

作成したテーブルを確認する

例として以下のテーブルの内容を表示させるとこんな感じになります。
2016-05-23_14h59_07

2016-05-23_15h01_18

シンプルに表示ができているのと、きちんと並び替え機能が使えるテーブルができました。

サイトに合わせてデザインを変える

表示は問題ありませんでしたが、文字サイズなどをすこし変更しました。
当サイトでは以下のように設定していますが、サイトに合わせて変えてみるとよりしっくりくる仕上がりになると思います。
プラグインのオプション>フロントエンドオプション

#tablepress-1 td {
	font-size: 12px !important;
	text-align: left !important;
}

#tablepress-1 th {
	font-size: 12px !important;
	text-align: center !important;
}



  • このエントリーをはてなブックマークに追加
  • Pocket
  • 0 follow us in feedly

関連記事

画面が狭くてやりずらいときに試してほしい、作業レベルに合わせた3つの対策

PCで作業をしていると、画面がいっぱいになってしまい作業がやりずらいことがあります。画面が狭いせいで

記事を読む

最新!!どれが使いやすい?iphoneで動画録画ができるアプリ5つを比較!!

はじめに 今回は、ゲームのプレイ動画だったり、なにかの説明だったりで使える「iphoneの画面

記事を読む

Firefoxに必須の基本アドオン「FireGestures」の使い方

Firefoxを使うならまず入れていきたい基本的なアドオンのひとつ「FireGestures」のイン

記事を読む

超簡単!! Macを使ってiPhoneの画面録画をする方法

はじめに 今回はMacPCを使ってiPhoneの画面録画をする方法をご紹介します。 Window

記事を読む

XHTMLとCSSを使って、固定幅で崩れないトップページのレイアウトを作る

はじめに またホームページ関連の内容になりますが、まずは前回までのおさらい。 先日こちらのブログ

記事を読む

ウィンドウを立体化??「窓立て2」のダウンロードから初期設定

はじめに 今回はPCのデスクトップをカスタマイズする「窓立て2」のダウンロードと初期設定までをご紹

記事を読む

デスクトップカスタマイズツールRocketDockをさらに楽しくする方法

RocketDockをさらにカスタマイズ 今回の目標は「デスクトップカスタマイズツール」のRo

記事を読む

効率アップの素晴らしいキーボード

私事ですが、先日誕生日を迎えました。 この歳にもなると、自分の誕生日などさほど嬉しいものではあ

記事を読む

エンジニア・クリエーター必見の求人サイト!!レバテックキャリアとは

はじめに レバテックキャリアのスキルアップ記事の一つ、【プログラミング勉強サイト情報まとめ】に当サ

記事を読む

簡単かつ高機能!!Skitchに代わる画像注釈ソフト「Screenpresso」の使い方!!

はじめに 当サイトのようなブログ記事を書くとき、誰かに画像を使って説明したいときなどにかかせな

記事を読む




PAGE TOP ↑