質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

WordPressでモーダル表示でのdata属性のリンク

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,600

score 29

アーカイブページに各記事のアイキャッチだけを表示
アイキャッチをクリックすると、その記事の内容がモーダルで表示される
というページがあるのですがhtmlではdata属性でアイキャッチとモーダルの中身をリンクさせていました。
それをWordPressで実装するにはどうしたら良いでしょうか。

現在プラグインはACFのギャラリーでアイキャッチとモーダル内の画像の受け渡しはできているのですがモーダルが表示できません。

当方WordPressでの制作が初めてで伝えるべき情報漏れ等あるかもしれませんがご教授の程お願いいたします。

<section id="grid_layout">
        <div class="grid_layout-1 grid_layout-inner">

            <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>

            <!-- ▽ ループ開始 ▽ -->
            <figure class="grid_item modalBtn" data-modalIndex="31">
                <?php the_post_thumbnail(); ?>
                <figcaption class="hover-mask">
                    <h1>
                        <?php the_title(); ?>
                    </h1>
                    <p>
                        <?php the_content(); ?>
                    </p>
                </figcaption>
            </figure>
            <div class="modal" data-modalIndex="31">
                <div class="modal_inner">
                    <div class="modal_text">
                        <h1>
                            <?php the_title(); ?>
                        </h1>
                        <p>
                            <?php the_content(); ?>
                        </p>
                    </div>
                    <a class="modalClose" type="button"><span></span><span></span></a>
                    <div class="modal_scroll">
                        <div class="modal_content">
                            <div>
                                <?php 
                                $images = get_field('gallery_modal_img');
                                $size = 'full';
                                if( $images ): 
                                ?>
                                    <?php foreach( $images as $image ): ?>
                                        <?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- △ ループ終了 △ -->

            <?php endwhile; ?>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
        </div>
    </section>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/02/03 01:08

    WordPressのデフォルト機能にモーダルは無いのでは。

    キャンセル

  • goldenb

    2019/02/03 01:35 編集

    説明が不足していました。すみません。
    1ページ内に複数のモーダルがあり、モーダルはjqueryで実装しているのですがアイキャッチとモーダル内の情報の紐付けをdata-modalIndex="31"で行っていました。複数のモーダルも静的な時は31の数値を変えればよかったのですがWordPressにするとこの部分がどうすれば良いのかわからず質問させていただきました。

    WordPressのデフォルトには無い機能ですがACFというプラグインで画像をギャラリー投稿して
    <div class="modal_content">
    <div>
    <?php
    $images = get_field('gallery_modal_img');
    $size = 'full';
    if( $images ):
    ?>
    <?php foreach( $images as $image ): ?>
    <?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
    <?php endforeach; ?>
    <?php endif; ?>
    </div>
    </div>
    のモーダル内画像は取得できています。
    あとはアイキャッチとモーダルをリンクさせたいのですがdata属性をどうやってユニークにして受け渡せば良いのかわかりません。
    ご教授お願いします。

    キャンセル

回答 1

checkベストアンサー

+1

どのモーダルライブラリを使用しているかが提示されていないのでユニーク値にするアイデアだけ。

<?php 
$modalIndex = 0;
while (have_posts()) : the_post(); $modalIndex++; ?>
<!-- 略 -->
<div class="modal" data-modalIndex="<?php echo $modalIndex; ?>">
<!-- 略 -->

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/03 01:57

    ご教授いただいたようにユニークな値を持ってきたらうまく表示できました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る