Instagram風
動画一覧と動画をクリックすると投稿に飛ぶ
次のコードを記載しています。
| 動画キャラりー ① | タイトルクリックで投稿ページへ |
| 動画ギャラリー② | Instagram風・タイトルにリンク |
| 動画ギャラリー③ | Instagram風・動画にリンク |
| 動画ギャラリー④ | Instagram風・動画にリンク・ランダム |
| 動画ギャラリー⑤ | 記事へのリンクボタン付き |
| 動画ギャラリー⑥ | Instagram風・動画にリンク・ランダム（少し重い） |
対応動画のURL
通常サイズの動画にもショートサイズの動画にも対応
それぞれのコードについて詳しくは下に記載しています。
正方形にトリミングした動画は自動再生（ミュート）され、タイトルに投稿ページがリンクされています。
正方形にトリミングした動画は自動再生（ミュート）され、動画に投稿ページがリンクされています。
動画は自動再生（ミュート）され、投稿ページとリンクしたボタンが設置されている。
| 動画 | カード風に並べる |
| リンク | タイトルのクリックで投稿ページへ飛ぶ |
| 動画 | 動画の音声OFF・動画自動再生・ループ |
| 表示 | PC3列・タブレット2列・スマホ1列で表示 |
| 比率 | 9:16 |
| 設置 | ショートコード [video_gallery] |
functions.php へ
/*---------------------------------
動画キャラりー ①（タイトルクリックで投稿ページへ） YouTube動画ギャラリー（3形式対応）
----------------------------------*/ // 動画一覧をショートコードで呼び出す
function shortcode_video_gallery() {
$query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 6, // 表示数を変更できます
'post_status' => 'publish',
]);
$html = '<div class="video-gallery-grid">';
// 投稿内を検索し動画を取得する
while ($query->have_posts()) {
$query->the_post();
$content = get_the_content();
$id = '';
// YouTube URLの3形式すべてに対応
if (preg_match('/youtube\.com\/embed\/([a-zA-Z0-9_-]+)/', $content, $m) ||
preg_match('/youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/', $content, $m) ||
preg_match('/youtu\.be\/([a-zA-Z0-9_-]+)/', $content, $m)) {
$id = $m[1];
}
if (!$id) continue; // // 現在のループを終えて次へ
$url = get_permalink();
$title = esc_html(get_the_title());
$html .= '<a href="' . esc_url($url) . '" class="video-card">';
$html .= ' <div class="video-thumb">';
// 自動再生・ミュート・ループ再生・再生ボタン
$html .= ' <iframe src="https://www.youtube.com/embed/' . esc_attr($id) . '?autoplay=1&mute=1&loop=1&playlist=' . esc_attr($id) . '&controls=0"
title="' . $title . '"
allow="autoplay; encrypted-media;"
allowfullscreen loading="lazy"></iframe>';
$html .= ' <div class="video-title-overlay">' . $title . '</div>';
$html .= ' </div>';
$html .= '</a>';
}
wp_reset_postdata();
$html .= '</div>';
return $html;
}
add_shortcode('video_gallery', 'shortcode_video_gallery');スタイルシート（style.css）へ
/*---------------------------------
動画キャラりー ①（タイトルクリックで投稿ページへ）YouTube動画ギャラリー用スタイル
----------------------------------*/.video-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
padding: 10px;
justify-items: center;
}
.video-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
max-width: 360px;
display: block;
}
.video-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.video-thumb {
position: relative;
padding-top: 177.77%; /* 16:9 アスペクト比 */ overflow: hidden;
}
.video-thumb iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-title-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
padding: 10px;
box-sizing: border-box;
transition: background 0.3s ease;
}
.video-card:hover .video-title-overlay {
background: rgba(0, 0, 0, 0.75);
}| 動画 | カード風に並べる |
| リンク | タイトルのクリックで投稿ページへ飛ぶ |
| 動画 | 動画の音声OFF・動画自動再生・ループ |
| 動画 | 新着順に表示される |
| 表示 | PC3列・タブレット2列・スマホ1列で表示 |
| 比率 | 1:1 |
| 設置 | ショートコード |
functions.php へ
/*---------------------------------
動画ギャラリー②（正方形・タイトルに投稿をリンク）
----------------------------------*/function shortcode_video_list_square() {
$args = [
'post_type' => 'post',
'posts_per_page' => 6, // 表示数変更可
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
];
$query = new WP_Query($args);
$output = '<div class="video-square-grid">';
while ($query->have_posts()) {
$query->the_post();
global $post;
$content = $post->post_content;
// すべてのYouTube形式に対応（embed / watch?v= / youtu.be）
if (preg_match('/(?:youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/)([a-zA-Z0-9_-]+)/', $content, $matches)) {
$video_id = $matches[1];
$permalink = esc_url(get_permalink());
$title = esc_html(get_the_title());
$output .= '<div class="video-square-card">';
$output .= '<iframe
src="https://www.youtube.com/embed/' . $video_id . '?autoplay=1&mute=1&controls=0&loop=1&playlist=' . $video_id . '&modestbranding=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
loading="lazy"></iframe>';
// タイトルだけクリックできるように
$output .= '<p class="video-square-title"><a href="' . $permalink . '">' . $title . '</a></p>';
$output .= '</div>';
}
}
wp_reset_postdata();
$output .= '</div>';
return $output;
}
add_shortcode('video_list_square', 'shortcode_video_list_square');スタイルシート（style.css） へ
/*---------------------------------
動画ギャラリー②（正方形・タイトルに投稿をリンク）
----------------------------------*/.video-square-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
justify-items: center;
}
.video-square-card {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* 正方形に固定 */ overflow: hidden;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
background: #000;
}
/* iframeを正方形の中にフィット（中央切り取り） */.video-square-card iframe {
position: absolute;
top: 50%;
left: 50%;
width: 180%;
height: 180%;
transform: translate(-50%, -50%);
object-fit: cover;
pointer-events: none; /* 誤クリック防止 */}
/* タイトル */.video-square-title {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 14px;
color: #fff;
background: rgba(0,0,0,0.5);
padding: 4px 6px;
margin: 0;
}
.video-square-title a {
color: #fff ; /* 白文字 */ text-decoration: none; /* 下線なし */} | 動画 | カード風に並べる |
| リンク | 動画のクリックで投稿ページへ飛ぶ |
| 動画 | 動画の音声OFF・動画自動再生・ループ |
| 動画 | 新着順に表示される |
| 表示 | PC3列・タブレット2列・スマホ1列で表示 |
| 比率 | 1:1 |
| 設置 | ショートコード |
functions.php へ
/*---------------------------------
動画ギャラリー③（正方形・動画に投稿をリンク）
----------------------------------*/function shortcode_video_list_square() {
$args = [
'post_type' => 'post',
'posts_per_page' => 6, // 表示数変更可
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
];
$query = new WP_Query($args);
$output = '<div class="video-square-grid">';
while ($query->have_posts()) {
$query->the_post();
global $post;
$content = $post->post_content;
// すべてのYouTube形式に対応（embed / watch?v= / youtu.be）
if (preg_match('/(?:youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/)([a-zA-Z0-9_-]+)/', $content, $matches)) {
$video_id = $matches[1];
$permalink = esc_url(get_permalink());
$title = esc_html(get_the_title());
$output .= '<div class="video-square-card">';
$output .= '<iframe
src="https://www.youtube.com/embed/' . $video_id . '?autoplay=1&mute=1&controls=0&loop=1&playlist=' . $video_id . '&modestbranding=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
loading="lazy"></iframe>';
// iframe全体をクリックできるように透明リンクを上に重ねる
$output .= '<a href="' . $permalink . '" class="video-square-overlay" aria-label="' . $title . '"></a>';
// タイトル（表示のみ）
$output .= '<p class="video-square-title">' . $title . '</p>';
$output .= '</div>';
}
}
wp_reset_postdata();
$output .= '</div>';
return $output;
}
add_shortcode('video_list_square', 'shortcode_video_list_square');スタイルシート（style.css） へ
/*---------------------------------
動画ギャラリー③（正方形・動画に投稿をリンク）
----------------------------------*/.video-square-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
justify-items: center;
}
.video-square-card {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* 正方形に固定 */ overflow: hidden;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
background: #000;
}
/* iframeを正方形の中にフィット（中央切り取り） */.video-square-card iframe {
position: absolute;
top: 50%;
left: 50%;
width: 180%;
height: 180%;
transform: translate(-50%, -50%);
object-fit: cover;
pointer-events: none; /* 誤クリック防止：iframeのクリックをブロック */}
/* iframeの上に透明リンクを重ねてクリック遷移 */.video-square-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: transparent;
cursor: pointer;
text-indent: -9999px;
}
/* タイトル */.video-square-title {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 14px;
color: #fff;
background: rgba(0,0,0,0.5);
padding: 4px 6px;
margin: 0;
z-index: 3;
}| 動画 | カード風に並べる |
| リンク | 画面のクリックで投稿ページへ飛ぶ |
| 動画 | 動画の音声OFF・動画自動再生・ループ |
| 動画 | 24時間毎ランダムに表示される |
| 表示 | PC3列・タブレット2列・スマホ1列で表示 |
| 比率 | 1:1 |
| 設置 | ショートコード |
functions.php へ
/*---------------------------------
動画ギャラリー④（正方形・動画クリックで投稿へ・1日ランダム＋キャッシュ）
----------------------------------*/function shortcode_video_list_square_random_daily() {
// まずキャッシュがあるか確認（24時間以内ならそのまま返す）
$cached = get_transient('video_list_square_random_daily');
if ($cached) return $cached;
// 「日付＋サイトURL」をもとに毎日同じ乱数シードを作る
$seed = date('Ymd') . site_url();
srand(crc32($seed));
// 全投稿IDを取得してシャッフル
$all_posts = get_posts([
'post_type' => 'post',
'post_status' => 'publish',
'numberposts' => -1,
'fields' => 'ids',
]);
shuffle($all_posts);
// 表示数だけ抽出（6件）
$posts_to_show = array_slice($all_posts, 0, 6);
// WP_Query で投稿データを取得（順番保持）
$query = new WP_Query([
'post__in' => $posts_to_show,
'orderby' => 'post__in',
]);
// HTML出力開始
$output = '<div class="video-square-grid">';
while ($query->have_posts()) {
$query->the_post();
global $post;
$content = $post->post_content;
// すべてのYouTube形式に対応（embed / watch?v= / youtu.be）
if (preg_match('/(?:youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/)([a-zA-Z0-9_-]+)/', $content, $matches)) {
$video_id = $matches[1];
$permalink = esc_url(get_permalink());
$title = esc_html(get_the_title());
$output .= '<div class="video-square-card">';
$output .= '<iframe
src="https://www.youtube.com/embed/' . $video_id . '?autoplay=1&mute=1&controls=0&loop=1&playlist=' . $video_id . '&modestbranding=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
loading="lazy"></iframe>';
// iframe 全体をクリック可能にする透明リンク
$output .= '<a href="' . $permalink . '" class="video-square-overlay" aria-label="' . $title . '"></a>';
// タイトル
$output .= '<p class="video-square-title">' . $title . '</p>';
$output .= '</div>';
}
}
wp_reset_postdata();
$output .= '</div>';
// 生成したHTMLを24時間キャッシュに保存
set_transient('video_list_square_random_daily', $output, DAY_IN_SECONDS);
// 出力を返す
return $output;
}
add_shortcode('video_list_square_random_daily', 'shortcode_video_list_square_random_daily');動画ギャラリー⑤と同じコード
| 動画 | カード風に並べる |
| リンク | ボタンのクリックで投稿ページへ飛ぶ |
| 動画 | 動画の音声OFF・動画自動再生・ループ |
| 表示 | PC3列・タブレット2列・スマホ1列で表示 |
| 比率 | 9:16 |
| 設置 | ショートコード |
functions.php へ
/*---------------------------------
動画ギャラリー⑤ （記事へのリンクボタン付き）
----------------------------------*/function shortcode_video_list() {
$args = [
'post_type' => 'post',
'posts_per_page' => 6, // 表示数変更可
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
];
$query = new WP_Query($args);
$output = '<div class="video-list-grid">';
while ($query->have_posts()) {
$query->the_post();
$content = get_the_content();
$video_id = '';
// YouTubeの3形式に対応
if (preg_match('/youtube\.com\/embed\/([a-zA-Z0-9_-]+)/', $content, $m) ||
preg_match('/youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/', $content, $m) ||
preg_match('/youtu\.be\/([a-zA-Z0-9_-]+)/', $content, $m)) {
$video_id = $m[1];
}
if (!$video_id) continue;
$title = esc_html(get_the_title());
$url = esc_url(get_permalink());
// カード生成
$output .= '<div class="video-card">';
$output .= '<div class="video-frame-wrap">';
$output .= '<iframe
src="https://www.youtube.com/embed/' . esc_attr($video_id) . '?autoplay=1&mute=1&controls=0&loop=1&playlist=' . esc_attr($video_id) . '"
title="' . $title . '"
allow="autoplay; encrypted-media"
allowfullscreen
loading="lazy"></iframe>';
$output .= '</div>'; // .video-frame-wrap
$output .= '<p class="video-title">' . $title . '</p>';
$output .= '<a href="' . $url . '" class="video-link-btn">▶ 記事を見る</a>';
$output .= '</div>'; // .video-card
}
wp_reset_postdata();
$output .= '</div>';
return $output;
}
add_shortcode('video_list', 'shortcode_video_list');スタイルシート（style.css） へ
/*---------------------------------
動画ギャラリー⑤ （記事へのリンクボタン付き）
----------------------------------*/
/* グリッド全体 */.video-list-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
justify-items: center;
padding: 10px;
}
/* 各カード */.video-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
max-width: 360px;
}
.video-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* iframeを縦型に整形 */.video-frame-wrap {
position: relative;
width: 100%;
padding-top: 177.77%; /* 9:16縦長アスペクト比（ショート動画向け） */ overflow: hidden;
}
.video-frame-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 14px 14px 0 0;
object-fit: cover;
}
/* タイトル */.video-title {
font-size: 15px;
font-weight: 600;
color: #333;
margin: 12px 0 8px;
padding: 0 10px;
line-height: 1.4;
}
/* 記事リンクボタン */.video-link-btn {
display: inline-block;
margin-bottom: 14px;
padding: 8px 16px;
background: #ff4b4b;
color: #fff;
font-weight: bold;
text-decoration: none;
border-radius: 9999px;
transition: background 0.3s ease;
}
.video-link-btn:hover {
background: #e33b3b;
}
/* レスポンシブ対応 */@media (max-width: 768px) {
.video-list-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.video-list-grid {
grid-template-columns: 1fr;
}
}function shortcode_video_gallery() {
$query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 3, // 表示数を変更
'post_status' => 'publish',
]);WP_Query()で投稿の検索を繰り返した後は wp_reset_postdata() でリセットする
wp_reset_postdata();
$html .= '</div>';| コード | 説明 |
|---|---|
| function shortcode | ショートコードで呼び出す |
| $query = new WP_Query( | 取得する |
| posts_per_page | 1ページの表示数3 |
| ‘post_status’ => ‘publish’ | 公開 |
while ($query->have_posts()) {
$query->the_post();
// YouTube埋め込み動画を取得
if (preg_match('/youtube\.com\/embed\/([a-zA-Z0-9_-]+)/', get_the_content(), $m)) {
$id = $m[1];
$url = get_permalink();
$title = esc_html(get_the_title());| コード | 説明 |
|---|---|
| while ($query->have_posts()) | 投稿の数だけ繰り返す |
| $query->the_post() | 投稿を順番に処理する |
| preg_match | （検索したい文字・取得する） |
| url = get_permalink() | URLを取得 |
上記のコードは埋め込み動画 embed のみに対応
下は「youtube.com/embed/…」「youtube.com/watch?v=…」「youtu.be/.」を含む
// YouTubeの3形式に対応
if (preg_match('/youtube\.com\/embed\/([a-zA-Z0-9_-]+)/', $content, $m) ||
preg_match('/youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/', $content, $m) ||
preg_match('/youtu\.be\/([a-zA-Z0-9_-]+)/', $content, $m)) {
$video_id = $m[1];
}動画を表示する数
'post_type' => 'post',
'posts_per_page' => 3, // 表示数を変更260pxより小さくならない範囲で、画面幅に応じて横に並ぶ（画面1200pxで3～4列）
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-columns: repeat(3, 1fr);| 書き方 | 説明 |
|---|---|
repeat(3, 1fr) | 同じ幅を3列並べる |
repeat(auto-fit, …) | 自動的に列数を増減（幅が広いと3,4列等） |
| minmax(260px, 1fr) | 260px 最小サイズは260px |
| 1fr 残りを均等に分ける（1frは分割） |
@media (max-width: 768px) {
.video-gallery-grid {
grid-template-columns: 1fr 1fr;
} }
@media (max-width: 480px) {
.video-gallery-grid {
grid-template-columns: 1fr;
} }| コード | 説明 |
|---|---|
| @media (max-width: 768px) | 最大幅768px（タブレット）の場合 |
| grid-template-columns: 1fr 1fr; | コンテナは2列 |
| media (max-width: 480px) | 最大幅480px（スマホ）の場合 |
| grid-template-columns: 1fr | コンテナ内は1列 |
style="position:relative;padding-top:177.77%;overflow:hidden;"幅9に対し高さ16の比率はおおよそ177.77%
| コード | 説明 |
|---|---|
| position:relative | 子要素の基準の位置 |
padding-top: 177.77% | アスペクト比（9に対して16の比率） |
| overflow:hidden | はみ出した部分は表示しない |
// 自動再生・ミュート・ループ再生・再生ボタン
$html .= '<iframe src="https://www.youtube.com/embed/' . esc_attr($id) . '?autoplay=1&mute=1&loop=1&playlist=' . esc_attr($id) . '&controls=0"
title="' . $title . '"
allow="autoplay; encrypted-media"
allowfullscreen
loading="lazy"></iframe> | コード | 説明 |
|---|---|
| iframe src= | 埋め込み |
| autoplay=1 | 自動再生（1または0） |
| mute=1 | ミュート（1または0） |
| loop=1 | ループ（1または0） |
| loading=”lazy” | 遅延読み込み |
参考：https://wordpress.news-vouge.com/wordpressyoutube/
// タイトルだけリンク
$output .= '<p class="video-square-title"><a href="' . $permalink . '">' . $title . '</a></p>';YouTubeの動画（iframe部分）をクリックしたら、その投稿ページに遷移する（記事のページへ飛ぶ）方法です。
functions.php
// iframe全体をクリックできるように透明リンクを重ねる
$output .= '<a href="' . $permalink . '" class="video-square-overlay" aria-label="' . $title . '"></a>';スタイルシート（style.css）
/* iframeの上に透明リンクを重ねてクリックできるようにする */.video-square-overlay {
position: absolute;
top: 0;カード全体をクリックできるように <a> で囲む
$url = get_permalink();
// カード全体をクリックできるように <a> で囲む
$html .= '<a href="' . esc_url($url) . '" class="video-card" style="
background:#fff;投稿順に並べる
'orderby' => 'date',
'order' => 'DESC','orderby' => 'rand', // ランダムに表示ランダムに表示される動画の更新時間を指定します。
seed を使う方法←安定している // 1日キャッシュ（同じ並びを1日維持）
$cached = get_transient('video_list_square_random_daily');
if ($cached) return $cached;
// 1日キャッシュ
set_transient('video_list_square_random_daily', $output, DAY_IN_SECONDS);
return $output;set_transient('video_list_square_random_daily', $output, DAY_IN_SECONDS);24時間毎
// 1日キャッシュ（24時間毎動画が変わる）
set_transient('video_list_square_random_daily', $output, DAY_IN_SECONDS)// 1時間キャッシュ（1時間毎動画が変わる）
set_transient('video_list_square_random_daily', $output, 3600)| $output, DAY_IN_SECONDS | 1日（24時間） |
| $output, 3600 | 1時間 |
キャッシュの処理の順番
// ① すでにキャッシュがあるか確認
$cached = get_transient('video_list_square_random_daily');
if ($cached) return $cached;
// ② （キャッシュが無ければ）新しく生成
$output = '...ここでHTMLなどを作る...';
// ③ 作ったHTMLをキャッシュに保存
set_transient('video_list_square_random_daily', $output, DAY_IN_SECONDS);
// ④ 生成したHTMLを返す
return $output;seed を使う方法 // 「日付＋サイトURL」をもとに毎日同じ乱数シードを作る
$seed = date('Ymd') . site_url();
srand(crc32($seed));
// 投稿IDを全取得してシャッフル
$all_posts = get_posts([
'post_type' => 'post',
'post_status' => 'publish',
'numberposts' => -1,
'fields' => 'ids',
]);
shuffle($all_posts);1. date('Ymd') | 今日の日付を取得 |
2. srand(crc32($seed)) | 乱数をseed（開始点）を設定する |
5. shuffle() | 並べ替え、その日だけ同じ順番になる |
functions.php へ（スタイルシート（style.css）は動画ギャラリー④CSSと同じ）
/*---------------------------------
動画ギャラリー⑥（正方形・動画に投稿をリンク・ランダム・シードを使う）
----------------------------------*/function shortcode_video_list_square_random_daily() {
$args = [
'post_type' => 'post',
'posts_per_page' => 6, // 表示数を変更可能
'post_status' => 'publish',
];
// 「日付＋サイトURL」をもとに毎日同じ乱数シードを作る
$seed = date('Ymd') . site_url();
srand(crc32($seed));
// 投稿IDを全取得してシャッフル
$all_posts = get_posts([
'post_type' => 'post',
'post_status' => 'publish',
'numberposts' => -1,
'fields' => 'ids',
]);
shuffle($all_posts);
// 表示数だけ切り出し
$posts_to_show = array_slice($all_posts, 0, 6);
// WP_Query で改めて詳細を取得
$query = new WP_Query([
'post__in' => $posts_to_show,
'orderby' => 'post__in', // シャッフル順を保持
]);
$output = '<div class="video-square-grid">';
while ($query->have_posts()) {
$query->the_post();
global $post;
$content = $post->post_content;
// すべてのYouTube形式に対応
if (preg_match('/(?:youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/)([a-zA-Z0-9_-]+)/', $content, $matches)) {
$video_id = $matches[1];
$permalink = esc_url(get_permalink());
$title = esc_html(get_the_title());
$output .= '<div class="video-square-card">';
$output .= '<iframe
src="https://www.youtube.com/embed/' . $video_id . '?autoplay=1&mute=1&controls=0&loop=1&playlist=' . $video_id . '&modestbranding=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
loading="lazy"></iframe>';
// iframe全体をクリックできるように透明リンクを上に重ねる
$output .= '<a href="' . $permalink . '" class="video-square-overlay" aria-label="' . $title . '"></a>';
$output .= '<p class="video-square-title">' . $title . '</p>';
$output .= '</div>';
}
}
wp_reset_postdata();
$output .= '</div>';
return $output;
}
add_shortcode('video_list_square_random_daily', 'shortcode_video_list_square_random_daily');