カスタムフィールド(音声)の表示・出力方法

Toolset Types で作成した WordPressのAudio(音声)用カスタムフィールドに保存された オーディオデータを フロントエンドに表示させる方法について見ていきましょう。

カスタムフィールド作成の流れや、カスタムフィールド作成時の種類別設定については、以下のページを参照してください。

Types ショートコードを使う場合

投稿編集画面の本文用エディタやView、コンテンツテンプレート作成時に使用するエディタに用意されている「Fields and Views」ボタンを使ってTypesのショートコードを挿入すると、任意の場所にカスタムフィールドを表示することができます。なお、Typesのショートコードを挿入する基本操作については以下のページを参考にしてください。
フロントエンドにカスタムフィールドを表示させる

基本書式

マウス操作で勝手に記述されるので覚える必要はありませんが、カスタムフィールドを表示するためのショートコードの基本書式は以下のとおりです。

[types field='field-name'][/types]

上記で「field-name」と書かれている部分は、カスタムフィールド作成時に設定したスラッグ(Field slug)が入ります。以下の説明も同様ですので、適宜ご自身で設定したものに読み替えてください。

上記の基本書式はカスタムフィールドの種類に関わらず共通のもので、ショートコード内の「field=’‘」で指定したフィールドの名前≒スラッグによって、フィールドの種類が判定され、さらに、後述する音声用カスタムフィールド固有のオプション(属性と属性値)を組み合わせることによって表示・出力が変化する仕組みになっています。

ショートコード内の属性値は「ダブルクォーテーション(ダブルクォーテーション)」ではなく「シングルクォーテーション(シングルクォーテーション)」で囲むのが基本です。

ショートコード挿入時に指定するオプション

「Fields and Views」ボタンを使って音声用カスタムフィールドを選択すると以下のようなオプション設定画面が表示され、フロントエンドでの表示や挙動を設定できます。ここでの設定によって挿入される基本のショートコード内に属性(Attribute)と属性値が自動的に記述されます。

カスタムフィールド(音声)の表示・出力方法

音声用カスタムフィールド挿入時のオプション


ショートコード、属性および属性値はエディタで直接手入力してもOKです。

Outlput mode(出力形式)
Audio Player(デフォルト値)
ページに音声再生用のプレーヤーを埋め込んで出力します。属性および属性値は不要です。
Raw audio file URL
音声ファイルが保存されているURLを出力します。こちらを選択すると埋め込みプレーヤーの出力を前提とした他のオプションは非表示になります。属性および属性値は、 output=’raw’ です。
output=’raw’の記述例

[types field='field-name' output='raw'][/types]

ショートコードをaタグの中に挿入すれば、ダウンロードリンクを作成することもできます。

ダウンロード

Preload(先読み設定)

プレーヤーを埋め込んだ場合に、音声ファイルの読み込み開始のタイミングを設定します。

Begin the media download as soon as the page is loaded
埋め込まれたページが表示されたらすぐにカスタムフィールド内の音声ファイルの読み込み(ブラウザ内での事前ダウンロード)を開始します。属性および属性値は、 preload=’on’ です。
Hold the media download until the visitor plays it(デフォルト値)
訪問者がプレーヤーの再生ボタンをクリックするまで音声ファイルの読み込みをおこないません。属性および属性値は不要です。
先読みを有効にする場合の記述例

[types field='field-name' preload='on'][/types]

Loop(繰り返し再生)
Replay the audio field once it reaches the end
カスタムフィールド内の音声ファイルを自動で繰り返し再生します。属性および属性値は、 loop=’on’ です。
Stop the audio play when it reaches the end(デフォルト値)
1回のみ再生します。属性および属性値は不要です。
繰り返し再生を有効にする場合の記述例

[types field='field-name' loop='on'][/types]

Autoplay(自動再生)
Begin the media play as soon as the page is loaded
ページが読み込まれたら自動でカスタムフィールド内の音声ファイルの再生を開始します。属性および属性値は、 autoplay=’on’ です。
Hold the media play until the visitor starts it(デフォルト値)
プレーヤーの再生ボタンをクリックするまで再生しません(手動再生)。属性および属性値は不要です。
自動再生を有効にする場合の記述例

[types field='field-name' autoplay='on'][/types]

同じページに2つ以上のプレーヤーが埋め込まれている場合は、上記の設定に関わらず自動再生は有効になりません。

Toolset JP Guide

ページ上部へ戻る