🔍 やりたいこと

Xサーバー上に設置しているホームページに、「記事検索機能」をつけたかったので、PHPで自作しました。

📁 ファイル構成

/public_html/
├── index.php ← 検索フォームと結果表示を統合
├── css/
│   └── search.css ← デザイン専用CSS
└── category/
    └── カテゴリ名/
        └── サブカテゴリ/
            └── 記事フォルダ/
                ├── index.php
                └── content.html ← 本文

💡 実装ポイント

• 検索対象は「記事フォルダ名（タイトル）」「本文（content.html）」
• キーワードが空欄のときは何も表示しない
• 最大表示件数は5件に制限（速度対策）
• 検索フォームと結果表示を同一ページで完結

🧠 PHPコード（index.phpの冒頭）

searchFiles() 関数を先に定義し、GETでキーワードを受け取って走査します。

<?php
function searchFiles($dir, $keyword, &$results) {
    ...
}

$results = [];
$showResults = false;

if (isset($_GET['q'])) {
    $keyword = trim($_GET['q']);
    if ($keyword !== '') {
        $showResults = true;
        $baseDir = $_SERVER['DOCUMENT_ROOT'] . '/category';
        searchFiles($baseDir, $keyword, $results);
    }
}
?>

🖊 HTML（フォーム＋結果）

<div class="search-box">
  <form method="get" action="index.php">
    <input type="text" name="q" placeholder="検索キーワード" value="...">
    <input type="submit" value="検索">
  </form>
</div>

<?php if ($showResults): ?>
  <div class="search-results">
    <h2>検索結果</h2>
    ...
  </div>
<?php endif; ?>

🎨 CSSデザイン（search.css）

フォームと結果表示をモダンに。css/search.css に記述：

.search-box input[type="text"] {
  width: 60%;
  max-width: 400px;
  padding: 12px;
  border-radius: 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  ...
}
.search-results li {
  border-left: 5px solid #007BFF;
  background-color: #f9f9f9;
  padding: 15px;
  ...
}

✅ 完成イメージ

• 検索バーがおしゃれで中央に配置
• 結果はカード形式で見やすく表示
• 全体的に軽量で、Xサーバーでもサクサク動作

👀 今後の拡張案

• 検索対象に category.txt のカテゴリ名も追加
• ヒット箇所を太字やハイライトで表示
• 検索履歴の保存、検索回数カウント

🙌 まとめ

PHPだけで完結でき、データベース不要で導入も簡単。
Xサーバーにアップロードすればすぐ使えるのが魅力です。

ご自由にコピペ＆改造して使ってください！

🔗 記事情報まとめ

ページURL：
https://ypoindustry.com/index.php

使用キーワード（検索対策）：
PHP 検索フォーム / Xサーバー 記事検索 / content.html 検索 / フォルダ名検索 / ホームページ内検索機能 / PHP 自作検索 / データベース不要 検索システム

🖼 使用イメージ

作成した検索フォームのスクリーンショット：