Web関連 WordPress

[WordPress]ショートコードを使ってブログ作成時間を短縮する方法

更新日:

スポンサードリンク

はじめに

これまでWordPressに対してあまり凝ったことをしてこなかったのですが、ショートコードというものの存在を知ったので試しに使ってみたいと思います。これでブログを書く時間が短縮できればなと思います。

ショートコードは基本的にはPHPのオリジナル関数をブログ編集画面から呼び出せるショートカットです。作成したショートコードはブログ編集画面でその名前を括弧([])でくくってやることで呼び出すことができます。

サンプル勉強

自己完結型ショートコード

なんのこっちゃと思われるかもしれませんが、タグのような囲い込みの無いショートコードです。囲い込み型ショートコードは後程ご説明します。

Hello World

最小単位で何ができるかご紹介します。

まずは「外観」>「テーマの編集」を開きます。私はこの投稿の段階ではアフィンガー5を使っているので以下のような体裁になっています。

この中のfunction.phpというのを開きます。このファイルは基本的に自分用のPHP関数を作成したいときに定義させる場所です。今回はショートコード用の関数を定義していきたいと思います。

function.phpを開いたら上記のようなハローワールド的な関数を作成します。作成し終えたら「ファイルを更新」ボタンを押します。

// 呼び出す関数
function hello_world() {
 return "hello world!!";
}
// ショートコードとして登録
add_shortcode('hello','hello_world');

エディター画面で「[hello]」と書くと、「hello world!」と表示されるようになります。

結果

[hello]→「hello world!」

引数を指定する方法

ショートコードに引数を指定させる方法です。先ほどのhello worldは特定の文字を吐き出すショートカットという印象が強いですが、これはより汎用的に使えるようにするため一部の文字を差し替えることができるようにする機能です。

ショートコードはPHP関数を呼び出しているだけなので当然引数も活用できるのでそれを応用しているだけです。先ほどの例にちょっと手を加えてみました。

// hello world 2
function hello_world2( $atts ) {
    $a = shortcode_atts( array(
        'who' => 'gagambo',
    ), $atts );
    return "{$a['who']} < hello world!!";
}
// ショートコードとして追加
add_shortcode( 'hello2', 'hello_world2' );

今度は誰かが「hello world!」としゃべるというショートコードで、引数で誰がしゃべっているかを指定できます。デフォルトでは「gagambo」さんが指定されています。

注目していただきたいのは「shortcode_atts」というWordPressで用意されている関数です。これがデフォルト引数を指定しつつ引数の「$atts」を第2引数に指定することでマージしてくれるという機能を持ち合わせています。

結果

[hello2]→「gagambo < hello world!!」
[hello2 who="tako"]→「tako < hello world!!」

引数に指定した人物に入れ替わっていることがわかります。

囲い込み型ショートコード

次は囲い込み型ショートコードです。こちらは先ほどの例と異なり、HTMLタグのようにショートコードを記述する方法です。とはいえ、引数の指定の仕方を変えているだけで、できることは自己完結型ショートコードと同じなので好きなほうを使えばよいと思います。

先ほどの例をさらに改造しました。

// hello world 3
function hello_world3( $atts, $content = null ) {
    return "{$content} < hello world!!";
}
// ショートコードとして追加
add_shortcode( 'hello3', 'hello_world3' );

結果

[hello3](^o^)/[/hello3]→「(^o^)/ < hello world!!」

応用編 ~CPPソースコード整形ショートコードの作成~

このサイトはたまにソースコードを表示させていますが、その際「SyntaxHighlighter」というプラグイン(手動でスクリプトを追加するという意味でのプラグイン)を使用しています。

これを使うには次のようにソースを指定のクラスを書いたpreタグで囲うのですが、それをショートコードで実現したいと思います。

SyntaxHighlighter例
<pre class="brush:cpp;">
#include <stdio.h>

int main(int argc, char *args[])
{
printf("Hello, world!\n");
return 0;
}
</pre>

function.phpにcppcodeというショートコードを追加します。

// cppソースコードとして整形
function cppsourcecode( $atts, $content = null ) {
	$array=array(
        '<p>'=>'',
        '</p>'=>'',
        '<br />'=> ''
    );
    $content=strtr($content,$array);
    return "<pre class='brush:cpp;'>{$content}</pre>";
}
add_shortcode( 'cppcode', 'cppsourcecode' );

何かお気づきになられた方もいらっしゃるかもしれませんが、謎のstrtr処理を今回加えました。当初入れていなかったのですが、WordPressの仕様で改行した文字を入れると勝手にpタグやbrタグを挟んできてしまうのでそれらを削除するためです。基本的にSyntaxHighlighterはpreタグで囲むのが前提で他のタグは不要のためこのような対応をとりました。

これに対象とするコードを打ち込むだけです。


(※HTML特殊文字は変換しています)

結果は次のようになります。

#include <stdio.h>
int main(int argc, char *args[])
{
    printf("Hello, world!\n");
    return 0;
}

まとめ

ショートコードの基礎とその応用を学びました。設定は面倒かもしれませんが、積み重ねで非常に素早く記事を書けるようになると思うのでコツコツ作成していきたいなと思います。

スポンサードリンク

-Web関連, WordPress

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.