新旧比較
step
1Affinger6のオリジナル「ステップ(Step)」パーツです。
モディファイ後
point
1 新たにCSSをモディファイした「point_flag」パーツです。
WordPressテーマのAffinger6タグのテキストにある「ステップ(Step)」パーツ（ショートコード）は、お気に入りのアイテムの一つです。 当ブログでは、このStepパーツを使って手順等を示す機会が多々ありますが、「step」タイトル名は個別ページで変えることが出来ず、配色は簡単に変更できません。
そこで、Post Snippets プラグインを使って、「Step」パーツのCSS を利用することで、ページ毎にタイトル名（漢字もOK）や全体の配色を変更できる「point_flag」パーツ（ショートコード）を新たに作ってみました。
Post Snippets プラグインのバージョンは3.1.6を使っています。 最新バージョンは、4.0.2になっていますが、未だ不安定の部分があり、今までのショートコードとの互換がとれない等の問題が発生するので、旧バージョンを使っています。
Affinger6オリジナルの「Step」ショートコードについて
Stepパーツは、Affinger6のビジュアルエディタで タグ ＞ テキストパーツ ＞ ステップ を選択すると編集画面上に以下の囲み型ショートコードが記述されます。 囲み型ショートコードの間に、文字を記述して、オプションの step_no に番号を記入すると、下のように「Step」パーツがブラウザに表示されます。
step
1オリジナルの「Step」パーツ
shortcodeの説明 [st-step step_no="1"]オリジナルの「Step」パーツ[/st-step]背景色変更：
オリジナル「ステップ(Step)」パーツの背景色等を変えるには、カスタマイザー ＞ オプション（その他）＞ 「ステップ・カウント / ポイント（SC）」で変更できます。
作成した「point_flag」パーツ（ショートコード）を使った表示例
今回作成した「point_flag」パーツは、Post Snippets プラグインで作成した囲み型ショートコード名【point_flag】です。 Post Snippetsアイコンから選択し、ショートコードのオプションは以下になります。
- bg_color：配色の指定は３種類（brown,gray,grenn) の切替えが可能
無指定で、オリジナルの「Step」パーツと同色になります。 - flag_name：タイトル名（漢字２文字までOK）を記述
- number：数字番号を記述
Case
1 配色指定：brown タイトル名：Case
shortcodeの説明 [point_flag bg_color="brown" flag_name="Case" number="1"]タイトル配色指定：brown タイトル名：Case[/point_flag]
point
2 配色指定：gray タイトル名：point
shortcodeの説明 [point_flag bg_color="gray" flag_name="point" number="2"]配色指定：gray タイトル名：point[/point_flag]
Rank
3 配色指定：green（文字色は#FFC107）タイトル名：Rank
shortcodeの説明 [point_flag bg_color="green" flag_name="Rank" number="3"]配色指定：green（文字色は#FFC107）タイトル名：Rank[/point_flag]
Hint
4 配色指定：無指定 タイトル名：Hint
shortcodeの説明 [point_flag bg_color="" flag_name="Hint" number="4"]配色指定：無指定 タイトル名：Hint[/point_flag] 注記）bg_colorを無指定にすると、オリジナルの「Step」パーツと同色になります。
視点
5 配色指定：brown タイトル名：視点
shortcodeの説明 [point_flag bg_color="" flag_name="視点" number="5"]配色指定：無指定 タイトル名：視点[/point_flag] 注記）タイトル名は漢字２文字まで
Post Snippets プラグインによるショートコード作成
ショートコードが簡単に作成できる、Post Snippets プラグインを使います。 Post SnippetsプラグインをWordpressにインストールして有効化します。 Post Snippetsプラグインの使い方は、「小技・事例集」を参照してください。
Post Snippets（バージョンは3.1.6） 設定画面は以下の通りで、エリアに番号を振った部分に従って説明します。
① にショートコードの名称を記入します。 今回は、point_flag にしました。
② にHTMLコード（下記）を記入します。
②のエリアに記述するHTML
|
1 2 3 4 5 6 |
<div class="point_flag_{bg_color}"> <p class="st-step-title";><span class="st-step-box"> <span class= "st-step">{flag_name}<br/><span class="st-step-no">{number} </span></span></span> {content} </p></div> |
中括弧 { } 内が③に対応する変数で、{bg_color}、{flag_name}、{number} になります。 {content}は、囲み型ショートコードを指定し、囲み型ショートコードの間に見出し文言を入れます。
変数{bg_color}に、例えば brown を代入すると、親要素のdivタグのclassが、class="point_flag_brown" になります。
予めCSSを以下の様に子テーマのスタイルシート (style.css)に記述しておけば、変数{bg_color}に代入されたカラー名に従ったCSS（配色）になります。 今回は配色が３種類（brown,gray,grenn）ですので３種類のCSSを用意しています。
予めスタイルシート (style.css)に記述しておくCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* ---ショートコード[point_flag] 配色指定--- */ /* brown */ div.point_flag_brown .st-step-title {border-bottom: solid 2px brown;} div.point_flag_brown .st-step {color:#ffffff;background: brown;} div.point_flag_brown .st-step::before {border-top-color: brown;} /* gray */ div.point_flag_gray .st-step-title {border-bottom: solid 2px gray;} div.point_flag_gray .st-step {color:#ffffff;background: gray;} div.point_flag_gray .st-step::before {border-top-color: gray;} /* green */ div.point_flag_green .st-step-title {border-bottom: solid 2px green;} div.point_flag_green .st-step {color:#FFC107;background: green;} div.point_flag_green .st-step::before {border-top-color: green;} |
③ のVariables:変数（オプション）にデフォルト値を記載します。
bg_color=brown,flag_name=point,number=1
④ にショートコード化するので、レ点を入れます。 ⑤ にはPHPを使っていないので無記入のままです。
⑥ にショートコードの簡単な説明を記載します。 参考として以下を記載
終点に【/point_flag】を付けること！ 配色指定は３種類 brown、gray、 green
以上、「Step」パーツをモディファイしてオプションを拡張するショートコードの作成でした。 気に入ったら、HTMLコードやCSSコードをコピペしてお使いください、