【ワードプレス】ショートコードを上書きする

ショートコードを上書きする方法の解説ページアイキャッチ

このページでは、ワードプレスにおける「ショートコードの上書き」を行う方法の解説、およびサンプルプログラムの紹介をしていきます。

親テーマのショートコードを「子テーマから上書き」することで、親テーマの変更を行うことなくショートコードの上書きを実現していきます。

ワードプレスでは、ショートコードを記事内に記述しておくと、ページ表示時に タグ名 に応じた関数が実行されることになります。

ページ表示時にショートコードのタグ名に関連付けられた関数が実行される様子

それにより、吹き出しの表示やボックスの表示などといった様々な機能を実現することができるのですが、今回は、そのページ表示時に実行される関数を上書きし、異なる関数が実行されるようにするための方法を解説していきます。

ショートコードを上書きする様子

これにより異なる関数が実行されるようになり、ショートコードの機能を変更することができます。例えば、ショートコードの機能に気に入らない点があったり、改善したい点がある場合、この方法を利用することで、よりあなた好みのショートコードにカスタマイズすることができます。

また、親テーマを変更せずに子テーマのみを変更するので、比較的安全にショートコードの上書きを行うことができます。

ショートコードを上書きするサンプルコード

まず結論として、ショートコードを上書きするサンプルコードを紹介しておきます。

ショートコードの上書きは、子テーマの functions.php に下記を追記することで実現することができます(<?php?> の間に追記してください)。

タグ名 に上書きしたいショートコードのタグ名を、関数名 には、そのタグ名が記事に記述されている場合にページ表示時に実行させるようにしたい関数の関数名を指定してください。

ショートコードの上書き
function 関数名(引数)
{

	/* 実行したい処理 */
}

function overwrite_shortcodes() {

	remove_shortcode('タグ名');
	add_shortcode( 'タグ名', '関数名' );

}
add_action('wp_loaded', 'overwrite_shortcodes');

もしかしたら remove_shortcode の実行は不要かもしれませんが(現状の add_shortcode 関数のコードを読んだ感じだと不要)、念の為実行しておいた方が無難だと思います。

例えば、機能を変更したいショートコードのタグ名が s_codes_code がショートコードとして記述されている場合に実行させたい関数の関数名が my_code_function である場合(引数は $atts としています)、下記のように子テーマの functions.php に追記を行うことになります。

ショートコードの上書き例
function my_code_fuction($atts)
{
	/* 実行したい処理 */
}

function overwrite_shortcodes() {

	remove_shortcode('s_code');
	add_shortcode( 's_code', 'my_code_function' );

}
add_action('wp_loaded', 'overwrite_shortcodes');

ショートコードを上書きする仕組み

おそらく、ワードプレスのテーマの開発やカスタマイズ等に熟知されている方であれば、上記のソースコードを読めばどういう仕組みでショートコードが上書きされるのかを理解していただけるのではないかと思います。

ただ、ワードプレスのテーマの開発等を行なったことがない方もおられると思いますし、上記のソースコードの意味が分からないという方も多いと思いますので、以降では上記のソースコードによってショートコードが上書きされる仕組みについて解説しておきたいと思います。

ショートコード登録の仕組み

まず、ショートコードは add_shortcode 関数を実行することで登録することができます。第1引数にはショートコードの タグ名、第2引数には 関数名 を指定します。

例えば下記のように add_shortcode 関数を実行すれば、s_code というタグ名のショートコードが登録されることになります。

ショートコードの登録
add_shortcode('s_code', 'code_func');

さらに、上記の add_shortcode 関数の実行により、第1引数で指定した タグ名 と第2引数で指定した 関数名 が関連付けされることになります。

そして、ワードプレスの記事にショートコードとして タグ名 が記載されている場合、ページが表示される際に、その タグ名 に関連付けられた 関数名 の関数が実行されることになります。

例えば上記であれば、ワードプレスの記事にショートコードとして s_code が記載されている場合、ページが表示される際に関数 code_func が実行されることになります。

この辺りは下記ページでも解説しているので詳しくはこちらをご参照ください。

ショートコード作成方法解説ページのアイキャッチ【ワードプレス】テーマの作り方⑦:ショートコードを自作する

おそらくあなたがワードプレスで使用しているテーマにおいても、いずれかの PHP のファイルの中で、ショートコードを登録するために add_shortcode 関数が実行されているはずです。

ですので、その add_shortcode 関数実行部分の第2引数を変更してやれば、登録されたショートコードに関連付けられる関数を変更することは可能です。ですが、これをやるとテーマ自体(親テーマ)を変更してしまうことになるのでやめた方が良いです。

テーマのアップデート時にその変更部分が上書きされる可能性があります。

ということで、ショートコードを上書きする処理は親テーマではなく子テーマから行う方が無難です。

MEMO

子テーマは、おそらくあなたが使用しているテーマの配布元から提供されているはずです

まだ子テーマを入手していない方は「ワードプレス テーマ名 子テーマ」等で検索してみてください

ショートコードを上書きする方法

では、子テーマからショートコードをどうやって上書きすれば良いかというと、考え方は単純で、親テーマが add_shortcode 関数を実行した後に、子テーマから add_shortcode 関数を実行してショートコードの再登録を行えば良いだけです。

ショートコードの再登録
remove_shortcode('タグ名')
add_shortcode('タグ名', '関数名');

前述でも少し触れましたが、現状のワードプレスでは remove_shortcode 関数の実行はおそらく不要だと思います。が、念の為 remove_shortcode 関数も実行するものとして解説していきたいと思います。

例えば、s_code というタグ名のショートコードを上書きして my_code_func という関数が実行されるようにしたいのであれば、子テーマから下記を実行するようにします(my_code_func 関数の定義も別途必要になります)。

ショートコードの再登録例
remove_shortcode('s_code')
add_shortcode('s_code', 'my_code_func');

上記では、remove_shortcode 関数により s_code のショートコードの登録を一旦取り消し、add_shortcode 関数により s_code のショートコードの再登録を行なっています。

これにより、s_code には  add_shortcode 関数に指定された第2引数の 関数名 が新たに関連付けられることになり、実行される関数が上書きされることになります。

そもそもショートコードの各タグに関連付けできる関数は1つのみですので、remove_shortcode 関数は実行しなくてもショートコードの上書きは行えるとは思いますが、一応 remove_shortcode 関数についても実行するようにしています。

ただ、ここでポイントになるのが、上記の「子テーマからの add_shortcode 関数の実行タイミング」です。

この「子テーマからの add_shortcode 関数の実行タイミング」が親テーマからの add_shortcode 関数の実行タイミングよりも遅い場合にしか、ショートコードの上書きを行うことはできません。

ショートコードが利用できるということは、親テーマのいずれかの PHP ファイルで add_shortcode 関数が実行されているはずです。もし、親テーマからの add_shortcode 関数実行タイミングが、子テーマからの add_shortcode 関数の実行タイミングよりも遅い場合はどうなるでしょうか?

この場合、まず子テーマから add_shortcode 関数が実行されてショートコードが登録され、その後に親テーマからの add_shortcode 関数の実行によりショートコードが上書きされてしまうことになります。

子テーマで登録したショートコードが親テーマから上書きされてしまう様子

ですので、結局子テーマが add_shortcode 関数の第2引数で指定した 関数名 の関数ではなく、親テーマが add_shortcode 関数の第2引数で指定した 関数名 の関数が実行されてしまうことになります。つまり、子テーマが add_shortcode 関数を実行した意味がありません….。

そのため、子テーマからの add_shortcode 関数の実行タイミングが、必ず親テーマからの add_shortcode 関数の実行タイミングよりも遅くなるようにしなければなりません。

もしかしたらテーマによって異なるかもしれませんが、少なくとも私が利用している SANGO の場合は、先に子テーマ側のセットアップが行われるようでした。

ですので、単に子テーマの functions.php に下記を追記して add_shortcode 関数を実行したとしても、ショートコードの上書きは実現できませんでした。

ショートコードの再登録
remove_shortcode('タグ名')
add_shortcode('タグ名', '関数名');

おそらく、SANGO 同様に、親テーマよりも子テーマの方が先にセットアップされるテーマは多いのではないかと思います。

フックを利用して上書きするタイミングを制御

ということで、ショートコードの上書きを実現するためには、子テーマからの add_shortcode 関数の実行タイミングが、必ず親テーマからの add_shortcode 関数の実行タイミングよりも遅くなるように制御する必要があります。

このために、「フック」を利用します。

ワードプレスにおいては、ページの表示を行う前にテーマ等のセットアップが行われます。そして、これらのセットアップが完了した後には wp_loaded というフックが仕掛けられています。

そのため、このフック wp_loaded に関数を登録しておけば、セットアップ完了後、つまり子テーマと親テーマ両方のセットアップが完了した後に、その登録した関数が自動的に実行されるようになります。

そして、その登録した関数の中で add_shortcode 関数を実行するようにしておけば、親テーマのセットアップの後、つまり親テーマからの add_shortcode 関数実行の後に、子テーマから add_shortcode 関数を実行することができるようになります。

フックを利用してadd_shortcode関数の実行タイミングを遅らせる様子

前述の通り、後から実行された add_shortcode 関数によってショートコードの上書きが行われますので、これにより、親テーマが登録したショートコードを子テーマからショートコードを上書きすることができることになります。

フックについては下記ページで詳細を解説していますので、詳しく知りたい方はコチラをご参照ください。フックの仕組みを理解しておけば、今回のような関数の実行タイミングを制御したい時に役立つと思います。

ワードプレスのフック解説ページのアイキャッチワードプレスのフックとは?使い方は?初心者向けに分かりやすく解説します!

ショートコードを上書きするために必要な実装

続いては、ここまで解説してきた内容を実装していきたいと思います。変更するのは子テーマの functions.php のみです。

この functions.php には下記の追記を行います。

  • add_shortcode 関数の第2引数に指定する関数の定義
  • overwrite_shortcodes 関数の定義
    • 関数内で remove_shortcodeadd_shortcode を実行
  • フック wp_loaded への overwrite_shortcodes 関数の登録

具体的には、下記のようなコードを functions.php に追記することになります。下記ではタグ名 s_code のショートコードを上書きする例になり、記事内に s_code がショートコードとして記述されている場合に、ページ表示時に my_code_func が実行されるようになります。これらのタグ名や関数名は適当なものに変更してください。

functions.php
/* add_shortcode 関数の第2引数に指定する関数の定義 */
function my_code_func($atts)
{
	/* 実行する処理 */
}

/* overwrite_shortcodes 関数の定義 */
function overwrite_shortcodes() {

	/* ショートコードの上書き */
	remove_shortcode('s_code');
	add_shortcode( 's_code', 'my_code_func' );

}

/* wp_loaded への overwrite_shortcodes 関数の登録 */
add_action('wp_loaded', 'overwrite_shortcodes');

上記の追記内容の動作について解説しておきます。

まず、ページ表示時にはワードプレスのセットアップが行われ、その際に子テーマのセットアップも行われます。その際に、子テーマの functions.php の読み込みが行われ、その中で上記の add_action('wp_loaded', 'overwrite_shortcodes') が実行されます。

これにより、do_action('wp_loaded') が実行された際に、overwrite_shortcodes 関数が実行されるようになります。

そして、この do_action('wp_loaded') はワードプレス全体のセットアップが完了した際に自動的に実行されます(ワードプレス本体から実行される)。ですので、親テーマのセットアップも完了した後に overwrite_shortcodes 関数が実行されることになります。

さらに、overwrite_shortcodes 関数の中では add_shortcode 関数を実行していますので、これにより親テーマが登録したショートコードの上書きを行うことができます(一応 remove_shortcode も実行しています)。

ただし、add_shortcode 関数を実行するためには第2引数に指定する関数が必要になります。上記では、この第2引数に指定する関数を my_code_func としており、この関数の定義も追記内容の一番上の部分で行っています。

以上が上記のソースコードの説明 & ショートコードを上書きするサンプルコード で示したソースコードでショートコードを上書きする仕組みの説明となります。

補足しておくと、ショートコードを上書きすることで実行される関数が変わることになりますが、その関数の引数や返却値の有無に関しては、元々実行されていた関数に合わせる方が無難だと思います。

元々実行されていた関数の関数名は親テーマ内で実行される add_shortcode 関数の第2引数に指定されていますので、検索などを行ってこれらを辿っていくことで、元々実行されていた関数の引数や返却値の有無を調べることができます。

例えばですが、親テーマのフォルダ内を add_shortcode('タグ名' で検索すれば、親テーマが add_shortcode 関数を実行しているコードを見つけることができ、その add_shortcode 関数の第2引数から元々その タグ名 に関連付けられていた 関数名 を調べることができます。

さらに親テーマのフォルダ内を調べた 関数名 で再度検索すれば、その 関数名 の関数が定義されているコードを見つけることができます。そして、そのコードを読むことで、元々の関数の引数や返却値の有無等を調べることができます。

スポンサーリンク

まとめ

このページでは、「ショートコードの上書き」を行う方法の解説、およびサンプルプログラムの紹介を行いました!

やることは単純で、子テーマの functions.php に下記のようなコードを記述すれば良いだけです。

ショートコードの上書き
function 関数名(引数)
{

	/* 実行したい処理 */
}

function overwrite_shortcodes() {

	remove_shortcode('タグ名');
	add_shortcode( 'タグ名', '関数名' );

}
add_action('wp_loaded', 'overwrite_shortcodes');

今回は親テーマではなく子テーマからのショートコードの上書きを行っており、これを実現するために重要な役割を果たしているのは「フック」です。

フックを利用することで、フックが仕掛けられているタイミングで自身が作成した関数を実行することができるようになります。そしてこれにより、ワードプレス本体や親テーマを変更することなく、子テーマからワードプレスや親テーマの動作をカスタマイズすることができるようになります。

こういったカスタマイズを行うためにはフックについてしっかり理解しておくことをオススメします!フックについては下記ページで解説していますので、興味があればぜひ読んでみてください!

ワードプレスのフック解説ページのアイキャッチワードプレスのフックとは?使い方は?初心者向けに分かりやすく解説します!

コメントを残す

メールアドレスが公開されることはありません。