【プラグイン無し】コピペ一発！WordPressショートコードの便利な使い方！

WordPressでショートコードを使う方法はいくつかありますが、皆さんプラグインを使われる事が多いようです。

今回は、まずプラグインのメリット・デメリットを理解した上で「プラグインを使わずコピペ一発でWordpressのショートコードを使えるようにする」、そして今回記述するコードを理解して、今後他のショートコードを使いくなった時に自分でも書けるように「記述コードの説明」、あとは「こんな使い方するともう少し便利になるよ」という例を紹介します。

WPプラグインのメリット・デメリット

WordPressに限らず、プラグインというのは「便利な機能を簡単に使えて、比較的誰でも導入しやすい」というメリットがありますが、「必要以外の機能や記述」があったり、セキュリティの面で言えば「プラグインに脆弱性があった場合などは、セキュリティホールを塞ぐアップデートが来るまで使えない」などといった事が起こります。

また、当然ですがプラグインは入れれば入れるほど重くなります。

有名な高機能プラグインも、「重くなるし、使わない機能がいくつもある」という理由から入れない人もいます。

ただ、やはりプラグインというのは最高に便利なものが多く、自分で同じようなものを作ったりするのであれば既に出来上がっているものを使う方が断然効率的ですし、私もプラグインはいくつも使っています。

要するに「使い分ける事が重要」という事です。

WordPressの良い所は「自分で好きなようにカスタマイズ出来る」という点もありますので、「使う機能が限定されている場合で内容も簡単」な場合は自分でカスタマイズした方がシンプルで管理もしやすくなりますので覚えておきましょう。

ショートコードを使えるようにカスタマイズ

それではさっそくプラグインを使わずにショートコードを使えるようカスタマイズしてみましょう。

カスタマイズと言ってもコードをそのままコピペするだけでOKです。

ここでは「テーマの画像フォルダまでのパス」と「記事のスラッグ」をショートコードで呼び出せるようにします。

私はDBに不要な画像を溜め込みたくないのと管理が面倒なので、管理画面から画像のアップロードをしたり、デフォルトのuploadフォルダへFTPでアップしたりも基本的にしません。（メリット・デメリットは他にもまだありますがそれはまた別記事で。）

同じ環境の方がどれだけいるかはわかりませんが、内容は非常にシンプルで簡単に応用出来ますので参考にしてみてください。

テーマの画像フォルダまでのパスをショートコードで記述

ここでは「テーマのimagesフォルダまでのパス」をショートコードで呼び出せるようにしてみます。

以下のコードをお使いのテーマの「functions.php」の一番下にコピペしてください。
※小テーマをお使いの場合は「子テーマを使っている場合」のコードをコピペして下さい。

「親テーマを使っている場合」

//imageDirectoryPass
function shortcode_imgDir(){
	return get_template_directory_uri(). '/images/';
}
add_shortcode('sc_imgDir','shortcode_imgDir');

「小テーマを使っている場合」

//imageDirectoryPass
function shortcode_imgDir(){
	return get_stylesheet_directory_uri(). '/images/';
}
add_shortcode('sc_imgDir','shortcode_imgDir');

以上でショートコードを使う準備は完了です。

あとは記事中で[sc_imgDir]と記述すればすぐに使うことができます。

早速使ってみよう！

※わかりやすくする為にaltなどの記述は省いてます。

例えば、以下のような記述は…

<img src="https://サイトのドメイン/wp-content/themes/テーマの名前/images/sample01.jpg">

以下の記述だけでOKになります。

<img src="[sc_imgDir]sample01.jpg">

かなり短くすっきりして見やすくなりましたね。

ソースの可読性が上がるとそれだけミスも減ります。

記事のスラッグを取得してショートコードで記述

テーマの画像フォルダの中にすべての画像を入れていると、画像の数が増えれば増えるほど管理が難しくなったりします。

なので私は記事毎にフォルダ分けをしています。※実際はもう少し深く分けています。

また、記事別にフォルダ分けをする際に、フォルダ名を「記事のスラッグ」にしています。

こうすることで「この記事のこの画像」といった探し方をする時に一発で目的の画像を探す事ができます。

こんな時も「記事のスラッグ名を自動で取得」してショートコードで呼び出すと便利です。

これも、以下のコードを「functions.php」にコピペするだけです☆

※今回の記述内容は親テーマも子テーマも変わりませんので、お使いのテーマのfunctions.phpにコピペしてください。

//page_slug
function shortcode_pSlug(){
	return get_page_uri(get_the_ID());
}
add_shortcode('sc_pSlug','shortcode_pSlug');

これで[sc_pSlug]と記述すれば使えます。

早速使ってみよう！

※わかりやすくする為にaltなどの記述は省いてます。

さっそく先程の例を使って見てみましょう。

以下のような記述は…

<img src="https://サイトのドメイン/wp-content/themes/テーマの名前/images/記事のスラッグ/sample01.jpg">

以下の記述だけでOKになります。

<img src="[sc_imgDir][sc_pSlug]/sample01.jpg">

これでスラッグのショートコードも使えるようになりましたね☆

たったこれだけで「長くて可読性の悪いパスの短縮」と、「スラッグを自動的に取得」という2つのショートコードが出来ました。

記述内容の説明

ここでは今回「functions.php」にコピペした記述内容を理解して、自分でもオリジナルのショートコードを使えるようになりましょう。

ものすごく簡単です。

まずは以下のコードを見てみましょう。

//imageDirectoryPass
function shortcode_imgDir(){
	return get_template_directory_uri(). '/images/';
}
add_shortcode('sc_imgDir','shortcode_imgDir');

//page_slug
function shortcode_pSlug(){
	return get_page_uri(get_the_ID());
}
add_shortcode('sc_pSlug','shortcode_pSlug');

なんだか上も下も書いてある内容が似てますねぇ～～☆

うん、似てる。（確信）

はい、それでは今回の記述をポイントだけ理解して自分でも使えるようになりましょう。

各項目の説明

まずは以下の画像を見てみましょう。
※画像をクリックすると拡大できます。

番号の振り方が変だと思うかもしれませんが、順番に見ていきましょう。

上記のように考えるとカンタンですね☆

要するに、今回コピペしたコードの１，２，３，４を変えるだけで別のショートコードが使えるようになるという事です。

記事中に１の内容を書くと、ブラウザで見た時に４の内容に変化します。

コードの意味を理解する

ではもう少し意味を理解するために、先程と同じような感じでこのコードの流れをイメージしてみましょう。

先程と同じ画像を使って説明しますので、見ながらイメージしてください。

先程の説明では番号を振っていませんでしたが、今回は「add_shortcode」の所から説明します。

※ここでは画像の[sc_imgDir]の方で説明します。

ここでは「add_shortcode」は呪文を唱えるポーズと考えて下さい。
※「add_shortcode」は、WordPressでショートコードを使うための関数です。

まず「add_shortcode」というポーズをとって、

なので、例えば以下の記述だと…

function frizz(){
	return "メラァぁぁぁぁぁ～～っ！！！";
}
add_shortcode('mera','frizz');

[mera] = メラァぁぁぁぁぁ～～っ！！！

となるので、以下の例文は…

主人公は呪文を唱えた。
「[mera]」

以下のようになります。

主人公は呪文を唱えた。
「メラァぁぁぁぁぁ～～っ！！！」

う～ん、我ながらあまりうまくハマりませんでしたが…

なんとなくでも意味を理解できたら幸いです。

ショートコードの便利な使い方

せっかくショートコードを使えるようになったので、そのショートコードを簡単にかけるとさらに便利です。

わざわざ紹介するようなことでもないのですが、やはりこれも人に言うと「便利だわ～！」とか、「あ～、全然考えてなかった～」<なんて言われる事が多いので一応紹介です。/p>

今回使えるようになったショートコードは[sc_imgDir]と[sc_pSlug]の2つです。

この[sc_imgDir]と[sc_pSlug]をそれぞれお使いのIMEに登録します。

例えば、私の場合Windows10で「Google IME」を使っているので、タスクバーにある以下の丸印の所を[右クリック] > [単語登録]へと進みます。

ここで以下のように「単語」の部分にショートコード、「よみ」の部分にわかりやすい文字を入力して「OK」をクリックします。

これで単語の登録は完了なので、上記の場合「いｍｇ」と打って変換すると[sc_imgDir]が変換候補に出てくるようになります。

ちなみに[sc_pSlug]も同じ方法で「よみ」を「すら」で登録して、試しに
「https://ドメイン/wp-content/themes/cocoon-child-master/images/記事スラッグ/sample.jpg」
と記述する例をやってみます。

まず、画像ディレクトリまでのパスは[sc_imgDir]、記事スラッグは[sc_pSlug]を使えるので以下のように記述出来ます。

[sc_imgDir][sc_pSlug]sample.jpg

そしてそれぞれを単語登録したので、

「いｍｇすら」→変換→「sample.jpg」

これだけで記述が出来ちゃいます。

参考までに変換イメージです。

いｍｇ　→　[sc_imgDir]
すら　→　[sc_pSlug]

なので

いｍｇすら　→　[sc_imgDir][sc_pSlug]

文章だとあまり便利さが伝わらないかもしれませんが、

「いｍｇすら」で変換するだけであとは画像の名前を入れるだけになります。

わざわざショートコードを手打ちやコピペなどをしなくても、そのまま記事を書きながらバシバシショートコードを使うことが出来るうえに、さらにミスもなくなるのでかなりおすすめです。

※単語登録の「よみ」はご自身の使いやすいものしてお使いください。

まとめ

非常に便利な「ショートコード」ですが、やはり自分でfuncions.phpに記述するのはちょっと難しいイメージがあって避けがちです。

しかし、変なプラグインを沢山入れて重くなったり、入れているプラグイン同士競合したりなど、プラグインもメリットだけではありません。

とにかく「使い分けが重要」なので、今回の記事を参考に皆さんもオリジナルのショートコードを使ってみて下さい☆