広告

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

リンク先でコントロールJavaScript
この記事は約4分で読めます。

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

フォームの再送信

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

リンク先で、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>

この記事を書いた人

企業向けWordPressテーマ作成、コーディングなどをしています。
2019年イベント専用サクサク動くWordPressテーマ(カスタム投稿が10、カスタムフィールドは約20,000)を作成しました。

よろず屋ありみちをフォローする
JavaScript PHP WordPress
広告
よろず屋ありみちをフォローする
よろず屋ありみち