web-dev-qa-db-ja.com

ループとACFを使ったモーダル

特定のカテゴリ（「アトラクション」）のすべての投稿をクエリするページを作成しようとしています。

私はポストをうまく得ることができました、私はただモーダルを働かせる必要があります。

私は自分のループの内側にボタンを作りました。このボタンには、ループがオンになっているすべての投稿のタイトルが付けられています。そのボタンをクリックするたびに、コードにリストされているACFのすべてのフィールドを表示するモーダルが開きます。

私はいくつか問題があります。どういうわけか私はジャバスクリプトを動作させることができません。今のところそれはすべてページテンプレートファイルの中にありますが、私はfunctions.phpなどを通してスクリプトをエンキューしようとしました。

私は、私はdocuments.getElementByIdの代わりにdocuments.getElementsByClassNameをやろうとしていると思います。私はidを使用したいのですが、ループがボタンを作成しているものなので、IDを一意にする方法を知りません。 idをループのカウンタにするなどして、スクリプト内で参照できる変数に格納してgetElementsById（$ someVariable）できるようにすることを考えています。

ご覧いただきありがとうございます。

<?php 


get_header();


$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
'category_name' => 'attractions',
'posts_per_page' => 10,
);


$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) :
    $arr_posts->the_post();

get_posts($args);

//vars below


?>
<div class=attractions-wrap>
<button class="openAttractions"><?php the_title(); ?></button>
</div>

<div class="attractionsModal">
<div class=modal-content>
    <span class="close">&times;</span>
    <h2><?php the_title(); ?></h2>

    <div id="attraction-descrption" class="description">
        <h3>Description</h2>
        <p><?php the_field('description_field'); ?></p>
    </div>

    <div id="attraction-opening-hours" class="opening-hours">
        <h3>Opening Hours</h2>
        <p><?php the_field('opening_hours_field'); ?></p>
    </div>

    <div id="attraction-practical-information" class="practical-information">
        <h3>Practical Information</h2>
        <p><?php the_field('practical_information_field'); ?></p>
    </div>

</div>
</div>

<?php
endwhile;
endif;
?>

<script type="text/javascript">
// Get the modal
var modal = document.getElementsByClassName('attractionsModal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openAttractions");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>
javascriptqueryadvanced-custom-fields
1
Hans V.

そうです、あなたはIDを使うべきです。

私はget_the_ID（）と一緒にカウンタを使うでしょう。

$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :
$index = 0;
while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

  echo $index . '_' . get_the_ID();

  endwhile;
endif;

これにより、ループ内の各項目に使用できる一意のIDが得られます。

WordPressには$ index変数が組み込まれています。これを次のように書き換えることができます。

$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

  echo $arr_posts->current_post . '_' . get_the_ID();

  endwhile;
endif;
1
admcfajn

問題を解決しました！もう一度助けてくれてありがとうadmcfajn。私はあなたが示唆したように正確な道をたどらなかった、しかしあなたの答えは間違いなく私を正しい方向に向けて私の問題を解決するために私を導いた。

以下は、この投稿につまずく人のための、whileループに入っているJSを含む、ページテンプレートの完成したコードです。

編集： 閉じるボタンのIDにも変数を設定するのを忘れていました。以下で、閉じるボタンも含めるようにコードを変更しました:)

<?php 


get_header();


$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'category_name' => 'attractions',
    'posts_per_page' => 10,
);


$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

    while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

get_posts($args);

echo $arr_posts->current_post . '_' . get_the_ID();


//vars below
$trigger_ID = 'trigger_' . $arr_posts->current_post . '_' . get_the_ID();
$modal_ID = 'modal_' . $arr_posts->current_post . '_' . get_the_ID();
$close_ID = 'close_' . $arr_posts->current_post . '_' . get_the_ID();


?>

<button class="trigger" id="<?php echo $trigger_ID ?>"><?php the_title(); ?></button>

<div class="modal" id="<?php echo $modal_ID ?>">
    <div class="modal-content">
        <span class="close-button" id="<?php echo $close_ID ?>">&times;</span>
        <h2><?php the_title(); ?></h2>

        <div id="attraction-descrption" class="description">
            <h3>Description</h2>
            <p><?php the_field('description_field'); ?></p>
        </div>

        <div id="attraction-opening-hours" class="opening-hours">
            <h3>Opening Hours</h2>
            <p><?php the_field('opening_hours_field'); ?></p>
        </div>

        <div id="attraction-practical-information" class="practical-information">
            <h3>Practical Information</h2>
            <p><?php the_field('practical_information_field'); ?></p>
        </div>

    </div>
</div>

<!-- 

JavaScript for button press below

-->
<script>

$(document).ready(function(){
var modal = document.querySelector("#<?php echo $modal_ID; ?>");
var trigger = document.querySelector("#<?php echo $trigger_ID; ?>");
var closeButton = document.querySelector("#<?php echo $close_ID ?>");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
});

</script>

<?php
    endwhile;
endif;
?>

この下には、JavaScriptによってオン/オフが切り替えられるときに、これらすべてが正しく機能するようにするスタイルシートもあります。

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modal.show-modal{
    display: block !important;
}
1
Hans V.