WordPressでbuttonタグを使って、リンク先にPOSTメソッドを追加

リロードすると、「フォームを再送信しますか？」と聞かれるので、あまり実用性はありません。

下記を使った方が、動作が早いし、簡単だし・・・リロードしても警告でないし・・・

リンクボタンをクリックすると、通常閉じているコンテンツが自動で開いて開いたところに遷移

タイトル長い！ リンク先で、JavaScriptを使って、次のような動作をさせたくて、作ってみました。 『ページB』ボタンをクリックすると開くコンテンツがあるページで、普通にリンクで開くと、コンテンツは閉じた状態。 『ページA』ページBに遷...

aw1.jp

2020.01.30

リンク先で、JavaScriptとPHPを使って、次のような動作をさせたくて、作ってみました。

『ページB』ボタンをクリックすると開くコンテンツがあるページで、普通にリンクで開くと、コンテンツは閉じた状態。

『ページA』ページBに遷移したときに、隠れているコンテンツを自動で開いて、開いた部分に飛ぶ。

『ページA』のリンクボタン

<form method="post" action="<?php echo esc_url(get_the_permalink()); ?>#comment-desu">
 <input name="comment-open" type="hidden" value="comment-open">
 <button id="comment-reply-btn-<?php the_ID(); ?>" class="comment-btn key-btn" type=“submit”>
 コメントを書き込む
 </button>
</form>

<?php echo esc_url(get_the_permalink()); ?>
現在のURL（ループでのIDのURL）をget_the_permalinkで取得して、esc_urlでサニタイズ（WordPressの関数）
※ループの中で使っているので、注意してください。

<?php the_ID(); ?>
現在のIDを出力するWordPressの関数

『ページB』のJavaScript

  <script>
  var postedData = '<?php echo($_POST['comment-open']); ?>';
  if (postedData == 'comment-open') {

  var commentreplybtn = document.getElementById('comment-reply-btn');
  commentreplybtn.style.display = 'none';
  var respond = document.getElementById('respond');
  respond.style.display = 'block';

  }
  </script>

<?php echo($_POST['comment-open']); ?>
POSTメソッドをPHPで読み込む

id="comment-reply-btn"
としたタグに、style="display:none;"と加えるJavaScriptが

var commentreplybtn = document.getElementById('comment-reply-btn');
commentreplybtn.style.display = 'none';

id="respond"
としたタグに、style="display:block;"と加えるJavaScriptが

var respond = document.getElementById('respond');
respond.style.display = 'block';

『ページB』の通常閉じている部分

<div id="comment-desu">
通常は閉じているコンテンツ
</div>