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

104 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

関連記事

2016-06-28_13h34_31

今見ても面白い!!6年前にはてなブックマークしていた記事30選!!

はじめに 皆さんご存知のはてなブックマークは「オンライン上でブックマークができるサイト」 基

記事を読む

2016-05-30_22h19_42

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

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

記事を読む

2016-06-08_23h42_31

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

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

記事を読む

WIFI

家でパソコンが使えるなら携帯もパソコンの回線をつなげよう!!

WI-FI Wi-Fiとは? 簡単に言えば無線で使える回線のことです。 最近飲食店や美容室

記事を読む

2016-06-30_13h31_04

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

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

記事を読む

no image

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

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

記事を読む

スクリーンショット_102814_094432_PM

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

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

記事を読む

index

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

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

記事を読む

2016-11-01_16h51_05

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

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

記事を読む

名称未設定,png

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

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

記事を読む


PAGE TOP ↑