質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

4678閲覧

wordpressテーマstinger5で動画まとめサイトを構築しております。

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

1クリップ

投稿2015/12/12 11:54

wordpressテーマstinger5を使って先月よりサイト構築中です。
1点分からない点がございますのでご教示頂きたいです。

よく動画サイトで、トップ画面のアイキャッチ画像内に対象動画の再生時間を表示しているサイトがあります。再生時間は分かっている前提として、その埋め込み方法についてお教えいただきたいです。
恐らく、「テーマの編集」の「itiran.php」もしくは「functions.php」をカスタマイズし、反映させるのではと思っているのですが、それぞれの単一記事の再生時間をどのように反映させるのか理解できていません。理想系としては、「投稿」の「新規追加」より入力した再生時間がうまくトップ画面のアイキャッチ画像付近に反映できればと思うのですが、可能なのでしょうか。大変恐縮ですが、ご教示頂ければ幸いです。

宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Stingerは利用した事がありませんが、ダウンロードして確認したところアイキャッチの表示はitiran-thumbnail-on.phpというファイルで処理しているようです。
まずはアイキャッチ(サムネイル)の前後を適当なクラス名を付けたdiv要素で囲って、アイキャッチの後ろにカスタムフィールドにある再生時間を追加すると良いでしょう。
カスタムフィールドへの再生時間の追加は予め投稿画面で行っておいてください。

PHP

1<div class="thumb"> 2 <?php the_post_thumbnail( 'st_thumb150' ); ?> 3 <div class="play-time"><?php get_post_meta( get_the_ID(), 'play_time', true ); ?></div> 4</div>

「サムネイルを持っていないときの処理」の方も同じようにして、ついでにそちらのimg要素にclass="wp-post-image"を付け足したら、あとはCSSでサムネイルと再生時間が重なるようにするだけです。

CSS

1.thumb { 2 position: relative; 3} 4 5.wp-post-image { 6 position: absolute; 7} 8 9.play-time { 10 position: absolute; 11}

再生時間の位置は適当に調整してください。

投稿2015/12/13 12:05

flat

総合スコア617

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/12/15 11:24

ご回答ありがとうございます。 恥ずかしながら、カスタムフィールドという存在を初めて知りました。 PHP部分及びカスタムフィールドを足して記事毎に実現する事ができました。 本当にありがとうございます。
flat

2015/12/15 13:09

解決できて何よりです。 ちなみにカスタムフィールドは「Custom Field Template」や、さらに多機能な「Advanced Custom Fields」というプラグインで手軽に利用することができますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問