プラグイン

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

 


 
 

はじめに

2021年9月現在のバージョン 2.0.6 で動作確認済みです。

この記事では WordPress サイトに簡単にクイズを設置できる「Quiz Cat」プラグインの使い方・CSS のカスタマイズ・日本語化の方法を紹介します。
 
プラグイン:https://ja.wordpress.org/plugins/quiz-cat/
 
 

このようなクイズを作成して、日本語化とカスタマイズをしていきます。
* お使いのテーマによってレイアウトが異なる場合があります。

デフォルトカスタマイズ後
スタート画面
クイズ画面
正解画面
不正解画面
結果画面

 
 

無料・有料版の違い

このプラグインには無料版・有料版がありますが、無料版でも十分な機能をもつプラグインになっています。

有料版では

  • クイズのランダム表示
  • 「もう一度」ボタンの表示
  • クイズの結果画面にSNSシェアボタンを表示
  • クイズ結果をメール送信(リストビルディングに使えます)
  • Analytics

などが使用できます。詳しい料金はこちら
 
 
 

プラグインをインストール・有効化する

 

 
こちらからプラグインを直接ダウンロード・アップロードすることもできます。
 
 
 

クイズを作成する

3-1. クイズを新しく追加

サイドメニューから「Quiz Cat」→「Add New」を選択します。


 
 
 

3-2. クイズの説明を入力する


 
 
 

3-2. クイズを作成する


 
 
 

3-3. 結果画面を作成する


 

全て入力したら左下の「Save」を押して保存します。
 
 
 

3-4. ショートコードを取得する

ショートコードをクイズを表示したい箇所に貼り付けます。


 
 
 
 

日本語化する

プラグインのファイルは直接編集せずに、必ずご自身のテーマ内の functions.php に書いてください。

functions.php の場所
例)mywordpress というテーマを使っている場合
/wp-content/themes/mywordpress/functions.php
 

編集方法について
サイドメニューの「外観」→「テーマの編集」からも編集できますが、編集時に気づきにくい事が原因でエラーが起こる可能性があります。

文字コードが違ったり、余計な空白が入っているだけで、画面が真っ白になり WordPress にアクセスできなくなってしまいます。

編集前にバックアップを取り、サーバー側から編集することをオススメします。
 
 
 

4-1. quizcat.phpを開く

/wp-content/plugins/quiz-cat/quizcat.php を開きます。

このファイルを探すのが面倒・大変な場合は、こちらからプラグインをダウンロードして quizcat.php を開くのが簡単です。
 

以下の箇所を見つけ、コピーします。

 
 
 

4-2. functions.phpに貼り付ける

先ほどコピーしたものを functions.php の一番下に貼り付け、日本語化したい箇所を編集します。

開始行の if ( defined (‘FCA_QC_PLUGIN_DIR’) ) {
最終行の } も忘れずに追加してください。
 

 

これで日本語化は完了です!クイズをご確認ください。
 
 
 

CSS のカスタマイズ

CSS は style.css に書いていきます。
 
style.css の場所
例)mywordpress というテーマを使っている場合
/wp-content/themes/mywordpress/style.css

お使いのテーマのカスタマイズ機能に CSS を書く場所があれば、そちらに書いても大丈夫です。
 

5-1. 枠を付ける

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

 
 

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

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

 
 

以上で完成です!

簡単に使用できて、学習サイトなどにあると嬉しい、とても良いプラグインだと思います。

ぜひお試しください
 

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