素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【使いこなすと最強】WordPressでショートコードを作って効率化をしてみた

投稿日: 2018年5月9日
最終更新日:

スポンサーリンク

336×280




WordPressのショートコード機能

What’s?

WordPressには、標準機能として搭載されているショートコード機能というものがあります。

これは、あらかじめfunctions.phpに登録しておいたPHP関数を、記事投稿画面から呼び出して利用することが出来る機能です。

この機能を使うことで、計算文字列整形を自分でやらずにPHP関数を利用した動的処理簡単に実行することが出来ます。

クイックタグとはどう違う?

WordPressには、よく使う文章をボタン一つで簡単に挿入するための機能としてクイックタグというものがあることは以前ご紹介致しました。

しかし、クイックタグはあらかじめ登録している文字列をそのまま貼り付ける機能となるので、動的処理をした結果を挿入したい!という用途では利用することが出来ません。
あくまで静的な挿入に限られます。

この機能はとても便利

前述の通り、この機能を使うこなすことで複雑なHTML構造を簡単かつ動的に挿入したり数字の計算を行うことが出来るので、記事の作成スピードが格段に上がります!
また、ショートコードの作り方もとても簡単です。

今回はショートコードの作り方をまとめてみましたのでご紹介致します。

手順

スポンサーリンク

336×280




前提

ショートコードは使用しているテーマのfunctions.phpを編集することになります。
このファイルが壊れてしまうとWordPressの管理画面が表示されなくなってしまうので必ずバックアップを取った上で作業を行うようにしてください。
また、作業は自己責任でお願い致します。

独立型ショートコード

まずは、単純にテキストを挿入するだけのショートコードを作ってみましょう。
functions.php以下のコードを追記して保存をしてください。

保存が完了したら、投稿の編集画面テキストビューにて以下のコードを追加してプレビューしてみてください。

すると、以下のようにテキストが表示されたと思います。

これは、Wordpressのadd_shortcode( $tag , $func )という関数を利用しています。

$tagにはテキストエディターで呼び出す際の文字列を指定し、$funcにはfunctions.phpで定義したPHP関数名を指定します。
そして、テキストエディターから[$tag]という形で呼び出すことが可能になっています。

引数型ショートコード

次に、テキストエディターから呼び出す際に値を受け取ってそれを利用して処理を行うショートコードを作ってみましょう。
functions.phpに以下のコードを追記して保存してください。

保存が完了したら、投稿の編集画面テキストビューにて以下のコードを追加してプレビューしてみてください。

すると、以下のように表示されると思います。

次に以下のように修正してプレビューしてみてください。

すると、以下のようにoldで指定した値を元に判定処理が行われ表示テキストが変わりました。

さらに以下のように修正してプレビューしてみてください。

同じようにoldで指定した値を元に判定が行われ表示テキストが変わりました。

shortcode_atts($defaultArray, $inputArray, $targetShortCode)という関数は、引数を必要としているショートコードで、引数が指定されなかった場合の初期状態の値で上書きするための記述になります。

終わりに

以上のように、PHP関数をエディター画面から呼べるようになるので、複雑な処理を簡単に挿入することが可能になります。

ただ、前述したようにfunctions.phpの編集はリスクが高いことなので、やりすぎないように注意しながらショートコードを使いこなすように心がけて使ってみてください。

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , ,

blogenist

Author: blogenist