wordpressショートコード作り方

WordPress
taro
taro

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

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

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

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

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

ショートコード作り方

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

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

3ステップでできます!

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

1.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' => '<p>テスト</p>',
    '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"]

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

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

まとめ

ショートコードは一度作ると簡単に作れるようになるので、簡単なものから挑戦すると良いかと思います。また、少し難しいものに挑戦するとPHPやWordPressの勉強になるためおすすめです。

間違いなどありましたらコメントよろしくお願いします。

コメント