タイトル長い!
リンク先で、JavaScriptを使って、次のような動作をさせたくて、作ってみました。
『ページB』ボタンをクリックすると開くコンテンツがあるページで、普通にリンクで開くと、コンテンツは閉じた状態。
『ページA』ページBに遷移したときに、隠れているコンテンツを自動で開いて、開いた部分に飛ぶ。
『ページA』のリンクボタン
WordPressのループ内なら(記事一覧ページのカードの中など)
<a href="<?php echo esc_url(get_the_permalink()); ?>#comment-desu">コメント</a>
<?php echo esc_url(get_the_permalink()); ?>
現在のURL(ループでのIDのURL)をget_the_permalinkで取得して、esc_urlでサニタイズ(WordPressの関数)
※ループの中で使っているので、注意してください。
通常なら、こんな感じ
<a href="./index.html#comment-desu">コメント</a>
『ページB』のJavaScript
<script>
var urlhash = location.hash ;
if (urlhash == '#comment-desu') {
var commentreplybtn = document.getElementById('comment-reply-btn');
commentreplybtn.style.display = 'none';
var respond = document.getElementById('respond');
respond.style.display = 'block';
}
</script>
location.hash
URL のうち、'#'
とそれに続くフラグメント識別子を取得
ちなみに、URL全体を取得するのは、location.href
ただし、プロトコル「http://」「https://」は含まれません。
プロトコル「http://」「https://」を含んだURL全体を取得するなら、location.origin
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>