Snow Monkey公式フォーラムでこのようなやりとりがありました。
質問投稿で添付されているスクリーンショットは、某テーマ販売会社の某テーマだというのは見る人が見るとすぐにわかるのですが、やはりデザイン的にはこのような形も一定の需要があることは否めません。
Snow Monkeyには当サイトでも紹介しているように、様々な箇所にアクションフックが設置してあり、それらを経由して任意のHTMLを出力することができます。
しかし、それは予め用意されているアクションフックの箇所にのみ出力できるということでもあります。
そして、どうしても(アクションフックが用意されていない)この場所に任意のHTML形式で良いから出力をしたい!という場合もあるでしょう。
そういった場合に便利に利用できるのがショートコードというものです。[shortcode-demo]
のような形で記述するアレです。WordPress標準でショートコードブロックが提供されているので、そちらを使ってショートコードを任意の場所に設置することでデザイン的な自由度を得ることができます。
ただし、あまりにもショートコードが乱立することでメンテナンス性が著しく落ちることもあるので、どれくらい利用するのかは、見通しを持った判断が必要になるでしょう。
今回は、そのショートコードをMy Snow Monkeyで作ってみる方法を紹介します。といっても、My Snow Monkey(プラグイン)でなくても、子テーマでもできるんですけどね。
ショートコードを用意する際に、テーマテリトリーで提供するべきなのか、プラグインテリトリーで提供するべきなのかを慎重にお考えください。
比較的自由な出力が可能になるため、便利機能として提供されがちではありますが、テーマに組み込んでしまい、テーマを変更したらただの文字列になってしまい表示されているというケースが少なくありません。
個人的にはショートコードは、必要なだけ細分化(小分けに)してプラグインという形で提供する方法の方が良いと考えています。
そうすることで、テーマを変更されてもショートコードは利用できる状況にしておくことができるので、ユーザーフレンドリーだと考えられるからです。
デモコード内にある init
にフックしている部分が不要とのコメントをいただきましたので、修正をさせていただきました。
詳しくは公式ドキュメントも参照ください!
シンプルなショートコードの作り方
WordPressにショートコードを登録する
まずは、WordPress側にショートコードを登録します。
add_shortcode( 'hsm-shorcode-demo-name', 'hsm_shortcode_function_name' );
出力を確認する
これでショートコードは用意できました。
実際にショートコードブロックを設置し、ショートコードを入力して表示を確認してみましょう。

先ほどのコードだと、出力はこうなります。

これでショートコードの簡単な原理を確認することができたかと思います。
値を指定できるようにする
ショートコードにも値を設定することができます。こちらをうまく利用することで、カスタムブロックまではいきませんが、少々柔軟な対応ができるようになります。
add_shortcode( 'hsm-shorcode-demo-name', 'hsm_shortcode_function_name' );
function hsm_shortcode_function_name( $atts ) {
$hsmshortcode = shortcode_atts( array(
'link' => '#',
'color' => 'blue',
'label' => 'Button',
'target' => '_self'
), $atts );
$output = '<a href="' . esc_url( $hsmshortcode[ 'link' ] ) . '"
class="hsm-shortcode-demo-button hsm-shortcode-demo-button_' . esc_attr( $hsmshortcode[ 'color' ] ) . '"
target="' . $hsmshortcode[ 'target' ] . '">' . esc_html( $hsmshortcode[ 'label' ] ) . '</a>';
return $output;
}
ショートコード全体のコードを掲載していますが、先ほどと変わった点はshortcode_atts
で値を配列で設定している部分と、それに応じて$output
の中身も変更になっています。
この例は、ショートコードでボタンを作れるようにしています。対応できる色の中から選べるようにして、その名前をCSSクラスの一部として出力させます。モディファイで用意しておくと汎用性は高いでしょう。
ショートコードブロクを使った設定方法はこのように書きます。

表示部分はこのようになります。ちゃんとlabel
も反映されていますし、開発者ツールでコードを確認してもらうと、設定した値が出力されていることが確認できるでしょう。

囲み型ショートコードを作る
最後に[shortcode]なにがし{/shortcode]
というような、囲み型のショートコードの作り方です。
といって、先ほどとほぼ変わりはありません。
add_shortcode( 'hsm-shorcode-demo-name', 'hsm_shortcode_function_name' );
function hsm_shortcode_function_name( $atts, $content = null ) {
$hsmshortcode = shortcode_atts( array(
'link' => '#',
'color' => 'blue',
'target' => '_self'
), $atts );
$output = '<a href="' . esc_url( $hsmshortcode[ 'link' ] ) . '"
class="hsm-shortcode-demo-button hsm-shortcode-demo-button_' . esc_attr( $hsmshortcode[ 'color' ] ) . '"
target="' . $hsmshortcode[ 'target' ] . '">' . esc_attr( $content ) . '</a>';
return $output;
}
変更点は、hsm_shortcode_function_name
に$atts
に加えて$content = null
を設定しているところと、$output
部分に先ほどは$hsmshortcode[ 'label' ]
が出力してあったところにesc_attr( $content )
で$content
を出力するようにしているところです。
ショートコードブロックの設定はこのようになります。

実際の出力はこうなります。

CSSスタイルの設定方法
方法は2つあります。
直接書く
例えば、一番最初のシンプルなテキスト表示ですが、$output
に<style>
にて直接記述することもできます。
function hsm_shortcode_function_name() {
$output = '<p class="hsm-shortcode-demo">Hello, Happy Snow Monkey!</p>
<style>
.hsm-shortcode-demo {
background-color: #f4f4f4;
}
</style>
';
return $output;
}
このようにすることで、HTMLの下にスタイルが直接書き込まれます。
CSS(やJS)を読み込む
こちらの記事が参考になると思います。CSSファイルを用意して読み込むこともできます。
JavaScriptを読み込む場合には、お作法は同じでwp_enqueue_style()
ではなくwp_enqueue_script()
を使って読み込みます。
まとめ
簡単ではありますが、ショートコードの利用方法を説明してみました。冒頭にも書いたように、乱用は避けて可能な限りプラグイン形式で用意することをお勧めします。
雑な書き方をしていますが、以下リンクのソースコードのように、自由に記事を読み込んだりすることもできるので汎用性はかなり高いです。
ぜひショートコードを良しなに使ってみてください。
外注先をお探しの方へ
当サイトを制作・管理しているオレインデザインを、WordPressを利用したウェブサイト制作の開発外部リソースに利用しませんか?
お気軽にお問い合わせください。