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】記事一覧ページなどで使える「カード」の使い方

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

MacでのAndroid Studioインストール手順

今回は Android Studio 3.4 をインストールする手順を解説します。 Android Studio のダウンロード Android Studio そのページから

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

ファイルを分けるべよ!

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門、第3弾です。 今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう! [serif icon="aru-s.jpg" name="アル"]うーん……

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

コメントをどうぞ!

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