たか継続しようと思っても1日目にすでに挫折しそうになる、三日坊主にもなれない「にじいろのたか」です。
さて。
第2回は前回の記事でまとめた仕様をもとに、今回は実際のコードを作っていきます。
流れとしては以下のようなステップです：
- フッターにフックしてモーダルの基本コードを作成
- JavaScriptと簡易的なCSSの作成
- 実装のテスト（動作確認）
では進めていきましょう。
目次
モーダルの表示条件
まず、実装を始める前にモーダルが表示される条件を再確認しておきます。
- 固定ページ
/introにアクセスしたとき - URLに
?intro=trueのパラメータが付いているとき .js-modal-introクラス付きのボタンがクリックされたとき（JavaScript制御）
この3つの条件に沿って、モーダルが表示されるように構築していきます。
ファイル構成
今回は以下のようなファイル構成を想定しています。
一般的な WordPress テーマと同じようなディレクトリ構成になっていますが、必要に応じてご自身のテーマに合わせて調整してください。
- theme-root
- assets
- css
- intro-modal.css
- js
- intro-modal.js
- css
- template-parts
- modal
- intro.php
- modal
- functions.php
- assets
functions.php に追加するコード
ここでは、モーダルのベースHTMLを wp_footer にフックして出力し、
あわせて CSS と JS を読み込む処理を functions.php に記述します。
// モーダルCSS・JSを読み込み
add_action('wp_enqueue_scripts', function () {
$theme_uri = get_template_directory_uri();
wp_enqueue_style('intro-modal-style', $theme_uri . '/assets/css/intro-modal.css');
wp_enqueue_script('intro-modal-script', $theme_uri . '/assets/js/intro-modal.js', [], null, true);
});
// モーダルのHTMLをfooterに挿入
add_action('wp_footer', function () {
$is_intro = is_page('intro') || (isset($_GET['intro']) && $_GET['intro'] === 'true');
$class = 'modal modal--intro js-modal-intro' . ($is_intro ? ' is-visible' : '');
echo '<div id="intro-modal" class="' . esc_attr($class) . '">';
get_template_part('template-parts/modal/intro');
echo '</div>';
});
intro-modal.css（簡易スタイル）
モーダルの表示・非表示、および背景の演出に必要な最低限のスタイルを記述します。
.modal {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(255, 255, 255, 0.95) url('/path/to/clouds.svg') center / cover no-repeat;
}
.modal.is-visible {
display: flex;
align-items: center;
justify-content: center;
}
body.modal-open {
overflow: hidden;
}
.modal--intro {
/* 必要に応じて個別スタイルを追加 */
}
intro-modal.js（開閉処理）
function openIntroModal() {
const modal = document.querySelector('.js-modal-intro');
if (!modal || modal.classList.contains('is-visible')) return;
modal.classList.add('is-visible');
document.body.classList.add('modal-open');
}
document.addEventListener('DOMContentLoaded', () => {
const modal = document.querySelector('.js-modal-intro');
if (!modal) return;
// URLに ?intro=true があれば表示
const params = new URLSearchParams(window.location.search);
if (params.get('intro') === 'true') {
openIntroModal();
}
// すでに is-visible がついていたら body にもクラス追加
if (modal.classList.contains('is-visible')) {
document.body.classList.add('modal-open');
}
// ボタン経由で開く処理
document.querySelectorAll('[data-open-intro-modal]').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
openIntroModal();
});
});
});
モーダルを開くためのボタン
<a href="#" data-open-intro-modal>にじいろについて</a>任意の場所にこのボタンを設置すれば、どのページからでもモーダルを開けるようになります。
今回のまとめと予告
モーダルをすべてのページに出力しておくことで、ボタンからの呼び出しやURLパラメータでも展開できるようにしました
表示状態は .is-visible クラスで制御、裏のスクロールは body.modal-open でブロック
中身のHTMLはテンプレートに分離し手使いまわししやすいようにしています。
次回は、モーダルの中身を作っていきます！
ロゴや自己紹介文、SNSリンク、QRコードなどを盛り込んで、名刺のようにブログを紹介できるページに仕上げていきます。
コメント