カスタマイズ

【WordPress】項目ごとに並び替えができてスマホでも見やすい表の作り方

更新日:

サイトで表を入れることはよくあると思うのですが、各項目ごとに並び替えて見ることができたらユーザーにも便利ですよね。

今回は「Table Press」に拡張プラグイン、あとほんの少しのカスタマイズでスマホでも見やすい並び替え可能な表の作り方を紹介します。

今回作るのはこんな表

ステ子
項目をタッチすると並び替えられるのが素敵ね

サーバー名初期費用月額費用容量(GB)マルチドメインデータベース転送量

2016-05-25_191005
エックスサーバー

30001000200無制限5070GB/日

2016-05-25_192645
wpXクラウド

0500101125GB/日

2016-05-25_191019
ファイアバード

0500100無制限1300GB/月

2016-05-25_193401
ロリポップ!

02505050160GB/日

2016-05-25_193853
お名前.com レンタルサーバー

0900200無制限50非公開


ヘテムル

01500256無制限100120GB/日

並び替えができてスマホでも見やすい表の作り方

TablePressのインストール

まずはプラグイン「TablePress」と拡張プラグイン「DataTablesFixedColumns」をダウンロードします。

https://tablepress.org/extensions/datatables-fixedcolumns/

「DataTablesFixedColumns」はスクロール時に最初の列で固定してくれる拡張プラグインです。

公式にはないので上記リンクからダウンロードして手動でインストールしましょう。

表の作成

①「新しいテーブルを追加」
②「テーブルの名前」
③「テーブルの追加」

でテーブルを作成します。
行数や列数は後からでも変更可能です。

表の内容を記述

表の内容を記入していきます。

このプラグインの素晴らしい点は通常のhtmlによる装飾や図が挿入できることはもちろん、ショートコードも使用できる点です。

営業ステ子
ショートコード対応だから「タグ管理マネージャー」や「STINGERタグ管理プラグイン」で作成した画像やリンクも挿入できるわね!

投稿への挿入・表示

横スクロール対応にする

あとは生成されたショートコードを任意の箇所に挿入するだけなのですが、このままだとスマートフォンで見た時にハミ出てしまい見づらくなってしまいます

「table横スクロール要素」を適応

それを回避するには①のコードを選択した状態で「table横スクロール要素」ボタンをクリックすることでスマートフォンで見た時に表が「横スクロール」可能な状態になります。

設定項目

「TablePress」自体にも設定があります。
表示された感じが異なるのと、次の「列固定」と併用する場合はテーマ独自の「table横スクロール要素」ボタンがお薦めです。

「列固定」にする

ショートコードに以下のコードを追加すると最初の項目が固定されスクロールできるようになります。

参考https://tablepress.org/extensions/datatables-fixedcolumns/

ただ、これを適応するとPCで表を見た時に不恰好なるのでPCとそれ以外で表示をわけます。

まず、コードを追加していない①のショートコードをテーマ独自のタグ「スマホに表示しないボックス」をクリックして囲みます。

同様に、コードを追加したショートコードを「PCに表示しないボックス」で囲みます。

コードが上記のようになれば完成です。

最後にスタイルシートでボーダーや最初の画像のサイズなどを調整すればより見やすくなります。

ステ子
ランキングやゲームサイトなど色々な用途に使えそうね

ad

ad

-カスタマイズ

Copyright© 無料WordPressテーマSTINGER , 2017 All Rights Reserved Powered by AFFINGER4.