プラグイン

WordPressクイズ作成プラグイン Quiz Cat のカスタマイズと日本語化

Sara

はじめに

この記事は2021年9月時点のバージョン 2.0.6に対応しています。

この記事では 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.css

2. 枠を付ける

クイズ画面に枠線をつけます。

3. 正解・不正解時の背景色・文字色を変える

正解・不正解の背景を白に、文字を正解の場合は青、不正解の場合は赤にしてみます。

4. 完成

以上で完成です!

QuizCat は簡単に使用できますし、クイズは学習サイトなどにあると嬉しい機能だと思います。

ぜひお試しください。

guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
0
この記事にコメントするx
記事URLをコピーしました