Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

カスタムフィールドの具体的な活用法(YouTube 動画挿入フィールド作成)

あれこれ便利なカスタムフィールドですが、今回は具体的な利用方法をご案内いたします。

投稿画面に独自の項目を追加できることを利用し、YouTube 動画の ID を入力するだけで記事内に動画を挿入できる項目をカスタムフィールドで作ってみましょう。

8ae092fd72650c726ebf71b1d2389297_s.jpg

まず、カスタムフィールドを作成します。

  1. サイドメニューの [カスタムフィールド] - [新規] をクリックする
  2. 以下の情報を設定し [保存] ボタンをクリックする

    custommove01.png

  3. システムオブジェクト:記事
    名前:YouTube動画
    説明:youtube動画を表示するためのカスタムフィールド
    タイプ:記事
    必須?:チェック無し
    識別子:youtube_mov
    

以上の手順で、記事投稿画面に動画の ID 挿入フィールドが出現します。

custommove02.png

次に、カスタムフィールドで入力した値を出力するソースコードをテンプレートに追記します。

  1. サイドメニューの [デザイン] - [テンプレート] をクリックする
  2. 「アーカイブ・テンプレート」の「記事」を開く
  3. 以下のソースコードを動画を表示したい位置に挿入し [保存] ボタンをクリックする
  4. <mt:SetVarBlock name="movie"><mt:CustomFieldValue identifier="youtube_mov" /></mt:SetVarBlock><mt:If name="movie">
    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/<mt:CustomFieldValue identifier="youtube_mov" />" frameborder="0" allowfullscreen></iframe>
    </p>
    <mt:Else>
    </mt:If> 
    

以上の手順で、カスタムフィールドを利用して挿入した動画が記事内に表示されるようになります。

custommove03.png

記事内のカスタムフィールドには YouTube 動画の ID のみ入力しますが、YouTube 動画の ID は、たとえば以下のような URL の場合は [Wbt_M7nK0-o] というイコールの後になります。

https://www.youtube.com/watch?v=Wbt_M7nK0-o

以上です。
このようにカスタムフィールドでは、独自の入力項目を追加する事で専門的な内容の記事を作成するのに特化した記事投稿ページを作る事も可能です。
ぜひ活用してみてください。

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス