ショートコードを作成する

2014_cms_67

WPでよく使うコードを毎回書くのは手間ですよね。
クラス名をつけて、CSSを設定しておいてもhtmlを記述する手間はかかるし。
そんな時にWPにはショートコードというとても便利な機能があります。
初期設定に手間はかかるけど、一度設定してしまえばビジュアルエディタにショートコード書くだけでいつでも自分の好きな場所に表示したい機能を設定することができます。
今回はこのブログでもよく使用するボタンセットをショートコード化した手順を書きます。

これです。↗︎ 見本なので押しても何も反応しません。

設定の手順は、

  1. function.phpにショートコードを設定する
  2. CSSで見た目を整える
  3. 余裕があればプラグイン化してみる

の3つです。

1.function.phpにショートコードを設定する

function demoBtnSet($atts) {
	extract(shortcode_atts(array(
        'demo' => '',
        'download' => ''
    ), $atts));
    return '<ul class="btn-set"><li class="demo"><a href="'.$demo.'" target="_blank">VIEW DEMO</a></li><li class="download"><a href="'.$download.'">DOWNLOAD SOURCE</a></li></ul>';
}
add_shortcode('demobtn', 'demoBtnSet');

このコードで全部なんですが、この量でもいきなり見ると混乱してしまうので分解して説明します。

function demoBtnSet() {}
add_shortcode('demobtn', 'demoBtnSet');

※ このブログ内では[DEMOBTN]というショートコードがあらかじめ登録してあり、そのまま表記するとボタンが表示されてしまうので、[]の内容は適宜小文字に置き換えてください。

まず、1行目でdemoBtnSetという関数を作り、最後の行のadd_shortcode(‘demobtn’, ‘demoBtnSet’)と書いていますが、
add_shortcordはショートコードを追加しますよということ。
一つ目の引数の’demobtn’はビジュアエディタ内で[DEMOBTN]というショートコード書くとdemobtnを作成しますよということ。
‘demoBtnSet’は[DEMOBTN]の中身はdemoBtnSet関数で書いた内容を表示しますよということです。
この時点で、[DEMOBTN]を使ってもまだなにも表示されません。

次に

return '<ul class="btn-set"><li class="demo"><a href="'.$demo.'" target="_blank">VIEW DEMO</a></li><li class="download"><a href="'.$download.'">DOWNLOAD SOURCE</a></li></ul>';

戻り値を返すこの部分ですが、これはHTMLが読めれば何となく内容が分かるのですが、ブラウザ(IE, Chrome, Firefox, Safari, etc)で表示するときにはこの内容をHTMLとして出力するよということです。
もう少し分かりやすく出力されるHTMLだけで表記すると

<ul class="btn-set">
  <li class="demo">
    <a href="'.$demo.'" target="_blank">VIEW DEMO</a>
  </li>
  <li class="download">
    <a href="'.$download.'">DOWNLOAD SOURCE</a>
  </li>
</ul>

ブラウザでは上のようなHTMLとして表示されます。
このHTMLで気になるのは’.$demo.’, ‘.$download.’の部分ですよね。
これは、2行目以降の

extract(shortcode_atts(array(
        'demo' => '',
        'download' => ''
    ), $atts));

この部分で指定されている変数です。
‘demo’が’.$demo.’に’download’が$download’に代入されます。
仕組みは、ちょっと分かりやすく説明できる自信が無いんですが、

function demoBtnSet($atts) {}

の$attsにショートコードで指定した引数の値が格納される仕組みで、

extract(shortcode_atts(array(
        'demo' => '',
        'download' => ''
    ), $atts));

でPHPの変数に格納しています。
extract()というPHPの関数があって、連想配列のキー値(’demo’, ‘download’)を変数名にした変数($demo, $download)に値(”)が格納されます。
(”)は今回は空白です。
例えば’demo’ => ‘http://www.yahoo.co.jp’という記述であれば、Yahoo!JAPANへのリンクが表示されることになります。
なので、

<ul class="btn-set">
    <li class="demo">
      <a href="http://www.yahoo.co.jp" target="_blank">Yahoo!JAPAN</a>
    </li>
    <li class="download">
      <a href="'.$download.'">DOWNLOAD SOURCE</a>
    </li>
</ul>

というHTMLが出力されてYahoo!JAPANというリンクテキストが表示されます。

今回値を空白(’demo’ => ”)にしていたのは理由があって、このブログでVIEW DEMOやDOWNLOAD SOURCEというリンクを設定する際には、リンク先が固定ではない(記事ごとに変わる)ので、空白にしておいてショートコード内で自由に設定できるようにするためです。
例えば、[DEMOBTN demo=”http://copycat.tokyo/Tutorials/PureCSS/” download=”http://copycat.tokyo/Tutorials/PureCSS/PureCSS.zip”]というような使い方をします。
demo, downlod = srcとして理解してもらえれば良いと思います。
で、ここまでがこの[DEMOBTN]というショートコードの仕組みです。
実際には、

が表示されます。

2. CSSで見た目を整える

で上のサンプルに使用したボタンセットにはあらかじめCSSが設定されているのですが、CSSを設定しなければリンクテキストとして表示されます。

1. でこのショートコードは、

<ul class="btn-set">
  <li class="demo">
    <a href="http://www.yahoo.co.jp" target="_blank">Yahoo!JAPAN</a>
  </li>
  <li class="download">
    <a href="'.$download.'">DOWNLOAD SOURCE</a>
  </li>
</ul>

このようなHTMLとして出力されるということは理解してもらえたと思うので、CSSは簡単にコードだけ書きます。

ul.btn-set {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 3em;
	text-align: center;
	display: inline-block;
	display: block;
    zoom: 1;
}

ul.btn-set li {
	list-style-type: none;
	display: inline-block;
	background: #237dac;
	color: #ffffff;
	font-size: 1.2em;
	padding: 10px 20px;
	min-width: 12em;
	height: 44px;
	min-height: 2em;
	line-height: 44px;
	text-align: center;
	-moz-transition: background-color 1s;
	-webkit-transition: background-color 1s;
	-o-transition: background-color 1s;
	-ms-transition: background-color 1s;
}

ul.btn-set li:first-child {
	margin-right: 1em;
}

ul.btn-set li:hover {
	background: #3b8dbd;
	color: #237dac;
}

ul.btn-set li a {
	text-decoration: none;
	color: #ffffff;
	font-weight: 400;
}

ul.btn-set li a:hover {
	-moz-transition: color 1s;
	-webkit-transition: color 1s;
	-o-transition: color 1s;
	-ms-transition: color 1s;
}

ul.btn-set li a:before {
	font-family: 'font-awesome';
	margin-right: 10px;
	-webkit-font-smoothing: antialiased;
}

ul.btn-set li.demo a:before {
	font-family: 'FontAwesome';
	content: "\f06e";
}

ul.btn-set li.download a:before {
	font-family: 'FontAwesome';
	content: "\f019";
}

@media  screen and (min-width: 961px) and (max-width: 1024px) {
	ul.btn-set li {
		width: 94%;
		margin: 6px auto;
	}

	ul.btn-set li:first-child {
		margin-right: 0;
	}
}

@media  screen and (min-width: 480px) and (max-width: 767px) {
	ul.btn-set li {
		width: 90%;
		margin: 6px auto;
	}

	ul.btn-set li:first-child {
		margin-right: 0;
	}
}

@media only screen and (max-width: 480px) {
	ul.btn-set li {
		width: 90%;
		margin: 6px auto;
	}

	ul.btn-set li:first-child {
		margin-right: 0;
	}
}

普通に考えれば当たり前のことなんですが、CSSだけだとlistにマウスがのったタイミングではなくanchorにマウスがのったタイミングでしかアイコン(a:beforeで設定している)の色が変化しないという問題があったので、

$('.btn-set li.demo').hover(
    function(){
    	$('.btn-set li.demo a').css({color: '#237dac'});
    },
    function () {
    	$('.btn-set li.demo a').css({color: '#ffffff'});
    }
);

$('.btn-set li.download').hover(
    function(){
    	$('.btn-set li.download a').css({color: '#237dac'});
    },
    function () {
    	$('.btn-set li.download a').css({color: '#ffffff'});
    }
);

取り急ぎ、上記のjQueryで調整しています。
これで、ショートコードでボタンセットを作る解説は一通り終わったんですが、プラグイン化の説明をする気力がちょっと萎えてしまったのでそれはまた別の機会に。

You may also like...