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 、デフォルトのショートコードの使い方でした。

スポンサードリンク

関連コンテンツ

オススメ記事

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

小学生から始めるScratch入門です。 前回はじゃんけんゲームを作りました。 今回はピアノの鍵盤を作って、音を鳴らしてみましょう。 プロローグ [serif icon="aru-s.jpg"

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

【解決!】Macで「デフォルトシェルはzshになった」と表示されるときの対処法

MacOSをアップデートしてから、ターミナルを開くたびに、「The default interactive shell is now zsh.」というメッセージが表示されるようになりました。 これは

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です