wordpress投稿の投稿タイプで作成したページ
本文でモーダルウィンドウを実装したい
モーダルの内容は
カスタムフィールド
フィールド名：modal
に格納されたhtml
モーダル用のhtmlには
アンカーとして
id：rule01～rule011
投稿タイプ本文内のテキストリンクから
各アンカーに移動できるようにしたい
To implement the modal window in your WordPress post types using content stored in the custom field “modal” and allow text links to anchor to specific points within the modal, follow these steps:
1. Create the Modal Structure:
First, create the HTML structure for the modal window. Add this structure to the single post template where the custom post type content is displayed (e.g., single-{post_type}.php).
single.phpに下記コード追加
<?php
// Fetch the modal content from the custom field
$modal_content = get_post_meta(get_the_ID(), 'modal', true);
if ($modal_content):
?>
<div id="customModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<?php echo $modal_content; // Output the modal content ?>
</div>
</div>
<?php endif; ?>2. Add Text Links in the Post Content:
In your post content, add the text links that will trigger the modal and navigate to specific anchor points within it.
Example of how you can add text links to the post content:
テキストリンクの例
<a href="#rule01" class="open-modal">Go to Rule 01</a>
<a href="#rule02" class="open-modal">Go to Rule 02</a>
<!-- Repeat for other anchors -->3. JavaScript for Modal Behavior:
To ensure the modal opens when a link is clicked and navigates to the corresponding anchor inside the modal, add the following JavaScript to your theme’s footer.php or enqueue it properly via the functions.php:
single.phpで
カスタムフィールドフィールド名：modal がある場合のみ呼び出すことにしました。
（if ($modal_content): 内）
document.addEventListener('DOMContentLoaded', function() {
// Get the modal
var modal = document.getElementById('customModal');
// Get the close button
var span = document.querySelector('.close');
// Open the modal when a link is clicked
document.querySelectorAll('.open-modal').forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
var anchor = this.getAttribute('href'); // Get anchor from link
// Open the modal
modal.style.display = 'block';
// Scroll to the specific anchor inside the modal
var target = document.querySelector(anchor);
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
// Close the modal when the user clicks on <span> (x)
span.onclick = function() {
modal.style.display = 'none';
}
// Close the modal when the user clicks anywhere outside of it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
});
4. CSS for Modal Styling:
Add the required CSS to style the modal window. Here’s an example:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-height: 80%;
overflow-y: auto;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
コメントを残す