WordPressクイズ作成プラグイン Quiz Cat のカスタマイズと日本語化
はじめに
この記事では WordPress サイトに簡単にクイズを設置できる「Quiz Cat」プラグインの使い方・CSS のカスタマイズ・日本語化の方法を紹介します。
プラグイン：https://ja.wordpress.org/plugins/quiz-cat/
無料・有料版の違い
このプラグインには無料版・有料版がありますが、無料版でも十分な機能をもつプラグインになっています。
有料版では
- クイズのランダム表示
- 「もう一度」ボタンの表示
- クイズの結果画面にSNSシェアボタンを表示
- クイズ結果をメール送信（リストビルディングに使えます）
- Analytics
などが使用できます。詳しい料金はこちら
おこなうカスタマイズ
以下のようなクイズを作成して、日本語化とカスタマイズをしていきます。
* お使いのテーマによってレイアウトが異なる場合があります。
| デフォルト | カスタマイズ後 | |
|---|---|---|
| スタート画面 |  |  |
| クイズ画面 |  |  |
| 正解画面 |  |  |
| 不正解画面 |  |  |
| 結果画面 |  |  |
プラグインをインストール・有効化する
WordPress 管理画面のプラグインから「Quiz Cat」を検索し、インストールして有効化します。
こちらからプラグインを直接ダウンロード・アップロードすることもできます。
クイズを作成する
1. 新しいクイズ追加
サイドメニューから「Quiz Cat」→「Add New」を選択します。
2. クイズの説明を入力する
3. 問題を作成する
4. 結果画面を作成する
全て入力したら左下の「Save」を押して保存します。
5. ショートコードを取得する
ショートコードをクイズを表示したい箇所に貼り付けます。
日本語化する
1. functions.php を開く
日本語化をするコードは functions.php に書きます。
このときプラグインのファイルは直接編集せずに、必ずご自身のテーマ内の functions.php に書いてください。
funtions.php の場所
例）sample-child というテーマを使っている場合
/wp-content/themes/sample-child/functions.php編集方法について
サイドメニューの「外観」→「テーマの編集」からも編集できますが、編集時に気づきにくい事が原因でエラーが起こる可能性があります。
文字コードが違ったり、余計な空白が入っているだけで、画面が真っ白になり WordPress にアクセスできなくなってしまいます。
編集前にバックアップを取り、サーバー側から編集することをオススメします。
2. quizcat.phpを開く
/wp-content/plugins/quiz-cat/quizcat.php を開きます。
このファイルを探すのが面倒・大変な場合は、こちらからプラグインをダウンロードして quizcat.php を開くのが簡単です。
以下の箇所を見つけてコピーします。
3. functions.phpに貼り付ける
先ほどコピーしたものを functions.php に貼り付けて、日本語化したい箇所を編集します。
開始行の if ( defined (‘FCA_QC_PLUGIN_DIR’) ) {
最終行の } も忘れずに追加してください。
4. 動作確認
以上で日本語化は完了です！
クイズをご確認ください。
CSS のカスタマイズ
1. style.css を開く
CSS は style.css に書いていきます。
お使いのテーマのカスタマイズ機能に CSS を書く場所があれば、そちらに書いても大丈夫です。
style.css の場所
例）sample-child というテーマを使っている場合
/wp-content/themes/sample-child/style.css2. 枠を付ける
クイズ画面に枠線をつけます。
3. 正解・不正解時の背景色・文字色を変える
正解・不正解の背景を白に、文字を正解の場合は青、不正解の場合は赤にしてみます。
4. 完成
以上で完成です！
QuizCat は簡単に使用できますし、クイズは学習サイトなどにあると嬉しい機能だと思います。
ぜひお試しください。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
