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対応」というブロック追加プラグインを作っちゃいました!

過去の問題

現在無料版にて、

  • 1ページに複数個タブブロックを設置した場合に、同時に1つしか開かない問題
  • コンテンツとラベル間の余白のカスタマイズができない問題

が報告されています。

解決・アップデートまでしばしお待ちいただけますと幸いです。

とみー
とみー

v1.2.0 にて、上記の問題を解決しました!

スポンサーリンク

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色の中から選ぶことができます。

タブの枠線は実線・点線・波線の3種を用意

ご要望に応じて、v1.1.0 にてタブの枠線を表示する機能を追加しました!

タブのコンテンツ部分に

  • 実線
  • 点線
  • 波線

の3種類の枠線を設定することができるようになりました。

実線の枠線

枠線が実線の場合です(1)。

枠線が実線の場合です(2)。

点線の枠線

枠線が点線の場合です(2)。

枠線が点線の場合です(2)。

とみー
とみー

こんな感じに枠線に色を付けることもできます。

波線の枠線

枠線が波線の場合です(1)。

枠線が波線の場合です(2)。

枠線の太さを変えることもできる

枠線の太さもカスタマイズすることができます。

枠線の最小の太さは0.5ピクセルです。

枠線の最大の太さは3.5ピクセルです。

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

とみー
とみー

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

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

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

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

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

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

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

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

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

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

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

とみー
とみー

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

コメント

  1. murata より:

    isotypeのテーマを使用してます。
    こちらのプラグインが使えません。
    どうしたらいいでしょうか?
    よろしくお願い致します

    • とみーとみー より:

      murataさま
      はじめまして、ご連絡いただきありがとうございます。
      プラグインが使えないとは、具体的にどのような問題が発生していますでしょうか。

      • プラグインをインストールできない
      • プラグインをインストールしたが、編集画面でブロックが現れない
      • プラグインをインストールしたが、編集画面でブロックが入力欄が現れない

      など、詳しくお聞かせできますでしょうか。

  2. piko より:

    はじめまして。
    タブが使いたかったのですが難しく諦めていたところ、
    こちらのプラグインを見つけました。ありがとうございます。
    早速インストールしたのですが、
    コンテンツ欄に入力ができません。
    わたしがやり方を見逃しているのだとは思うのですが、
    コンテンツ欄への入力方法を教えていただけると助かります。
    よろしくお願いいたします。

    • とみーとみー より:

      pikoさま
      はじめまして、ご連絡いただきありがとうございます。
      私の環境で「コンテンツ欄に入力できない」という状況が再現できなかったため、参考のために詳しい実行環境をお聞きしてもよろしいでしょうか。
      使用しているテーマやプラグイン利用時のデバイス(スマホ・PC・タブレット)をお伺いできたらと思います。

      • piko より:

        お手数をおかけします。

        wordpress6.0.1
        PHPバージョン 7.4.30
        テーマはcocoon(2.4.7)
        パソコン(MacBook)で作業しています。

        この程度の情報で大丈夫でしょうか?
        よろしくお願いいたします。

        • とみーとみー より:

          貴重な情報ありがとうございます。
          WordPress6.0以降ではテストをしていなかったため、おそらくこの点が不具合を引き起こしていると考えられます。
          バージョン5から6にアップデートされる過程で大きく変化があり、当プラグインに限らず多方面で不具合が起きているため、解決に時間がかかる見込みです。
          どうぞ気長にお待ちいただけますと幸いです。

          • piko より:

            わかりました。

            かわいくて、いつかは利用したいと思っていますので、
            気長に待たせていただきます。

            対応にお時間をとっていただきまして、ありがとうございました。

          • とみーとみー より:

            こちらの環境で

            • WordPress6.0.1
            • PHPバージョン 7.4.30
            • Cocoon(2.4.7)

            のもとテストしてみましたが、コンテンツに入力できない問題が再現できませんでした。
            他の要因としては、プラグイン同士の干渉が考えられます。
            プラグインの改良を進めるのと並行して、問題の原因をもう少し探ってみます。

  3. maki より:

    コメント失礼します。枠線が表示されないのですが無料版のためでしょうか?有料版ですと表示されますでしょうか?

    • とみーとみー より:

      ご連絡いただきありがとうございます。
      現在のところ枠線を表示する機能は無料版・有料版とも実装しておりませんが、必要であればこの機会に枠線の表示機能を付け加えようと思います。どのような枠線(実線・点線・本記事で使用しているような影付き、など)があれば良いか、何かご希望がございましたら伺えますでしょうか?

      • maki より:

        お忙しい中ご連絡いただきありがとうございます。https://www.yahoo.co.jp/こちらの真ん中にあるタブみたいな感じはいかがでしょうか?色々と使い勝手がいいような感じが致します。

        • maki より:

          影付きも捨てがたいですね・・・笑

        • とみーとみー より:

          Yahooのページの感じですと、タブのラベルとコンテンツの間の余白を調整する必要がありそうです。現在

          • 実線
          • 点線
          • 破線

          の3つと、その太さ・色を変えられるような方向で開発を進めておりますので、気長にお待ちいただければと思います。また、ラベル・コンテンツ間の余白の有無もカスタマイズできるようにする予定です。

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