INSPIRATION

【WordPress】ショートコード作成の基本

今回はWordpressのショートコードの基本的な書き方や使い方を解説していきたいと思います。複雑な処理も短いコードで呼び出せるととても便利な機能です。ぜひまだ使ったことがない方はこれを機に覚えてください。
 

ショートコードとは?

ショートコードとは、あらかじめfunction.phpに書いた関数をブラケット([])という囲みで囲った短いコードで呼び出せるとても便利な機能です。ショートコードは管理画面のエディタの「ビジュアル」でも「テキスト」でもどちらでも使うことができます。

ショートコードに馴染みがない方も、実は多くのプラグインでこのショートコードが使われているので、知らずに使っているかもしれません。代表的なものだと、お問い合わせフォームを作成する「Contact Form 7」では下記のようにショートコーでフォームを出力します。

[contact-form-7 id=”◯◯◯” title=”お問い合わせ”]

 

メリット・デメリット

ではショートコードの作成にはどんなメリット・デメリットがあるでしょうか?

メリット

よく使う定型文やレイアウトや処理をパーツ化して簡単に呼び出しできる
例えば私の場合は投稿の最後に必ず「それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!」という定型文を書いています。でも毎回書くのは面倒ですよね。コピペしてもいいけどもっと簡単に[saigo]というショートコードで出力することができます。

複雑な処理も短いコードで呼び出せる。
先ほどの「Contact Form 7」のようにフォームを出力したり、関連する投稿を出力したり、Wordpressの入力画面では難しいことも、事前にショートコードさえ作っていれば[kanren]といった短いコードで呼び出せます。

初心者でもショートコードさえ覚えれば使える。
Wordpressはとても高機能なCMSですが、慣れるまでは使いこなすのが難しいところもあります。ですが、ショートコードさえ覚えてもらえば、慣れていない人でもたくさんの処理を簡単に使うことができます。
 

デメリット

functions.phpを編集するのでコードミスがあるとサイト表示自体ができなくなる。
これが一番危険です。functions.phpはテーマの重要なファイルなので、ここでphpのコードミスがあるとサイトが真っ白で何も表示できなくなってしまいます。ですので必ずfunctions.phpのバックアップをとってから作業しましょう。

ショートコードの作成にはある程度のWordpressの知識とphpの知識がいるので初心者にはハードルが高い
ショートコード自体は短いコードで呼び出せるので簡単ですが、自分で作るとなるとWordpressやphp、htmlの知識が必要になってきます。まだ知識があまりない方が行うと前述の通りfunctions.phpでエラーが起きてサイトが表示できなくなってしまうので注意しましょう。
 

ショートコードの基本

では実際にやっていきましょう!まずは最もシンプルなショートコードを作成してます。functions.phpに下記のコードを追加します。重ねてですが必ず事前にバックアップを取ってから行いましょう。

また、functions.phpには色々なコードを追加していくのでコードを追加する際はコメントも書いて、何をしているコードなのか、後から見てもすぐわかるようにしましょう。

function.php
//ショートコードで「hello shortcode!」と出力
function hello_func() {
    return "hello shortcode!";
}
add_shortcode('hello', 'hello_func');

これでショートコードは作成できました。詳しいことは後で解説します。次は実際に投稿で出力していきます。
 

投稿入力画面で[hello]」と入力して投稿を公開します。

サイトで投稿を見てみましょう。本文に「hello shortcode!」と表示されていれば無事成功です。


 

コードを解説

コードを詳しく見ていきましょう。

add_shortcode

先ほどfunction.phpに追加したコードの5行目

add_shortcode('hello', 'hello_func');

とありますが、「add_shortcode」はWordpressで用意されたショートコードを追加する関数です。

関数リファレンス/add shortcode – WordPress Codex 日本語版
 

使い方
add_shortcode( $tag , $func );
  • $tag:ショートコード名。こちらのタグを投稿入力画面でショートコードとして入力します。
  • $func:行いたい処理を書いた関数

となります。

先ほどのショートコードでは

  • $tag:hello
  • $func:hello_func

としました。
 

行いたい処理を関数にする

phpで関数を作成するには

function 関数名() {
    //行いたい処理
}

と書きます。

では先ほどfunction.phpに追加したコードの2〜4行目「hello_func」を見ていきましょう。
今回は簡単に「hello shortcode!」と出力するだけですので、関数の処理は

function hello_func() {
    return "hello shortcode!";
}

と書きました。

return」は値を返します。ですので今回は「hello shortcode!」という文字が返されます。
 

おさらい

長くなったのでおさらいです。

1.まずは事前にfunction.phpでショートコードを追加。

//ショートコードで「hello shortcode!」と出力
function hello_func() {
    return "hello shortcode!";
}
add_shortcode('hello', 'hello_func');

 

2.そして投稿入力で作成したショートコードを入力。

[hello]

3.サイト画面で出力を確認。

以上となります。
 

まとめ

ショートコードは使い方次第で色々なことができます。自分で使うのもそうですが、私は実際の制作案件でクライアントが使いやすいようにするためにショートコードを作成することが多いです。先日は最近よく見かける「合わせて読みたい」をクライアントの要望で作りました。この自作ショートコードの記事も書いていきたいと思います。

まだまだホントに初歩的な内容だったので、さらに応用編も書いていきますので、是非また見に来てくださいね。
 


 

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

【WordPress】ショートコードの自己完結型を作成
NEXT INSPIRATION
まだfloat使ってる?CSSのFlexboxを徹底解説!
PREVIOUS INSPIRATION