ワードプレスには、引用、動画や音楽,Youtubeを記事の中に簡単埋め込める最初から使えるショートコードが含まれています。ショートコードとは、Wordpress固有のHTMLタグのようなもので、少ないコードで高度な機能を実現できるとても便利な仕組みです。今回はこれらのショートコードをご紹介しながら、ショートコードの仕組みを解説いたします。
引用元を表示するのに使える[caption]ショートコード
画像や、文章の引用をブログの中で行うことは多々あるかと思います。[caption]ショートコードはそれらの引用元を示すのにとても便利なショートコードです。
使用方法：画像の引用元を示す
captionショートコードの使い方は下記のようになります。記事に表示する画像タグを囲むように[caption][/caption]を追加し、その中に引用元の情報を記載します
[caption width="300"]<img src="oceanimage.jpg"> 引用：毎日新聞[/caption]
*結果
引用：毎日新聞
Youtube動画を埋め込むのに使える[embed]ショートコード
[embed]ショートコードを使用すると、Youtube動画をシンプルにスッキリと埋め込むことができます。このショートコードはYoutubeだけでなく、dairymotionなどにも対応しています。対応サイトはこちらを参照されてください！
使用方法：Youtube動画を記事に埋め込む
widthとheightは横幅と高さです。その間にYoutube動画のURLを貼り付けるだけです。とても簡単にyoutube動画を貼り付けることができます
[embed width="600" height="400"]http://www.youtube.com/watch?v=dQw4w9WgXcQ[/embed]
＊結果
mp3やoggを音楽プレイヤー付きで記事に埋め込める[audio]ショートコード
audioショートコードは、自分のサーバーにアップロードした音楽ファイルをプレイヤー付きで表示してくれる便利なショートコードです。このショートコードを使うととても簡単に記事にmp3やoggなどの音楽ファイルを埋め込むことができます。
使用方法：音楽(mp3,ogg)を記事に埋め込む
[audio src="audio-source.mp3"] [audio src="audio-source.ogg"]
またmp3とoggどちらかを対応ブラウザに合わせて再生してくれる下記のような書き方もあります
対応しているフォーマットは、’mp3′, ‘m4a’, ‘ogg’, ‘wav’, ‘wma’です。
[audio mp3="audio.mp3" ogg="audio.mp3"]
*結果
ビデオファイルを記事に埋め込める[video]ショートコード
videoショートコードは、自分のサーバーにアップロードしたビデオファイルを記事の中に埋め込むことができるショートコードです。対応しているフォーマットは「’mp4′, ‘m4v’, ‘webm’, ‘ogv’, ‘wmv’, ‘flv’」の６種類です。
使用方法：ビデオを記事に埋め込む
使用方法は、audioショートコードと全く同じで、フォーマットの横に、ビデオファイルのアドレスを記入することでビデオを埋め込むことが可能です。
[video mp4="myvideo.mp4"]
*結果
ショートコードを自分で作るには？
上記のように便利なショートコードですが、自分で作ることもできます。ここでは[mypicture width=”500″ height=”500″] と記事中に挿入したら、幅と高さ５００pxで好きな画像を表示してくれるショートコードを作ってみます
1.管理画面＞外観＞テーマの編集 より、functions.phpを開きます
2.functions.phpの最下部に下記のコードを追加します
function make_picture($atts) {
extract(shortcode_atts(array(
'width' => 400,
'height' => 200,
), $atts));
return '<img src="表示したい画像のURL" width="'.$width.'" height="'.$height.'" >';
}
add_shortcode('mypicture', 'make_picture');
最終行のadd_shortcodeの部分は、mypictureというショートコードが実行されたときに、どのfunctionを実行するかというワードプレスのショートコード追加用のコードです。
function make_pictureという関数がショートコードの本体で、この関数では$attrでwidth とheightの値を受け取り、return の部分でショートコードをHTMLに変換して出力します
ワードプレスドクターではより高度なショートコード（様々な変数を渡して結果が変化するような機構など）をプラグインとして制作し御社のサイトに実装することなども可能です。
ショートコードを一度実装すると記事に常に埋め込みたい構造があるときなどに非常に便利になります。ご興味ございましたらワードプレスドクターに是非ご相談ください。
