1SANGOカスタマイズガイドのよくある質問に掲載されている”このページのように、コンテンツを隠しておきクリックで表示させたい”をベースに機能をちょい足しして、より使いやすくショートコードにするカスタマイズをしてみました。'18/4/29追記このカスタマイズと同等の機能が、SANGOのバージョン1.4で実装されました。理由がない場合はそちらを利用するのがお手軽でオススメですよ!公式に載っているものより少しだけ動きを増やして、ユーザーが視覚的にわかりやすいように配慮しています。百聞は一見に如かず、ですね。押してみて!隠れてたメッセージが表示されるよ!もう一度押すと閉じるよ!投稿画面ではこんな感じ。title=”押してみて!”]隠れてたメッセージが表示されるよ!もう一度押すと閉じるよ![/accordion]使いどころのイメージとしてはネタバレを回避したいたくさん項目があって必要なところだけ展開してほしい長ったらしいソースコードを書いているあたりでしょうか。兎にも角にも装飾の選択肢が多いのはいいことですね。順を追って実装していきましょう。くじスタイルと動きの設定スタイルシートの編集Javascriptファイルを作成Javascriptを読み込むひとまず完成ショートコード化するさいごにスタイルと動きの設定まずはスタイルと動きの作成から。この工程ではおなじみstyle.cssとfunctions.phpの編集と、新規にJavascriptファイルを作成します。作業は必ず子テーマで行いましょう。このカスタマイズで必要なものFTPソフト等メモ帳などのエディタスタイルシートの編集SANGO公式カスタマイズガイドのよくある質問”このページのように、コンテンツを隠しておきクリックで表示させたい”より、スタイルを拝借させていただきました。SANGOについてのよくある質問SANGOカスタマイズガイド次のコードを子テーマのstyle.cssにコピペしましょう。0;}元のコードから若干改変して、コンテンツを開いた時にボタンの色を変更するようにしてあります。ユーザーに「開いてますよ!」と視覚的な効果をもたらすのが目的ですね。スタイルシートにコピペできたら保存してサーバーにアップロードします。続いては、実際に開閉の動きをつけるためのJavascriptの作成です。こちらもSANGO公式ガイドに紹介されているコードを少しだけ改変して利用させていただきます。ファイルの管理をしやすくするために、子テーマの中にjsという名前のフォルダを作成しましょう。jsフォルダの中にmy_sng_accordion.jsと名付けたJavascriptファイルを新規作成します。よめねこmy_sng_accordionがファイル名で、.jsが拡張子だよ!作成したJavascriptファイルの中に、次のコードをコピペ。});});公式からの変更点として、具体的には+マークを-に変化させる動きを追加しました。要素が開いている状態のスタイルを適用するためのクラス名”opened“も、ここで付与するようにしています。これらも、ユーザーに対して開いていることを視覚的に認識させる狙いですね。わかりやすいような気がしませんか?Javascriptを読み込む必要なJavascriptファイルが出来上がっても、読み込んであげないと意味がありません。wp_footerに合わせて読み込まれるように、functions.phpに次の記述をしましょう。'add_sng_custom_script_footer');この記述によってwp_footerのタイミングでJavascriptファイルが読み込まれ、コンテンツの開閉動作が実行できるようになりました。完成スタイルと動きはここまでで実装完了になります。公式ガイドにある通り、以下のようにHTMLを書いてあげれば一応動作するようにはなっています。SANGOについてのよくある質問ただし、ビジュアルエディタで使うには若干難ありです。ショートコード化する一応の機能は実装できましたが、毎回HTLMタグを貼り付けるのもものぐさな僕的には超めんどう......。ババっと書けるショートコードとかにすればやる気出るかな?それならばサクッとショートコード作りましょう!必要な作業はfunctions.phpの編集だけです。以下のコードをfunctions.phpにコピペしてください。'my_sng_accordion');編集が終わったら、いよいよショートコードが利用できるようになりました。title=”ここにタイトル”]ここに隠したい文字や画像[/accordion]こんな感じで使えるのでとても便利になりましたね!さいごに作成したショートコードをAddQuicktagなどに登録すると、さらに便利に使えるようになるかもしれませんね。(僕はAddQuicktagがあんまり好きではないので、エディタに独自ボタンをくっつけて運用しています。:WordPress関連記事たちこの記事を書いた人はるしか雑食系サラリーマンゲーム・漫画・アニメ・クルマ・ガジェットなど多趣味な雑食系で、わからないこと・気になることがあればすぐ調べないと気が済まないタイプ。集めた知識を独自の観点でお伝えしていきます。コメントをキャンセルメールアドレスが公開されることはありません。