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

269 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

関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

YouTube動画保存の決定版!!便利すぎる「4k video downloader」の使い方

YouTube上にある動画をダウンロードするためのソフトは検索すると数多くでてきますが、いったいどれ

記事を読む

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

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

記事を読む

GIF作成が超簡単!!「GifCam」を使ってモンストのGIFを作成

何かと便利なGIF形式の画像を簡単に作ることができるフリーソフトのご紹介。 ついでにこのサイトのメ

記事を読む

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

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

記事を読む




PAGE TOP ↑