ブログ のお勧め記事

WordPressに自作ショートコードを追加する(WordPressでTTS第4回)

2016/09/20

WordPressブログの大きな特長の一つは、ブログの機能を自分で拡張できることです。特に「ショートコード」の作り方を覚えると、ブログの効率がぐんとアップします。

ショートコードとは?

ブログの記事中に同じような内容を繰り返し書くことがある場合、それを数文字のショートコードにまとめることで、ブログの生産性を飛躍的に向上させることができる、Wordpressの機能です。

HTML、PHPプログラムの他にも、通常の文章もショートコードにすることができます。

例えば、記事中に

[onsei]

と書くだけで、

你好吗

と表示され、音声も再生できるようにできるんです。ショートコードすごい!

ショートコードを使いこなせば、文字を打つ回数を大幅に減らすことができるので、文章そのものにもっと集中できる、そんなメリットもありますね。

基礎編:簡単なショートコードを作ってみよう

まずは、シンプルなショートコードを作ってみましょう。

作るのは、『ここで音声が流れます。』という文章をブログに追加するショートコードです。

ショートコードの名前を決める

最初にショートコードの名前を決めます。短くて覚えやすいものがいいでしょう。

ショートコードの命名規則

ショートコードの名前には、以下の文字を含んではいけないというルール(命名規則)がありますので、そのルールに従った名前にします。

・角括弧: [ ]
・山括弧: < >
・アンパサンド: &
・スラッシュ: /
・空白: スペース 改行(ラインフィード) タブ
・印刷できない文字: \x00 - \x20
出典:WordPress Codex

functions.phpに関数を追加する

Chrome Legacy Window 20151031 211504

WordPressの管理画面の「テーマの編集」から、「テーマのための関数(functions.php)」という項目を選びます。

編集画面の一番下までスクロールしたら、以下の内容を記入します。

function onsei_func() {
    return 'ここで音声が流れます。';
}
add_shortcode('onsei', 'onsei_func');

注意:ここで半角と全角が違ったり、必要な文字が抜けているとエラーになり、サイトが真っ白になるので編集は慎重に!

思ったよりとっても簡単ですね!

書き込みが終わったら「ファイルを更新」ボタンを押します。

記事にショートコードを追加する

1.新しい記事を用意します。

2.以下のように記事に書いてみます。


[onsei]

記事に「ここで音声が流れます。」という文字が表示されたらOKです!

応用編:TTS再生コードをショートコードにする

ここからは、これまでのシリーズで作ってきたTTS音声の再生コードをショートコードにしていきます。

WordPressブログにTTS(Text to speech)を実装する方法:
第1回:WordPressに無料の中国語TTSを実装する方法
第2回:TTS音声をJavascriptで再生する
第3回:Javascriptで音声再生中にアニメーションさせる方法

先ほど作成した記事は、後でまた使うので、下書き保存して取っておきましょう。

ショートコードの中身をTTS音声の再生コードで置き換える

先ほど「テーマのための関数(functions.php)」に書き加えたショートコードの中身を書き換えていきます。

詳しい説明は省略しますが、こんな感じになります。

function onsei_func() {
    $uid = uniqid();
    $str = <<<EOD
<audio id="aud_$uid" src="/*TTS再生プログラムのPATH*/?source=你好吗" style="width:0;">
</audio>
你好吗<a href="javascript:void(0)" onclick="tts('$uid')">
<img src="/*再生待ち画像のPATH*/" id="img_$uid"/>
</a>
EOD;
    return $str;
}
add_shortcode('onsei', 'onsei_func');

では、ショートコードを確かめてみましょう。

前の手順で作成して下書き保存した記事をまた呼び出して、記事のプレビューを見てみましょう。

下のように表示されればOKです。

你好吗

 

ショートコードに引数を追加する

これで、TTS音声の再生コードをブログ記事中に簡単に追加できるようになりました。

ただ、このままでは再生する単語がいつも固定されてしまうので、単語が変更できるといいですね。

ということで、今度はショートコードに「引数(ひきすう)」を追加します。

引数は「パラメーター」とも言います。

変数を使えば、表示する内容に変化をつけることができ、ショートコードをさらに色々な箇所で使うことができるようになります。

1.ショートコードの本体(関数)に引数を追加する。

ショートコード本体(関数)の1行目のカッコの中に引数を書き加えます。

2.引数を取り出す

ショートコードの場合、先ほど追加した引数(関数の引数)から、「ショートコード引数」を取り出す必要があります。

これはショートコードの引数独自のお作法です。理屈はともかく、サンプルコードをそのまま覚えてしまえばOKです。

3.取り出した引数を使う

これまでのコードの中にあった「你好吗」の部分を、取り出したショートコード引数(ここでは「$text」)に置き換えます。

ここまでの作業をした後のコードは以下のようになります。

function onsei_func($atts) {
    extract(shortcode_atts(array('text' => '',), $atts));
    $uid = uniqid();
    $str = <<<EOD
<audio id="aud_$uid" src="/*TTS再生プログラムのPATH*/?source=$text" style="width:0;">
</audio>
$text<a href="javascript:void(0)" onclick="tts('$uid')">
<img src="/*再生待ち画像のPATH*/" id="img_$uid"/>
</a>
EOD;
    return $str;
}
add_shortcode('onsei', 'onsei_func');

1行目のカッコの中の「$atts」が引数、
2行目がショートコード引数を取り出すためのコード、
5行目と7行目で取り出したショートコード引数を使っています。

4.記事の中でショートコード引数を使う

これでTTS音声を再生するショートコードが完成しました。

先ほど一時保存しておいたページを開いて、以下のように書き換えましょう。

[onsei text="我很好"]

下のように表示され、アイコンをクリックしたら音声が流れるようになっていたら成功です!

我很好

 

まとめ:Wordpressのカスタマイズはショートコードを覚えれば無敵?

このショートコードをさらにカスタマイズしていくと、多言語に対応したりすることもできます。

ぜひ、ショートコードを使いこなして、オリジナルのWordpressブログを楽しんでください!

初心者にもおすすめのWordpress教科書

これからWordpressを勉強したいと思う方におススメの一冊です。

初心者でも、しっかり読み込んでいけば必ずできるようになりますよ!

WordPressレッスンブック HTML5&CSS準拠
WordPressレッスンブック HTML5&CSS準拠エビスコム

ソシム 2014-06-18

Amazonで詳しく見る by G-Tools

-ブログ

この記事を書いた人

C-STUDY管理人。フリーランスのプログラマー+中国語通訳翻訳+ブロガーをやってます。中国語は独学でHSK8級+中検準1級。中国・中華圏を中心に東アジア~東南アジアが活動範囲です。もっと詳しく

共有する

これは役に立つ!面白い!と思ったら共有してくださるとうれしいです。シェアしていただけると、がぜんやる気がでます^^

C-STUDYの定期読者になりませんか?

ブログの更新情報をメールでお届けします。購読は無料、解除も簡単です。 読者数:244人

関連記事