WordPress フロントページまたはカテゴリページにサムネイルの代わりにYouTubeのビデオを表示する

Last Updated:2023年08月20日| | 2のコメント
WordPress フロントページまたはカテゴリページにサムネイルの代わりにYouTubeのビデオを表示する4

WordPress フロントページまたはカテゴリページにサムネイルの代わりにYouTube動画を表示する方法

動画を中心に飾るサイトのための WordPress テーマが必要になりました。 だから検索で有料のテーマをいくつか見つけたすべての第好きに必ずかかりんでした。 だから無料のテーマを活用する方法で WordPress フロントページやカテゴリページの要約文(Excerpt)に表示されるサムネイル(特性画像)の代わりにYouTubeの動画を表示すると、どうだろうか構想しました。

だから上記のように修正しました。 方法は、概念さえ分かれば、非常に簡単です。 いくつかの方法でこの機能を実装することができるが、私は、カスタムフィールド(Custom Field:カスタムフィールド)を使用して、個々の文にYouTubeのリンクを追加するカスタムフィールドを作成しました。 その後、文を作成するときに動画のURLを追加して渡すと、フロントページやカテゴリページに表示する方法です。

まず「Custom Post Type UI「というプラグインをインストールしました。次に、このプラグインを使用して「YouTube」というカスタムフィールドを作成しました。このフィールドに追加したURLのビデオがサマリーのサムネイルの代わりに表示されます。

WordPress フロントページまたはカテゴリページにサムネイルの代わりにYouTubeのビデオを表示する5

図のように、カスタムフィールド(カスタムフィールド)を作成します。 これにより、書き込み画面には、次のように作成したフィールドが表示されます。

WordPress フロントページまたはカテゴリページにサムネイルの代わりにYouTubeのビデオを表示する6

YouTube動画のURLまたはVimeo動画のURL(例:https://vimeo.com/75791532、 参照)を上記の「YouTube」フィールドに入力します。

最後に、個々の記事から渡されたカスタムフィールド値をサマリ(Excerpt)に表示する必要があります。 まず、上記の「YouTube」カスタムフィールド値を受け取り、動画として表示するコードは次のとおりです。

300)); echo $embed_code; } ?>

今index.php、category.php、content.php(テーマに応じて、ファイル名は異なる場合があります)などでまとめ記事のコードである 」 」を検索します。 その後、付近にサムネイル(特性イメージ)関連のコードがあるでしょう(例えば、 」 」)。 その後、上記のCustom Field値を動画で表示するコードとサムネイルコードを利用して条件を作成するようにします。 つまり、カスタムフィールドにURL値があれば、動画を表示し、もしない場合の特性イメージ(サムネイル)がいるかどうかをチェックします。 これにより、ユーザー定義のフィールドに値が優先的に要約文に表示されます(図1参照)。

※この文は2015年度に作成されました。 Custom Post Type UIプラグインの代わりにAdvanced Custom Fieldプラグインをインストールして、同様の方法で進めてください。

例:

<?php 
if( get_field('youtubeurl') ) {
    // If there's a YouTube URL, display the embed code
    $embed_code = wp_oembed_get( get_field('youtubeurl'), array('width' => 300) );
    echo $embed_code;
} else {
    // If there's no YouTube URL, display the post's thumbnail
    if( has_post_thumbnail() ) {
        the_post_thumbnail(); // You can also specify the size, for example: the_post_thumbnail('medium');
    }
}
?>

画像が欠落しており、画像を再アップロードしました。 参考までに Newspaperなどのテーマを使用すると、プロパティ画像にYouTubeの動画を割り当てることができます。

参照


2のコメント

コメント

  1. 先生!これを学びたいのですが、うまくいきません。画面が大きく変わったようです。私のコードはどこに書くのですか? ㅠㅠㅠㅠ別にYouTubeの運営はできませんか?

    応答
    • この記事で紹介されている方法は WordPressを少し知る必要がアプリケーションが可能です。より簡単な方法があるかどうかをチェックし、方法がある場合は共有するようにしてみましょう。😄

      参考までに WordPress Naver カフェで WordPress ユーザーと情報を共有できます。

      https://cafe.naver.com/wphomepage

      応答
割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy