snow_monkey_prepend_main

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

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

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

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

Snow Monkeyには当サイトでも紹介しているように、様々な箇所にアクションフックが設置してあり、それらを経由して任意のHTMLを出力することができます。

しかし、それは予め用意されているアクションフックの箇所にのみ出力できるということでもあります。

そして、どうしても(アクションフックが用意されていない)この場所に任意のHTML形式で良いから出力をしたい!という場合もあるでしょう。

そういった場合に便利に利用できるのがショートコードというものです。[shortcode-demo]のような形で記述するアレです。WordPress標準でショートコードブロックが提供されているので、そちらを使ってショートコードを任意の場所に設置することでデザイン的な自由度を得ることができます。

ただし、あまりにもショートコードが乱立することでメンテナンス性が著しく落ちることもあるので、どれくらい利用するのかは、見通しを持った判断が必要になるでしょう。

今回は、そのショートコードをMy Snow Monkeyで作ってみる方法を紹介します。といっても、My Snow Monkey(プラグイン)でなくても、子テーマでもできるんですけどね。

ショートコードを用意する際に、テーマテリトリーで提供するべきなのか、プラグインテリトリーで提供するべきなのかを慎重にお考えください。

比較的自由な出力が可能になるため、便利機能として提供されがちではありますが、テーマに組み込んでしまい、テーマを変更したらただの文字列になってしまい表示されているというケースが少なくありません。

個人的にはショートコードは、必要なだけ細分化(小分けに)してプラグインという形で提供する方法の方が良いと考えています。

そうすることで、テーマを変更されてもショートコードは利用できる状況にしておくことができるので、ユーザーフレンドリーだと考えられるからです。

シンプルなショートコードの作り方

WordPressにショートコードを登録する

まずは、WordPress側にショートコードを登録します。

add_shortcode( 'hsm-shorcode-demo-name', 'hsm_shortcode_function_name' );

initに処理をフックする

そして、initにフックで処理内容を入れます。

function hsm_shortcode_function_name() {
	$output = '<p>Hello, Happy Snow Monkey!</p>';
	return $output;
}
add_action( 'init', 'hsm_shortcode_function_name' );

出力を確認する

これでショートコードは用意できました。

実際にショートコードブロックを設置し、ショートコードを入力して表示を確認してみましょう。

ショートコードを設置

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

Pタグで出力されていることがわかります。

これでショートコードの簡単な原理を確認することができたかと思います。

値を指定できるようにする

ショートコードにも値を設定することができます。こちらをうまく利用することで、カスタムブロックまではいきませんが、少々柔軟な対応ができるようになります。

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_' . $hsmshortcode[ 'color' ] . '" 
	target="' . $hsmshortcode[ 'target' ] . '">' . $hsmshortcode[ 'label' ] . '</a>';
	return $output;
}
add_action( 'init', 'hsm_shortcode_function_name' );

ショートコード全体のコードを掲載していますが、先ほどと変わった点は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_' . $hsmshortcode[ 'color' ] . '" 
	target="' . $hsmshortcode[ 'target' ] . '">' . esc_attr( $content ) . '</a>';
	return $output;
}
add_action( 'init', 'hsm_shortcode_function_name' );

変更点は、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;
}
add_action( 'init', 'hsm_shortcode_function_name' );

このようにすることで、HTMLの下にスタイルが直接書き込まれます。

CSS(やJS)を読み込む

こちらの記事が参考になると思います。CSSファイルを用意して読み込むこともできます。

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

まとめ

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

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

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

「あれ?この情報、古くない?」と思ったらご連絡ください。 snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main