WordPressの「ショートコード」でPHPを使用する

WordPressのカスタマイズのためには、PHPファイルを編集します。編集するファイルはWordPressに含まれる「functions.php」です。「functions.php」にPHPでプログラムを書くことで様々な機能を追加することができます。（→関連記事）

すでに書いたプログラムを様々な場面で、使いたい場合には、「ショートコード」を使用すれば効率化することができます。

そこでこの記事では、「ショートコード」について紹介します。

今回実施すること
さいごに

今回実施すること

ショートコードのことを知る

ショートコードとは、あらかじめ用意しておいたパーツをWebサイト中で使えるようにするための、WordPress独自の仕組みのことです。WordPressで使われる、より複雑なコンテンツを簡潔に記述することができます。

ショートコードはいくつでも作ることができ、よく使用する処理を簡単にどこからでも呼び出せます。1つのショートコードを何度でも簡単に呼び出すことも可能です。

例えば、シリーズ記事に共通の目次を挿入したり、「お問い合わせ」フォームを必要なページにだけ配置したりといった、Webサイト内で繰り返し使用する処理に使えます。

また、内容が完全に同じではないパーツも表現可能です。

例えば、複数のページに同じデザインで「お問い合わせ」フォームを配置したいけれど、フォーム内に添えるメッセージはページごとに変えたいという場合にも使えます。

ショートコードのプログラムは、「functions.php」というファイルを直接編集することで作成するのが一般的です。

このファイルはWebサイト全体に影響するものなので、記述ミスがあるとWordPress自体が正しく動かなくなり、すべてのページが真っ白になってしまうことに違いはありませんので注意をしながら使用することにします。

ショートコードは2種類

WordPressのショートコードは、利用シーンによって以下の2種類に分類できます。

「自己完結型ショートコード」
「囲み型ショートコード」

「自己完結型ショートコード」はひとつのショートコードを書くだけで内容が出力されるタイプ。

[myshortcode]

1	[myshortcode]

「囲み型ショートコード」はコンテンツを挟んで出力するタイプです。

[myshortcode]コンテンツ[/myshortcode]

1	[myshortcode]コンテンツ[/myshortcode]

「自己完結型ショートコード」を書いてみる

それでは、実際にショートコードを書いてみます。

まずは、「自己完結型ショートコード」です。

functions.phpに以下の関数を書きます。functions.phpファイルは、WordPressサイトのコンテンツを管理するwp-contentフォルダの中にあります。具体的には、”wp-content/themes/テーマ名”に格納されています。（cocoonの場合は、子テーマ）

▼functions.phpに記載するコード：

function txt_func() {
　　　　//ここにショートコードの中身を書く
　　　　 return "~IT人材を目指して~";
}
add_shortcode('work_txt', 'txt_func');

function txt_func() {

　　　　//ここにショートコードの中身を書く

　　　　 return "~IT人材を目指して~";

}

add_shortcode('work_txt', 'txt_func');

▼解説

「txt_func」が新たに作成した関数
その後の{}内にショートコードの中身を書きます。
そして「add_shortcode」関数で「work_txt」というショートコードを登録します。
「add_shortcode」関数は、WordPress本体に内蔵されているWordPressの関数で、ショートコードを登録して使える状態にします。

そして、投稿画面で以下のショートコードを記述

▼投稿画面に記載するコード：

[work_txt]

1	[work_txt]

すると、「~IT人材を目指して~」というテキストが表示されます。

▼結果

~IT人材を目指して~

「囲み型ショートコード」を書いてみる

つぎに「囲み型ショートコード」です。さきほどと同様にfunctions.phpにコードを記載します。

▼functions.phpに記載するコード：

function box_func( $atts , $content = null ) {
    //ここにショートコードの中身を書く
    return '<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">' . $content . '</div>';
}
add_shortcode('dot', 'box_func');

function box_func( $atts , $content = null ) {

//ここにショートコードの中身を書く

return '<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">' . $content . '</div>';

}

add_shortcode('dot', 'box_func');

▼解説

「box_func」が新たに作成した関数
$contentで引数を受け取ります。$contentは変数です。PHPの変数は、ドル記号（$）の後に変数名を付けて宣言します。
その後の{}内にショートコードの中身を書きます。
受け取った変数$contentをdivタグで囲います。
そして「add_shortcode」関数で「dot」というショートコードを登録します。

そして、投稿画面で以下のショートコードを記述

▼投稿画面に記載するコード：

[dot]~IT人材を目指して~[/dot]

1	[dot]~IT人材を目指して~[/dot]

すると、さきほどと同じように「~IT人材を目指して~」というテキストが表示されますが、今回は、その周りに点線で枠囲いが施されます。

▼結果

~IT人材を目指して~

「囲み型ショートコード」に属性を追加する

さきほどの「囲み型ショートコード」に属性を追加してみます。

▼functions.phpに記載するコード：

function box_color_func( $atts , $content = null ) {
    //ここにショートコードの中身を書く
    $atts = shortcode_atts( 
        array(
            'color' => 'red'
        ), $atts );
    return '<div style="padding: 10px; 
                        margin-bottom: 10px; 
                        border: 1px dashed #333333;
                        background-color:' . $atts['color'] . ';
                        ">
                ' . $content . '
            </div>';
}
add_shortcode('dot_color', 'box_color_func');

function box_color_func( $atts , $content = null ) {

//ここにショートコードの中身を書く

$atts = shortcode_atts(

array(

'color' => 'red'

), $atts );

return '<div style="padding: 10px;

margin-bottom: 10px;

border: 1px dashed #333333;

background-color:' . $atts['color'] . ';

' . $content . '

</div>';

}

add_shortcode('dot_color', 'box_color_func');

▼解説

「box_color_func」が新たに作成した関数
その後の{}内にショートコードの中身を書きます。
$attsをshortcode_attsで属性定義します。
配列arrayで’color’ を’red’として定義
divタグにbackground-colorを追加して、 $atts[‘color’]で背景色を指定
そして「add_shortcode」関数で「dot_color」というショートコードを登録します。

そして、投稿画面で以下のショートコードを記述

▼投稿画面に記載するコード：

[dot_color]~IT人材を目指して~[/dot_color]

1	[dot_color]~IT人材を目指して~[/dot_color]

すると、さきほどと同じように「~IT人材を目指して~」というテキストが周りに点線で枠囲いが施されて表示されますが、今回は、点線の枠囲いの中の背景色が赤色で表示されます。

▼結果

~IT人材を目指して~

さいごに

以上、今回はWordPressを構成しているPHPファイルを編集してみました。

これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。

参考