My Snow Monkey（プラグイン）でショートコードを作って任意のHTMLを出力する方法

Snow Monkey公式フォーラムでこのようなやりとりがありました。

固定ページのカスタマイズの基本

タグ: カスタマイズ, 固定ページ このトピックには5件の返信、2人の参加者があり、最後にキタジマ …

snow-monkey.2inc.org

質問投稿で添付されているスクリーンショットは、某テーマ販売会社の某テーマだというのは見る人が見るとすぐにわかるのですが、やはりデザイン的にはこのような形も一定の需要があることは否めません。

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スタイルの設定方法

方法は２つあります。

直接書く

例えば、一番最初のシンプルなテキスト表示ですが、$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ファイルを用意して読み込むこともできます。

My Snow MonkeyからCSSファイルを追加してスタイリングする方法

Snow Monkeyのカスタマイズの基本は、CSSによるスタイリングではないでしょうか？ こちらでは、My …

happy-snow-monkey.olein-design.com

JavaScriptを読み込む場合には、お作法は同じでwp_enqueue_style()ではなくwp_enqueue_script()を使って読み込みます。

まとめ

簡単ではありますが、ショートコードの利用方法を説明してみました。冒頭にも書いたように、乱用は避けて可能な限りプラグイン形式で用意することをお勧めします。

雑な書き方をしていますが、以下リンクのソースコードのように、自由に記事を読み込んだりすることもできるので汎用性はかなり高いです。

Olein-jp/willsee

Contribute to Olein-jp/willsee development by creating an account on GitHub.

github.com

ぜひショートコードを良しなに使ってみてください。