WordPressのショートコードを活用するぞい

2015年8月22日カテゴリー : WordPress コメント : 0

　WordPress にはショートコードという便利なものがありまして、投稿画面のテキストエディタに簡単なコードを書くだけで使うことができます。

どこに書くの？

　プラグインとして記述し、読み込む方法もあるようですが、簡単な機能でよいなら function.php に書き足せば十分でしょう。

一番簡単なショートコード

　下のソースコードをお使いのテーマの function.php に追記してください。

function testFunc() {
    return "Hello Alcohol!";
}
add_shortcode('test', 'testFunc');

function testFunc() {

return "Hello Alcohol!";

}

add_shortcode('test', 'testFunc');

投稿画面に次のように記述します。

20150822_2_1

このように表示されます。

引数を渡す

　他のプログラミングのように引数を渡すことができます。

function testFunc($atts) {
    extract(shortcode_atts(array(
        'str' => "Wine",
    ), $atts));
    
    return $str;
}
add_shortcode('test', 'testFunc');

function testFunc($atts) {

extract(shortcode_atts(array(

'str' => "Wine",

), $atts));

return $str;

}

add_shortcode('test', 'testFunc');

引数を渡さなかった場合に使用される初期値を設定することもできます。

例えば、

20150822_2_3

このような場合は、

こうなります。

引数を渡さない場合は、

20150822_2_5

こうなります。

複数の引数を渡す

　複数の引数を渡すことも可能です。

function testFunc($atts) {
    extract(shortcode_atts(array(
        'str1' => "Beer",
        'str2' => "Gin",
        'str3' => "Vodka",
    ), $atts));
    
    return $str1 . " " . $str2 . " " . $str3;
}
add_shortcode('test', 'testFunc');

function testFunc($atts) {

extract(shortcode_atts(array(

'str1' => "Beer",

'str2' => "Gin",

'str3' => "Vodka",

), $atts));

return $str1 . " " . $str2 . " " . $str3;

}

add_shortcode('test', 'testFunc');

こう書きます。

20150822_2_7

こうなります。

例えば、一部引数を省略すると、

20150822_2_9

省略された部分には初期値が適用されます。

文字化けするときは

　日本語を出力しようとすると、文字化けするかもしれません。

function testFunc() {
    return "焼酎";
}
add_shortcode('test', 'testFunc');

function testFunc() {

return "焼酎";

}

add_shortcode('test', 'testFunc');

こうなってしまいます。

　今回の動作確認は、ローカル環境に WordPress をインストールし、テーマは「Twenty Fifteen」を使っています。Twenty Fifteen の function.php は Shift-JIS で保存され、ブラウザでの文字エンコードが UTF-8 なのでこのようになります。これを解決するには、

function testFunc() {
    return mb_convert_encoding("焼酎", "UTF-8", "SJIS");
}
add_shortcode('test', 'testFunc');

function testFunc() {

return mb_convert_encoding("焼酎", "UTF-8", "SJIS");

}

add_shortcode('test', 'testFunc');

ソースコードをこのように改良すれば、

きちんと表示してくれるようになります。

WordPressデザイン仕事のネタ帳見た目と効果を向上させるプロのテクニック

posted with カエレバ

細川富代,川下城誉,久松慎一,白坂翔エムディエヌコーポレーション 2014-03-24

Amazon

楽天市場

Tag : WordPress