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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

0回答

513閲覧

wordpressで投稿記事の動画をトップページで表示させたい。

ohzora

総合スコア0

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/03/23 04:47

前提・実現したいこと

・wordpress の投稿に動画を載せたのをトップページで表示させたい。
・トップページでは上から、動画、日付、タイトル、本文の順番で表示させたい。
・画像の灰色の部分が動画になり、再生できるようにしたい。
イメージ説明

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

・本文中に動画が挿入されているため、上から、日付、タイトル、動画、本文の順番になってしまう。

該当のソースコード

<section id="feature" class="bg-feature"> <h2 class="my-5 pt-4 title"><span>特集動画</span></h2> <div class="container-fluid pb-4 mb-5"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto mb-3"> <?php if ( have_posts()) : while ( have_posts() ) : the_post(); ?> <?php if ($wp_query->current_post == 0) : ?> <div class="carousel-item col-md-4 active"> <div class="card mb-3"> <?php $format = get_post_format( $post_id ); ?> <div class="card-body"> <p class="time"> <?php the_time( "Y-m-d" ); ?> </p> <p class="card-title text-primary font-weight-bold mb-2"> <?php the_title(); ?> </p> <p class="card-text"> <?php the_content(); ?> </p> </div> </div> </div> <?php endif; ?> <?php if ($wp_query->current_post != $wp_query->post_count - 1) : ?> <div class="carousel-item col-md-4"> <div class="card mb-3"> <?php $format = get_post_format( $post_id ); ?> <div class="card-body"> <p class="time"> <?php the_time( "Y-m-d" ); ?> </p> <p class="card-title text-primary font-weight-bold mb-2"> <?php the_title(); ?> </p> <p class="card-text"> <?php the_content(); ?> </p> </div> </div> </div> <?php endif; ?> <?php endwhile; endif; ?> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <a href="#" class="my-5 mx-auto btn-gradient-radius d-table">特集動画一覧<i class="fas fa-angle-right ml-4"></i></a> </div> </section>

試したこと

https://teratail.com/questions/38358
を読みましたが、わかりませんでした。

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

WordPress5.5.3

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

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

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

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

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

yuki84web

2021/03/23 12:04

動画URLを保存するだけのカスタムフィールドを追加して、そこから参照すといった試用の方が簡単な気がします
ohzora

2021/03/25 07:08

カスタムフィールドを利用してできました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問