スポンサーリンク

【WPプラグイン配布】STEP表示に特化したプラグイン!レスポンシブにも対応です(>ω<)

スポンサーリンク

はじめに

前回の記事では、AIを相棒にプラグインを開発した裏話をお届けしました。 今回は、STEP表示に特化したプラグインを作りました!レスポンシブにも対応で、使いやすいカードタイプです。
とにかく、これしか出来ませんので、軽量かつ使いやすいを目指しています
多機能過ぎ、UIが英語等で使いづらいプラグインが多かったため、誰でもかんたんに設定できる軽量なループスライダーを作っちゃいましたよ。

百聞は一見にしかず。
これです。(ろくな画像がなくすみません。)

STEP① えっ??
STEP①

えっ??

ん??どうしたん??
STEP② はっ!!
STEP②

はっ!!

やばいかも????
STEP③ ガーン!!!
STEP③

ガーン!!!

無理だったー。最悪やー。
STEP④ しくしく
STEP④

しくしく

もうしません。つらすぎる。

こんな機能追加して!とか言う方は、まず自分でAIを相棒に修正してみてください!

プラグインをダウンロード

WordPress管理画面からアップロードして有効化

淡路タマオ
淡路タマオ

かんたんにプラグインをインストールできるで!

WordPressの管理画面>プラグイン>プラグインのアップロード

DigitalOnion Step Blocks 使い方ガイド

Plugin Version 1.0 / Author: AwajiTamao

1. ステップの作成と設定

WordPressメニューの 「Step Blocks」 から設定を行います。

  • パターンの管理: 最大5つ(パターン1〜5)の異なるステップを個別に作成・保存可能です。
  • 基本デザイン: カードの背景色をカラーピッカーで自由に選択できます。
  • 番号形式: ステップ番号の表示を「STEP①」または「①(数字のみ)」から選択できます。
  • 段階の追加: 「+ 段階を追加」ボタンで、必要なステップ数を自由に追加できます。

2. 表示レイアウトの設定

閲覧デバイスに合わせて最適な見た目を提供します。

PC表示(1行の表示数)

PCでの横並び数を設定します(1〜10列)。指定した数に合わせてカードが等幅で自動整列します。

スマホ表示(自動最適化)

画面幅が狭い端末では、自動的に「縦並び(画像とテキストが横に並ぶ形式)」に切り替わります。

3. 表示方法(ショートコード)

作成したステップを表示したい箇所に、以下のショートコードを貼り付けてください。

ステップブロックを表示する:

[digitalonion_step id="1"]

※id=”1″ の数字を、表示したいパターン番号(1〜5)に変更してください。

💡 きれいに表示させるコツ

  • 画像サイズ: PC表示は「3:2」、スマホ表示は「2:3」の比率で自動的に中央でトリミングされます。
  • カードの高さ: 各ステップのテキスト量を揃えると、全体のバランスが美しく整います。
  • 改行の反映: 設定画面の「内容」欄で入力した改行は、実際のページにも反映されます。

まとめ

淡路タマオ
淡路タマオ

特化したプラグインやから、とにかくそれしかできらんのやで!

軽量で、日本語、だれでも直感で設定できる。
ここが目的だったりします。

もっとこうしたい、ああしたいと思う方は、とりあえずご自身で弄ってみてください。
また似たようなプラグインも作っています。こちらは1ブロックずつ自分で好きな文字を配置できますよ。

問い合わせ

※過去記事の誤報や削除依頼は随時受け付けております。

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