Skip to content

Instantly share code, notes, and snippets.

@lunaluna
Last active February 5, 2021 03:33
Show Gist options
  • Save lunaluna/4169887da882192147f11bf9bb9a1331 to your computer and use it in GitHub Desktop.
Save lunaluna/4169887da882192147f11bf9bb9a1331 to your computer and use it in GitHub Desktop.
【WordPress】ダッシュボードウィジェットに動画を埋め込んだウィジェットを追加する
function example_dashboard_video_widget_function() {
ob_start();
?>
<div class="example-dashboard-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/◯◯◯◯◯◯◯" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>もっと詳しい操作方法は<a href="" target="blank" rel="noopener noreferrer">こちらのリンク先の解説</a>をご覧ください。</p>
<style>
.example-dashboard-video {
position: relative; // 外枠に設定
width: 100%; // 外枠の幅はウィジェットの内幅いっぱい
height: 0; // 外枠は高さ0に設定
padding-top: 56.25%; // padding で 16:9 の高さを用意
}
.example-dashboard-video>iframe {
position: absolute; // 外枠を基準にする
top: 0; // 上を合わせる
right: 0; // 右を合わせる
width: 100% !important; // 幅いっぱいに表示
height: 100% !important; // 高さいっぱいに表示
}
</style>
<?php
echo ob_get_clean();
}
function example_add_dashboard_video_widgets() {
global $wp_meta_boxes;
wp_add_dashboard_widget( 'example_dashboard_video_widget', 'エディター操作の解説動画', 'example_dashboard_video_widget_function' );
}
add_action( 'wp_dashboard_setup', 'example_add_dashboard_video_widgets' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment