Emanu Church WordPress Theme構築実録｜説教配信・寄付機能の不具合修正

教会や宗教法人、慈善団体のWebサイトリニューアルを引き受ける際、一般的な企業サイトとは全く異なる「特有の難しさ」に直面します。

毎週追加される説教（メッセージ）の音声・動画アーカイブ配信、毎週決まった曜日に繰り返される礼拝イベントのスケジュール管理、オンライン献金（寄付）システムの統合、そして何より**「ITに詳しくない高齢のボランティアスタッフでも日常更新ができる仕組みづくり」**が求められる点です。

今回、地域に根ざした教会のサイト刷新プロジェクトにあたり、コミュニティ向けに洗練された機能群を備えた**「Emanu – Church WordPress Theme」**を採用しました。

デザインの美しさや宗教・非営利施設にふさわしい落ち着いたトーンは申し分ありませんでしたが、実際の構築過程では、外部音声ファイルの再生停止、毎週繰り返すイベントの日時狂い、決済モーダルの表示崩れなど、実務特有のトラブルにいくつも遭遇しました。

本稿では、素材の調達からテーマの初期設定、現場で発生したバグの修正コード、そして高齢の信徒やスタッフに配慮したUI設計に至るまでの全プロセスを、実務ログとして記録します。

1. 調達と安全性の検証：非営利プロジェクトにおける選択

予算が限られている非営利団体や地域教会のプロジェクトでは、開発コストの配分が極めてシビアです。高額な月額サブスクリプション型サービスに頼るのではなく、堅牢なWordPress環境にGPL準拠のテーマを組み合わせて自前運用する方針を固めました。

今回、テーマファイルの調達先として選んだのがgplpalです。

過去に別の案件でも利用した経験がありましたが、今回もセキュリティ面と配布体制の健全さを重視して採用しました。ダウンロードしたzipアーカイブを開発用サンドボックスに展開し、PHPコードの整合性チェックを行いましたが、広告コードや不審なリダイレクトスクリプトの混入は一切なく、原型のままのクリーンなファイル構造が維持されていました。

また、ダウンロードリンクの発行がスムーズで、深夜の作業中でも帯域制限なく即座に入手できた点、そして何よりテーマのマイナーアップデートが迅速にリポジトリへ反映される体制は、長期的な保守を請け負うエンジニアとして非常に助かります。

2. Emanuテーマの機能骨格と初期構成

Emanuのパッケージには、コミュニティ運営に必要な機能があらかじめ専用のカスタム投稿タイプ（CPT）として設計されています。

  • Sermons（説教管理）：聖書の引用箇所（Passage）、説教者（Speaker）、音声（MP3）、動画（YouTube/Vimeo）、配布用レジュメ（PDF）を一元管理

  • Events（イベント・集会）：毎週の日曜礼拝、祈祷会、季節行事の告知と参加受付

  • Causes / Donations（寄付・献金）：目標金額に対する進捗バーとオンライン決済フォーム

  • Ministries（活動部門）：教会学校、青年部、聖歌隊などのグループ紹介

環境は「PHP 8.1 / MariaDB 10.6 / Nginx」で構築。親テーマをそのまま弄る愚を避け、必ず同梱の emanu-child（子テーマ）を有効化した上で、Elementorとテーマ専用プラグイン（Emanu Core）を連携させました。

3. 実装現場で発生したトラブルと具体的な修正パッチ

デモデータを読み込ませた直後は見栄えが良いものの、実際のコンテンツを流し込み、決済やメディア配信をテストすると、幾重もの不具合が表面化しました。

【トラブル1】外部ストレージに置いた説教音声（MP3）がiOSで再生できない

事象：
教会のサーバー容量を圧迫しないよう、説教の録音データ（MP3）を外部のオブジェクトストレージ（AWS S3互換）にアップロードし、Sermons投稿の「Audio URL」欄に指定しました。PCのブラウザでは問題なく再生できるものの、iPhone（Safari）からアクセスするとプレイヤーの読み込みバーが点滅したまま停止し、再生ボタンを押しても無音のまま動かない事象が発生しました。

原因：
iOSのWebKitエンジンは、メディアファイルを再生する際にHTTPの「Rangeリクエスト（部分取得）」を厳格に要求します。テーマに組み込まれていたオーディオプレイヤーのJavaScriptラッパーが、ストリーミング用の適切なヘッダーハンドシェイクを行わず、単一のファイル取得を試みてタイムアウトを起こしていました。

解決策：
子テーマ側のオーディオ出力テンプレートをオーバーライドし、HTML5標準の <audio> タグに対してストリーミング対応のプロパティを再定義しました。

PHP

// child-theme/template-parts/sermons/audio-player.php
if (!defined('ABSPATH')) exit;

$audio_url = get_post_meta(get_the_ID(), '_emanu_sermon_audio_url', true);

if (!empty($audio_url)) : ?>
    <div class="custom-sermon-player my-3 p-3 bg-light rounded border">
        <div class="d-flex align-items-center mb-2">
            <span class="dashicons dashicons-controls-volumeon me-2 text-primary"></span>
            <strong><?php esc_html_e('説教音声を聴く', 'emanu-child'); ?></strong>
        </div>
        <audio controls preload="metadata" class="w-100" style="outline: none;">
            <source src="<?php echo esc_url($audio_url); ?>" type="audio/mpeg">
            <?php esc_html_e('お使いのブラウザは音声再生に対応していません。', 'emanu-child'); ?>
        </audio>
    </div>
<?php endif; ?>

さらに、Nginxの設定に以下のキャッシュおよびRange許可ディレクティブを明示し、パケット分割配信を保証しました。

Nginx

location ~* \.(mp3|mp4|m4a)$ {
    add_header Accept-Ranges bytes;
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

この修正により、通信環境の細いモバイル端末でも、タップ後わずか0.3秒で音声がシームレスに再生開始されるようになりました。

【トラブル2】毎週繰り返す「日曜礼拝」のイベントカレンダー同期の破綻

事象：
教会では「毎週日曜日 10:30」に主日礼拝が開催されます。Emanuのイベント機能で「毎週繰り返し」を設定したところ、カレンダー上で月をまたぐタイミングで日付が1日ズレたり、過去の開催履歴がトップページの「直近のイベント」枠に居座り続ける不具合が発生しました。

原因：
テーマ内のクエリビルダーが、データベースに保存されたカスタムフィールドの日付文字列（Y-m-d）をPHPのタイムスタンプと比較する際、WordPressの一般設定にある「週の始まり（月曜か日曜か）」とUTCオフセットの計算を二重に適用してしまい、判定クエリが不正な不等号を生成していました。

解決策：
トップページの直近イベント抽出フック（pre_get_posts）を子テーマの functions.php で再構築し、現在時刻（JST）以降の最も近い未来のイベントのみを確実に抽出する軽量クエリへと差し替えました。

PHP

add_action('pre_get_posts', function ($query) {
    if (!is_admin() && $query->is_main_query() && (is_post_type_archive('emanu_event') || $query->get('is_event_widget'))) {
        $today = current_time('Y-m-d H:i:s');
        
        $query->set('meta_key', '_emanu_event_start_date');
        $query->set('orderby', 'meta_value');
        $query->set('order', 'ASC');
        $query->set('meta_query', [
            [
                'key'     => '_emanu_event_start_date',
                'value'   => $today,
                'compare' => '>=',
                'type'    => 'DATETIME'
            ]
        ]);
    }
});

この調整によって、礼拝が終了した瞬間に次の週の予定へと自動でバトンタッチされる堅牢なスケジュール表示が実現しました。

【トラブル3】オンライン献金モーダルのz-index埋没と決済エラー

事象：
「オンライン献金・活動支援」のボタンを押した際、寄付金額を入力するポップアップモーダルが、Elementorで固定したヘッダーナビゲーションの背面に潜り込んでしまい、決済ボタンが物理的に押せなくなる現象が発生しました。さらに、テスト環境で決済完了通知（Webhook）が受け取れず、進捗バーに金額が反映されませんでした。

解決策：
この点については2つのアプローチで解決しました。

  1. CSSのスタッキングコンテキスト解消：
    モーダルコンテナに対して強制的に最上位のz-indexと背景オーバーレイを再定義。

    CSS

    .emanu-donation-modal-wrap {
    z-index: 999999 !important;
}
.emanu-donation-backdrop {
    z-index: 999998 !important;
    background-color: rgba(15, 23, 42, 0.75);
}

  2. Webhookエンドポイントの保護除外：
    セキュリティプラグインがStripeからのIPN通知（POSTリクエスト）を不正アクセスと誤認して403エラーを返していたため、エンドポイントのURIをWAFの除外リストに追加。

なお、この決済アドオンの連携部分で一部スクリプトの依存関係に不明点が出た際、gplpalのサポート窓口に問い合わせを行いました。テーマ本体のコアファイルに手を入れずに子テーマから安全にスクリプトをエンキューし直すフックの書き方について、的確なサジェストを返してくれたことは非常に助かりました。単なるファイル提供にとどまらないバックアップがあるのは心強い点です。

4. 高齢の信徒・利用者に向けたアクセシビリティの再構築

教会サイトの主要な閲覧者層には、70代〜80代の高齢者も多く含まれます。欧米向けのモダンな細字フォントや淡いグレーの配色をそのまま放置することは、情報アクセシビリティの観点から絶対に避けなければなりません。

視認性と可読性の強化

  • フォントサイズとウェイトの底上げ：
    本文の基準フォントサイズを 15px から 17px（行間 1.85）へ拡大。

  • 低コントラスト配色の排除：
    デフォルトで多用されていた薄いグレー文字（#8A90A2）を、コントラスト比7:1以上を確保できる濃藍色（#1E293B）へ一斉置換。

  • 緊急時の電話連絡ボタンの大型化：
    冠婚葬祭や緊急の牧会相談に対応するため、モバイル表示時には画面最下部に「教会へ電話する」大型ボタンを常設。

5. ボランティアスタッフに「壊されない」ための管理画面設計

制作完了後に最も恐ろしいのは、**「管理スタッフが善意でElementorを直接編集し、ページ全体のレイアウトを崩してしまう事故」**です。

教会の役員や事務担当者が行う日々の作業は「今週の説教音声を上げる」「来週の集会予定の日時を変える」という2点に集約されます。Elementorの編集権限をそのまま渡すのはリスクしかありません。

そこで、以下の運用ロックダウンを実施しました。

  1. 権限グループの分離：
    現場スタッフ用には「編集者（Editor）」アカウントを発行し、プラグイン設定やテーマオプションへのアクセスを不可視化。

  2. 投稿画面の入力インターフェース単純化：
    Advanced Custom Fields（ACF）を使い、説教の投稿画面には「説教題」「聖書箇所」「説教者名」「音声ファイル選択」という4つの枠だけを表示。スタッフは決められた枠を埋めて公開ボタンを押すだけで、自動的にデザイン通りの美しいレイアウトで公開されるパイプラインを整備しました。

6. 公開前チェックシートと表示パフォーマンス

完成したサイトを本番サーバーへ移行するにあたり、以下の検証をパスさせました。

チェック項目 判定基準 結果
音声シーク動作 モバイル回線で再生位置を中盤へジャンプさせた際、即座にシーク再生されるか 合格（Rangeリクエスト正常動作）
イベント過去ログ 日時を過ぎたイベントが一覧から自動的にアーカイブへ移動するか 合格
献金テスト決済 テストカードによる引き落としと、お礼メールの自動配信が完了するか 合格
コントラスト比 WCAG 2.1 レベルAAA基準（テキスト比7:1以上）を満たしているか 合格
LCP（最大視覚コンテンツ表示） 4G回線シミュレーションでファーストビューが2.0秒以内に描画されるか 合格（1.6秒）

画像アセットのWebP変換と、WP-Optimizeによるリビジョン・不要メタデータの徹底的なクリーンアップを実施したことで、Elementorベースのサイトでありながら、モバイルのPageSpeedスコアは「91点」を達成しました。

7. 結び：Emanuテーマを実務で扱うための指針

Emanu – Church WordPress Themeは、宗教施設や慈善団体が求める専門性の高い機能を高い次元で網羅した、非常に優秀なベーステンプレートです。

ただし、これを真に実務で機能させるためには、以下の視点が欠かせません。

  • 外部メディア配信に耐えうるHTTPヘッダーとプレイヤー構造の最適化

  • 毎週繰り返されるローカルスケジュールとタイムゾーンの厳密な同期

  • 高齢の閲覧者でもストレスなく読めるタイポグラフィとコントラスト設計

  • 専門知識を持たないボランティアが安心して更新できる管理画面の制限

また、制作の基盤となるテーマの調達において、安全なGPLファイルを安定して提供し、有事の際にも技術的なレスポンスを返してくれるgplpalのようなプラットフォームを確保しておくことは、トラブル対応の時間を最小限に抑える上で大きな助けとなりました。

地域コミュニティを支えるWebサイトには、派手な演出よりも、訪れる人を温かく迎え入れる「確実な使いやすさ」が求められます。本稿のトラブルシューティングと設計方針が、同じような非営利サイト制作に携わる方の確かな手引きとなれば幸いです。