*

[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

関連記事

スクリーンショット_102514_125258_AM

Benri500札幌~新しいSEO対策について

Benri500札幌のご紹介 こないだ私たちが札幌市のホームページ製作代行という業務を始めまし

記事を読む

2016-07-05_14h18_37

プログラミング学習サイト!!初心者でも楽しく覚えられるProgateがすごい!!

はじめに プログラミングを勉強したいと思ったときに、まず何からしていいかわからない。WEBで勉強す

記事を読む

スクリーンショット_101814_033600_AM

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

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

記事を読む

2016-11-01_16h51_05

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

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

記事を読む

2016-05-31_10h02_59

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

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

記事を読む

2016-06-30_13h31_04

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

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

記事を読む

スクリーンショット_102814_094432_PM

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

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

記事を読む

スクリーンショット_051216_100716_PM

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

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

記事を読む

index

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

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

記事を読む

写真 2014-12-02 18 59 14

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

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

記事を読む

e2941cce339456cc46d8e9ee35a23a7f
モンスト!!天地開闢の始神「イザナギ」を徹底攻略!!

天地開闢の始神「イザナギ」 この記事はモンストの天地開闢の始神「

2016-11-02_11h29_48
モン玉ガチャ!!排出率や当たり確率について分析してみた

新しく始まったモン玉ガチャ。今回が初開催で、今後は定期的に開催される模

2016-11-01_16h51_05
Firefoxに必須の基本アドオン「FireGestures」の使い方

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

2016-07-05_14h18_37
プログラミング学習サイト!!初心者でも楽しく覚えられるProgateがすごい!!

はじめに プログラミングを勉強したいと思ったときに、まず何からしてい

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

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

→もっと見る

PAGE TOP ↑