WordPress(Cocoon)でトグルボックスが使えない!解決策とは?

エンタメ

このサイトは、WordPressの無料テーマ「Cocoon」を使用しているのですが、「Cocoon」にはトグルボックス機能がついているそうなのです。


ボタンをクリックすると詳細な説明が表示される機能のこと。今あなたが見ているこの表示こそ、トグルボックスです。

 

「Cocoon」だと、↓こんな風に「トグルボックス」という機能がついているはずなのですが…

(引用:スピリチュアルサロン リンデンバウムより)

 

見てください、私の Cocoon。

あるはずのトグルボックス機能が、どこにもないんです。

 

どうしてだよぉぉぉお~!!

 

…というわけで、トグルボックスを使うための解決策を2つ見つけてきたので、ここでご紹介します。

この記事を読んでほしい人
  • WordPress 初心者の人
  • Cocoon 初心者の人
  • トグルボックス機能がなくて困っている人
  • WordPressでクラシックエディタを使っている人

ちなみに、ここではブログ初心者の私でもできた簡単な方法しか載せていません。

私自身がブログ初心者のため、専門的な説明も一切ありません…。

「トグルボックス機能さえ使えるようになればいい!」というスタンスで書いていきますので、「それでもOK!」という方は、お付き合いください。

 

スポンサーリンク

あきらめる前に、まず確認しておきたいこと

そもそも、私が使っている「Cocoon」には、トグルボックス機能が装備されているはずなのです。

なので、あきらめて自分で機能追加するよりも、まずは「Cocoon」本来のトグルボックスが使えないかもう一度確認しておきましょう。

確認するのはこれだけ!

現在使用しているテーマは最新のものか?

使っているテーマの最新バージョンについて調べるには、

「(あなたが使ってるテーマ名) 最新バージョン」

↑こんな風に検索すれば確認できると思います。

 

私の場合、「すでに最新バージョンになっているにも関わらず、トグルボックス機能がなぜか表示されない」ということがわかったので、

あきらめて自分でトグルボックス機能を追加する方法を探すことにしました。

 

 

自分でトグルボックスを使えるようにする方法

さて、テーマについている既存のトグルボックス機能が使えないと分かったので、自分で新しく機能を追加するしかありません。

 

ということで、今回は以下2つの方法をご紹介します。

  1. CSS・HTMLに自分でコードを入力する
  2. WordPressプラグインを新たに追加する

 

それぞれのメリット・デメリットは、こんな感じ。

「自分でコード入力」だと…
  • ページの読み込み速度が遅くならない(=ページが重くならない)
  • コード入力が面倒くさい
「プラグイン追加」だと…
  • 簡単操作でトグルボックス機能が使えるようになる
  • ページの読み込みが遅くなる(=ページが重くなる)

 

作業効率を考えると、「2.プラグインを追加する」の方が楽だと思います。

一度プラグインを追加すると、ボタンを押すだけでトグルボックス機能を使えるようになるので、ブログを書く側としては楽です(笑)

逆に「1.自分でコードを入力する」だと、トグルボックスを入れるたびにコードを書き込まなければならないので、少し面倒です。

 

しかし、トグルボックスを使ってせっかく見やすいページを作っても、ページが重くなってしまっては読者のストレスになってしまいます。

読みたいウェブページがすぐに見れないと、イライラしますよね。

なので、自分のページ(サイト)をサクサク表示させるには、「1.自分でコードを入力する」がおすすめです。

 

では、それぞれの方法・やり方について詳しく見ていきましょう!

 

 

CSS・HTMLに自分でコードを入力する方法

CSS・HTMLとは…

「ウェブサイトの見た目・構成を決める設計図」のようなものです。

深く理解する必要はないので、サクッと前に進みましょう。(私もよく分かってません)

 

では早速、トボルボックス機能が使うための手順を見ていきましょう!

使えるようになるまでの手順
  1. CSSにコードを入力する(一度書き込めばOK)
  2. HTMLにコードを入力する(トボルボックスを使う記事を書くたびに、毎回書き込もう!)

ここでは、冒頭で紹介したトグルボックスを使えるようになるまでの手順について説明します。

 

ちなみに、私はこちらの記事を参考に(というか丸パクリ…)させていただきました!

【コピペで簡単】クリック展開 アコーディオン(折りたたみ)CSSボタン
今回は、こんな(↓)アコーディオンボタンを作ってみたので、ご紹介します。 コピペするだけ、簡単です。 &nbs…

こちらの記事だけでも十分わかりやすく、「ボックスの色の変更方法」まで載っているので、気になる方はこちらも是非ご覧ください。

 

「写真や図があった方が分かりやすい!」という方は、このまま私の解説を読み進めていただければと思います…!

それでは、それぞれの手順を見ていきましょう。

 

 

1.CSSにコードを入力する

まずはWordPressの、CSSを変更できるページを開きます。

WordPressを開き、「外観」⇒「テーマエディター」⇒「スタイルシート(style.css)」の順にクリックしていくと、こんな画面が出てくるはずです。

 

この時、「編集するテーマを選択」のところで、子テーマ「○○Child」を選んでくださいね。

 

そしたら、スタイルシート(style.css)の一番最後のところに、これ↓をコピーして貼り付けてください。

CSSコード

/* アコーディオン */
.ac-container{
width: auto;
margin: 30px auto;
}
.ac-container label{
width: 300px;
text-align: center;
background: #ff9b9b;
margin: auto;
padding: 10px 5px;
position: relative;
display: block;
height: 40px;
cursor: pointer;
color: #fff;
}
.ac-container label:hover{
background: rgba( 255, 155, 155, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}
.ac-container label:after{
color: #fff;
font-family:”FontAwesome”;
content:”\f067″;
}
.ac-container input:checked ~ label::after {
color: #fff;
font-family:”FontAwesome”;
content:”\f068″;
}
.ac-container input{
display: none;
}
.ac-container div{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
/* 高さの定義 */
.ac-container input:checked ~ div.ac-small{
height: 150px;
}
.ac-container input:checked ~ div.ac-medium{
height: 200px;
}
.ac-container input:checked ~ div.ac-large{
height: 300px;
}

 

貼り付けると、こんな感じに。

下にある「ファイルを更新」を押して問題なければ、CSSにコードを書き込めたことになります。

 

 

2.HTMLにコードを入力する

あとは記事作成画面を出し、記事の好きなところにトグルボックスを入れるだけです。

たとえば、この「あいうえお」の下にトグルボックスを入れてみましょう。

 

まず、「ビジュアル」から「テキスト」に切り替えます。

 

「あいうえお」の下に、これ↓をコピーして貼り付けます。

HTMLコード

<div class=”ac-container”>
<input id=”ac-1″ name=”accordion-1″ type=”checkbox” />
<label for=”ac-1″> クリックしてね </label>
<div class=”ac-small”>
<p>ここに文字を入れるよ!</p>
</div>
</div>

 

貼り付けると、こんな感じに。

 

この状態で「テキスト」から「ビジュアル」に切り替えても、トグルボックスの中身は見えませんが、

「プレビュー」をしてみると、ちゃんとトグルボックスが表示されるかどうか、確認できますよ。

 

これで、トグルボックスが使えるようになりました!

私

お疲れさまでした!

 

同じページ内に複数トグルボックスを入れる場合、ボックスの大きさを変えたいときは、コードが少し変わります!

たとえば、同じページ内に2つ目のトグルボックスを使いたいときは、このように赤枠のところを「2」に変えましょう。

 

また、青枠のところをこのように変えると、トグルボックスの大きさを変えることができますよ。

  • small ⇒ 小サイズに
  • medium ⇒ 中サイズに
  • large ⇒ 大サイズに

 

 

WordPressプラグインを新たに追加する方法

プラグインとは…

WordPressの機能を拡張する、アプリのようなものです。

好きなアプリを入れてスマホを自分好みにカスタマイズするのと同じように、新しいプラグインを追加することで、「トグルボックス機能」があなたのWordPressで使えるようになりますよ。

 

トグルボックスを使うための おすすめ無料プラグインは、この2つです。

・Shortcodes Ultimate
・Arconix Shortcodes

どちらのプラグインも、追加手順と使い方はほぼ同じです。

 

「Shortcodes Ultimate」の追加手順と使い方は、こちらの記事がめちゃめちゃ分かりやすかったので、私からの解説は省略させてください。

WordPress アコーディオン・ボックス(枠)を簡単に挿入する方法
ブログ内に ”アコーディオン” や ”ボックス”(枠)を挿入…WordPressのブログ記事内に、簡単に「アコーディオン」「ボックス(枠)」を挿入できるプラグイン「Shortcodes Ultimate」ショートコード…

 

同じく、「Arconix Shortcodes」の追加手順と使い方は、こちらの記事がめちゃめちゃ分かりやすいので、ぜひご覧ください。

WordPress プラグイン > 記事編集 > ショートコード > Arconix Shortcode
【完全保存版】記事の編集、作成に役立つ便利&おすすめのWordPressプラグイン「Arconix Shortcode(アーコニクス・ショートコード)」で出来ること、導入方法、使い方など徹底解説!− WordPress無料テーマ&テンプレート紹介サイト「テーマタンク」

 

では、今回はこの辺で。

私

最後までお付き合いいただき、ありがとうございました!

コメント