1. プラグイン概要
TreePressは、WordPress上で美しい家系図を作成・表示するためのプラグインです。最大200人のメンバーを含む家系図を簡単に作成できます。
📊 家系図作成
視覚的で分かりやすい家系図を自動生成
👥 メンバー管理
詳細な個人情報の入力・管理機能
🎨 カスタマイズ
デザインとレイアウトの柔軟な調整
📱 レスポンシブ
モバイル・タブレット完全対応
主な利用用途
- 歴史・系譜サイト：家族の歴史や系譜の表示
- ファンサイト：架空キャラクターの家族関係図
- 企業サイト：組織図や会社の沿革
- 教育サイト：歴史人物の関係図
2. インストール手順
1プラグイン検索
WordPress管理画面から以下の手順で進みます：
📸 スクリーンショット：プラグイン新規追加画面
検索ボックスに「TreePress」と入力
2インストール実行
検索結果から「TreePress – Easy Family Trees & Ancestor Profiles」を選択し、「今すぐインストール」をクリック
📸 スクリーンショット：インストール画面
インストールボタンの位置を示す
3プラグイン有効化
インストール完了後、「有効化」ボタンをクリック
📸 スクリーンショット：有効化画面
有効化ボタンの位置を示す
有効化後、セキュリティ・機能通知へのオプトイン画面が表示されますが、これは任意のためスキップしても問題ありません。
3. 基本設定
管理画面の確認
プラグイン有効化後、WordPress管理画面の左メニューに「TreePress」が追加されます。
TreePress メニュー構成
📁 TreePress
├── 📄 All Members（全メンバー一覧）
├── ➕ Add New（新しいメンバー追加）
├── 👨👩👧👦 Family Groups（家族グループ管理）
└── 🎁 Add Ons（追加機能・プレミアム版）
📸 スクリーンショット：TreePress管理画面
左メニューのTreePress項目とサブメニューを示す
4. 家系図の作成
家系図作成は「家族グループ作成」→「メンバー追加」の順で進めます。家族グループはカテゴリとして機能し、メンバーを整理するために使用します。
1家族グループの作成
まず、家族グループ（カテゴリ）を作成します：
| 項目 |
説明 |
例 |
| Name |
グループ名 |
田中家 |
| Slug |
URL用の識別子 |
tanaka-family |
| Description |
グループの説明 |
田中家の家系図 |
📸 スクリーンショット：Family Groups作成画面
入力フォームの各項目を示す
2メンバーの追加
次に、個別のメンバーを追加します：
基本情報の入力
| 項目 |
説明 |
| 性別 |
男性・女性・その他から選択 |
| 生年月日 |
YYYY-MM-DD形式で入力 |
| 死亡年月日 |
該当する場合のみ入力 |
| 母親 |
既存メンバーから選択 |
| 父親 |
既存メンバーから選択 |
| 配偶者 |
既存メンバーから選択 |
📸 スクリーンショット：メンバー追加画面
基本情報入力フォームを示す
3追加情報の入力
「Add New Fact」ボタンをクリックして、カスタム情報を追加できます：
📸 スクリーンショット：Add New Fact機能
追加情報入力画面を示す
親子関係や配偶者関係は、既存のメンバーからのみ選択できます。そのため、年長者から順に登録することをお勧めします。
6. ショートコード使用方法
作成した家系図を投稿や固定ページに表示するには、専用のショートコードを使用します。
基本的なショートコード
【family-tree family='{family-id}’】
1家族IDの確認
家族IDを確認する手順：
一覧のID列で確認できます。
📸 スクリーンショット：Family Groups一覧
ID列の位置を示す
2ショートコードの実装
投稿・固定ページにショートコードを追加：
- 編集画面でショートコードブロックを追加
- 以下のショートコードを貼り付け
【family-tree family='{1}’】
📸 スクリーンショット：ショートコード実装
ショートコードブロックの追加方法を示す
family-idは必ず中括弧 {} で囲んでください。【family-tree family=’1’】 のように囲まないとショートコードが機能しません。
高度なショートコード設定
【family-tree family='{1}’ display=’horizontal’ show_photos=’true’ max_generations=’4’】
| パラメータ |
説明 |
値 |
| display |
表示方向 |
horizontal / vertical |
| show_photos |
写真表示 |
true / false |
| max_generations |
表示世代数 |
数値 |
7. カスタマイズ
CSS カスタマイズ
TreePressは以下のCSSクラスを使用します：
/* 家系図全体のコンテナ */
.treepress-container {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
}/* 個人のボックス */
.treepress-member {
background-color: #fff;
border: 2px solid #007cba;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* メンバー名 */
.treepress-member h3 {
color: #007cba;
margin-top: 0;
}
/* 接続線 */
.treepress-connection {
stroke: #007cba;
stroke-width: 2px;
}
カスタムCSSは「外観」→「カスタマイズ」→「追加CSS」に追加してください。
レスポンシブデザイン
/* タブレット対応 */
@media (max-width: 768px) {
.treepress-container {
overflow-x: auto;
}.treepress-member {
min-width: 150px;
font-size: 14px;
}
}
/* スマートフォン対応 */
@media (max-width: 480px) {
.treepress-member {
min-width: 120px;
font-size: 12px;
padding: 8px;
}
}
8. トラブルシューティング
よくある問題と解決方法
❌ 問題1: 家系図が表示されない
原因：
- ショートコードの記述ミス
- 家族IDの誤り
- メンバーが登録されていない
解決方法：
正しい形式：【family-tree family='{1}’】
誤った形式：【family-tree family=’1’】 // 中括弧がない
❌ 問題2: メンバーが家系図に表示されない
原因：
- 適切な家族グループに属していない
- 親子関係が正しく設定されていない
解決方法：
- メンバーの家族グループを確認
- 親子関係を再設定
- 家系図を再表示
❌ 問題3: 大きな家系図が見切れる
解決方法：
.treepress-container {
overflow-x: auto;
max-width: 100%;
}
パフォーマンス最適化
大きな家系図の場合は、以下の方法でパフォーマンスを向上させることができます：
- 世代数の制限：
【family-tree family='{1}' max_generations='3'】
- キャッシュプラグインの使用： W3 Total Cache、WP Super Cache等
- 画像最適化： 写真のサイズを適切に調整
9. よくある質問
| 質問 |
回答 |
| 最大何人まで登録できますか？ |
最大200人のメンバーを登録可能です |
| 写真を追加できますか？ |
写真機能は有料版（TreePress Pro）の機能です |
| 複数の家族グループに属せますか？ |
はい、一人が複数のグループに属することができます |
| PDFで出力できますか？ |
プラグイン自体にPDF機能はありませんが、ブラウザの印刷機能を使用可能です |
🎉 まとめ
TreePressを使用して、魅力的な家系図をWordPressサイトに追加しましょう！
導入のポイント：
1. 計画的な構築（家族グループの設計）
2. 段階的な入力（年長者から順番に）
3. 関係性の確認（親子関係の慎重な設定）
4. カスタマイズ（サイトに合わせたデザイン調整）
このマニュアルは2025年7月現在の情報に基づいて作成されています。
プラグインのアップデートにより機能が変更される場合があります。