サイト改善

【サイトスピード改善】youtube専用のUIでページを作成しました。【part.3(最終回)】

 

みなさんこんにちは、すぎです！

前回の記事の際、サブ動画をランダムに出す出力を設定しました。

左側のメイン動画については、URLのpost_idの値で出力していますが、

https://kotobukilab.com/media/video-detail/?post_id=400

下記のように指定していない場合は何も表示されない状態になってしまうため、最新の投稿のyoutubeを表示するように設定します。

https://kotobukilab.com/media/video-detail/


以下のコードが追加されました。

 // 投稿IDが0の場合、最新の 'youtube' カスタム投稿を取得
    if ($current_post_id == 0) {
        $args = array(
            'post_type' => 'youtube',
            'posts_per_page' => 1,
            'orderby' => 'date',
            'order' => 'DESC',
        );
        $latest_posts = get_posts($args);
        if (!empty($latest_posts)) {
            $current_post_id = $latest_posts[0]->ID;
        } else {
            echo '<p>表示する動画がありません。</p>';
            return;
        }
    }

はい、これで

https://kotobukilab.com/media/video-detail/

でアクセスした場合もleft-wrapper（メイン動画）に最新の投稿を表示することができるようになりました。

あと２つやることがあります。

①TOPページの「もっとみる」ボタンに上記のリンクを設定
②TOPページの動画をクリックしたら、post_idの値を取得したページへリンクさせる実装

です。

①TOPページの「もっとみる」ボタンに上記のリンクを設定
については、簡単です。

リンクを下記のように設定します。

<a class="button_link_more" href="<?php bloginfo('url'); ?>/video-detail/">もっとみる</a>

②TOPページの動画をクリックしたら、post_idの値を取得したページへリンクさせる実装

については少し工夫が必要です。

下記のようにChatGPTに投げます。

いい感じの回答をもらいました。（リストの箇所を抜粋しておきます。）

<ul class="youtube_wrapper">
        <?php
        $args = array(
            'post_type' => 'youtube',
            'paged' => $paged,
            'posts_per_page' => 6,
            'tax_query' => array(
                array(
                    'taxonomy' => 'category-youtube',
                    'field' => 'slug',
                    'terms' => 'post'
                )
            )
        );
        $wp_query = new WP_Query($args);
        if ($wp_query->have_posts()) :
            // 'video-detail' ページのURLを取得
            $video_detail_page = get_page_by_path('video-detail');
            if ($video_detail_page) {
                $video_detail_page_url = get_permalink($video_detail_page->ID);
            } else {
                $video_detail_page_url = home_url('/video-detail/');
            }
            while ($wp_query->have_posts()) : $wp_query->the_post();
        ?>
                <li>
                    <a href="<?php echo esc_url(add_query_arg('post_id', get_the_ID(), $video_detail_page_url)); ?>">
                        <img src="<?php the_field('thumbnail'); ?>" alt="<?php the_title(); ?>のアイキャッチ画像">
                        <h2><?php the_title(); ?></h2>
                        <div class="circle"></div>
                    </a>
                </li>
        <?php
            endwhile;
            wp_reset_postdata();
        else :
        ?>
            <li>投稿はありません</li>
        <?php endif; ?>
    </ul>

 

これで、iframeを使わずにYouTubeの一覧を表示させつつ、
YouTube風のUIへページリンクできるようになりました。

結果として、サイトの表示スピードが上がり、かつ回遊率を上げてPV数をあげれるようになりました。

懸念としては、やはりサブ動画がランダムで表示されているので、ここに最新動画も表示できるような、おすすめ動画としての一覧がでるように改修を、追ってしていこうと思います。

今回の回は以上です。

ここまでお読みいただきありがとうございました！

RELATED POST