HOME → 3 WordPress → 02 記事の作成 → 

ボタンクリックで表示内容を切り替える

WordPress Twenty Seventeen
記事の作成
ボタンクリックで表示内容を切り替える
 
WordPrerss で記事を投稿している際に、表示内容を「選択」によって切り替えたいケースがある。この場合、「jQuery」を使用すると【クリック動作】で記事の表示内容を切り替えることが出来る。
 
「昇順リスト」ボタンをクリックしたときの「投稿日<昇順>記事一覧」。
 
以下に、「jQuery」による表示内容の切り替え要領を記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. ボタンでの切り替えを実装した例
 
ショードコードで記事一覧を表示するページにボタンを設置し、投稿日での「昇順リスト」と「降順リスト」が選択出来る様にした。
 
「昇順リスト」ボタンをクリックしたときの「投稿日<昇順>記事一覧」。
「昇順リスト」ボタンをクリックしたときの「投稿日<昇順>記事一覧」。
 
「降順リスト」ボタンをクリックしたときの「投稿日<降順>記事一覧」。
「降順リスト」ボタンをクリックしたときの「投稿日<降順>記事一覧」。
 
記述した「html」。
<div> </div>
<div style="border: 1px solid #800000; padding: 5px 10px 3px 10px; background: #c5ff88;"><strong>1. 投稿日順 記事一覧</strong></div>
<div> </div>
<p><!-- List --></p>
<div class="et_pb_module"><button id="fuu" class="secList">昇順リスト</button></div>
<div class="et_pb_module"><button id="euu" class="secList">降順リスト</button></div>
<p><!-- Sections --></p>
<div class="fuu section">
<div class="et_pb_text_inner1">
<h2>投稿日・昇順・記事一覧</h2>
<div style="font-size: 10pt;">[list num="50" odr="asc"]</div>
</div>
</div>
<div class="euu section">
<div class="et_pb_text_inner2">
<h2>投稿日・降順・記事一覧</h2>
<div style="font-size: 10pt;">[list num="50" odr="dsc"]</div>
</div>
</div>
<div> </div>
 

 ボタンでの切り替えを実装するに当たり、下記記事を参考にさせて頂きました。

引用元:[jQuery] クリックでセクションの表示・非表示を切り替える
 
 
 
2. WordPressでの「jQuery」の記述要領
 
準備するもの。
①.テキストモードでボタンの「html」を記述する。
②.テーマエディターで「style.css」にCSSを追記する。
③.テーマエディターで「footer.php」にjQueryを追記する。
 
WordPressでの「 jQuery 」の書き方
 
一般的なjQueryでは「 $ 」と書くところを、WordPressでは全て「 jQuery 」と書く。
<script>
jQuery(function(){
  jQuery('.section').hide();
  
  jQuery('.secList').on('click',function(){
        // クリックした要素の ID と違うクラス名のセクションを非表示
    jQuery('.section').not(jQuery('.'+jQuery(this).attr('id'))).hide();
    // クリックした要素の ID と同じクラスのセクションを表示
    jQuery('.'+jQuery(this).attr('id')).show(1000);
    
    // toggle にすると、同じボタンを 2 回押すと非表示になる
    // jQuery('.'+jQuery(this).attr('id')).toggle();
  });
});
</script>
 
WordPressでの「 jQuery 」の読込み
 
テーマ「Twenty Seventeen」デフォルトで読み込まれている。
テーマ「Twenty Seventeen」デフォルトで読み込まれている
 
「 jQuery 」が読込まれているかどうかは、「ページのソースを表示」で確認する。
 
 
 
3. 表示内容の切り替え要領
 
表示内容を切り替えるには、
記事を hide() を使って非表示にして置き、
【クリック動作】で show() を使って表示、
または toggle() で表示(クリックするごとに表示・非表示を繰り返す)
する事で実現する。
 
このやり方には2つの方法がある。
その-1:リンクで切り替える方法
その-2:ボタンで切り替える方法
 
 
 
4. リンクで切り替える場合の問題点
 
リンクで切り替えるために、アンカーリンクを使うことになる。
 
ページ内リンクがずれる。
原因:ヘッダーを固定にしていると、ジャンプが行き過ぎてしまう。
理由:アンカーリンクの仕様で、ブラウザ上部を基点としてジャンプしてしまうため。
 
※:CSSの「padding-top: や margin-top:」で調整すると、リンク先が選択出来なくなる。
 
※:HTMLの「padding-top: や margin-top:」で調整すると、リンクが効かなくなる。
 
ボタンで切り替えれば、これらの問題は回避できる
 
 
 
5. Luxeritas での「 jQuery 」の実装要領
 
子テーマの編集で「スタイルシート」にCSSを追記する。
子テーマの編集で「スタイルシート」にCSSを追記する
 
子テーマの編集で「Javascript」に jQuery を追記する。
子テーマの編集で「Javascript」に jQuery を追記する
 
 
以上。
(2022.01.06)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください