東京のホームページ制作・運用・コンサルティング会社

Blog

【WordPressショートコード】任意のnameを設定して出力結果が変わるショートコードを作成する

前回、ショートコードに関して記事を書かせていただきました。
WordPressでショートコード化をするメリット・方法

今回は同じモジュールで文言やリンク先が変わる場合に使いやすいショートコードを作成出来ないかを考えました。

指定する番号によって出力する結果を変更する

ショートコードに任意の番号を設定して、出力結果を変えました。具体的にはif文を用いて指定した番号によって変数の値を上書きしただけです。

functions.phpに以下のコードを書いて、ショートコードを登録します

function fruit_func ( $atts ) {
        extract( shortcode_atts( array(
            ‘id’ => ”, 
        ), $atts ) );
        if($id === “1”){ 
            $title = ‘バナナ’;
        }
        else if ($id === “2”) {
            $title = ‘リンゴ’
        }
        return ‘<h2>’.$title.'</h2>’;
    }
    add_shortcode(‘fruit’, ‘fruit_func’);

functions.phpでショートコードを登録した後に作っていきます。

ショートコードを書く際にIDを指定することで出力の結果を変えることが出来ます。
以下のコードをテキストエディタに書きます。

[fruit id="1"]

idを1に設定した場合はバナナが出力されて、2に設定するとリンゴが出力されます。

番号ではなく任意の文字で出力結果を変える

番号で管理するとどんなものが出力されるか分かりづらくなってしまいますよね。そこで番号ではなく、わかりやすい文字で指定するコードにしました。

extract( shortcode_atts( array(
            'id' => '', 
        ), $atts ) );

先程紹介したfunctions.phpに登録するコードのidの部分をnameに変更しました。nameとすればどんな出力結果が容易に想像できて、自分以外の人がコードを書くときも分かりやすくなりますね。

そちら踏まえて以下のコードを作ってみました。

function linkpage_func ( $atts ) {
        extract( shortcode_atts( array(
            ‘name’ => ”, //出力したい事柄
        ), $atts ) );
        if($name === ‘soichiro’){ 
            $link = ‘https://soichiro.co.jp/’;
            $title = ‘株式会社Soichiro’;
        }
        else if ($name === ‘company’) {
            $link = ‘https://soichiro.co.jp/company/’;
            $title = ‘会社概要’;
        }
        return ‘<a href=”‘. $link .'”‘ .’>’. $title. ‘</a>’;
    }
    add_shortcode(‘pagelink’, ‘linkpage_func’);

登録したsoichiroやcompanyをnameに指定することで出力結果が変えられます。

そして表示させたい部分でショートコードを書きます。

[pagelink name="soichiro"]

すると

株式会社Soichiro

が出力されます。

name=”soichiro”という部分をname=”company”に変更すれば

会社概要

が出力されます。

まとめ

今回紹介した2つのショートコードに関して、idの番号で指定するものとnameで指定するものの根本は何も変わらないのですが運用していくことを考えると、そういった細かい箇所を工夫するべきだと思います。

番号ではなく文字で登録しておくことで、コードを作った本人はもちろん、コードを書いた人以外がページや記事を更新する際にも分かりやすいです。

今回のように運用しやすいコードを工夫して書けるようになっていきたいです。

IT導入補助金で
HP作成
2023/7/21 更新
IT導入補助金でホームページ制作・リニューアルが可能です。
IT導入補助金の詳細
購読