コンテンツの表示・非表示を切り替えるボタンをショートコードで実装

 

SANGOカスタマイズガイドのよくある質問に掲載されている

”このページのように、コンテンツを隠しておきクリックで表示させたい”

をベースに機能をちょい足しして、より使いやすくショートコードにするカスタマイズをしてみました。

'18/4/29追記
このカスタマイズと同等の機能が、SANGOのバージョン1.4で実装されました。

特に理由がない場合はそちらを利用するのがお手軽でオススメですよ!

公式に載っているものより少しだけ動きを増やして、ユーザーが視覚的にわかりやすいように配慮しています。

百聞は一見に如かず、ですね。
完成すると、こんな感じのボタンが出来上がりますよ↓

隠れてたメッセージが表示されるよ!

もう一度押すと閉じるよ!

投稿画面ではこんな感じ。

ビジュアルエディタ
[accordion title=”押してみて!”]

隠れてたメッセージが表示されるよ!

もう一度押すと閉じるよ!

[/accordion]

使いどころのイメージとしては

  • ネタバレを回避したい
  • たくさん項目があって必要なところだけ展開してほしい
  • 長ったらしいソースコードを書いている

あたりでしょうか。

兎にも角にも装飾の選択肢が多いのはいいことですね。

では、順を追って実装していきましょう。

スタイルと動きの設定

まずはスタイルと動きの作成から。

この工程ではおなじみstyle.cssfunctions.phpの編集と、新規にJavascriptファイルを作成します。

注意
作業は必ず子テーマで行いましょう。

このカスタマイズで必要なもの

  • FTPソフト等
  • メモ帳などのエディタ

スタイルシートの編集

SANGO公式カスタマイズガイドのよくある質問”このページのように、コンテンツを隠しておきクリックで表示させたい”より、スタイルを拝借させていただきました。

参考 WordPressテーマ SANGOについてのよくある質問SANGOカスタマイズガイド

次のコードを子テーマのstyle.cssにコピペしましょう。

style.css
/*アコーディオンボタン*/
button.openBtn {
 display:block;
 padding:15px;
 background:#f1f8ff;
 margin-bottom:4px;
 border:none;
 width:100%;
 text-align:left;
 color: #388dea;
 font-weight:bold;
 outline:0;
 transition: .3s;
}
button.openBtn:hover {
 background:#EFEFEF;
}
/*開いてる時*/
button.openBtn.opend {
 background:#EAEAEA;
}
button.openBtn.opend:hover {
 background:#EFEFEF;
}
button.openBtn + div {
 padding:20px 0;
}

元のコードから若干改変して、コンテンツを開いた時にボタンの色を変更するようにしてあります。

ユーザーに「開いてますよ!」と視覚的な効果をもたらすのが目的ですね。

スタイルシートにコピペできたら保存してサーバーにアップロードします。

Javascriptファイルを作成

続いては、実際に開閉の動きをつけるためのJavascriptの作成です。

こちらもSANGO公式ガイドに紹介されているコードを少しだけ改変して利用させていただきます。

ファイルの管理をしやすくするために、子テーマの中にjsという名前のフォルダを作成しましょう。

jsフォルダの中にmy_sng_accordion.jsと名付けたJavascriptファイルを新規作成します。

よめねこ
my_sng_accordionがファイル名で、.jsが拡張子だよ!

作成したJavascriptファイルの中に、次のコードをコピペ。

my_sng_accordion.js
jQuery(function(){ 
    jQuery(".openBtn").click(function(){ 
        jQuery($(this)).toggleClass("opend");
        jQuery($(this).children("i")).toggleClass("fa-plus");
        jQuery($(this).children("i")).toggleClass("fa-minus");
        jQuery($(this).next("div")).animate( {height: "toggle", opacity: "toggle"}, "nomal" );
    });
});

公式からの変更点として、具体的にはマークをに変化させる動きを追加しました。

要素が開いている状態のスタイルを適用するためのクラス名”opened“も、ここで付与するようにしています。

これらも、ユーザーに対して開いていることを視覚的に認識させる狙いですね。

はるしか
どうでしょう、ちょっとだけわかりやすいような気がしませんか?

Javascriptを読み込む

必要なJavascriptファイルが出来上がっても、読み込んであげないと意味がありません。

wp_footerに合わせて読み込まれるように、functions.phpに次の記述をしましょう。

functions.php
function add_sng_custom_script_footer() { 
    global $post;
    $uri = get_stylesheet_directory_uri();
?>
?php%20echo%20$uri;%20?/js/my_sng_accordion.js
<?php
}
add_action('wp_footer', 'add_sng_custom_script_footer');

この記述によってwp_footerのタイミングでJavascriptファイルが読み込まれ、コンテンツの開閉動作が実行できるようになりました。

ひとまず完成

スタイルと動きはここまでで実装完了になります。

公式ガイドにある通り、以下のようにHTMLを書いてあげれば一応動作するようにはなっています。

<div class="openBtn"><i class="fa fa-plus"></i> ここにタイトル</div>
<div>ここに隠したい文字や画像</div>

出展:WordPressテーマ SANGOについてのよくある質問

ただし、ビジュアルエディタで使うには若干難ありです。

ショートコード化する

一応の機能は実装できましたが、毎回HTLMタグを貼り付けるのもものぐさな僕的には超めんどう……。

はるしか
もっと、こう、ババっと書けるショートコードとかにすればやる気出るかな?

それならばサクッとショートコード作りましょう!

必要な作業はfunctions.phpの編集だけです。

以下のコードをfunctions.phpにコピペしてください。

コード
function my_sng_accordion( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'title' => '',
    ), $atts ) );
    return '<button class="openBtn"><i class="fa fa-plus"></i> '. $title .'</button><div style="display:none;">' . do_shortcode($content) . '</div>';
}
add_shortcode('accordion', 'my_sng_accordion');

編集が終わったら、いよいよショートコードが利用できるようになりました。

[accordion title=”ここにタイトル”]

ここに隠したい文字や画像

[/accordion]

こんな感じで使えるのでとても便利になりましたね!

さいごに

作成したショートコードをAddQuicktagなどに登録すると、さらに便利に使えるようになるかもしれませんね。
(僕はAddQuicktagがあんまり好きではないので、エディタに独自ボタンをくっつけて運用しています。)

カスタムフィールドを使ってスクリプトファイルの読み込みをオンオフしたり、などのカスタマイズも行っていますので、そのうちそれらも記事にできたらと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です