1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress – デフォルトで用意されたショートコード一覧と使い方。

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。

WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php を使うことができません。
それを解決するために、ショートコードというものを使うのです。

ショートコードは、自分で作成することもできますが、デフォルトで用意されたものを使うこともできます。

ショートコードについて詳しく知りたい方は、こちらの記事をご覧ください。
WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

上記リンク先では、自分でショートコードを作る方法について解説しておりますが、今回はデフォルトで用意されたショートコードの使い方について解説していきたいと思います。

目次
  1. デフォルトで用意されているショートコード一覧
  2. caption
  3. audio
  4. video
  5. playlist
  6. embed
  7. gallery

デフォルトで用意されているショートコード一覧

こちらがデフォルトで用意されているショートコードの一覧です。

caption イメージにキャプションを付ける。
audio オーディオの埋め込みと再生。
video 動画の埋め込みと再生。
playlist プレイリストを表示する。
embed 埋め込みを囲む。最大サイズを指定する。
gallery ギャラリーを表示する。

caption

まずは caption を紹介します。
こちらは皆様が一番多く使用するショートコードかもしれません。

記事投稿画面で画像を挿入するとき、キャプションを入力することで、自動的にショートコードが使われます。
wordpress_default_shortcode

[caption id="attachment_5781" align="aligncenter" width="300"]<img src="画像URL" alt="画像について" width="300" height="252" class="size-full wp-image-5781" /> 画像のキャプション[/caption]

下のように caption を使って、キャラクターというキャプションを画像の下に表示させています。

キャラクター
キャラクター

また、オプションの width を使わないとうまく反映されないようです。

オプションについて

caption にはオプションを使うことができます。

id

id を使うことで、画像を囲う div タグ、もしくは figure タグにに id 属性をつけることができます。

[caption id="id属性値" width="画像の幅"]<img src="画像URL" alt="画像について" width="300" height="252" class="size-full wp-image-5781" /> 画像のキャプション[/caption]

上記のように入力した場合、実際に出力されるコードは以下のようになります。

<figure id="id属性値" style="width: 画像の幅" class="wp-caption alignnone">
  <img 〜省略〜/>
  <figcaption class="wp-caption-text"> 画像のキャプション</figcaption>
</figure>

class

id の時と同じように、 class にも属性値を追加することができます。

[caption class="class属性値" width="画像の幅"]<img src="画像URL" alt="画像について" width="300" height="252" class="size-full wp-image-5781" /> 画像のキャプション[/caption]

実際には以下のようなコードになります。

<figure style="width: 画像の幅" class="wp-caption alignnone class属性値">
  <img 〜省略〜/>
  <figcaption class="wp-caption-text"> 画像のキャプション</figcaption>
</figure>

align

align では、画像の位置を指定することができます。

入力できる値は、以下の4つです。

  • alignnone: 指定なし(初期値)
  • aligncenter: 中央寄せ
  • alignleft: 左寄せ
  • alignright: 右寄せ
[caption align="alignright" width="画像の幅"]<img src="画像URL" alt="画像について" width="300" height="252" class="size-full wp-image-5781" /> 画像のキャプション[/caption]
キャラクター
キャラクター

このように、画像の位置を指定、今回ならば右寄せにすることが可能です。
これは、 class 属性に、 alignright という属性値がついた為です。

また、自分で WordPress のテーマを作った場合など、 css に alignright などの指定がない場合は、位置のしていが出来ないので注意が必要です。

width

width では、画像のサイズを指定することができます。

[caption width="画像の幅"]<img src="画像URL" alt="画像について" width="300" height="252" class="size-full wp-image-5781" /> 画像のキャプション[/caption]

記事の投稿画面の、「メディアを追加」から画像を指定した時、サイズも指定できます。
この時、この値は自動的に変更されますので、特に気にすることはないと思いますが、 img タグ内の widrh と、 caption で指定した width の値が違う場合、レイアウトが崩れてしまうので、注意が必要です。

audio

audio を使うことによって、オーディオファイルの再生が可能となります。

[audio src="パス/ファイル名.wav"]

この様に、オーディオプレイヤーを表示させることができます。

オプションについて

audio のオプションです。以下に一覧を記します。

mp3, m4a, ogg, wav, wma

複数のファイル形式を指定することが可能です。

[audio mp3="ファイル名.mp3" ogg="ファイル名.ogg" wav="ファイル名.wav"]

loop

ループ再生をするかどうかを指定できます。

入力できる値は、以下の2つです。

  • on: ループ再生する
  • off: ループ再生しない(初期値)
[audio src="パス/ファイル名.wav" loop="on"]

autoplay

autoplay では、オーディオを自動的に再生するかどうかを指定できます。

入力できる値は、以下の2つです。

  • on: 自動的に再生する
  • off: 自動的に再生しない(初期値)
[audio src="パス/ファイル名.wav" autoplay="on"]

このようにすると、ページが読み込まれた時、自動的にオーディオが再生されます。

preload

preload では、オーディオの読み込み方法やタイミングを指定します。

  • none: ページを読み込んだ時、オーディオを読み込まない。(初期値)
  • auto: ページを読み込んだ時に、オーディオを読み込む。
  • metadata: ページを読み込んだ時に、メタデータのみを読み込む。
[audio src="パス/ファイル名.wav" preload="auto"]

video

video は、動画を埋め込むためのショートコードです。
下の様に、動画を埋め込むことができます。

[video src="パス/ファイル名.mp4"]

オプションについて

video のオプションです。

mp4, m4v, webm, ogv, wmv, flv

動画ファイルも複数のファイル形式を指定することが可能です。

[video mp4="ファイル名.mp4" ogv="ファイル名.ogv" flv="ファイル名.flv"]

poster

動画の一部の画像を指定することで、再生前に表示する画像を指定しておくことができます。

[video src="パス/ファイル名.mp4" poster="パス/ファイル名.png"]

loop

動画ファイルをループさせるかどうかを指定することができます。

入力できる値は以下の2つです。

  • on: ループさせる。
  • off: ループしない。(初期値)
[video src="パス/ファイル名.mp4" loop="on"]

autoplay

動画を自動的に再生するかどうかを指定できます。

入力できる値は、以下の2つです。

  • on: 自動的に再生する
  • off: 自動的に再生しない(初期値)
[video src="パス/ファイル名.mp4" autoplay="on"]

preload

動画の読み込み方法やタイミングを指定します。

  • none: ページを読み込んだ時、動画を読み込まない。
  • auto: ページを読み込んだ時に、動画を読み込む。
  • metadata: ページを読み込んだ時に、メタデータのみを読み込む。(初期値)
[video src="パス/ファイル名.mp4" preload="auto"]

height

動画サイズの高さを指定します。

[video src="パス/ファイル名.mp4" height="480"]

width

動画サイズの横幅を指定します。

[video src="パス/ファイル名.mp4" width="640"]

playlist

プレイリストを表示させることができます。

[playlist ids="3239,3237"]

オプションについて

playlist のオプションです。

type

プレイリストの種類を、オーディオ、もしくは動画から選ぶことができます。

  • audio: オーディオ(初期値)
  • video: 動画

[playlist ids=”3239,3237,775″ type=”audio”]

order

再生リストの順序を、昇順、もしくは降順かを指定します。

  • ASC: 昇順(初期値)
  • DESC: 降順

[playlist order=”DESC”]

orderby

再生リストの並び替えをします。
randを使うことで、ランダムに並べ換えることができます。

  • title: タイトル順
  • post_date: 日付順
  • rand: ランダム
[playlist ids="3239,3237,775" orderby="rand"]

id

過去に投稿した記事のIDを指定するすることで、その記事に使用されたファイルを再生リストにすることができます。
これは ids を省略した場合に限ります。

[playlist id="756"]

ids

再生リストに追加するファイルの ID を指定します。

[playlist ids="3239,3237,775"]

exclude

再生リストに含まれるファイルを除外することができます。
値は除外するファイルの ID を指定します。

[playlist id="756" exclude="775"]

style

再生リストのスタイルを指定します。

  • light: 明るい(初期値)
  • dark: 暗い
[playlist ids="3239,3237" style="light"]
[playlist ids="3239,3237" style="dark"]

tracklist

トラックリストの有無を指定します。

  • true: トラックリストを表示する(初期値)
  • false: トラックリストを表示しない
[playlist ids="3239,3237" tracklist="false"]

tracknumbers

トラックナンバーの有無を指定します。

  • true: トラックナンバーを表示する(初期値)
  • false: トラックナンバーを表示しない
[playlist ids="3239,3237" tracknumbers="false"]

images

サムネイルの有無を指定します。

  • true: サムネイルを表示する(初期値)
  • false: サムネイルを表示しない
[playlist ids="3239,3237" images="false"]

artists

アーティスト名の有無を指定します。

  • true: アーティスト名を表示する(初期値)
  • false: アーティスト名を表示しない
[playlist ids="3239,3237" artists="false"]

embed

埋め込み項目を囲うことで、サイズを指定することができます。

  • width: 横幅
  • height: 縦幅
[embed width="200px"]https://www.youtube.com/watch?v=2FM9nJUlwEQ[/embed]

gallery

ギャラリーを表示します。

[gallery ids="5989,5990,5991"]

オプションについて

gallery のオプションです。

orderby

画像の順序を指定します。

  • title: タイトル順
  • post_date: 日付順
  • rand: ランダム
[gallery ids="5991,5989,5990" orderby="title"]

order

画像の順序を、昇順か降順か指定します。

  • ASC: 昇順
  • DESC: 降順
[gallery order="DESC"]

columns

カラム数を指定します。値を0にすると、改行タグが挿入されなくなります。

[gallery columns="4"]

id

過去に投稿した記事のIDを指定するすることで、その記事に使用された画像からギャラリーを作ることができます。

[gallery id="5232"]

size

サムネイルのサイズを指定します。

  • thumbnail: サムネイルサイズ
  • medium: ミディアムサイズ
  • large: ラージサイズ
  • add_image_size()で登録したサイズ
[gallery ids="5989,5990,5991" size="large"]

itemtag

各項目を囲うタグを指定します。
項目は、画像とキャプションです。初期値は<dl></dl>です。

[gallery ids="5989,5990,5991" itemtag="div"]

icontag

各項目の画像を囲むタグを指定します。初期値は<dt></dt>です。

[gallery ids="5989,5990,5991" icontag="div"]

captiontag

各項目のキャプションを囲むタグを指定します。初期値は<dd></dd>です。

[gallery ids="5989,5990,5991" captiontag="p"]

link

画像ファイルをクリックした後の、リンク先を指定します。
初期値では、画像ファイルのページへのリンクとなっておりますが、画像への直接リンクか、リンクなしかを指定することができます。

  • file: 画像への直接リンク
  • none: リンクなし
[gallery ids="5989, 5990, 5991" link="file"]

include

画像ID を指定することで、表示する画像を選択します。
複数指定することも可能です。

[gallery include="5989, 5990"]

exclude

画像ID を指定することで、表示したくない画像を選択します。
複数指定することも可能です。

[gallery exclude="5781, 5989"]

まとめ

この様に、 WordPress にはあらかじめ用意されたデフォルトのショートコードがあります。
ただ、自作したテーマなど、デフォルトのショートコードが対応されていない場合があるので、その辺は注意が必要です。
それについては、また別の記事で書いてみようかなと思っています。

以上、 WordPress 、デフォルトのショートコードの使い方でした。

スポンサードリンク

関連コンテンツ

オススメ記事

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

コメントをどうぞ!

メールアドレスが公開されることはありません。