【wordpress】lightning（無料テーマ）でFAQにアコーディオンを実装

wordpressの無料テーマlightningでFAQページを作成。FAQのアコーディオン機能はPro版にしかなかったため、手動にてアコーディオン機能を実装。今回はその備忘録である。

完成図

今回実装したのはこちら

まずは入れてみる

管理画面の投稿画面から以下を選択
新旧どちらでもいいが、旧の方がCSSがシンプルでいじりやすい。

スタイルは「標準」と「背景塗り 角丸」に設定

この時の見た目がこちら

コードをいじる

コードだけ知りたいって人のために先にコードだけ記載。
詳細や詰まったポイントなどは後半部分に記載する。

style.scss

$transparent: rgba(0, 0, 0, 0); 
$faq_color_1: orange; 
$faq_color_2: blue; 

.inner {
    max-width: 980px;
    padding: 0 10px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================================================
vk_faq (上書き用CSS)
================================================== */ 
.vk_faq {
    padding-bottom: 0;
}

.vk_faq .vk_faq_title {
    padding: .8rem 1rem .8em 3rem;
    cursor: pointer;
}

.vk_faq .vk_faq_title:before {
    color: $faq_color_1;
}

.is-style-vk_faq-bgfill-circle .vk_faq_title:before, 
.is-style-vk_faq-bgfill-square .vk_faq_title:before, 
.is-style-vk_faq-bgfill-rounded .vk_faq_title:before {
    background-color: $faq_color_1;
}

.vk_faq .vk_faq_title:after {
    content: "";
    position: absolute;
    right: 0;
    top: 1.4rem;
    border-top: .5rem solid #999;
    border-left: .5rem solid $transparent;
    border-right: .5rem solid $transparent;
}

.vk_faq .vk_faq_content {
    display: none;
    transition: none;
}

.vk_faq .vk_faq_content:before {
    color: $faq_color_2;
}

.is-style-vk_faq-bgfill-circle .vk_faq_content:before, 
.is-style-vk_faq-bgfill-square .vk_faq_content:before, 
.is-style-vk_faq-bgfill-rounded .vk_faq_content:before {
    background-color: $faq_color_2;
}

functions.php

function my_assets() {
	wp_enqueue_script( 'my-main-scripts', get_stylesheet_directory_uri() . '/assets/js/accordion.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );

accordion.js

jQuery(function($) {
    let faqTitle = $('.vk_faq_title');

    faqTitle.on('click', function() {
        let faqContent = $(this).next();
        faqContent.slideToggle();
    });
});

詳細や詰まったポイント

上記コードを適応するところに書けば動くはず。この後はWordpress自体にあまり慣れてない人用に詳細にまとめたので興味のない方は読み飛ばしてOK。ここまでありがとう。

では今回lightningの子テーマに手を加えた。その時の階層がこちら。

ポイントはassets/_scssを使わなかったところ。
実は子テーマを見ると「ここを編集してね！」きを聞かして空ファイルを用意してあることがわかる。ただこの通りにやると追加で書いたCSSが効かないことがわかった。

まずはfunctions.phpにいかのようなコードがある

なので本来であれば以下の部分を編集して、「assets/_scss/style.scss」をどうにかするわけだが・・・

functions.php

$my_lightning_additional_css = true;

この状態でheadの中を見ると以下のようなスタイル適用の順になってしまう。

追加で書いたCSSが「id='my-lightning-custom-css'」で、今回上書きしたいのが後に書かれている「id='vk-blocks-build-css-css'」なのでどう頑張ってもCSSの上書きができなかった。

そのためこの部分は使用せず、子テーマ直下に配備されている「style.css」を変更することにした。
ちなみにheadでは「id='lightning-theme-style-css'」となり最後から２番目くらいに適用されている。

またそこまでこだわりはないがsassを使いたかったので、style.scssが該当のstyle.cssにコンパイルされるようにしている。
そのためstyle.scssのヘッド部分に以下を記載している。

style.scss

/*
Theme Name: Lightning Child Sample
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

あとはアコーディオンを動かす、jsをassets配下に配備しfunctions.phpでそれを読み込む記述をすれば完成。

まとめ

正直有名なプラグイン「Ultimate FAQ」や「Easy Accordion」と使っても良かったが、管理画面でショートコード発行して投稿に埋め込み・・・っていうのが行ったり来たりが面倒でちょっと嫌だった。

またコード作って埋め込むもいいけど、Wordpress慣れてない人が運用していくと考えるとちょっとかわいそうだったのでこのような形に落ち着いた。

lightningのFAQはその点、全て投稿画面で完結するので本当に素晴らしいと思う。ただアコーディオンつけるのにProを買うのはちょっと・・・といった感じだったので、vektorさんには悪いが手動でいじらせて頂きました。今後のサービスの向上に期待しておりますｗ！

では最後まで見て頂きありがとうございました。