wordpressで記事を書こうとすると、ビジュアルエディタを使う方が殆どだと思います。
ブログなどでリンクテキストをボタンで実装したいときなど、軽くHTMLコーディングをする必要があるときは「ショートコード」でササッとやっちゃいましょう！
使い方も書くので、コピペですぐに使えちゃいます。
ショートコード用の関数を書く
function.phpを開きましょう。以下のように書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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で返した値が表示されるわけですが、、その値を自由に出せるように書く必要があります。
そこで大事なのが
1 2 3 4 5 6 7 8 | extract( shortcode_atts( array( ‘url’ => “” , ‘text’ => “詳しく読む” ) , $p) ); |
ここです。
extract()で変数を作成しまくる
1 | extract(array var_array [, int extract_type [, string prefix]]) |
連想配列に含まれるキー毎に変数を作成(extract) – 配列関数 – PHP関数
今回の場合だと、extractの中に入っている配列のキーと値「’url’=>””」、「’text’=>”詳しく読む”」の、左側（urlとtext）が変数で、それに対応している右側が、それぞれの値になります。
つまり変数$urlが出来て、その値は空欄。変数$textが出来て、その値は「詳しく読む」がデフォルトです。
つまり、このextractを使うことでショートコードでいくつも値を渡せるのです！
次に、その中にある「shortcode_atts」です。
1 | array shortcode_atts( array $pairs, array $atts ) |
$pairs
有効な属性値の連想配列。キーは属性名、値にはデフォルト値を指定。
$atts
投稿記事のショートコードで指定された属性情報。
なんかよく解りませんが、とりあえずshortcode_attsは、「ショートコードを作る時にextractと一緒に使う」ということでしょう。
shortcode_atts:WordPress私的マニュアル
returnして、ショートコードを使う
ここまでの処理が終わると、前項で説明した変数を使ってリンク用のHTMLを書きます。
$urlと$textを使っています。
その下で、$linkをreturnしているので、ショートコードを使った際に上のhtmlコードが生成されるわけです。
では、実際にショートコードを使ってみます。wordpressダッシュボードのビジュアルエディタの画面で以下のように書きます。
1 | [linkbutton url=“http://example.com/hoge.html” , text= “リンクに飛ぶ”] |
extractの中のキーと値の関係に沿って、渡したい値を書きます。
上記の場合だと、$urlは「http://example.com/hoge.html」で$textは「リンクに飛ぶ」が格納されていることになります。
その状態で前述のhtmlコードがreturnして表示されます。
ではちょっと試しにこんな感じでショートコードを出してみます。
1 | [linkbutton url=“https://satohmsys.info” , text= “最近リニューアルしたけど、まだちょっと残ってるよ”] |
テキトーにCSSを指定して、完成です！
ちなみにextractの話ですが、既に$urlや$textが別のところで定義されて存在する場合は、デフォルトでは上書きされます。が、
上の例で「prefix」にあたるところに文字列を指定することで、それが識別名となって「$識別名_url」や「$識別名_text」といた具合にカブらないよう上手くやってくれます。
以上です。
ボタンでなくても、よく出てくる表現に関してはショートコード化してかんたんに出せるようにしておいてもいいですよね。
でわ！
