Q&Aの作り方（deerのショートコードを使う方法）

2022

01/24

Published

2022.01.24

/ ジュンイチ

　　

\ この記事を共有 /

B!

リンクをコピーする

Q&Aの作り方（deerのショートコードを使う方法）

ジュンイチ

B!

リンクをコピーする

WordPressテーマ「deer」のバージョンアップ1.2.1で、Q&Aが作れるショートコードを追加しました。

このショートコードを使うと、以下のようなQ&Aコンテンツが作れます。

（Qの質問をクリックorタップすると答えが開きます）↓↓

[q]ここに質問を書く1[/q]
[a]ここに答えを書く1[/a]
[q]ここに質問を書く2[/q]
[a]ここに答えを書く2[/a]
[q]ここに質問を書く3[/q]
[a]ここに答えを書く3[/a]
[q]ここに質問を書く4[/q]
[a]ここに答えを書く4[/a]

Q&Aの作り方

まずは、外観⇒テーマで、deerの親テーマのバージョンが1.2.1以上になっていることを確認してください。まだなっていなければ更新通知が来ていると思いますので、更新をして下さい。

以下のように記述をしてみてください。

[q]ここに質問を書く1[/q]
[a]ここに答えを書く1[/a]
[q]ここに質問を書く2[/q]
[a]ここに答えを書く2[/a]
[q]ここに質問を書く3[/q]
[a]ここに答えを書く3[/a]
[q]ここに質問を書く4[/q]
[a]ここに答えを書く4[/a]

質問部分は[q]と[/q]で挟む。

回答部分は[a]と[/a]で挟む。

これを繰り返していくだけです。

ちなみに以下のようにしていただければ、文字だけでなく画像なども入れることができます。

[q]
ここに質問を書く1
[/q]
[a]
ここに答えを書く1
（画像をここに入れる）
[/a]
[q]
ここに質問を書く2
[/q]
[a]
ここに答えを書く2
（動画をココに入れる）
[/a]

↓↓

ここに答えを書く1

長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり 長文の質問もあり

画像も入れられます。

Q&Aが動かない場合

キャッシュが残っている可能性がありますので、以下の2点をお試し下さい。

Q&Aの色を変えるには？

今回実装したQ&Aですが、Q（質問）の部分の色を変えることができます。

「外観」⇒「カスタマイズ」⇒「サイトカラー（色）」の中の

• 23.ポイントカラー背景色
• 24.ポイントカラー文字色

こちらの色が対応しています。

Aの部分の色はCSSなどを使わないと変更できません。

Q&Aを実装するときの注意点

今回のショートコードは、WordPressテーマdeerでのみ使えるものです。他のテーマに移行すると使えなくなりますので御理解の上、実装していただけたらと思います。

テーマ変更をしても使えるQ&Aを実装する方法はないの？

基本的にはプラグインを使って頂く必要があります。

方法としては、

1. ショートコード系のプラグインを使う
2. オリジナルブロック系のプラグインを使う

の2つがあります。

方法１．Q&Aが作れるショートコード系のおすすめプラグイン

Shortcodes Ultimateというプラグインを使うと「アコーディオン」や「スポイラー」というショートコードを使うと、クリックすると開くQ&Aのようなものを作ることができます。

方法２．Q&Aが作れるオリジナルブロック系のおすすめプラグイン

WordPressバージョン5.8以上をお使いの方には、オリジナルブロック系のプラグインを使うという手もあります。

以下、Q&Aが作れそうなプラグインとブロック名をまとめています。

※注意：ただし、オリジナルブロック系のプラグインを入れると、サイトスピードのスコアが少し下がる傾向にありますのでご注意下さい。

まとめ

今回は、WordPressテーマdeerに新しく実装したショートコード「Q&A」の紹介でした。