ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

eye

20165/12

『FAQ Manager』のアコーディオンをカスタマイズ

Q&Aが簡単に作成、管理できるFAQ Managerはご存知でしょうか?
インストールして有効化するだけで、完成されたカスタム投稿が1つ追加され、ショートコードひとつで質問と解答が一覧表示できたり、チェックひとつで簡単にアコーディオンメニュー(折りたたみ式のメニュー)が実装できるというすぐれものです。
さて、今回はよりユーザビリティを求めて、「FAQ Manager」より一歩踏み込んでCSSとjavascriptでカスタマイズしたいと思います。

やりたいこと

ライターの都合で、スマートフォン表示で進めます。
アコーディオンメニューにしたときに、デフォルトはこちら

aaaaaa

すでにCSSの擬似クラス:beforeで部分的にデザインを加えております。結構このスタイルのFAQはよく見ますよね。
これを、きちんとクリックしたら開くよ!というのを伝えたい。
ということで、

6e408e3fb24c48ec5f88e308df0e9e3e

  • 右側に下向きの矢印をつける
  • 開いた状態のときはバツボタンに変更する

上記2点のカスタマイズを行いたいと思います。

準備

管理画面、またはWordPress.orgのプラグインページよりダウンロードしてください。
WordPress org. – FAQ Manager

17b4a9482a5dacaebd0aad2b22219585

有効化するとカスタム投稿が追加されますので、動作確認のために何件か追加しておいてください。

0568f2982897f516311d588efa217857

右側矢印の追加

CSSで質問が書いてあるクラス名「.faq-question」に擬似クラス「:after」で矢印を設定します。
画像とテキストがかぶらないように、画像の幅分内側に余白をつけておくといいと思います。

.faq-question {
        position:relatice;
        padding: 20px 28px 20px 20px;
        border-bottom: 1px dashed #000;
}
}
.faq-question:after { 
        content:url(images/qa_btn_open.gif) ;
        position:absolute;
        top:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        width:23px;
        height:20px;
}

これで矢印が実装できたと思います。
今の状態はこちら
94b252c1148f35f668ca7bd6ae5491f6

開いている時のCSSを変更する

理想と現状の違いは2点。

  • 開いている時は✕に変える
  • 開いている時は質問タイトルの下線を消す

上記の調節を行いたいと思います。
方法としては、コンテンツが開いている時はクラス名を追加して、画像名やボーダーに関するCSSを上書きする。の手段でいきます。

開いている時にだけクラス名を追加

jQueryで制御します。

//クリックでクラス名付与
$(window).ready( function() {
        $(" .faq-question").click(function(){
          if($(this).hasClass("question_open")){ // クリックされた要素がquestion_openクラスだったら外す
                $(this).removeClass("question_open");
          }else{ // そうじゃなかったらつける
                $(this).addClass("question_open");
          }
        });
});

つけたクラス名にCSSを追記

.question_open {
        border-bottom:none;
}
.question_open:after { //ついているときは閉まるボタン
        content:url(images/qa_btn_close.gif) ;
        position:absolute;
        top:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        width:23px;
        height:20px;
}

完成

6e408e3fb24c48ec5f88e308df0e9e3e

さていかがでしょうか?これで理想の動作に近づいたのではないのでしょうか?
レスポンシブデザインだと、スマホ時はスクロールが長くなるのを防ぐために折りたたんでしまう事項も多いと思います。
そんなときに、「クリックできること」「開くこと」「閉じれること」を視覚で伝えることは大変重要だと思います。
気が向きましたらぜひお試し下さい。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

a

201710/24

プラグインを使わない絞り込み機能【未選択時はすべて表示したい】

Wordpressの検索機能について チェックボックスに1つもチェックをいれなかったら 絞り込まずに全部表示。 「絞り込みの入…

av

Welcartのカテゴリー管理・新規登録ページをカスタマイズする

ECサイトをWordpressで運用するときに使われる『Welcart』というプラグイン。 私はこのプラグインが使いにくくて仕方がないです…

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

ページ上部へ戻る