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

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

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

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

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

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

 function linkbuttonFunc($p){    extract(      shortcode_atts(          array(            ‘url’ =&gt; “” ,            ‘text’ =&gt; “詳しく読む”          )        , $p)    );    $link =  “&lt;a href=’$url’&gt;&lt;button class=’shortcode-button’&gt;$text&lt;/button&gt;&lt;/a&gt;”;    return $link;  }  add_shortcode( ‘linkbutton’ ,’linkbuttonFunc’ );

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’ =&gt; “” ,            ‘text’ =&gt; “詳しく読む”          )        , $p)    );

extract(

shortcode_atts(

array(

‘url’ => “” ,

‘text’ => “詳しく読む”

)

, $p)

);

ここです。

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

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

1	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 )

1	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>“;

1	$link = ““;

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

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

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

 [linkbutton url=”http://example.com/hoge.html” , text= “リンクに飛ぶ”]

1	[linkbutton url=“http://example.com/hoge.html” , text= “リンクに飛ぶ”]

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

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

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

  [linkbutton url=”https://satohmsys.info” , text= “最近リニューアルしたけど、まだちょっと残ってるよ”]

1	[linkbutton url=“https://satohmsys.info” , text= “最近リニューアルしたけど、まだちょっと残ってるよ”]

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

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

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

以上です。

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

でわ！