148 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

関連記事

スクリーンショット_121614_105333_AM

人気のプラグイン!!Google Analytics Dashboard for WPの使い方

Google Analytics Dashboard for WPとは? まず始めに、Google

記事を読む

index

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

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

記事を読む

名称未設定,png

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

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

記事を読む

2016-05-30_22h19_42

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

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

記事を読む

no image

mp3ファイルに画像情報(アルバムアートワーク、ジャケット画像)を追加するフリーソフト

備忘録がてらサクっと書きます。 手順1.MP3tagをダウンロード まずは以下よりMP3tagと

記事を読む

2016-06-08_23h42_31

[WordPress] サイト内に手軽にアンケートフォームを挿入するおすすめプラグイン

はじめに サイト内や記事内で不特定多数の意見を求めたいときの方法として、コメントよりも参加数を

記事を読む

写真 2017-03-16 23 26 39

【初心者向け】デスクトップPCのメモリを増設する方法

はじめに PCの処理速度が遅くメモリ不足が原因の場合、【メモリ容量を増設しよう】と思ったときにまず

記事を読む

2017-03-06_13h55_36

lonryscreen(ロンリースクリーン)でエアプレイを使いiphone画面を録画する方法

はじめに これまでもiphoneの画面を録画してゲーム実況などをする方法をご紹介してきましたが

記事を読む

スクリーンショット_051216_100716_PM

使いやすさNo.1!! iphoneの画面を録画できるフリーソフト「Apowersoft」の録画究極ツール

先日の最新!!どれが使いやすい?iphoneで動画録画ができるアプリ5つを比較!!という記事でご紹介

記事を読む

スクリーンショット_101814_033600_AM

clibor,skitch…ブログを書くのに便利なツール厳選

ブログを書くのに便利なツール厳選 ブログ投稿に使うフリーのソフト、アプリケーションを厳選してみ

記事を読む

2017-05-02_22h48_46
【iPhone】 チャット形式でSwiftが学べるcodebelle(コードベル)がすごい!!

はじめに app storeでプログラミングが学べるゲームが特集され

2017-05-02_11h36_35
【iPhone】 トライビットロジック~ゲームで学べるプログラミング~

はじめに app storeでプログラミングが学べるゲームが特集され

名称未設定
原始竜の黒い翼「ダイナ」を徹底攻略!!有名なデッキ編成も一挙まとめ

原始竜の黒い翼「ダイナ」 この記事はモンストの原始竜の黒い翼「ダ

スクリーンショット 2017-04-11 23.34.09
超簡単!! Macを使ってiPhoneの画面録画をする方法

はじめに 今回はMacPCを使ってiPhoneの画面録画をする方法を

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

はじめに レバテックキャリアのスキルアップ記事の一つ、【プログラミン

→もっと見る

PAGE TOP ↑