Wordpress

ボタンをクリックすると目次をたたんだり開いたりできる方法【WordPress】【jQuery】

  1. HOME >
  2. Wordpress >

ボタンをクリックすると目次をたたんだり開いたりできる方法【WordPress】【jQuery】

ボタンをクリックすると目次をたたんだり開いたりできる方法【WordPress】【jQuery】

ボタンクリックで項目を折りたためる

  • 縦に長くなる目次を表示・非表示と切り替えられるようにしたい。
  • スマホで見やすいように、縦長になった塊を折りたためるアコーディオンにしたい。
  • JavaScriptの記述をまずやってみたい。

ココがポイント

結論:

  1. CSSで表示もしくは非表示にする新しいクラスを作成しておく
  2. jQueryの「on click」イベントで目的の場所がクリックされたら、処理が行われる関数を定義
  3. 関数の中に先ほどつくったクラスを追加する処理を書く
  4. 関数の中にクリックされる回数表示されるテキストを切り替える処理も書く

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、Webページを作成していると、箇条書きが縦長になり全体的に見にくくなっているそのように感じたことはございませんか?

私も、目次を追加しましたが、画面で見てみると、縦に長い目次になり、それだけでサイドバーを埋め尽くしている状態になっていました。

そこで、jQueryを利用していろいろ試行錯誤した中で収納できるメニューWordPressでも実装することができたので、今回ご紹介させていただきます。

この構文はjQuery初心者でもわかりやすいものとなっておりますので、jQueryを書く最初の一歩としてこの記事を活用していただければと思います。

 

1.画面のスクロールに合わせて移動する目次を作成

 

2.WordPressでjQueryを追加できるプラグイン

 

3.ボタンをクリックすると非表示から表示に切り替わるJavaScript

WordPressでjQueryを使用できようになる

jQueryを追加する

「ある特定のブロックをクリックすると、その下にある要素をたたんだり、開いたりできる」
これから紹介するJavaScriptは、このアクションができるものになります。

まず最初に、「Webページを開いたら非表示の状態→クリックすると表示する」というコードをご紹介。
次に「Webページを開いたら表示の状態→クリックすると非表示になる」というコードをご紹介します。

3.Step1 idとclassの値を確認

①「ボタンとなるブロックのid」

②「ボタンのテキストのclass」

③「ボタンの下にあるリストのclass」

下のリンクを参考にして、
「ボタンとなるブロックのid」②「ボタンのテキストのclass」③「ボタンの下にあるリストのclass」を確認してください。

ココに注意

HTMLのソースコードでclassやidの中に半角スペースが場合、CSSセレクタの書き方:

HTMLコードで半角スペース」でそれぞれの値が区切られている
これはそれぞれのidやclassがくっついていることを表しています。

CSSに記述するセレクタには、最初のclassだけを指定すればOK。

CSSのセレクタにclassをくっつけて指定するときは「半角スペース」で区切らず「.(ドット)」でつなげます。

 

3.Step2 CSSを追加

/* toggleClass用 */
#id_1 .class_2{
	cursor: pointer;
}
#id_1 .class_3 {
	display: none;
}
#id_1 .class_3.open {
	display: block;
}

上のCSSコードをコピーして、新しいCSSを追加。

2行目5行目8行目のセレクタ「3.Step1 idとclassの値を確認」で確認した値に。

id_1 「ボタンとなるブロックのid」
class_2 ②「ボタンのテキストのclass」
class_3 ③「ボタンの下にあるリストのclass」

 

3行目:cursor: pointer;

ボタンにマウスポインタを置いたときに変化するアイコンを設定できる

6行目:display: none;

ブロックを非表示にする。

8行目:#id_1 .class_3.open { ←ここがポイント

セレクタの末尾(.open)に新しいクラスが追加される{}で囲んだスタイルが適用される

9行目:display: block;

ブロックを表示する命令「.open」が追加されるとブロックを表示することができます。

 

3.Step3 JavaScriptを追加

jQuery(document).ready(function( $ ){
  /* カウンターリセット */
  var c = 0;
  $('#id_1 .class_2').on('click', function(){
    /* 目次表示非表示切り替え */
    $(this).next().toggleClass('open');
    /* テキスト切り替え */
    c = c + 1;
    if(c % 2 == 1){
      $(this).text('- この記事の目次');
    } else {
      $(this).text('+ この記事の目次');
    };
  });
});

「2.WordPressでjQueryを追加できるプラグイン」でインストールした「Custom CSS & JS」から新規のJavaScriptを作成して上のコードをコピペ

4行目の「id_1」=「「ボタンとなるブロックのid」」、「class_2」=「②「ボタンのテキストのclass」」に置き換えるだけ

参考

JavaScriptのそれぞれのコードの意味

1行目:jQuery(document).ready(function( $ ){

ドキュメント(WebページのHTML)を読み込み終わったら、「function」以下の命令を実行する。
これはjQueryを動かすコードなので触らない。

3行目:var c = 0;

Webページのウィンドウを開いたときにjQueryで囲まれた関数が実行されます。
その最初の行で変数cに0を代入してカウンターとして利用できるようにします。

4行目:$('#id_1 .class_2').on('click', function(){

Web上の<id="id_1">内の<class="class_2">で指定してあるブロックをクリックしたときに次の関数を実行。

6行目:$(this).next().toggleClass('open');

クリックしたブロックから見て次のブロックに当たるタブにclass="open"を追加する。

7-13行目:c = c + 1; if(c % 2 == 1){ $(this).text('- この記事の目次'); } else { $(this).text('+ この記事の目次'); };

クリックするたびに、クリックしたブロックが「text」の丸括弧()内のテキストに切り替わる。

以上で、目次を非表示の状態からクリックすると表示されるJavaScriptが適用できました。

 

4.ボタンをクリックすると表示から非表示に切り替わるJavaScript

「3.Step2 CSSを追加」6行目と9行目の値を逆(none ←入替→ block)にすればOKです。
classの名前(open)や表示されるテキストを、お好みでかえてください。

 

5.Webフォントをタイトルに追加する方法

追加情報になります。前述の方法では、装飾文字であるWebフォントを追加できなかったため以下のコード全て置き換えました

アイコンが切り替わる

JavaScriptを全て以下に変更。

jQuery(document).ready(function( $ ){
  $('#id_1 .class_2').addClass('add');
  $('#id_1 .class_2').on('click', function(){
    $(this).next().toggleClass('open');
    $(this).toggleClass('add');
    $(this).toggleClass('change');
  });
});

CSSを全て以下に変更。

.add::before{
  font-family: 'FontAwesome';
  content: 'Unicode';
}
.change::before{
  font-family: 'FontAwesome';
  content: 'Unicode';
}
#id_1 .class_2{
  cursor: pointer;
}
#id_1 .class_3 {
  display: none;
}
#id_1 .class_3.open {
  display: block;
  1. 「id_1」、「class_2」、「class_3」は「3.Step1 idとclassの値を確認」から該当する値に変更。
  2. 「content: 'Unicode';」の「Unicode」部分に、「FontAwesome」からお好みのアイコンのコードをいれる。

もっと詳しく

 

6.どの要素にもWebフォントを追加できる方法

空の要素を追加することで、擬似要素を適用できない要素にもWebフォントを追加できるようにしています。

もっと詳しく

 

まとめ

お疲れ様でした。

今回は、WordPressで自動生成される目次の表示・非表示を、ボタンクリックで切り替えるJavaScriptについてご紹介しました。

ここを入口にjQueryを使って、WordPressのテーマを自分でカスタマイズできるようになれればWebページのデザインが楽しくなりそうですね。

最後まで、ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.