WordPressのカスタム投稿タイプを利用して、youtubeの動画を投稿したく、且つ動画をそのままアイキャッチ画像のような形として表示させたいです。

現在、動画クリエイターの方のポートフォリオサイトを作成しております。
その為、制作実績としてyoutubeにupした動画をWordPressにて表示させたいと考えております。
また、今後は動画クリエイターさん本人が動画を手軽に自分で制作実績として入力できるように考えている次第です。

【完成イメージ】

「View More」のボタンをクリックすると、動画の制作実績一覧ページに変遷する作りです。
完成イメージの3つの動画はTOPページに表示させます。

その完成イメージとして制作を進めているのですが、動画を完成イメージのように表示させる方法が分からない状態でおります。

【自身にて試したこと】
・カスタム投稿タイプで「制作実績」を掲載できる投稿画面を作成
・カスタム投稿タイプにて、本文入力欄にyoutube動画の<iframe>URLをそのままペースト
・phpコードの該当箇所に<?php bloginfo('template_url'); ?>を入力
・<iframe>内のsrc属性に"<?php echo catch_post_movie(); ?>を入力
・「Featured Video Plus」と呼ばれるプラグインを使用して、アイキャッチ動画としてURLを入力

などと色々試しましたが上手くいかずにこちらで質問させて頂きました。

以下に「index.php」の該当箇所コードを添付致します。
尚、functions.phpは特ににいじっておりません。

PHP
1<section id="works" class="section-inner">
2    <div class="works-wrap">
3      <div class="section-title">
4        <h2 class="wow fadeIn" data-wow-delay="1s">Works</h2>
5      </div>
6        <?php
7          $args = array(
8              'post_type' => 'works', 
9              'posts_per_page' => '3', 
10              'orderby' => 'DESC', 
11          );
12
13          $top_page = new WP_Query($args);
14        ?>
15        <?php if ( $top_page->have_posts() ) : ?>
16
17          <div class="works-container wow fadeIn" data-wow-delay="1.5s">
18            <?php while ( $top_page->have_posts() ) : $top_page->the_post(); ?>
19              <div class="works-video">
20                <div class="works-wrapper">
21                  <iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
22                </div>
23              </div>
24            <?php endwhile; wp_reset_postdata(); ?>
25          </div>
26
27        <?php endif; ?>
28
29    </div>
30    <div class="works-btn wow fadeIn" data-wow-delay="1.5s">
31      <p><a href="<?php echo  esc_url(home_url());?>/works/">View More</a></p>
32    </div>
33  </section>

以上です。
よろしくお願い致します！

CHERRY

2022/04/19 05:54 編集

> などと色々試しましたが上手くいかずにこちらで質問させて頂きました。というのは、なにを試したらどのような結果になるのでしょうか？真っ白な画面ですか？　エラーが出ますか？　Webブラウザのデベロッパーツールにはなにかでていますか？　ログにはなにか出ていますか？うまくいかないのはわかりますので、現在がどのような状況になっているのかをわかりやすく具体的に記載していただけないでしょうか。

soldier

2022/04/19 06:43 編集

ありがとうございます。以下、具体的な検証結果です。 1、カスタム投稿タイプで「制作実績」を掲載できる投稿画面を作成 ↓ こちらはカスタム投稿を作成したまでですので、特別エラーには関係ありません。 2、カスタム投稿タイプにて、本文入力欄にyoutube動画の<iframe>URLをそのままペースト ↓ TOPページの「Works」にある本来動画が表示される部分が白背景の何もない状態 (検証ツールでも特にエラーは無) 3、phpコードの該当箇所に<?php bloginfo('template_url'); ?>を入力 ↓ 以下のエラーが表示。 Fatal error: Uncaught Error: Call to undefined function get_header() in /Users/yoshikenta/Local Sites/ukeylandtest/app/public/wp-content/themes/ukey_land/index.php on line 2 ( ! ) Error: Call to undefined function get_header() in /Users/yoshikenta/Local Sites/ukeylandtest/app/public/wp-content/themes/ukey_land/index.php on line 2 index.phpの2行目が<?php get_header(); ?>の為、header.phpを確認したが、どこに原因があるのか不明な状態です。 (コードは別で送ります) 3、<iframe>内のsrc属性に"<?php echo catch_post_movie(); ?>を入力 ↓ ローディング画面がブラウザ全体に表示されるだけで、検証ツールを見ても特にエラーは無い。 4、「Featured Video Plus」と呼ばれるプラグインを使用して、アイキャッチ動画としてURLを入力 ↓ 「Works」の部分には何も表示されず、エラーも無い状態。以上です。 3番目のエラーが解消されれば表示できるのかとも考えてheader.phpの内部に原因がないか探っております。以下に別でheader.phpのコード内容をお送り致します！

soldier

2022/04/19 06:42

以下、header.phpの内容です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>UKEY LAND【公式サイト】</title> <meta name="description" content="">  <meta name="robots" content="noindex"> <link rel="icon" type="image/png" href="<?php echo get_template_directory_uri() ?>/images/ukey_logo.png"> <?php wp_head(); ?> </head> <body> <div id="loader_wrap"> <div class="loader"></div> </div> <header class="header"> <div class="header-inner inner"> <div class="header-name"> <h1> <a class="heade-mainName" href="#top">UKEY LAND</a> </h1> </div> <div class="drawer-area"> <div class="drawer-icon"> <div class="drawer-icon-bars"> <div class="drawer-bar1"></div> <div class="drawer-bar2"></div> <div class="drawer-bar3"></div> </div> </div> <div class="drawer-content"> <div class="drawer-content-items"> <div class="drawer-content-item"><a href="#top">Top</a></div> <div class="drawer-content-item"><a href="#concept">Concept</a></div> <div class="drawer-content-item"><a href="#about">About</a></div> <div class="drawer-content-item"><a href="#service">Service</a></div> <div class="drawer-content-item"><a href="#works">Works</a></div> <div class="drawer-content-item"><a href="#schedule">Schedule</a></div> <div class="drawer-content-item"><a href="#contact">Contact</a></div> </div> </div> </div> </div> </header> <div class="drawer-background"></div>

行動規範の内容に同意します

回答1件

ベストアンサー

2、カスタム投稿タイプにて、本文入力欄にyoutube動画の<iframe>URLをそのままペースト
↓
TOPページの「Works」にある本来動画が表示される部分が白背景の何もない状態
(検証ツールでも特にエラーは無)

何かを参考にして、テンプレートを作成されていますか？

質問に記載されている下記コードでは、WordPress のコンテンツを表示する WordPress ループの中に WordPress のコンテンツ(WordPress 投稿編集画面の本文欄)を表示する部分がないようです。

        <?php while ( $top_page->have_posts() ) : $top_page->the_post(); ?>
         <div class="works-video">
           <div class="works-wrapper">
             <iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
           </div>
         </div>
       <?php endwhile; wp_reset_postdata(); ?>

たとえば、

<?php while ( $top_page->have_posts() ) : $top_page->the_post(); ?>
<div class="works-video">
<?php the_content(); ?>
</div>
<?php endwhile; wp_reset_postdata(); ?>

のように iframe を記載している部分に the_content() を記載するとどうなりますか？

投稿2022/04/19 13:30

CHERRY

総合スコア25171