佐藤まさし

佐藤まさし 公式ウェブサイト WordPress管理・開発引き継ぎ書

本ドキュメントは、「佐藤まさし 公式ウェブサイト」の管理・運営・開発を引き継ぐ担当者向けの情報整理・申し送り事項です。本サイトは WordPress をベースに、独自のカスタムテーマを用いて構築されており、不要なプラグインの排除による軽量化と安全な運用を実現しています。

1. サイト基本情報

  • 本番環境URL: https://satoumasashi.com/
  • WordPress管理画面ログインURL: https://satoumasashi.com/wp/wp-admin/
  • サーバー: XServer（エックスサーバー）
    • SSHポート: 10022
    • データベース、SFTP/SSHアカウント情報は別途サーバー管理表を参照してください。
  • 特徴:
    • コア機能およびテーマ内のプログラム（PHP/CSS/JS）のみで動作しています。
    • 現在、有効化（Active）されているサードパーティ製プラグインはありません。プラグインのセキュリティ脆弱性の影響を受けにくい、堅牢な構成です。

2. テーマディレクトリと重要ファイル構成

テーマは /wp-content/themes/satoumasashi/ に格納されています。

satoumasashi/
├── style.css             # テーマ定義（WordPress用ヘッダー情報のみ記載）
├── functions.php         # テーマの基本設定・カスタム投稿・タイトル生成のカスタマイズ
├── header.php            # 共通ヘッダー（ロゴ、ナビゲーションメニュー、GTMタグ）
├── footer.php            # 共通フッター（フッターリンク、コピーライト）
├── front-page.php        # トップページ（メインビジュアル・政策紹介・お知らせ表示）
├── index.php             # 標準投稿のデフォルトアーカイブテンプレート（お知らせ一覧用）
├── single.php            # お知らせ（標準投稿）個別詳細ページ
│
├── archive-activity.php  # 「活動記録」一覧ページ (/activity/)
├── single-activity.php   # 「活動記録」個別詳細ページ (/activity/スラッグ/)
│
├── css/
│   ├── style.css         # サイト全体のメインスタイルシート（カラー定義、共通装飾）
│   ├── blog.css          # 「活動記録」のブログ風カードレイアウト用スタイルシート
│   ├── animation.css     # スクロール時フェードイン等の演出用CSS
│   └── inview.css        # 表示領域判定用のCSS
│
├── js/
│   ├── main.js           # ナビゲーション制御やアニメーショントリガー
│   ├── vegas.js          # トップページのスライドショー初期化用JS
│   └── jquery.inview_set.js # 要素の出現アニメーション制御JS
│
├── jimin/                # 自民党広報関連 of PDF・チラシ画像格納ディレクトリ
├── images/               # サイト内アセット画像（マップ、バナー、プロフ写真等）
│
├── template-*.php        # 各種フォームやポートフォリオ等のカスタムページテンプレート（手動割り当て）
└── (page-*.php)          # スラッグによる自動適用、またはその他の固定ページファイル

3. コンテンツの管理と更新方法

本サイトは、更新する内容の性質に合わせて「標準投稿」「カスタム投稿」「固定ページ」の3つに切り分けられています。

① お知らせ（標準投稿: post）

トップページの「事務所からのお知らせ」およびニュース一覧ページに表示されるコンテンツです。

  • 管理画面での操作: 「投稿」→「新規投稿」または「投稿一覧」から編集。
  • カテゴリー分類: 「お知らせ」「事務所開き」「初当選」「初登院」「開催」などを設定します。
  • 表示URL（一覧ページ）: https://satoumasashi.com/news/ （page-news.php で制御）
  • パーマリンク構造（詳細ページ）: https://satoumasashi.com/news/YYYYMMDD-english-slug/（投稿日付＋英語スラッグの形式）
  • カテゴリー非同期絞り込み:
    • 一覧ページ上部のカテゴリーフィルターをクリックすると、ページ遷移なしでJavaScriptにより瞬時に該当カテゴリーの記事が絞り込まれます。
    • URLパラメータ ?cat=カテゴリ名 が動的に同期されるため、パラメータ付きURLで直接アクセスされた際も自動的にそのカテゴリーに絞り込まれた状態で初期表示されます。
    • 旧来のカテゴリーアーカイブ（/news/category/slug/ 等）へのアクセスは、自動的に /news/?cat=slug へ301リダイレクトされ、新しい絞り込み機能へ統合されます。
  • デザイン・レイアウト（通常投稿専用デザイン）:
    • タイトルバー: カテゴリーアイコンを付与し、背景色に対して視認性の高い白文字（#FFFFFF / font-weight: bold(700)）で表示。WCAGアクセシビリティ基準（コントラスト比4.5:1以上）をクリア。
    • パンくずリスト: ページ上部に適切な階層構造で表示。
    • サイドバー: カテゴリ選択機能、年・月単位のアーカイブ（改行防止スタイル適用）を配置。
    • 各種SNSシェアボタン: 詳細ページに公式シェアブロックを実装。
    • 投稿リストの余白調整: リストアイテムの padding を上下 16px に統一し、均等で美しいアライメントを確保。
    • モバイル最適化: スマホ画面（レスポンシブ）時は、詳細ページの .news-main-column、article、page の左右 padding を最小限に抑制し、可読性を最大化。
  • トップページでの自動表示ルール (front-page.php 実装):
    • 本文が <a> タグのみの短い告知（外部/内部リンク用）の場合：トップページお知らせ欄にリンクがそのまま1行で出力されます。
    • 本文がプレーンテキストのみの場合：リンクなしのテキストお知らせとして出力されます。
    • 本文が複数行の文章や複雑なHTMLの場合：自動的に詳細ページ（個別ページ）が作成され、トップページには「タイトル ➡ 詳細ページへの個別リンク」として表示されます。
  • 架電（タップ発信）リンクのルール:
    • お知らせや本文内に電話番号を掲載する際は、スマートフォンでタップ発信できるよう <a href="tel:電話番号">電話番号</a> で囲んでください。
  • 書類再現用レイアウト (single.php 実装):
    • 公的な通達書類（HTML）を詳細ページとして美しく再現するため、投稿本文に class="page" が含まれている場合、自動的にサイドバーやSNSバナーなどを非表示にし、最大領域幅 800px で中央寄せされた書類専用レイアウトに切り替わります。

② 活動記録（カスタム投稿: activity）

衆議院議員としての日常の政治活動や報告をブログ風に発信するコンテンツです。

  • 管理画面での操作: 「活動記録」→「新規追加」から編集。
  • 活動カテゴリー: 「活動カテゴリー」メニューより、活動の種類を整理できます（「お知らせ」の通常カテゴリーとは独立して管理されます）。
  • メニュー構成: 「活動記録」はヘッダーナビゲーションメニュー上で「佐藤まさしの政策」の直後に配置。展開式（ドロップダウン）メニューとなっており、各カテゴリーのリンクへ直接アクセスできます。
  • 表示URL（一覧ページ）: https://satoumasashi.com/activity/ （archive-activity.php で表示制御）
  • カテゴリー絞り込み:
    • 一覧ページ上部のカテゴリータグをクリックすると、そのカテゴリーに属する記事のみが絞り込まれて表示されます。
    • ヘッダーメニューのドロップダウン経由でカテゴリーをクリックした際も、自動的にそのカテゴリーが選択（絞り込み）された状態で活動記録ページが初期表示されます。
  • アイキャッチ画像（重要）:
    • 投稿の右側にある「アイキャッチ画像」を設定してください。設定した画像が、活動記録一覧ページ（/activity/）で自動的にカード型サムネイルとして表示されます。

③ 固定ページ（page）

プロフィールや事務所案内など、頻繁には更新しない静的な情報ページです。

各固定ページは、プログラムコード（HTML/PHP）の整合性を保つため、管理画面の入力欄ではなくテーマフォルダ内のPHPファイルで直接管理するスタイルをとっています。

  • 固定ページの作成・割り当てフロー (手動紐づけ仕様):

    本サイトでは、固定ページのスラッグによる意図しない自動適用を避けるため、テーマファイルを template-〇〇.php として作成し、WordPress管理画面から手動で割り当てる仕様に統一しています。

    1. テーマフォルダ内に template-〇〇.php を作成し、ファイル最上部に Template Name: テンプレート名 のコメントを記述します。
    2. 管理画面の「固定ページ」→「新規追加」または「固定ページ一覧」から該当ページの編集画面を開きます。
    3. 右側設定サイドバーの「テンプレート」項目から、記述したテンプレート名を選択して保存します。
  • 主要固定ページテンプレート:
    • page-profile.php: プロフィール（経歴、水泳部、証券会社時代の活動紹介など ※自動適用）
    • page-policy.php: 政策5本柱（※自動適用）
    • page-office.php: 事務所のご案内・地図アクセス・駐車場情報（※自動適用）
    • page-partymember.php: 自民党党員募集案内（※自動適用）
    • page-contribution.php: 個人献金のお願い（※自動適用）
    • page-diettours.php: 国会見学のお問い合わせ（※自動適用）
    • page-sns.php: SNSアカウント一覧（※自動適用）
    • page-opinion.php: ご意見・お問合せ窓口（※自動適用）
    • template-portfolio.php: ポートフォリオ（※手動テンプレート指定「ポートフォリオ」）
    • template-form.php: お問い合わせ（※手動テンプレート指定「お問合せフォーム」）
    • template-apply.php: ボランティア・採用応募フォーム（※手動テンプレート指定「応募フォーム」）
    • template-supporters-apply.php: 後援会 入会・更新・退会フォーム（※手動テンプレート指定「後援会入会フォーム」）
    • template-partymember-apply.php: 党員 入会・更新・退会フォーム（※手動テンプレート指定「自民党員入党フォーム」）
    • template-volunteer-apply.php: ボランティア募集フォーム（※手動テンプレート指定「ボランティア募集フォーム」）

4. カスタムプラグイン仕様 (FB to WP Sync)

Facebookページの投稿をAPI経由で取得し、Gemini AIを用いて自動的にSEO最適化されたブログ記事（下書き）をWordPress上に生成する独自カスタムプラグインです。

基本情報

項目 内容
プラグイン名 FB to WP Sync
バージョン 1.18.0
作者 黒川睦夫
対象サイト 佐藤まさし 衆議院議員 公式サイト

機能詳細

  • 1. Facebook投稿の取得:
    • Meta Graph API（v19.0）経由でFacebookページの投稿情報を取得（本文テキスト、投稿日時、画像/OG画像、アルバム内複数画像、動画有無）。
    • 有効期限60日の長期アクセストークンを使用します。
  • 2. 自動同期（通常モード）:
    • WordPressのWP-Cronを使用して1時間ごとに同期処理を自動実行。管理画面のトグルスイッチでON/OFFを即時切り替え。
    • 重複防止のため、同一Facebook投稿IDの記事がすでに存在する場合は処理をスキップ。
  • 3. テスト実行モード:
    • 管理画面の「▶ 過去7日間の投稿を下書き作成（テスト）」ボタンによる手動実行。過去7日間の投稿を対象とし、既存の下書きは上書き更新。
  • 4. Gemini AIによる記事生成:
    • Google Gemini APIを使用。元の投稿テキストを素材として、内容を大幅に拡張したSEO記事（タイトル30文字以内/【活動報告】形式/絵文字含、本文600〜900文字/h2見出し2〜3個/絵文字含）を自動生成。
    • 生成されたメタディスクリプション（120文字以内）およびフォーカスキーワードは、Yoast SEO / RankMath のメタフィールドへ自動保存。
    • AIの有効/無効はトグルスイッチで管理でき、無効時はFacebook投稿テキストをそのまま下書きとして保存します。
  • 5. プロンプトのカスタマイズ:
    • 管理画面「Gemini プロンプト編集」カードより指示文を直接編集可能（利用可能変数: {{fb_message}}, {{site_topic}}, {{seo_keywords}}, {{image_note}}）。「🔄 デフォルトに戻す」ボタンも配置。
  • 6. 記事レイアウト生成仕様:
    • メイン画像: 記事先頭に float: right で配置。h2青帯との視覚的衝突を避けるため、白背景（background: #fff; padding: 8px）を設定。最大幅440px（動画サムネイルは320px）。アイキャッチ画像として自動設定。
    • 複数画像（アルバム）: 2枚目以降を末尾にギャラリー（2〜4列のグリッド）として表示。タップ時にライトボックス（ポップアップ）で前後閲覧可能。
    • 動画投稿: 「▶ 動画を見る（Facebook）」ボタンを記事内に挿入し、外部リンクとして遷移。
    • 固定フッター: 記事末尾に自動で公式SNSリンク（LINE、Insta、FB、TikTok、YT、X、Threads）および規定のハッシュタグブロックを挿入。
  • 7. カテゴリーの自動判定:
    • 生成記事の内容を分析し、「SNS・ライブ配信」「国会活動」「イベント告知」「政策」「地域活動」「その他」の6カテゴリーに自動振り分け。該当カテゴリーが存在しない場合は自動作成。
  • 8. パーマリンク自動生成:
    • 「投稿日付 + 英語スラッグ」（例: 20260606-live-streaming）の形式。Gemini APIが有効な場合はAIが内容から生成し、無効時は定義済みの日本語キーワードマップでフォールバック。
  • 9. 投稿タイプの選択:
    • 管理画面から記事の保存先として「活動記録（activity/activity_category）」または「投稿・お知らせ（post/category）」のいずれかを選択可能。

管理画面の構成

  • 自動同期ステータスカード: 同期ON/OFFトグル、最終同期日時、同期間隔、AI生成ステータスの表示。
  • API・投稿設定カード: FBトークン/ページID、投稿先選択、Gemini APIキー/モデル選択（5種類）、AI生成トグル、テーマ/SEOキーワード設定、接続テストボタン。
  • Gemini プロンプト編集カード: プロンプト直接編集、デフォルトへの復元。
  • テスト実行カード: 過去7日間の手動下書き同期ボタン、実行結果ログ、下書き確認リンク。

SEOデフォルト設定

  • サイトテーマ: 佐藤まさし 衆議院議員 神奈川16区（厚木・伊勢原・海老名）の活動報告ブログ
  • SEOキーワード: 佐藤まさし, 自民党, 神奈川16区, 衆議院, 厚木, 伊勢原, 海老名

動作環境要件

  • WordPress 5.6以上、PHP 7.4以上
  • Meta Graph API、Google Gemini API 接続環境
  • 対応SEOプラグイン: Yoast SEO / RankMath（メタ情報の保存に対応）
  • ※PHP環境のみで動作し、Node.jsなどの追加サーバー要件はありません。

5. テーマカスタマイズの技術的注意点

タイトルタグの自動最適化

タイトルタグは functions.php の satou_customize_document_title_parts フィルターで自動制御されています。SEOガイドラインおよび本人のブランディング要件に基づき、常に以下のフォーマットで動的出力されます。

  • トップページの場合: 佐藤まさし | 衆議院議員・自由民主党神奈川県第16選挙区支部長（厚木市・伊勢原市・海老名市）
  • 下層ページ（お知らせ・固定ページなど）の場合: ページタイトル | 佐藤まさし | 衆議院議員・自由民主党神奈川県第16選挙区支部長（厚木市・伊勢原市・海老名市）

区切り文字には、デザイン性を高めるためパイプ記号 | が自動使用されます。

特殊なHTMLや書類の流し込み手順

エスケープ処理による文字化けを防ぐため、外部で作成された複雑なHTMLドキュメント（省庁の告知物など）をお知らせに流し込む場合は、以下の手順を推奨します。

  1. 生のHTMLファイルを、SFTPで直接サーバーの /wp-content/themes/satoumasashi/ または WP ルートに一時アップロードする。
  2. WP-CLI または WordPress 内で file_get_contents() を使用して該当ファイルを読み込み、プログラム処理（正規表現置換など）を行ってから投稿の post_content に流し込む。
  3. 処理完了後、サーバー上の一時ファイルは削除する。

6. サイト保守コマンド（WP-CLI 例）

XServer 上で効率的に動作確認やデータ操作を行うための主要コマンド例です。

  • 投稿データの更新 (例: slugを英語に変更する): 
    /usr/bin/php8.2 /usr/bin/wp --path=satoumasashi.com/public_html/wp/ post update [投稿ID] --post_name='[英語のスラッグ]'
  • スクリプトの実行 (PHPファイルをWP環境下で評価する): 
    /usr/bin/php8.2 /usr/bin/wp --path=satoumasashi.com/public_html/wp/ eval-file [実行したいPHPファイル名]

7. 各種フォーム仕様と動作確認リンク（開発用）

WordPress内に新設したオリジナルフォーム（3画面遷移仕様）の仕様情報および確認用のリンクです。現在、一般ナビゲーションには紐付けされておらず、以下のリンクからのみアクセス可能です。

フォーム名 (テンプレートファイル) 確認用URL (本番環境) 主な特徴・仕様
お問い合わせフォーム
template-form.php		 /form/ 同一URL内で入力・確認・完了を行う3画面遷移対応。自前送信処理（wp_mail）。手動カスタムテンプレート指定（お問合せフォーム）。住所自動入力対応。
ボランティア・採用応募フォーム
template-apply.php		 /apply/ 「ボランティア」「インターン」「新卒・中途採用」のタブ切り替え。インターン・採用時は履歴書（PDF等）の添付必須。送信後、一時ファイルをサーバーから自動消去。手動カスタムテンプレート指定（応募フォーム）。住所自動入力対応。
後援会 入会・更新・退会フォーム
template-supporters-apply.php		 /supporters-apply/ 「新規入会」「情報更新」「退会手続き」のラジオボタン切り替え。退会時は住所入力を省略可能。住所自動入力対応。フリガナ全角カタカナ制限。ご家族情報（最大4人）。手動カスタムテンプレート指定（後援会入会フォーム）。
自民党党員フォーム
template-partymember-apply.php		 /partymember-apply/ 後援会フォームをベースに構築。新規入党時の「入党資格（3項目）」への同意必須。一般（4000円）・家族（2000円）党員の種別選択と家族党員時の世帯主名入力。手動カスタムテンプレート指定（自民党員入党フォーム）。
ポートフォリオページ
template-portfolio.php		 /photos/ 画像グリッド表示（カテゴリ・年・月絞り込み、ダウンロード数カウントアップ）、拡大モーダル、PC/スマホ両対応のBlob強制ダウンロード機能。手動カスタムテンプレート指定（ポートフォリオ）。