wordpressのウィジェットでショートコードを使ってみる

wordpressには、ウィジェットという機能が搭載されています。ウィジェットとは簡単に説明すると、wordpressの記事上で特定のコンテンツをサイドバーやフッター領域に表示するというものです。一般にカテゴリーやアーカイブ、最近の投稿やコメント、カレンダー、検索、メタ情報、テキスト、固定ページなどを出力するために利用されます。

テキストのウィジェットに関しては出力するコンテンツを自由に記述することができますが、他のものは所定の内容が出力されるため、自由度が低くなっています。ウィジェットのショートコードはこのうち、テキストのウィジェットで利用されることがほとんどです。

[ 目次 ]
  1. wordpressのウィジェットでショートコードを使うには？
  2. ショートコードとは
    1. 引数なしのシンプル設定
    2. 引数を設定
    3. タグのように囲んで呼び出す
  3. ウィジェットのカスタマイズ
  4. まとめ

wordpressのウィジェットでショートコードを使うには？

以下のコードをwordpressテーマ内のfunctions.phpに記述します。場所はどこでも構いませんが、自分でカスタマイズしている個所など、分かりやすいところが良いでしょう。このコードによってwordpressのウィジェット内でショートコードが利用できるようになります。ただ、タイトルなどに入力しても動作しないようです。

add_filter('widget_text', 'do_shortcode' );

次いで以下のようなコードを同じくfunctionsファイルへ記述します。もちろんサンプルですのでご自身の環境に応じて適宜変更して下さい。呼び出す時は、テキストのウィジェットエリア内で[name]という形式で記入します。add_shortcodeはwordpressで定義されている関数の一つで、第一引数のnameという文字列を変えることで、いくつでも設定できます。そのため、プラグインなどで、例えばnameというショートコードが設定されていると上書きされて、そのプラグインのものが出力されたり、或いは他のプラグインによって上書きされることもあり得ます。そういったケースではname部分を変更して下さい。

add_shortcode('name', function(){
return "wordpressでショートコードを使ってみる。";
});

ショートコードとは

wordpressの投稿画面上でphpを使えるようにするための仕組みです。通常、wordpressでphpコードを記入できるのはテーマやプラグインなど、限定された部分のみです。投稿画面ではphpを使うことはできません。これはセキュリティ面を考えてそういった仕様になっているためです。

しかしそれでは不便な面もあるため、ショートコードという仕組みが考案されたのでしょう。従ってウィジェットに限らず、ショートコードは投稿画面でも利用することができます。

呼び出し方は、上記のように単純にブラケットで囲んだものや[name A B C]、[name a=aa b=bb c=cc]といったもの、或いはブラケットで囲んだものをHTMLタグのように挟んで用いる方法があります。

引数なしのシンプル設定

add_shortcode('shortcode', function (){
return "wordpressのテスト";
});
[shortcode]

引数を設定

添え字が数字の配列です。以下の出力結果は「AとBとC」になります。

add_shortcode('namae', function ($array){
return "$array[0]と$array[1]と$array[2]";
});
[name A B C]

連想配列の形式です。下の結果は「wordpressとプログラムとデザイン」となります。

add_shortcode('namae', function ($ary){
return "$ary[a]と$ary[b]と$ary[c]";
});
[namae wordpress=cms php=プログラム c=デザイン]

タグのように囲んで呼び出す

結果は「wordpressの仕組みでphpとjqueryを使って色々遊ぼう！　ショートコードとB」となります。こちらはタグのように囲んでその中のテキストを処理すると同時に、配列も指定しています。呼び出す際はどちらか一方でも構いません。

add_shortcode('short', function ($hairetu_haitteru, $content){
$content = preg_replace_callback_array(
[
'`(プログラムで)(phpと)`su'=>function ($mtc){return preg_replace('`プログラム`', 'wordpressの仕組み', $mtc[1]).$mtc[2];},
'`(色々勉強しよう)`su'=>function ($mtc){return str_replace("勉強しよう", '遊ぼう', $mtc[1]);},
], $content);
return $content."　$hairetu_haitteru[0]と$hairetu_haitteru[1]";
});
[short ショートコード B]プログラムでphpとjqueryを使って色々勉強しよう！[/short]
wordpressのショートコードの使い方
wordpressのショートコードは、phpの関数を含むプログラムを投稿画面から利用できるようにした仕組みのことです。投...

ウィジェットのカスタマイズ

ワードプレスのウィジェットは、何もしなければテーマに標準搭載されているものしか使えません。そのため、数や掲載位置などはテーマ所定の設定に従うことになります。

しかしテーマのfunctionsファイルにregister_sidebarを登録し、該当部分にdynamic_sidebarを記入することで、数と場所を問わずにカスタマイズすることが可能です。また、プラグインとして導入するとどのテーマでも利用することができるようになります。

functions.phpへ記入する場合は、以下のコードを貼り付けます。これでウィジェットが有効化されます。また、register_sidebar関数内配列の「id」というキーの値が各ウィジェットの識別子になりますので、複数設置する場合はこの部分の名称を変更して追加します。他の値は変更しなくても問題ありません。

register_sidebar([
'name' => 'サイドバー',
'id' => 'sidebar',
'description' => 'サイドバーwidget',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
]);

次いで以下のコードをワードプレステーマ内のサイドバーやフッター領域に貼り付けます。dynamic_sidebar関数の引数に上記「id」の識別子を入れます。ここが一致しないと動作しませんので注意して下さい。複数ある場合はこの識別子ごとにdynamic_sidebarを追加していきます。

dynamic_sidebar( 'sidebar' );
wordpressでウィジェットを自作してカスタマイズ
ワープレにはウィジェットというシステムが導入されていますが、これはサイドバーやフッターなどに任意のコンテンツを...

まとめ

ワープレのウィジェットでのショートコードの使用方法は、通常と変わりません。書式は三種類ありますが、どれを用いても動きます。異なるところは投稿画面で入力するかどうかという点です。ただ、ショートコードはワードプレスのテーマのfunctionsファイルに登録されていないものが呼び出されるとそのまま表示されるため、見た目が悪くなるので注意して下さい。