管理画面

管理メニュー「Kashiwazaki SEO Step Flow」は 3 つのタブで構成されています。サイト全体の見た目を決める「デザイン設定」、どこで使われているかを確認する「設置箇所一覧」、書き方をまとめた「使い方」です。

設定できるのは「デザイン設定」タブだけです。「設置箇所一覧」と「使い方」は表示専用で、入力項目はありません。設定を変更できるのは manage_options 権限を持つユーザー(通常は管理者)です。

デザイン設定タブ

サイト全体の既定値を決めるタブです。ここで決めた値は、ブロック側で「サイトの既定」にしている箇所すべてに適用されます。ブロックごとに指定した値のほうが優先されます。

デザイン設定タブの上部と 6 デザインのプレビュー
「デザイン設定」タブ。6 デザインが実際の表示そのままのプレビュー付きで並びます

サイトの既定デザイン

6 枚のカードから 1 つを選びます。カードのどこをクリックしても選択でき、選択中のカードは枠が青くなります。プレビューはサンプルのステップ 3 つを、現在のアクセントカラーとラベルで描いたものです。

選択中のデザインカード
選択中のカード。ラジオボタン、デザイン名、説明、プレビューで構成されます

色とラベル・HowTo 構造化データ

色とラベル、HowTo 構造化データの設定
「色とラベル」と「HowTo 構造化データ」。最後に「変更を保存」を押すと反映されます

入力項目の一覧

「デザイン設定」タブにある入力項目はこの 4 つですべてです。

表示名 入力形式 初期値 内容・未設定時の動き
サイトの既定デザイン ラジオボタン(6 択) タイムライン 選べる値は timeline / card / number / arrow / horizontal / minimal。想定外の値が送られた場合はタイムラインに戻します
アクセントカラー カラーピッカー(16 進数) #2563eb(青) 番号・ライン・バッジの色。#rgb 形式も受け付け、#rrggbb に揃えて保存します。16 進数として解釈できない値が送られた場合は初期値に戻します
ステップのラベル テキスト(20 文字まで) STEP 番号の前に付く文字。空欄で保存するとラベルを表示せず、番号だけになります
HowTo 構造化データの出力 チェックボックス オン オフにすると、サイト全体で JSON-LD の出力を止めます。表示(デザイン)はそのまま残ります

アクセントカラーとラベルは、保存する前でもプレビューに反映されます。カラーピッカーで色を選ぶ、ラベルを打ち替える、といった操作をしながら 6 デザインの見え方を比べられます。

保存先は wp_optionsks_stepflow_settings 1 件のみです(4 つの値をまとめて保存します)。保存は WordPress の設定 API を使っており、送信時に nonce の検証が行われます。

設置箇所一覧タブ

ステップフローを含むコンテンツを一覧します。「どの記事で使っているか」「どのデザインで表示されるか」「HowTo が出力されるか」をまとめて確認できます。

設置箇所一覧タブ
「設置箇所一覧」タブ。1 行が 1 つのステップフローに対応します(1 つの記事に複数あれば複数行になります)
表示される内容
コンテンツタイトル(編集画面へのリンク)、投稿タイプとステータス、「編集」「表示」リンク
種類ブロックで置いたか、ショートコードで置いたか
デザイン実際に使われるデザイン名と色の丸。ブロック側で指定していない場合は「(サイトの既定)」と表示
ステップステップ数と、ステップ名を矢印でつないだ一覧
HowTo 構造化データ出力される場合は「出力」バッジと HowTo の名前、名前の出どころ。出力されない場合はその理由

「出力しない」と表示される理由

表示意味
ブロックで無効そのブロック(またはショートコード)で HowTo の出力をオフにしている
ステップが2つ未満ステップが 1 つしかない、または中身が空。HowTo は 2 ステップ以上で出力します
名前を決められないタイトル・直前の見出し・記事タイトルのいずれも取得できなかった
サイト全体でオフ「デザイン設定」タブで HowTo の出力をオフにしている

一覧は最近更新されたコンテンツから最大 500 件まで表示します。同期パターン(再利用ブロック)の中に置いたステップフローは、そのパターン自体の行として表示されます。ゴミ箱・自動下書きは対象外です。

使い方タブ

ブロックとショートコードの書き方、HowTo の名前の決まり方を、管理画面の中で確認できるタブです。設定中に手を止めずに参照できます。

使い方タブ
「使い方」タブ。ショートコードの記述例と属性の一覧が載っています

管理画面の「使い方」タブは要点だけの早見表です。いま読んでいるこの HTML マニュアルは、スクリーンショットと図を交えた詳しい版です。操作に迷ったらこちらを参照してください。