WP Manifestindependent plugin directory
manifest / seo / wp-plugin-kashiwazaki-seo-stepflow

Kashiwazaki SEO Step Flow

WordPress plugin for step-by-step guides. Add steps via the block editor or the [ks_stepflow] shortcode, choose from 6 designs (timeline, card, big number, arrow, horizontal, minimal), and auto-generate HowTo structured data from the visible content.

by 柏崎剛 (Tsuyoshi Kashiwazaki) · github.com/tsuyoshikashiwazaki/wp-plugin-kashiwazaki-seo-stepflow · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/tsuyoshikashiwazaki/wp-plugin-kashiwazaki-seo-stepflow/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/tsuyoshikashiwazaki/wp-plugin-kashiwazaki-seo-stepflow ↗

手順や作業の流れを「STEP 01 → STEP 02 → …」のようなステップ形式で表示する WordPress プラグインです。ステップの設置と入力はブロックエディターの中で完結し、ページに表示したステップから HowTo 構造化データ（JSON-LD）を自動で出力します。

主な機能

  • ブロックで設置・入力 — ブロック「Kashiwazaki SEO Step Flow」を追加し、見たままの画面でステップ名と説明文を入力します。ステップの追加・並べ替え・削除は通常のブロック操作と同じです。
  • 6 種類のデザイン — タイムライン / カード / ビッグナンバー / アローリボン / ホリゾンタル / ミニマル。サイト全体の既定デザインを管理画面で選び、ブロックごとに別のデザインへ切り替えることもできます。
  • 色とラベル — アクセントカラーと番号の前のラベル（STEP・手順・Phase など）を、サイト全体とブロックごとに設定できます。文字色はアクセントカラーに合わせて白か濃い灰色が自動で選ばれます。
  • HowTo 構造化データ — ページに表示されている文字だけから HowTo を作ります（下記「HowTo 構造化データ」参照）。
  • 番号付きリストから変換 — 既存のリストブロックを変換すると、「企画：説明文」のような行をステップ名と説明文に分けて取り込みます。
  • ショートコード — [ks_stepflow] でクラシックエディターなどからも設置できます。
  • 設置箇所一覧 — どの投稿・固定ページにステップフローがあり、どのデザインで、HowTo が出力されるかを管理画面で一覧できます。
  • 表示幅に合わせたレイアウト — ブロックが置かれた場所の幅に応じて並び方を調整します（ホリゾンタルはステップ数に対して幅が足りないと自動で縦並びになります）。
  • プラグインを止めても本文が残る — ブロックは保存時に通常の番号付きリストも本文に書き込むため、無効化してもステップの文字は読める状態で残ります。

動作要件

  • WordPress 6.3 以上（ブロックエディター）
  • PHP 7.4 以上

インストール

  1. ファイル一式を wp-content/plugins/wp-plugin-kashiwazaki-seo-stepflow/ に配置します。
  2. 「プラグイン」一覧で Kashiwazaki SEO Step Flow を有効化します。
  3. 管理画面の左メニューに「Kashiwazaki SEO Step Flow」が追加されます（プラグイン一覧の「設定」からも開けます）。

使い方

ブロックで使う（おすすめ）

  1. 投稿の編集画面でブロックを追加し、「Kashiwazaki SEO Step Flow」を選びます（「ステップ」「手順」「フロー」でも検索できます）。
  2. 各ステップの「ステップ名」と「説明文」を入力します。「＋ ステップを追加」で増やし、ブロックツールバーの矢印で並べ替えます。
  3. 右側の設定パネル、またはツールバーのパレットアイコンから、デザイン・アクセントカラー・ラベル・HowTo 出力を切り替えます。
  4. 「タイトル」は任意です。入力するとステップの上に表示され、HowTo の名前にも使われます。

ショートコードで使う

1 行に 1 ステップを書き、ステップ名と説明文を「｜」「|」「：」のいずれかで区切ります（「|」「｜」が優先されるため、説明文の中に「：」を含めることもできます）。

[ks_stepflow design="timeline" title="記事制作と公開のフロー"]
企画｜狙うキーワードに対する切り口を決定し、競合記事を分析
構成作成｜見出し構成を設計し、論理的な流れで情報を整理
執筆｜構成に沿って本文を作成し、専門用語には解説を追加
[/ks_stepflow]
属性 内容
design timeline / card / number / arrow / horizontal / minimal。省略するとサイトの既定デザイン
title ステップの上に表示するタイトル（任意）。HowTo の名前にも使われます
accent アクセントカラー（例: #d97706）。省略するとサイトの既定色
label 番号の前のラベル（例: 手順）。省略するとサイトの既定
howto false にすると、このフローを HowTo 構造化データに含めません
id / class 外側の要素に付ける id とクラス名（任意）

管理画面

管理メニュー「Kashiwazaki SEO Step Flow」には 3 つのタブがあります。

  • デザイン設定 — サイトの既定デザイン（6 種類のプレビュー付き）、アクセントカラー、ステップのラベル、HowTo 構造化データの出力をまとめて設定します。
  • 設置箇所一覧 — ステップフローを含むコンテンツ、ブロック／ショートコードの別、デザイン、ステップ、HowTo の出力状況と名前を一覧します。
  • 使い方 — ブロックとショートコードの使い方、HowTo の決まり方を確認できます。

HowTo 構造化データ

構造化データは「ページに見えている内容の写し」として作ります。表示されていない情報は足しません。

  • 名前（name）: ブロックのタイトル → ステップフローの直前にある見出し → 記事タイトル の順に、最初に見つかったもの
  • 各ステップ（HowToStep）: 表示されているステップ名（name）と説明文（text）。説明文が空のときはステップ名を text に使います
  • 所要時間・費用・道具など、ページに表示されていない項目は出力しません
  • ステップが 2 つ未満のフロー、パスワード保護中のページ、ブロック／ショートコードで出力を止めたフローは対象外です

Google 検索の HowTo リッチリザルト表示は 2023 年に終了しています。このプラグインの HowTo は、検索エンジンや AI などが手順の構造を読み取るためのマークアップとして出力します。

出力前の HowTo は ks_stepflow_howto_data フィルターで変更・除外できます（null を返すとそのフローは出力されません）。

アンインストール

プラグインを削除すると、設定（ks_stepflow_settings）を削除します。投稿に設置したステップフローは本文に残り、保存済みの番号付きリストとして読める状態のままです。

ライセンス

GPL-2.0-or-later. 詳細は LICENSE を参照してください。

作者

柏崎剛（Tsuyoshi Kashiwazaki）