プラグイン

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

 


 
 

はじめに

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. 結果画面を作成する


 
 
 

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

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


 
 
 
 

日本語化

日本語化の処理は、使用中のテーマ内の functions.php に書いていきます。
 
functions.php の場所
例)mywordpress というテーマを使っている場合
/wp-content/themes/mywordpress/functions.php
 

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

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

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

注意

プラグインをアップデートした際に、ファイルが上書きされることがあります。
プラグインのファイルは直接編集せずに、必ずテーマ内の functions.php に書いてください。

 
 
 

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
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA