WordPressでカスタム投稿を固定ページに表示してさらに別のカスタム投稿をモーダルで表示したい

Question

普段、コーディングはするのですがワードプレスをあまり触ったことがなく、今回受けた案件の中でワードプレスについての作業があったので質問させてください。

前提・実現したいこと

ワードプレスでカスタム投稿を設定し、1つのカスタム投稿を固定ページに表示し横並びにしてレスポンシブにしたい。もう1つカスタム投稿を作り、そのカスタム投稿をさきほどのカスタム投稿をクリックするとモーダルで表示されるようにしたいです。

発生している問題・エラーメッセージ

カスタム投稿はCPT UIを使って作成でき、そのなかにコードを挿入してページも確認済です。しかし、固定ページに表示することができません。1日使って調べてみましたがなかなか解決できていません。

また、カスタム投稿のページをモーダルで表示するときにモーダルでカスタム投稿を呼び出すというのがいまいちピンときません。

みなさんのご教授をよろしくお願いいたします。

該当のソースコード

ソースコード

試したこと

固定ページにコーディングを直接打ち込みページ表示済。
カスタム投稿はCPT UIで作成済、コーディングも済。

補足情報（FW/ツールのバージョンなど）

bootstrap4,jQuery,chromで行っております。

よろしくお願いいたします。

Comments

[退会済みユーザー]

watanabekenさんがどのようなことをしたいのか、何がわからず、何を試したのかが今の質問文から理解できません。
「しかし、固定ページに表示することができません。」とのことですが、テンプレートファイルに`get_posts`や`WP_Query`を書いても表示できないということでしょうか？
また、モーダルはどのjQueryプラグインを使用していて、どの点がわからないでいるのでしょうか？

Answer 1

最初から出力して非表示にしておき、モーダルとしてそれを表示するのでいいでしょうか？

<a herf="#" class="show-modal">モーダル出現</a>
<div id="modalwin" class="modalwin hide">
   <!-- モーダルでカスタム投稿を呼び出す  -->
   <?php
   $custom_post_id = '7' //出力したいカスタム投稿タイプのIDを指定
   echo get_post( $custom_post_id )->post_title;
   ?>
</div>

.modalwin {
  position: fixed;
  width: 600px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 #000;
  z-index: 1;
}

.modalwin dl {
  padding: 0px 10px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.modalwin h1 {
  background: #ededed;
  padding: 20px;
  border-radius: 5px 5px 0 0;
  font-size: 1.2em;
  margin-top: 0;
  text-align: center;
}

.modalwin-contents {
  padding: 5px;
}

.modalwin-contents img {
  margin: 0 0 1em 0;
  float: left;
  width: 30%;
  height: 30%;
}

.modalwin-contents p {
  margin: 0 0 1em 0;
  line-height: 1.8em;
}

#shade {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #999;
  opacity: 0.9;
  z-index: 1;
}

@media screen and (max-width: 600px) {
  .modalwin {
    width: 90%;
  }
}

$(function () {
  // モーダルウィンドウを開く
  function showModal(event) {
    event.preventDefault();

    var $shade = $('<div></div>');
    $shade
      .attr('id', 'shade')
      .on('click', hideModal);


    var $modalWin = $('#modalwin');
    var $window = $(window);
    var posX = ($window.width() - $modalWin.outerWidth()) / 2;
    var posY = ($window.height() - $modalWin.outerHeight()) / 2;

    $modalWin
      .before($shade)
      .css({left: posX, top: posY})
      .removeClass('hide')
      .addClass('show')
      .on('click', 'button', function () {
      hideModal();
    });
  }

  function hideModal() {
    $('#shade').remove();
    $('#modalwin')
      .removeClass('show')
      .addClass('hide');
  }

  $('.show-modal').on('click', showModal);

}());