WordPressにショートコードを追加して使用するjsのアコーディオンのデザイン

2020年8月2日2022年2月23日 6分

SANGOのテーマには、はじめからイケてるデザインのオブジェクトが簡単にショートコードで利用できます。

とてもシンプルで見やすいですが、自分のサイトで合うようなデザインのオブジェクトを、ショートコードで呼び出せる仕様にしてあげることで、より一層サイトの更新も容易になり、サイトの世界観も作り込んでいくことができます。

そこで今回は、WordPressにショートコードを追加して使用するjsのアコーディオンのデザインについてご紹介します。

アコーディオンのサンプル
ショートコードの設定手順
STEP1. ショートコードを定義
STEP2. CSSを追加
STEP3. ショートコードを使う
コード一式

アコーディオンのサンプル

モノクロでシンプルなアコーディオンのデザインです。

SANGOのテーマに合わせて枠線を多少太めにしています。

中身を見てみる

ここに中身を表示

ショートコードの設定手順

STEP.1

ショートコードを定義

functions.phpにショートコードの内容を追記して新しいショートコードを定義します。

STEP.2

CSSを追加

style.cssにショートコードのCSSを追加してアコーディオンのデザインを整えましょう。

STEP.3

ショートコードを使う

任意の場所にショートコードが使用可能になります。

STEP1. ショートコードを定義

ショートコードを定義するので、functions.phpに下記のコードを貼り付けします。

functions.phpのファイルを編集する場合は、事前にバックアップを取った上で編集し、記述を誤ると管理画面に入れなくなるので、編集は慎重に行うようにしましょう。

function.php

/*********************
アコーディオンショートコード追加
 *********************/
add_shortcode('open1', 'sng_insert_accordion1'); //アコーディオン

/*********************
アコーディオンショートコード追加１
 *********************/
function sng_insert_accordion1($atts, $content = null)
{
    $title = isset($atts['title']) ? $atts['title'] : null;
    $content = do_shortcode(shortcode_unautop($content));
    $randid = mt_rand(1, 99999);
    if ($title) {
        return '<div class="acc-container001"><div class="acc-btn001"><p>' . $title . '</p></div><div class="acc-content001"><!--▼ここから中身▼-->' . $content . '<!--▲ここまで中身▲--></div></div>';
    } else {
        return '<span class="red">アコーディオンにtitleを入力してください</span>';
    }
}

STEP2. CSSを追加

次にCSSを定義します。style.cssに下記をコピーして貼り付けてください。

CSS

/* アコーディオン001用 */
* { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

.acc-container001 {
  width:100%;
  margin:30px auto 0 auto;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -o-border-radius:8px;
  border-radius:8px;
  overflow: hidden;
}

.acc-btn001 { 
  max-width:220px;
  text-align: center;
  margin:0 auto;
  color: #2C3E50;
  padding: 0 2px;
  font-weight: bold;
  cursor:pointer;
  background:#FFFFFF;
  border-bottom:1px solid #2C3E50;
  border: solid 3px;
  border-radius: 8px;
}

.acc-btn001 p {
  padding-top: 10px;
  margin-bottom: 10px;
}

/*ラベルホバー時*/
.acc-btn001:hover {
  opacity: 0.6;
}

.acc-btn001:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(1px);
  transform: translateY(1px);/*下に動く*/
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.0));
}

.acc-content001 {
  width:100%;
  margin:20px 0px;
  display: none;
  background:#eeeeee;
  padding:3% 3%;
  height: auto;
  font-size: 0.8em;
}

STEP3. ショートコードを使う

functions.phpにショートコードを追記して、CSSの設定が完了して下記のショートコードを記述すると、登録したアコーディオンが表示されます。

ショートコード

[open1 title='<i class="far fa-eye"></i> 中身を見てみる']ここに中身を表示[/open1]

上記のショートコードを設置する場合、以下のJSのコードが<body>〜〜〜</body>の中に記述が必要です。

設置したページの中に併せて記述もしましょう。

<script>
$('.acc-btn001').click(function(){
    if ( $(this).next().is( ":hidden" ) ) {
      $('.acc-content001').slideUp('selected');
      $(this).next().slideDown('selected');
    } else {
      $(this).next().slideUp('selected');
    };
});
</script>

コード一式

ボタンの文言にはfontawesomeも使用できるので、タイトルに応じたアイコンも好みで追記して表示しましょう。

コードを表示する

ショートコード

[open1 title='<i class="far fa-eye"></i> 中身を見てみる']ここに中身を表示[/open1]

function.php

/*********************
アコーディオンショートコード追加
 *********************/
add_shortcode('open1', 'sng_insert_accordion1'); //アコーディオン

/*********************
アコーディオンショートコード追加１
 *********************/
function sng_insert_accordion1($atts, $content = null)
{
    $title = isset($atts['title']) ? $atts['title'] : null;
    $content = do_shortcode(shortcode_unautop($content));
    $randid = mt_rand(1, 99999);
    if ($title) {
        return '<div class="acc-container001"><div class="acc-btn001"><p>' . $title . '</p></div><div class="acc-content001"><!--▼ここから中身▼-->' . $content . '<!--▲ここまで中身▲--></div></div>';
    } else {
        return '<span class="red">アコーディオンにtitleを入力してください</span>';
    }
}

CSS

/* アコーディオン001用 */
* { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

.acc-container001 {
  width:100%;
  margin:30px auto 0 auto;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -o-border-radius:8px;
  border-radius:8px;
  overflow: hidden;
}

.acc-btn001 { 
  max-width:220px;
  text-align: center;
  margin:0 auto;
  color: #2C3E50;
  padding: 0 2px;
  font-weight: bold;
  cursor:pointer;
  background:#FFFFFF;
  border-bottom:1px solid #2C3E50;
  border: solid 3px;
  border-radius: 8px;
}

.acc-btn001 p {
  padding-top: 10px;
  margin-bottom: 10px;
}

/*ラベルホバー時*/
.acc-btn001:hover {
  opacity: 0.6;
}

.acc-btn001:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(1px);
  transform: translateY(1px);/*下に動く*/
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.0));
}

.acc-content001 {
  width:100%;
  margin:20px 0px;
  display: none;
  background:#eeeeee;
  padding:3% 3%;
  height: auto;
  font-size: 0.8em;
}

<script>
$('.acc-btn001').click(function(){
    if ( $(this).next().is( ":hidden" ) ) {
      $('.acc-content001').slideUp('selected');
      $(this).next().slideDown('selected');
    } else {
      $(this).next().slideUp('selected');
    };
});
</script>