WordPressでブログをやっていて何が便利かというとショートコードなんですよね。
アフィリエイトリンクなどもショートコードにしておくとあとでHTMLの変更が楽だったりとメリットが多いです。
というわけで、ショートコードを作る方法を、いくつかの実例と共にご紹介します。
ショートコードの何が便利か
冒頭でもちらっと書きましたが、改めてWordPressのショートコードは何が便利なのか解説します。
ショートコードというのは、投稿画面にてあらかじめ指定した書き方をすると、実際に公開される記事ではコードが展開されて表示されるという仕組みです。
例えばこんなショートコードを書くと、
[fukidashi text="テキスト"]
こんな感じのHTMLが表示されるようにできます。ちなみに、下記のHTMLは実際にdelaymaniaで使ってる吹き出しのソースコードです。
<div class="entry-talk-box"><div class="entry-talk-img"><img src="https://delaymania.com/wp/wp-content/uploads/2019/06/delaymania_icon.png" decoding="async" alt=""></div><div class="entry-talk-txt-left entry-talk-txt"><p>テキスト</p></div></div>
アフィリエイトリンクなどは記事に直接HTMLを書くと後で変更したい時に何百記事を変更する羽目になりかねないんですよね。
ショートコード化しておくと、ショートコードの元々のコードをいじるだけで全記事に反映されるため、変更がめちゃめちゃ楽なんですよ。
ショートコードを自作する
ショートコードは、functions.phpに数行追加するだけで簡単に作ることができます。
いくつかの型があるので、順番に紹介していきますね。
あくまで実例なので、このソースコードを元にいろいろカスタマイズして使ってみてください。
ショートコードで定型文を出力する
まずは一番シンプルなタイプで、ショートコードを記事内に書くだけで元々決めておいた定型文を出力できるというもの。
function aisatsu_shortcode() {
return 'こんにちは大谷大(<a href="https://twitter.com/delaymania" target="_blank">@delaymania</a>)です。';
}
add_shortcode('aisatsu', 'aisatsu_shortcode');
上記のようなちょっと手で打つにはめんどくさい定型文を、下記のショートコードを書くだけで出力できます。
[aisatsu]
このショートコードによって「こんにちは大谷大(@delaymania)です。」という文章を表示することができます。
定型文の一部をその都度書き換える
定型文をただ出力するだけだとショートコードのうまみがあんまりないので、「型を生かして中身をその都度入れ替える」という使い方のできるショートコードです。
function aisatsu_shortcode() {
$name = '大谷大';
$twitterid = '@delaymania';
$twitterurl = 'https://twitter.com/delaymania';
return 'こんにちは' . $name . '(<a href="' . $twitterurl . '" target="_blank">' . $twitterid . '</a>)です。';
}
add_shortcode('aisatsu', 'aisatsu_shortcode');
上記のように、名前とかIDとかURLを入れ替え可能な形にもできます。この方法はカスタマイズ次第でいろんな方法で使えるので便利ですよ。
ショートコードを書くときはこんな感じです。
[aisatsu name="" twitterid="" twitterurl=""]
nameとかtwitteridとか、入れ替えたいものを入れて使うことができます。
ショートコードでテキストを囲って使う
ショートコードでテキストを囲って使うというパターンもあります。
function point_shortcode( $atts, $content = null ) {
$class = 'point';
return '<div class="' . $class . '"><p>' . $content . '</p></div>';
}
add_shortcode('point', 'point_shortcode');
事前に設定しておいたHTMLタグで囲うことができるので、これによってコードを入力する時間が省けて、文章を書く時間を短縮できると思います。
ショートコードの書き方はこんな感じです。
[point class=""]テキストをここに入れます[/point]
そうやって出力したHTMLがこちらです。
<div class="point"><p>テキストをここに入れます</p></div>
初期設定を「point」としてありますので、空欄にするとpointというクラス名が入りますが、このクラス名を変更したいときは何かしらのクラス名に差し替えられる仕組みです。
最後に
個人的に一番多用しているのはアフィリエイトリンク用のショートコードで、あとは文章を装飾する系ですね。サムネイル画像付きリンクとか、ショートコード使って表示させてます。
文中にアドセンス入れたい時もショートコード化しておけばあとで編集も削除も簡単なのでおすすめですよ。
アイデア次第で強力な武器になるので、ぜひ使ってみてください。