1. ktcm-kobe.com(子テーマ)に追加するテンプレート
/home/ktcm/www/wp/wp-content/themes/lightning-child に 専用テンプレートを置く
ファイル名:page-iframe.php
<?php
/*
Template Name: 埋め込み用(ヘッダー・フッターなし)
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
/* ここに埋め込み用の最小限CSSを記述 */
html, body {
margin: 0;
padding: 0;
background: transparent;
}
main#embed-content {
margin: 0;
padding: 1rem; /* 必要に応じて調整 */
box-sizing: border-box;
}
/* ヘッダー・フッター・Post Views非表示 */
header.siteHeader,
footer.siteFooter,
.post-views {
display: none !important;
}
/* 本文周囲の余白を最小化、幅いっぱい表示 */
#main,
.container,
.entry-body {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
/* 画像・表の幅を調整 */
.entry-body img,
.entry-body table {
max-width: 100% !important;
height: auto !important;
}
/* 本文最初と最後の段落の余白を詰める */
.entry-body > p:first-child {
margin-top: 0 !important;
}
.entry-body > p:last-child {
margin-bottom: 0 !important;
}
/* iframe用にスクロールバーを出さない */
html, body {
overflow: hidden !important;
height: auto !important;
}
</style>
</head>
<body <?php body_class(‘embed-body’); ?>>
<main id=”embed-content”>
<?php
// 本文のみ出力
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_content();
endwhile;
endif;
?>
</main>
<script>
// display-posts のリンクを親ウィンドウで開く
document.addEventListener(‘DOMContentLoaded’, function() {
if (document.body.classList.contains(‘embed-body’)) {
document.querySelectorAll(‘.display-posts-listing a’).forEach(function(link) {
link.setAttribute(‘target’, ‘_top’); // 親ウィンドウで開く
});
}
});
// 親ページに高さを通知するスクリプト
(function() {
function postHeight() {
var height = document.body.scrollHeight;
window.parent.postMessage({iframeHeight: height, iframeSrc: window.location.href}, ‘*’);
}
window.addEventListener(‘load’, postHeight);
// ResizeObserverでコンテンツの変化を監視して自動調整
if (‘ResizeObserver’ in window) {
var ro = new ResizeObserver(postHeight);
ro.observe(document.body);
} else {
// 古いブラウザ用フォールバック
setInterval(postHeight, 500);
}
})();
</script>
</body>
</html>
2. 親ページ(埋め込み先)のHTMLサンプル
<!DOCTYPE html>
<html lang=”ja” dir=”ltr”>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8″>
<title>在学生・卒業生の声</title>
</head>
<body>
<h2>在学生・卒業生の声</h2>
<h3>先輩は語る 講演会</h3>
機械工学科では、毎年5月に卒業生を講師に招いて講演会を実施しています。過去開催された講演会の報告を掲載しています。<br />
<iframe id=”myEmbed1″ style=”border: 0; overflow: hidden;” src=”https://ktcm-kobe.com/voice-1/” width=”100%” scrolling=”no”></iframe>
<h3>総会記念講演会</h3>
機械工学科では、毎年3月に卒業式に合わせて卒業生で企業の経営層・マネジメント層で活躍されている方を講師に招いて講演会を実施しています。過去開催された講演会の報告を掲載しています。<br />
<iframe id=”myEmbed2″ style=”border: 0; overflow: hidden;” src=”https://ktcm-kobe.com/voice-2/” width=”100%” scrolling=”no”></iframe>
<h3>若手研究者は今 講演会</h3>
機械工学科では、毎年12月に機械工学科に所属している若手教員をを講師に招いて講演会を実施しています。過去開催された講演会の報告を掲載しています。<br />
<iframe id=”myEmbed3″ style=”border: 0; overflow: hidden;” src=”https://ktcm-kobe.com/voice-3/” width=”100%” scrolling=”no”></iframe>
<h3>機械工学先進研究 講演会</h3>
機械工学科では、毎年11月に機械工学科に所属している教授もしくは准教授を講師に招いて講演会を実施しています。過去開催された講演会の報告を掲載しています。<br />
<iframe id=”myEmbed4″ style=”border: 0; overflow: hidden;” src=”https://ktcm-kobe.com/voice-4/” width=”100%” scrolling=”no”></iframe>
<script>
window.addEventListener(‘message’, function(event) {
if (event.data && event.data.iframeHeight && event.data.iframeSrc) {
// どのiframeかをsrcで突き合わせる
var iframes = document.querySelectorAll(‘iframe’);
iframes.forEach(function(iframe) {
if (event.data.iframeSrc.indexOf(iframe.src) === 0) {
iframe.style.height = event.data.iframeHeight + ‘px’;
}
});
}
});
</script>
</body>
</html>
3.ショートコード[Display-posts]サンプル
- 先輩は語る2025(報告) (2025/05/14)
赤川 純一氏 (株)原子力エンジニアリング
「原子力産業界における機械工学科出身者の業務経験」
(2006年3月 神戸大学大学院工学研究科博士課程前期課程修了) - 先輩は語る2024(報告) (2024/05/08)
荒川 哲矢氏 JFEスチール (株)
「とある機械エンジニアが鉄鋼業界で歩いた足跡」
(1999年9月 神戸大学大学院工学研究科博士課程前期課程修了) - 先輩は語る2023(報告) (2023/05/10)
村松 瑛氏 日立GEニュークリア・エナジー(株)
「大学の授業内容と設計業務の関わり ~授業内容は仕事の役に立つか?~」
(2018年3月 神戸大学大学院工学研究科博士課程後期課程修了)
