【wordpress】ショートコードで投稿画面でかんたんにボタンリンクを作る方法

2015.1.9 Wordpress

wordpressで記事を書こうとすると、ビジュアルエディタを使う方が殆どだと思います。

ブログなどでリンクテキストをボタンで実装したいときなど、軽くHTMLコーディングをする必要があるときは「ショートコード」でササッとやっちゃいましょう!

使い方も書くので、コピペですぐに使えちゃいます

ショートコード用の関数を書く

function.phpを開きましょう。以下のように書きます。

function linkbuttonFunc($p){
  extract(
    shortcode_atts(
        array(
          'url' => "" ,
          'text' => "詳しく読む"
        )
      , $p)
  );
  $link =  "<a href='$url'><button class='shortcode-button'>$text</button></a>";
  return $link;
}
add_shortcode( 'linkbutton' ,'linkbuttonFunc' );

ショートコードを定義しているのはadd_shortcodeです。
関数リファレンス/add shortcode – WordPress Codex 日本語版

その第一引数が、「実際に使う際の呼び出し名」で、第二引数が「呼び出す関数」です。

returnで返した値が表示されるわけですが、、その値を自由に出せるように書く必要があります。
そこで大事なのが

  extract(
    shortcode_atts(
        array(
          'url' => "" ,
          'text' => "詳しく読む"
        )
      , $p)
  );

ここです。

extract()で変数を作成しまくる

extract(array var_array [, int extract_type [, string prefix]])

 連想配列に含まれるキー毎に変数を作成(extract) – 配列関数 – PHP関数

今回の場合だと、extractの中に入っている配列のキーと値「’url’=>””」「’text’=>”詳しく読む”」の、左側(urlとtext)が変数で、それに対応している右側が、それぞれの値になります。

つまり変数$urlが出来て、その値は空欄。変数$textが出来て、その値は「詳しく読む」がデフォルトです。

つまり、このextractを使うことでショートコードでいくつも値を渡せるのです!

次に、その中にある「shortcode_atts」です。

array shortcode_atts( array $pairs, array $atts )

$pairs
有効な属性値の連想配列。キーは属性名、値にはデフォルト値を指定。
$atts
投稿記事のショートコードで指定された属性情報。

なんかよく解りませんが、とりあえずshortcode_attsは、「ショートコードを作る時にextractと一緒に使う」ということでしょう。
shortcode_atts:WordPress私的マニュアル

returnして、ショートコードを使う

ここまでの処理が終わると、前項で説明した変数を使ってリンク用のHTMLを書きます。

$link =  "<a href='$url'><button class='shortcode-button'>$text</button></a>";

$urlと$textを使っています。

その下で、$linkをreturnしているので、ショートコードを使った際に上のhtmlコードが生成されるわけです。

では、実際にショートコードを使ってみます。wordpressダッシュボードのビジュアルエディタの画面で以下のように書きます。

リンクに飛ぶ

extractの中のキーと値の関係に沿って、渡したい値を書きます。

上記の場合だと、$urlは「http://example.com/hoge.html$textは「リンクに飛ぶが格納されていることになります。
その状態で前述のhtmlコードがreturnして表示されます。

ではちょっと試しにこんな感じでショートコードを出してみます。

 最近リニューアルしたけど、まだちょっと残ってるよ
最近リニューアルしたけど、まだちょっと残ってるよ

テキトーにCSSを指定して、完成です!

ちなみにextractの話ですが、既に$urlや$textが別のところで定義されて存在する場合は、デフォルトでは上書きされます。が、
上の例で「prefix」にあたるところに文字列を指定することで、それが識別名となって「$識別名_url」や「$識別名_text」といた具合にカブらないよう上手くやってくれます。

 


 

以上です。

ボタンでなくても、よく出てくる表現に関してはショートコード化してかんたんに出せるようにしておいてもいいですよね。

 

でわ!

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。