WordPressのタブプラグインを作りました-Useful Tab Block

WordPressのタブプラグイン Useful Tab Block-レスポンシブ & AMP対応プラグイン
スポンサーリンク

どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです!

WordPress で記事を作成していると、読者にとって

どれか1つしか当てはまらない情報

を扱うことってしばしばありますよね。

例えばパソコンの設定に関する記事を作っているときに、Windows と Mac では操作が異なるので

  • Windowsユーザー:〇〇の画面で□□をクリック
  • Macユーザー:△△に☆☆と入力

といった形でまとめることがあると思いますが、普通の人は Windows か Mac のどちらか1つです。

とみー
とみー

本来であれば、Windowsの人にはMacの情報、Macの人にはWindowsの情報は不要です。

1行程度の情報なら上のようにリストとしてまとめるのでも問題はありませんが、これが複数行になったり画像や動画が入ったりすると、読者にとって不要な情報が増え、読みやすさを大きく損なってしまいます

特に画面サイズが小さいスマホでは、読みやすさに大きな影響があります。

そこで、必要な情報だけを見てもらうようにするために使われるのがタブです。

Windows ユーザー向けの説明がここにきます。

Mac ユーザー向けの説明がここにきます。

とみー
とみー

読者1人1人が自分に必要な情報に集中できるようになります。

App Store や Play Store、YouTube といったアプリにもよく使われているので、多くの人にとって馴染みのある UI と言えます。

当然 WordPress で記事を作るときもタブは使い勝手がいいのですが、

  • タブブロックがあるのはたいてい有料テーマ
  • 自作するには HTML・CSS を書く必要
  • 既存のプラグインは別ページで登録しショートコードで呼び出すものが大半

というのが現状で、敷居は決して低いものではありません。

文章だけであればショートコードや自作の HTML でも簡単にできますが、吹き出しや付箋などテーマ独自のブロックを活用するとなると、使えるプラグインはほとんどありません。

そこで、せっかくなら無料テーマでも使える使い勝手の良いタブブロックを自分で作ってしまおうということで…

とみー
とみー

Useful Tab Block-レスポンシブ&AMP対応」というブロック追加プラグインを作っちゃいました!

スポンサーリンク

WordPressのタブプラグイン-Useful Tab Block-レスポンシブ&AMP対応

Useful-Tab-Block(ブロックエディター)

Useful Tab Block-レスポンシブ&AMP対応」は、ブロックエディターにタブブロックを追加するプラグインです。

主な機能は以下の通りです。

  • レスポンシブ
  • AMP対応
  • タブの形は2種類
  • タブの背景色、テキスト色を選択時・非選択時の両方で設定可能
とみー
とみー

タブ数は最大10個まで増やせます!

スポンサーリンク

タブはレスポンシブだから小さな画面でも大丈夫!

画面に合わせてタブを配置

Useful Tab Block-レスポンシブ&AMP対応」は、レスポンシブです。

とみー
とみー

レスポンシブというのは、画面の大きさに合わせてデザイン・レイアウトを適切に切り替える仕組みです。

例えば画面の大きいパソコンではタブを5つ横並びにできるとしても、スマホの画面で同じことをやると窮屈すぎて見にくくなります。

このプラグインでは

  • 画面大(PC):1行に5つまで
  • 画面中(タブレット):1行に4つまで
  • 画面小(スマホ):1行に3つまで

といった具合に自動で配置を切り替えるため、常に見やすい形を維持することができます。

スポンサーリンク

Google推奨のAMP対応で高速化もバッチリ!

Google推奨のAMPにも対応済み

AMP というのは、モバイル端末(スマホ)での Web サイト閲覧を高速化するための仕組みです。

とみー
とみー

AMPは使用する技術を制限することによって高速化を実現するので、特別な対策が必要です。

AMP対応テーマの場合、プラグイン選びを間違えるとAMPに対応しなくなってしまうため、SEO 的にもマイナスになってしまいます。

また、タブを作れる多くのプラグインは JavaScript を使っているため、AMP には対応していません。

Useful Tab Block-レスポンシブ&AMP対応」は、AMP に対応するために JavaScript を使わないで作ってあります。

JavaScript を使わない分読み込み速度も早いです!

タブの形は長方形と角丸の2種類をサポート

タブの形は2種類

タブの形は現時点で

  • 長方形
  • 角丸

の2種類をサポートしています。

長方形ラベルの例です(1)。

とみー
とみー

テーマ独自のブロックはもちろん自由に挿入できます。(これはCocoonの吹き出しブロック)

長方形ラベルの例です(2)。

こんな付箋ブロックも入っちゃいます。

タブの背景色・テキスト色を選択時・非選択時の両方で設定可能

タブの背景色・テキスト色を選択時・非選択時の両方で設定可能

Useful Tab Block-レスポンシブ&AMP対応」では

  • タブラベルの背景色
    • 選択時
    • 非選択時
  • タブラベルのテキスト色
    • 選択時
    • 非選択時

を個別に設定できます。

吾輩は猫である

名前はなんだっけな

泣かぬなら

鳴くまで待とう

ほととぎす

とみー
とみー

影や枠線は見やすいように後で付け加えています。

Useful Tab Blockのカラーパレット

色は30色の中から選ぶことができます。

以上が WordPress の公式プラグインとしてリリースしている「Useful Tab Block-レスポンシブ&AMP対応」の機能です。

とみー
とみー

加えて、有料版「Useful Tab Block プレミアム-レスポンシブ&AMP対応」ではさらなる機能が利用できます。

有料版はアイコンの挿入やタブの並び替えなどの追加機能を搭載

有料版「Useful Tab Block プレミアム-レスポンシブ&AMP対応」では、さらに4つの機能が追加されます。

  • タブの並び替え
  • タブの追加・削除を±ボタンでより直感的に
  • ラベルへのアイコン追加
  • カラーパレットにお気に入りカラー追加
とみー
とみー

デフォルトでも30色用意していますが、よりカスタマイズできるように自分で色を選べるようになっています!

アイコンはおしゃれな雰囲気作りにぴったりです。

我は圧倒的ネコ派である!

なんだかんだイヌが一番いいよね。

いやいや、ブタの可愛さを舐めちゃいけないよ。

インストールはこちらから

「Useful Tab Block-レスポンシブ & AMP対応」は、以下でダウンロード・インストールできます。

とみー
とみー

ぜひ使ってみてください!

コメント

タイトルとURLをコピーしました