【Wordpress】投稿内でひんぱんに使う決まり文句やスクリプト・PHPコードなどはショートコードにすると記事作成がラク
も・く・じ
ワードプレスにはショートコードという便利な機能が備わっています。
このショートコードを使えば、投稿内でしょっちゅう使う決まり文句や
投稿内では使いにくいPHPコードや複雑なスクリプトコードなども、
数文字の記述で埋め込むことができます。
(サイドバーにも使えます)
そのショートコードはfunctions.phpに登録しておいていつでも使えるようにすると
記事作成がぐっとラクになりますよ。
投稿内でよく使う(かもしれない)ショートコードの例
たとえばアドセンスコードなどを直接投稿内に貼り付けたいとか、
サイドバーにショートコードで書き込みたいなんてときは今回の例が役に立ちます。
区切り文字代わりに特定の画像を投稿内に埋め込みたい時にも使えます。
毎回決まったテキストを表示したい場合もショートコードで代用するとラクです。
ショートコードの作り方の凡例
動作検証は行ってますが、カスタマイズ・実装に関しては”サイトが表示されない”などのトラブルが発生する可能性もありますゆえ、失敗した時に元に戻せるようオリジナルファイルのコピーは必ず作っておいてください。
なお導入に際しては自己責任にてお願いします。
ショートコードの作り方は割と簡単です。
functions.phpに以下のコードを加筆します。
0 1 2 3 4 5 |
function XXX_func() { return 'ここにショートコードの中身を記述'; } add_shortcode('XXX', 'XXX_func'); |
ショートコードのfunctions.php内への書き方はほかにもありますが、これが一番シンプルでわかりやすいかなと思います。
1行目と4行目の3ヵ所の”XXX”の部分は適当にわかりやすい名称に変えてください。
同様に2ヵ所の”_func”の部分についても、
わかりやすく統一させるために私が勝手に考えただけの文字列なので
お好みで変えて構いません。
どちらも変更する場合は全ヵ所同じテキスト(英文字)で統一する必要があります。
たとえば当サイトで区切り文字代わりに使っているコチラ↓の画像ですが、
これもショートコード化して投稿内に埋め込んでます。
実際のコードはコチラ↓です。
0 1 2 3 4 5 |
function breakline_func() { return '<img class="break" src="'.get_site_url().'/wp-content/themes/image/article/breakline.png" width="600" height="80" alt="区切り画像" title="" />'; } add_shortcode('breakline', 'breakline_func'); |
このあと投稿内の表示させたい箇所に[breakline]と打てば、
上記画像が自動で表示されるようになってます。
ひんぱんに使うテキストがあったらこんな感じで作ります。
0 1 2 3 4 5 6 7 |
function customize_func() { return '<div class="attention"> <p class="att_p">カスタマイズの注意点として、失敗した時に元に戻せるようオリジナルファイルの<span class="f_bold">コピー</span>は必ず作っておきましょう。</p> </div>'; } add_shortcode('customize', 'customize_func'); |
ただし中にはここでのショートコードの作り方ではうまく作動せず、
サイトが真っ白になってしまう例も存在します。
たとえば以下のスクリプト。
0 1 2 3 4 5 6 |
function shiborikomi() { <script type="text/javascript"> (スクリプトの具体的内容) </script> add_shortcode('shiborikomi', 'shiborikomi_func'); |
必ずではないですが、スクリプトの内容によっては
投稿内に[shiborikomi]と記述するとサイトが開けなくなる場合があります。
そんな時はスクリプト自体を一まとめにして
それをあらためて読み込むという方法をとるとうまくいきます。
具体的には以下の書き方になります。
(書き方は他にもいろいろあるようです)
0 1 2 3 4 5 6 7 8 9 10 |
function shiborikomi() { $str=<<<eot <script type="text/javascript"> (スクリプトの命令文) </script> eot; return $str; } add_shortcode('shiborikomi', 'shiborikomi_func'); |
こんなふうにスクリプトの命令を
2行目の”$str=<<<eot”と6行目の”eot;”の間に書いてやればOK。
スクリプトの内容については私は素人ですので、
なぜこの書き方でOKなのかに関してはさっぱりわかりません。(汗)
そこは突っ込まないでください。
あとjQueryを使った命令文の場合は頭に「$」が使えないみたいなので、
0 1 2 3 4 |
$(function(){ (スクリプトの命令文) }) |
0 1 2 3 4 |
jQuery(function(){ (スクリプトの命令文) }) |
やり方としては「投稿編集画面でソースに表示されないコメントアウトのやり方」を参考に、コメントアウトのショートコードを先に作成します。
必要なくなったショートコードをコメントアウトのショートコードで囲みます。
これでソースにも残らずに非表示にすることができます。
たとえば[breakline]というショートコードが必要なくなったら[comment][breakline][/comment]という感じでくくってあげます。
対応箇所が複数ページに渡る場合はSearch Regexというプラグインを使えば一括置き換えが可能です。
同様にショートコードを一時非表示ではなく完全に削除したい場合もSearch Regexを使えば一気に削除できます。
以上です。
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓