はじめに
ブログのエンゲージメントを高めたい... そんな思いから、読者が楽しめるインタラクティブなコンテンツとして、MBTI性格診断テストを実装してみました。
本記事では、以下の3つのファイルを使って、あなたのWordPressブログにMBTI診断テストを追加する方法をご紹介します。
完成イメージ
8つの質問に答えていく
ボタンクリックで進む
16タイプで診断
サンプルURL：https://16type-seikaku.com/mbti/
このコンポーネントは以下の機能を持っています：8つの質問でMBTIタイプを判定各質問に2つの選択肢を提供プログレスバーで進捗を表示結果画面で16タイプの説明を表示「もう一度診断する」機能
その他の特徴：
- 美しいUI/UXデザイン
- プログレスバー付き
- スムーズなアニメーション
- スマートフォン対応済み
- 16タイプの性格診断結果
必要なもの
- WordPressサイト
- エックスサーバー（他のレンタルサーバーでもOK！）ログイン権限
- ファイルをアップロードする権限
- プログラミングの知識は不要です！
実装手順：
プラグインフォルダを作成:
wp-content/plugins/mbti-test/- サーバーにファイルを配置
- WordPressの管理画面でプラグインを有効化
- 投稿や固定ページで以下のショートコードを使用:
[mbti_test]これだけです！
[価格: 500円]※購入数に応じて値上げしていきます。【含まれるもの】 ✓ 3つのソースファイル一式 ✓ 詳細な実装手順の解説 ✓ カスタマイズガイド付き
実装準備（エックスサーバーの場合）
1. 準備：ファイルを作成する場所を用意しよう
- エックスサーバーの管理画面にログイン
- 「WordPressインストール済みサイト」を選択
- 「ファイルマネージャー」をクリック
- 以下の場所に移動：public_html/wp-content/plugins/
- 「新規フォルダ」でmbti-testフォルダを作成
1-2. 準備：必要なファイル
以下の3つのファイルを用意します：※順に説明します。
- mbti-test.php（プラグインのメインファイル）
- mbti-test.js（診断テストの本体）
- single.php（テーマの投稿ページテンプレート）
2. 実装手順
Step 1: プラグインの作成
- 上で作成したWordPressのwp-content/pluginsフォルダ内のmbti-testフォルダで【新規ファイル作成】をクリック
- mbti-test.php という名前の新しいファイルを作成
- 以下のmbti-test.phpを配置：
<?php
/*
Plugin Name: MBTI診断テスト
Description: MBTI性格診断テストを提供するプラグイン
Version: 1.0
*/
// 直接アクセス禁止
if (!defined('ABSPATH')) exit;
// スクリプトとスタイルの読み込み
function mbti_test_enqueue_scripts() {
// Reactの読み込み（HTTPSのCDNに変更）
wp_enqueue_script('react', 'https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js', [], '17.0.2', true);
wp_enqueue_script('react-dom', 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js', ['react'], '17.0.2', true);
// Tailwindの読み込み（HTTPSのCDNに変更）
wp_enqueue_style('tailwind', 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css');
// MBTIテストのスクリプト
wp_enqueue_script('mbti-test', plugins_url('mbti-test.js', __FILE__), ['react', 'react-dom'], time(), true);
}
add_action('wp_enqueue_scripts', 'mbti_test_enqueue_scripts');
// ショートコード登録
function mbti_test_shortcode() {
return '<div id="mbti-test-root">MBTI Test Loading...</div>';
}
add_shortcode('mbti_test', 'mbti_test_shortcode');Step 2: JavaScriptファイルの配置
同様に同じフォルダにmbti-test.jsも配置：
"use strict";
const { useState, useEffect } = React;
function MBTITest() {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [answers, setAnswers] = useState({
E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0
});
const [showResult, setShowResult] = useState(false);
const questions = [
{
text: "休日は...",
options: [
{ text: "友達と出かけることが多い", type: "E" },
{ text: "家でゆっくり過ごすことが多い", type: "I" }
]
},
{
text: "新しい情報を理解するとき...",
options: [
{ text: "具体的な事実や詳細に注目する", type: "S" },
{ text: "全体的なパターンや可能性を考える", type: "N" }
]
},
{
text: "重要な決定をするとき...",
options: [
{ text: "論理的に分析して決める", type: "T" },
{ text: "自分や他人の気持ちを考慮する", type: "F" }
]
},
{
text: "普段の生活で...",
options: [
{ text: "計画を立てて行動する", type: "J" },
{ text: "臨機応変に対応する", type: "P" }
]
},
{
text: "グループでの活動で...",
options: [
{ text: "積極的に意見を出す", type: "E" },
{ text: "他の人の意見を聞いてから発言する", type: "I" }
]
},
{
text: "問題解決するとき...",
options: [
{ text: "過去の経験や実績を重視する", type: "S" },
{ text: "直感や新しいアイデアを重視する", type: "N" }
]
},
{
text: "友人との対立が起きたとき...",
options: [
{ text: "事実に基づいて議論する", type: "T" },
{ text: "お互いの気持ちを理解しようとする", type: "F" }
]
},
{
text: "旅行するとき...",
options: [
{ text: "しっかり計画を立てる", type: "J" },
{ text: "その場の流れで決める", type: "P" }
]
}
];
const handleAnswer = (type) => {
setAnswers(prev => ({
...prev,
[type]: prev[type] + 1
}));
if (currentQuestion < questions.length - 1) {
setCurrentQuestion(prev => prev + 1);
} else {
setShowResult(true);
}
};
const calculateType = () => {
return [
answers.E > answers.I ? 'E' : 'I',
answers.S > answers.N ? 'S' : 'N',
answers.T > answers.F ? 'T' : 'F',
answers.J > answers.P ? 'J' : 'P'
].join('');
};
const getTypeDescription = (type) => {
const descriptions = {
'ISTJ': '真面目で規律正しい管理者タイプ',
'ISFJ': '思いやりのある実践的なサポーター',
'INFJ': '洞察力のある理想主義者',
'INTJ': '戦略的な思考家',
'ISTP': '論理的な問題解決者',
'ISFP': '芸術的な冒険家',
'INFP': '理想を追求する夢想家',
'INTP': '論理的な発明家',
'ESTP': '行動的な挑戦者',
'ESFP': '陽気な演出家',
'ENFP': '情熱的なアイデアの人',
'ENTP': '独創的な発案者',
'ESTJ': '実行力のある管理者',
'ESFJ': '社交的な調整役',
'ENFJ': 'カリスマ的な指導者',
'ENTJ': '戦略的なリーダー'
};
return descriptions[type] || 'タイプの説明が見つかりません';
};
const resetTest = () => {
setCurrentQuestion(0);
setAnswers({
E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0
});
setShowResult(false);
};
return React.createElement('div', {
className: 'bg-gray-100 py-8'
},
React.createElement('div', {
className: 'max-w-2xl mx-auto p-4'
},
React.createElement('div', {
className: 'bg-white rounded-lg shadow p-6'
}, [
React.createElement('div', {
className: 'mb-8 text-center',
key: 'header'
}, [
React.createElement('h2', {
className: 'text-2xl font-bold mb-2',
key: 'title'
}, 'MBTI性格診断テスト'),
!showResult && React.createElement('div', {
className: 'text-gray-600',
key: 'progress-text'
}, `質問 ${currentQuestion + 1} / ${questions.length}`)
]),
!showResult ? [
React.createElement('div', {
className: 'mb-6',
key: 'progress'
}, [
React.createElement('div', {
className: 'h-2 bg-gray-200 rounded-full overflow-hidden',
key: 'progress-bar'
},
React.createElement('div', {
className: 'h-full bg-blue-500 transition-all duration-300',
style: { width: `${(currentQuestion / questions.length) * 100}%` }
})
),
React.createElement('div', {
className: 'text-sm text-gray-600 text-right mt-1',
key: 'progress-text'
}, `${currentQuestion + 1}/${questions.length}`)
]),
React.createElement('div', {
className: 'text-xl mb-6 text-center',
key: 'question'
}, questions[currentQuestion].text),
React.createElement('div', {
className: 'space-y-4',
key: 'options'
},
questions[currentQuestion].options.map((option, index) =>
React.createElement('button', {
key: index,
onClick: () => handleAnswer(option.type),
className: 'w-full p-4 text-left border rounded hover:bg-gray-50 transition-colors duration-200'
}, option.text)
)
)
] : React.createElement('div', {
className: 'text-center'
}, [
React.createElement('div', {
className: 'text-3xl font-bold mb-4',
key: 'result'
}, `あなたのタイプは${calculateType()}です`),
React.createElement('div', {
className: 'text-xl mb-6',
key: 'description'
}, getTypeDescription(calculateType())),
React.createElement('button', {
onClick: resetTest,
className: 'bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition-colors duration-200',
key: 'reset'
}, 'もう一度診断する')
])
])
)
);
}
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('mbti-test-root');
if (container) {
ReactDOM.render(React.createElement(MBTITest), container);
}
});Step 3: （最初のH2前に置きたい場合のみ）投稿ページテンプレートの編集
single.phpを以下の内容で編集：
<?php get_header(); ?>
<div id="contents">
<!--メインコンテンツ-->
<main id="main-contents" class="main-contents <?php echo is_article_design(); ?> <?php is_animation_style(); ?>" itemprop="mainContentOfPage">
<?php if ( wp_isset_widets( 'post-top-widget',true ) ) : ?>
<div id="post-top-widget">
<?php dynamic_sidebar( 'post-top-widget' ); ?>
</div>
<?php endif; ?>
<section class="cps-post-box hentry">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
// カテゴリー情報を取得
if( get_the_category() != false ){
$category = get_the_category();
$cat_id = $category[0]->cat_ID;
$cat_name = $category[0]->cat_name;
$cat_slug = $category[0]->category_nicename;
$cat_link = get_category_link($cat_id);
}
if( get_post_thumbnail_id($post->ID) ){
$thumbnail_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src( $thumbnail_id, 'large_size' );
$src = $image[0]; //url
$large_width = $image[1]; //横幅
$large_height = $image[2]; //高さ
}else{
$large_width = "";
$large_height = "";
}
$exclude_ids_str = is_labeling_act_exclude_ids();
$should_exclude = false;
// 文字列が空でない場合のみ処理を行う
if (!empty($exclude_ids_str)) {
// 文字列を配列に変換
$exclude_ids_array = explode(',', $exclude_ids_str);
// 現在の投稿が特定のカテゴリーIDに該当するかチェック
foreach ($exclude_ids_array as $id) {
if (has_term(trim($id), 'category')) {
$should_exclude = true;
break;
}
}
}
?>
<article class="cps-post">
<header class="cps-post-header">
<?php if( get_the_category() != false ): ?>
<span class="cps-post-cat category-<?php echo $cat_slug; ?>" itemprop="keywords"><a href="<?php echo $cat_link ?>" style="background-color:<?php cps_category_color(); ?>!important;"><?php echo $cat_name ?></a></span>
<?php endif; ?>
<?php if(is_labeling_act_post_display() !== false) : ?>
<?php if ( ! get_post_meta( $post->ID, "labeling_act_posts", true) == 'この記事でステマ規制ラベルを表示しない' ) : ?>
<?php if (!$should_exclude) : ?>
<?php if(is_labeling_act_small_display() !== false) : ?>
<span class="cps-post-cat a--labeling-small-act <?php echo is_labeling_act_style(); ?>"><span><?php echo is_labeling_act_small_text(); ?></span></span>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<h1 class="cps-post-title entry-title" itemprop="headline"><?php esc_html(the_title()); ?></h1>
<div class="cps-post-meta vcard">
<span class="writer fn" itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name"><?php the_author(); ?></span></span>
<span class="cps-post-date-box">
<?php get_template_part( 'include/custom-time' ); ?>
</span>
</div>
</header>
<?php if ( ! get_option( 'theme_eyecatch_off' ) ) : ?>
<?php if ( ! get_post_meta( $post->ID, "cps_eyecatch_display_off", true) == 'この記事でアイキャッチ画像を表示しない' ) : ?>
<?php if ( ! is_mobile() ): ?>
<?php if( $large_width < 1280 ) : ?>
<div class="cps-post-thumb jin-thumb-original" itemscope itemtype="https://schema.org/ImageObject">
<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'large_size',array('width ' => $large_width,'height ' => $large_height,'alt' => jin_image_alt('large_size') ) ); } ?>
</div>
<?php else: ?>
<div class="cps-post-thumb" itemscope itemtype="https://schema.org/ImageObject">
<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'large_size',array('width ' => '700','height ' => '393','alt' => jin_image_alt('large_size') ) ); } ?>
</div>
<?php endif; ?>
<?php else: ?>
<div class="cps-post-thumb" itemscope itemtype="https://schema.org/ImageObject">
<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'small_size',array('width ' => '384','height ' => '216') ); } ?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php if ( ! get_option( 'sns_delete' ) ) : ?>
<?php if ( ! get_option( 'sns_top_delete' ) ) : ?>
<?php get_template_part('include/sns-top'); ?>
<?php endif; ?>
<?php endif; ?>
<?php if(is_labeling_act_post_display() !== false) : ?>
<?php if ( ! get_post_meta( $post->ID, "labeling_act_posts", true) == 'この記事でステマ規制ラベルを表示しない' ) : ?>
<?php if (!$should_exclude) : ?>
<?php if(is_labeling_act_large_display() !== false) : ?>
<div class="c--labeling-act <?php echo is_labeling_act_style(); ?>"><span class="a--labeling-act"><?php echo is_labeling_act_large_text(); ?></span></div>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<div class="cps-post-main-box">
<div class="cps-post-main <?php if( ! get_theme_mod('h2_style_icon') == ""){ echo get_theme_mod('h2_style_icon'); } ?> <?php if( ! get_theme_mod('h3_style_icon') == ""){ echo get_theme_mod('h3_style_icon'); } ?> <?php if( ! get_theme_mod('h4_style_icon') == ""){ echo get_theme_mod('h4_style_icon'); } ?> <?php if( ! get_option('hl_custom_check')){is_h2_style();echo " "; is_h3_style();echo " "; is_h4_style(); }else{echo "hl-custom";} ?> entry-content <?php echo esc_html(get_option('font_size'));?> <?php echo esc_html(get_option('font_size_sp'));?>" itemprop="articleBody">
<?php get_template_part('ad-top'); ?>
<?php
$content = get_the_content();
$first_h2_pos = strpos($content, '<h2');
if ($first_h2_pos !== false) {
// h2タグの前までの部分を出力
echo apply_filters('the_content', substr($content, 0, $first_h2_pos));
// MBTIテストを挿入
echo do_shortcode('[mbti_test]');
// h2タグ以降を出力
echo apply_filters('the_content', substr($content, $first_h2_pos));
} else {
// h2タグがない場合は通常通り表示
the_content();
}
?>
<?php get_template_part('include/nextpage'); ?>
<?php
$arr = get_the_tags();
if($arr){
echo '<div class="tag-box">';
foreach ( (array)$arr as $tag ) {
echo '<span><a href="'.get_tag_link($tag->term_id).'"> '.$tag->name.'</a></span>';
}
echo '</div>';
}
?>
<?php get_template_part( 'include/custom-profile' ); ?>
<?php get_template_part('ad'); ?>
<?php if( ! get_post_meta( $post->ID, "custom_ad_off", true) == 'この記事で広告を表示しない' ) : ?>
<div class="related-ad-unit-area"><?php echo get_option('ad_related_unit'); ?></div>
<?php endif; ?>
<?php if ( ! get_option( 'sns_delete' ) ) : ?>
<?php get_template_part('include/sns'); ?>
<?php endif; ?>
<?php get_template_part('cta'); ?>
</div>
</div>
</article>
<?php endwhile; ?>
<?php else : ?>
<article class="cps-post">
<h1 class="post-title">記事が見つかりませんでした。</h1>
</article>
<?php endif; ?>
</section>
<?php if ( wp_isset_widets( 'post-bottom-widget',true ) ) : ?>
<div id="post-bottom-widget">
<?php dynamic_sidebar( 'post-bottom-widget' ); ?>
</div>
<?php endif; ?>
<?php if( is_bread_display() == "exist") :?>
<?php if( is_mobile() ): ?>
<?php get_template_part('include/breadcrumb'); ?>
<?php endif; ?>
<?php endif; ?>
<?php if( ! is_singular('cta') ): ?>
<?php get_template_part('include/related-entries'); ?>
<?php endif; ?>
<?php comments_template(); ?>
<?php get_template_part('include/prevnext'); ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>3. プラグインを有効化
- WordPressの管理画面にログイン
- 左メニューの「プラグイン」をクリック
- 「MBTI診断テスト」を探して「有効化」をクリック
[スクリーンショット：プラグインの有効化画面]
4. 診断テストを表示する
- 投稿や固定ページを作成/編集
- 表示したい場所に以下のコードを入力：[mbti_test]
- 公開（または更新）をクリック
5. カスタマイズ方法
質問内容の変更
mbti-test.jsのquestions配列を編集することで、質問内容をカスタマイズできます：
const questions = [
{
text: "新しい質問",
options: [
{ text: "選択肢1", type: "E" },
{ text: "選択肢2", type: "I" }
]
},
// ...
];診断結果の説明を変更したい場合
const descriptions = {
'ISTJ': '独自の説明文',
// ...
};デザインのカスタマイズ
TailwindCSSのクラスを編集することで、デザインを自由にカスタマイズ可能です。
className: 'bg-blue-500 hover:bg-blue-600'よくある質問
Q. プログラミングの知識は必要ですか？ A. 基本的な設置であれば、ファイルをアップロードするだけで動作します。
Q. モバイル対応していますか？ A. はい、スマートフォンでも美しく表示されます。
Q. 診断結果の説明文は変更できますか？ A. はい、getTypeDescription関数内のdescriptionsオブジェクトを編集することで変更可能です。
よくあるトラブル解決方法
- 表示されない場合プラグインが有効になっているか確認ブラウザのキャッシュをクリア（Ctrl+F5）ファイルのパーミッションを確認（フォルダ：755、ファイル：644）
- プラグインが有効になっているか確認
- ブラウザのキャッシュをクリア（Ctrl+F5）
- ファイルのパーミッションを確認（フォルダ：755、ファイル：644）
- デザインが崩れる場合開発者ツール（F12）でエラーがないか確認キャッシュのクリアテーマとの競合チェック
- 開発者ツール（F12）でエラーがないか確認
- キャッシュのクリア
- テーマとの競合チェック
注意事項
- WordPressの管理者権限が必要です
- FTPまたはファイルマネージャーでのファイルアップロードが必要です
- テーマによって表示位置の調整が必要な場合があります
以上の手順で、あなたのブログにモダンなMBTI診断テストを追加することができます！
この記事のライター
