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

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

ただいまの
回答率

89.97%

【wordpress】投稿記事の埋め込み動画を記事一覧のアイキャッチに自動設定したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 409

ks_1234

score 5

前提・実現したいこと

wordpressで動画紹介サイトのテーマを自作中です。
投稿記事の本文冒頭にYoutubeの動画をiframeで埋め込んでいます。
各投稿記事から冒頭の動画のsrcを引っ張り出して記事一覧のアイキャッチとしてループさせたいです。

発生している問題・エラーメッセージ

記事一覧のループが解除されたり、うまく動画が出力されない。

該当のソースコード

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<article>

//タイトルなど

<?php
$postdeta = esc_attr(get_the_content());
// 投稿記事からデータを取得

preg_match('https://www.youtube.[-_\/A-Za-z0-9]*/', $postdeta, $youtubeUrl);
// データからhttps://www.youtubeを含む英数字・ハイフン・アンダーバーを得る

<?php
echo "<a href='" .esc_url(get_permalink()). "' >";
echo "<iframe src='$youtubeUrl'></iframe></a>"  ;
?>
//iframe srcとしてyoutubeurlを使用、リンク付きの動画アイキャッチを貼り付ける

//コメントなど

</article>
<?php endwhile; endif; ?>

php, wordpress

試したこと

Youtubeのサムネイルをアイキャッチにすることはできました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

それを自動でしてくれるプラグインを使っては??「Automatic Featured Images from YouTube / Vimeo

コードで悩むよりも簡単かと思いますけど・・・コードでどうしてもやりくりしたいならこの回答は無用になりますね。

※テスト程度にしか確認していないですが、「先頭から1000文字の間に挿入された動画からアイキャッチ画像を抽出するようになっている」ようですから試してみてもいいかも知れませんよ。

公式ページはこちら(上のリンクは私が作っている日本語での紹介サイトの記事です)

https://wordpress.org/plugins/automatic-featured-images-from-videos/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/24 11:03

    回答ありがとうございます!
    勉強途中なもので、function.phpの記述がまだわからないので、プラグインがうまく使えないのです。

    キャンセル

checkベストアンサー

0

詳しく検証してみてはいないのですが、
もしかするとYoutubeのアドレスを取り出す際の正規表現が違っているせいかもしれないのと、
そのせいで出力の際に不具合が出てるのかもしれません。
iframeのところも文法ミスがありました。
それらをふまえてざっくりこんな感じで表示はされると思うのですが、試してみてください。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<?php
$postdeta = esc_attr(get_the_content());
// 投稿記事からデータを取得

// YoutubeのVideoIDを抽出
if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $postdeta, $match)) {
    $video_id = $match[1];

// 出力
echo "<a href='" .esc_url(get_permalink()). "' >";
echo '<iframe src="https://www.youtube.com/embed/' 
. $video_id 
. '" ></iframe>';

echo "</a>";

}
?>
</article>
<?php endwhile; endif; ?>

iframeをaタグでリンクとして囲ってありますが、この場合だとiframeでYouTubeの動画を表示させるより、サムネイル画像をアイキャッチ画像に設定しておいて静止画として出力したほうが良い気もします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/24 11:00

    ありがとうございます。
    参考にして見直してみたらコードミス見つかりました!
    無事取り出せました。
    iframeの閉じタグが消えてました(笑)

    キャンセル

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

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる