簡単なショートコードを作ってみる | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

実際にサンプルコードを動作させながらWordPressショートコードの作り方を確認してみました。

下記サイトを参考にしました。
http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．”こんにちは!”を表示するショートコード
２．リンクを生成するショートコード
３．ツイッターに記事のURLを送信するショートコード

“こんにちは!”を表示するショートコード

ショートーコードの作り方を学ぶために投稿内にただ単に”こんにちは!”を表示するショートコードをつくってみます。
　
１）functions.phpにショートコードを定義
　

function hello() {
  return 'こんにちは!';
}
add_shortcode('hl', 'hello');

　
●サンプルコードの説明
　
・add_shortcode()関数を使って、hello()関数をショートコードとして登録します。hello()関数の下に下記記述を追加します。
　
○構文
add_shortcode( $tag , $func );
　$tag
　　記事の本文でこのショートコード実行するのに指定するタグ
　$func
　　上記タグが見つかった場合に実行される関数
　
２）投稿本文にショートコードのタグを記述
　
下記の構文でショートコードのタグを記述します。
[hl]
　
３）表示確認
　
ブラウザで投稿を表示し、ショートコードのタグを記述した部分が”こんにちは!”と表示される事を確認

リンクを生成するショートコード

属性や引数を指定してリンクを生成するショートコード作成してみます。
　
[url 引数1]引数2[/url]の形で使用するショートコードを作成します。
　
下記のように使用します。
　
ショートコードのタグ
[url href=”http://www.example.com”]ショートコードの例[/url]
　
出力結果
<a href=”http://www.example.com”>ショートコードの例</a>
　
●作成方法
　
functions.phpに下記コードを記述します。

function myUrl($atts, $content = null) {
  extract(shortcode_atts(array("href" => 'http://'), $atts));
  return '<a href="'.$href.'">'.$content.'</a>';
}

add_shortcode("url", "myUrl");

　
●コードの説明
　
○shortcode_atts( $defaults_array, $atts );
・ショートコードの無効な属性値を除外し、属性とその値を格納した連想配列を返します。
・引数
$defaults_array：認識される属性名とそのデフォルト値を指定する連想配列
$atts：ショートコードハンドラに渡される生の属性配列
　
・上記例では、属性名がa要素のhref属性でデフォルト値が’http://’としています。
$attsがショートコードの一番目の引数に指定する文字列で、上記例では、”href=”http://www.example.com”です。
　引数1に”href”という属性値が指定されている場合はそこで指定された値が使用され、hrefが指定されていない場合は、デフォルト値を使用します。a要素には指定出来る属性が決まっていますが、shortcode_atts()使用する事によって、入力ミスをしてhref以外の文字を入力してしまった場合は除去してデフォルト値にしてくれるので安全に使用できます。
　
○extract()
・array(“href” => ‘http://www.example.com’, “name” => ‘名前’)といった連想配列を$href, $name などの属性キーの名前のローカル変数を作成します。
$href = “http://www.example.com”
$name = “名前”
　
・ショートコードの第二引数はa要素の外で使用される文字列なので入力値をそのまま出力しています。

ツイッターに記事のURLを送信するショートコード

WordPressの記事内のリンクをクリックするとツイッターに下記のようなメッセージを送るショートコードを作成します
　
今この記事を読んでいます。[その記事のURL]
　
１）ショートコードを作成
　
functions.phpに下記コードを登録

function twitt() {
  return '<div id="twitit"><a href="http://twitter.com/intent/tweet?text=今この記事を読んでいます。 '.get_permalink($post->ID).'" title="クリックするとこの記事をツイッターに送信" target="_blank">ツイッターに共有</a></div>';
}

add_shortcode('twitter', 'twitt');

　
２）動作確認
　
①WordPressの記事内に[twitter]を記述
　
②ブラウザで記事を表示し、”ツイッターに共有”のリンク押下
　
③ツイッターに”今この記事を読んでいます。[その記事のURL]”のメッセージが送られます。

関連記事の目次

VPSの開始からWebサイト公開、運用

VPSにログイン、SSH接続、初期設定