« ワードプレスによるホームページ移転日記 ~その4~ | トップページ | ワードプレスによるホームページ移転日記 ~その6~ »

ワードプレスによるホームページ移転日記 ~その5~

39157467_p1  このコーナーも五回目。今回は動画研究のサイドメニューに動画を貼り付けることにするわ。

39157467_p7  動画ですか。見やすくて良さそうなのです。

40551300_p5  前のページにはリンクでついてた物よね。

39157467_p1_2  そうね。前はリンクとして外部プレーヤーで見る形だったけれど、今回はサイドメニューにするから、記事との区分けがついて見やすくなるわ。

40551300_p5_2  早速初めましょ。まずは何をやるのかしら?

39157467_p1_3  まずは、テキストウィジェットを前回の要領でサイドメニューに入れるわ。

で、動画研究の時しか使わないから動画研究のカテゴリーで使うように設定してね。

40551300_p5_4  出来たわ。前回やったし余裕ね。

39157467_p1_4 出来たようね。次はテキストの欄に動画を再生するコードを書きましょう。

文自体はHTML5のVideoタグで書かれているわ。

Ws000166_2

40551300_p5_5 出来たけど、ムービーが違うわね。

Ws000167_2

39157467_p1_5  そうね。どの動画投稿でも同じムービーが出るのはいろいろ問題ね。

39157467_p7_2  なのです。

39157467_p1_6  でも、今の状態だと全部の記事ごとにさっきのテキストを投入して入れるしか無い気がするわよね。

40551300_p5_6  記事数は今のところ多くないし、大丈夫。頑張るわ。

39157467_p1_7  流石にそれをやるのも大変だからプラグインを入れてプログラムで制御しましょう。

まずはそのためのプラグインを入れるわね。

Exec-PHPというのを探してインストールします。

40551300_p5_7  出来たわ。何に使うのかはいまいちわからないけれど。

39157467_p1_8  簡単に言うとPHPの構文をテキストフィールドに入れても動くようにするプラグインね。

40551300_p5_8  なるほど。...となると何となくやることが理解できた気がするわ。カスタムフィールドで画像をわけたように入れ替えるのね。

39157467_p1_9  そうね。当たりよ。

...と言うことで作業の方を進めましょう。

カスタムフィールドを利用して、動画名というのを入れて、値にタイトルと同じものを入れます。

後、次回以降で必要になるからアイキャッチ画像を入れて、抜粋という欄に表示したいデータを入れることにするわね。

Ws000170

40551300_p5_9  出来たわ。まぁ、よくわからないけれど、画像の大きさは200x150くらいでいいのね。

39157467_p1_10  まぁ、そのくらいでいいわ。サムネイル画像として、一覧表示する時に使うものだからね。

40551300_p5_10  アイキャッチ画像を入れたら記事の上の方に画像が現れたわ。

39157467_p1_11  本来はそれでいいのだけれど、今回の使い方はそういうのではないから消すことにするわね。

管理画面→外観→テーマ編集ページ→content.phpを選択。

<?php the_post_thumbnail(); ?>というのを探して、<!-- <?php the_post_thumbnail(); ?> --> という感じで囲んでやるといいわ。

40551300_p5_11  アイキャッチが出なくなったわ。

39157467_p1_12 出来たみたいね。

そしたら、先程のテキストフィールドに戻ってこんな感じで入れてやるのよ。

<?php $cno = post_custom('動画名');?>
<?php if($cno == 'カードの回転'): ?>
<video src="動画URL" controls>
<?php elseif($cno == '映画のフィルム'): ?>
<video src="動画URL" controls>
<?php elseif($cno == 'キューブ'): ?>
<video src="動画URL" controls>
<?php endif; ?>

40551300_p5_12  出来たわ。

39157467_p1_13  これで、カスタムフィールドの値によって動画を切り替えることが出来るようになったわね。

今回はコレで終了。

次回は固定ページ側にこのサムネイルを使ったリンク集を作る事にします。

|

« ワードプレスによるホームページ移転日記 ~その4~ | トップページ | ワードプレスによるホームページ移転日記 ~その6~ »

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/216116/59310893

この記事へのトラックバック一覧です: ワードプレスによるホームページ移転日記 ~その5~:

« ワードプレスによるホームページ移転日記 ~その4~ | トップページ | ワードプレスによるホームページ移転日記 ~その6~ »