wordpressショートコード作り方

taro

ショートコードって便利そう

どうやってつくればいいかな

WordPressのショートコードは、簡単に自作できます。変数ありと変数なしで自作する方法を解説します。また、自分が使っているショートコードの作り方も紹介します。

ショートコードのメリット
ショートコード作り方
1. 3ステップでできます！
具体例ショートコード（変数なし）
具体例ショートコード（変数あり）
まとめ

ショートコードのメリット

複雑なコードも登録しておけば何回でも呼び出して使える
変数を使えばある程度、変更したいところを変更可能
一度覚えれば、簡単に作れる

ショートコード作り方

コンタクトフォーム７などに使われているショートコードも自作することができます。

自分で作った関数とWordPressのテンプレートタグを使用して、ショートコードを作ることができます。

3ステップでできます！

functions.phpにコードを書く
add_shortcodeで、コードを登録し呼び出せるようにする
投稿画面で、ショートコードを入力

１．functions.phpに関数を書く

function 関数名(){
contentを書く;
}

コピーされました

2．add_shortcodeで、コードを登録し呼び出せるようにする

add_shortcode('使いたいショートコード名','関数名'); ?>

コピーされました

3．投稿画面で、ショートコードを入力

投稿画面で

[使いたいショートコード名]　を入力

注意点：カスタムHTMLで入力しないと、上手く表示されませんので注意！

具体例ショートコード（変数なし）

具体的な例を紹介していきます。

以下の内容をfunctions.phpに入力します。

function simple_shortcode() {
 return 'hello' ;
}

add_shortcode('short-code','simple_shortcode');

コピーされました

投稿画面で、ショートコードを使用すると、helloと出てくると思います。気になる方は、phpファイルのバックアップを取ったうえで、上記のコードをコピペして確かめると良いかと思います。

具体例ショートコード（変数あり）

function my_shortcode($atts,$content = null) {
  extract( shortcode_atts(array(
    'id' => 'id',
    'code' => '&lt;p&gt;テスト&lt;/p&gt;',
    'class' => 'class'
  ),$atts));

  return '<div class="copy-area">
  <pre><code id="'.$id.'" class="code-text '.$class.'">'.$code.'</code></pre>
  <p class="copy-text '.$class.'">コピーされました</p>
    <div class="copy-button-area">
    <button class="btn copy-button" data-clipboard-target="#'.$id.'">コピー</button>
    </div>
    </div>
    ';
}

add_shortcode('code','my_shortcode');

コピーされました

ちょっと難しいですが、コードを紹介する際に自分が使用しているショートコードです。上のコードを表示する際も使用されています。

注意点　コードを表示するのにhighlightjs、コピーするのにclipboard.jsを使用

関数の引数に変数を設定し、変数の中に、配列でデータを入れています。そのため、id、codeやclassは、自分でその時に応じて変更可能です。

例えば、

[examplecode id="copy" code="特殊文字などに変換したHTMLを書く" class="copy-class"]

これで、コードの紹介が簡単になります。

HTML特殊文字変換ツールはこちらから

何回も繰り返し使用するものなどは、関数やショートコードで呼び出すと便利だと思います。自分は、ファイル内で呼び出す場合は、関数、投稿画面に入力したい際は、ショートコードという風に分けています。