広告 Affinger・改善

Affinger6の「Step」パーツをモディファイしてオプションを拡張するショートコードを作ってみました。
(Post Snippets利用)

スポンサーリンク

 

新旧比較

step
1
Affinger6のオリジナル「ステップ(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)」で変更できます。

 

 

オペレータ
オペレータ
ここから、Affinger6の「Step」パーツをモディファイして、新たに作成したショートコードの説明になります。

 

作成した「point_flag」パーツ(ショートコード)を使った表示例

今回作成した「point_flag」パーツは、Post Snippets プラグインで作成した囲み型ショートコード名【point_flag】です。 Post Snippetsアイコンから選択し、ショートコードのオプションは以下になります。

  • bg_color:配色の指定は3種類(brown,gray,grenn) の切替えが可能 
    無指定で、オリジナルの「Step」パーツと同色になります。
  • flag_name:タイトル名(漢字2文字まで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]
注記)タイトル名は漢字2文字まで

 

Post Snippets プラグインによるショートコード作成

ショートコードが簡単に作成できる、Post Snippets プラグインを使います。 Post SnippetsプラグインをWordpressにインストールして有効化します。 Post Snippetsプラグインの使い方は、「小技・事例集」を参照してください。

Post Snippets(バージョンは3.1.6) 設定画面は以下の通りで、エリアに番号を振った部分に従って説明します。

にショートコードの名称を記入します。 今回は、point_flag にしました。

にHTMLコード(下記)を記入します。

②のエリアに記述するHTML

中括弧 { } 内がに対応する変数で、{bg_color}、{flag_name}、{number} になります。 {content}は、囲み型ショートコードを指定し、囲み型ショートコードの間に見出し文言を入れます。 

変数{bg_color}に、例えば brown を代入すると、親要素のdivタグのclassが、class="point_flag_brown" になります。 

予めCSSを以下の様に子テーマのスタイルシート (style.css)に記述しておけば、変数{bg_color}に代入されたカラー名に従ったCSS(配色)になります。 今回は配色が3種類(brown,gray,grenn)ですので3種類のCSSを用意しています。

予めスタイルシート (style.css)に記述しておくCSS

CSSのセレクターを追加したりカラーネームの部分を変えることで、簡単に自分の好みの配色に変えることができます。 カラーネームとは、brownとかgrayとか表記されている部分です。

のVariables:変数(オプション)にデフォルト値を記載します。

bg_color=brown,flag_name=point,number=1

にショートコード化するので、レ点を入れます。  にはPHPを使っていないので無記入のままです。

にショートコードの簡単な説明を記載します。 参考として以下を記載

終点に【/point_flag】を付けること! 配色指定は3種類 brown、gray、 green

 

オペレータ
オペレータ
Saveボタンを押して「point_flag」ショートコードの完成です。 

 

以上、「Step」パーツをモディファイしてオプションを拡張するショートコードの作成でした。 気に入ったら、HTMLコードやCSSコードをコピペしてお使いください、

 

 

スポンサーリンク

 

スポンサーリンク

 

t