HPBUILD

WordPressサイトを運営していると、ある日突然アクセスできなくなったり、別のサイトへリダイレクトされたりするケースがあります。 これは単発的な攻撃ではなく、「継続的なスパム攻撃」の可能性があります。本記事では、攻撃者がどのようにサイトに侵入し、なぜ繰り返し狙ってくるのかを解説します。 1. WordPressへの攻撃は「夜中」に集中する スパムや改ざんといった攻撃は、日本時間の深夜〜早朝に集中する傾向があります。 管理者が寝ている時間帯を狙い、対応が遅れる 海外の攻撃者による自動化されたボットが多い 複数のIPから同時にアクセスされるケースも 実際に、未明2時〜5時頃に攻撃ログが集中しているサイトは少なくありません。 2. 突破されるきっかけは「パスワード総当たり攻撃」 攻撃者が最初に狙うのは、WordPressのログイン情報（IDとパスワード）です。 その手口の代表例が「ブルートフォースアタック（総当たり攻撃）」です。 自動化されたプログラムが、次々に考えられるパスワードを機械的に試していきます。 たとえば、以下のようなパスワードは非常に危険です： test, admin123, password などのよくある単語 test1 → 攻撃後に test2 に変えただけでは再突破される 推測しやすいID（admin, info, wpuserなど）との組み合わせ 重要：攻撃者は1回でもパスワードを突破すると、そのログイン情報や脆弱性をデータとして保存し、再び攻撃対象としてマークします。 3. なぜ何度も攻撃されるのか？ 一度攻撃に成功したサイトは、「突破可能なサイト」として自動ツールに記録される可能性があります。 攻撃者ネットワークでリスト化され、繰り返し狙われる 攻撃後に改ざんファイルやバックドアを残されるケースも パスワードだけでなく、FTPやテーマ・プラグインの脆弱性を探られる そのため、表面的に直しただけでは根本的な解決にならず、再攻撃が数日〜数週間後に再発することも少なくありません。 4. パスワード変更だけでは不十分な理由 攻撃を受けた直後、「とりあえずパスワードを変えれば安心」と思っていませんか？ 実はそれだけでは、再攻撃のリスクを防ぎきれません。 たとえば、次のような対応だけでは不十分です： test1 → test2 のような微修正 簡単な英単語＋数字の組み合わせ WordPressのログインパスワードのみ変更し、FTPやデータベースは放置 推奨される対策： 英大文字＋小文字＋記号＋数字を含む強力なパスワード ログインIDもadminなどから変更 FTP・データベースのパスワードも合わせて変更 2段階認証やログイン制限の導入 5. サイトを守るために今すぐできること 攻撃されてからではなく、攻撃される前の予防がなによりも重要です。 セキュリティプラグイン（Wordfence等）の導入 アクセスログの定期確認 不要なユーザー・テーマ・プラグインの削除 自動バックアップと復元手順の把握 まとめ WordPressへのスパム攻撃は偶然ではなく、自動化されたパターンに基づく計画的な侵入です。 一度突破されると再び狙われる可能性が高く、中途半端なパスワード変更では防げないことを理解することが重要です。 本記事を参考に、今すぐサイトの安全対策を見直してみてください。

突然、あなたのWordPressサイトが改ざんされ、見知らぬサイトにリダイレクトされるようになったら…？ 本記事では、WordPressサイトがスパム攻撃を受けた実例として、全フォルダに不審なハッシュファイルが生成されたケースや、index.phpが改ざんされ別サイトにリダイレクトされる被害をもとに、管理画面のパスワード変更、phpMyAdminによる対応、エックスサーバーの自動バックアップによる復旧手順まで、具体的かつ再現可能な方法を順に解説します。 1. まずはパスワードを変更する WordPressに不正アクセスされた可能性があるため、管理画面のログインパスワードをすぐに変更しましょう。 管理画面に入れる場合は、「ユーザー」→「プロフィール」から簡単に変更できます。 管理画面に入れないときは？ ログイン画面が改ざんされてアクセスできない場合は、phpMyAdminというツールを使って、WordPressのデータベースから直接パスワードを変更できます。 方法①：SQLで直接書き換える 以下のSQL文を使って、ユーザーパスワードを直接上書きできます。 コピー UPDATE wp_users SET user_pass = MD5('新しいパスワード') WHERE user_login = 'admin'; ※user_loginは該当ユーザーのログインIDに置き換えてください。 方法②：phpMyAdminの画面操作で手動変更する エックスサーバーのサーバーパネルから「phpMyAdmin」にアクセス 対象のデータベースを選択 wp_usersテーブルを開く 変更したいユーザーの「編集」をクリック user_passの欄で「関数」をMD5にして、新しいパスワードを入力 「実行」をクリックして保存 補足：方法①・②のどちらでもMD5という古い暗号化方式を使っているため、これはあくまで一時的な応急処置です。 このあと紹介する「3. 復元後は再度パスワードを変更する」の手順に従い、WordPress管理画面から正式にパスワードを再設定してください。 WordPressのユーザーデータに関する用語の補足 項目 説明 wp_users（テーブル） WordPressに登録されている全ユーザーの情報が入っているデータベースの表（テーブル）。 user_login（カラム） ユーザーのログインID（ユーザー名）を記録している項目です。 user_pass（カラム） ログインパスワードを記録する項目。暗号化された状態で保存されます。 MD5()（関数） パスワードを暗号化（ハッシュ化）する関数。応急処置として使用されます。 2. サーバーのバックアップから復元する 次に、改ざんされたファイルを安全な状態に戻す必要があります。エックスサーバーなら自動バックアップ機能で数日前の状態に復元できます。 エックスサーバーの「サーバーパネル」→「バックアップ」メニューを開く 対象ドメインを選択し、被害前の日付を指定して復元を申請 必要に応じて「MySQLデータベース」も復元対象に含める 注意：MySQLデータベースを復元すると、先ほどphpMyAdminで変更した新しいパスワードも古い状態に戻ってしまう点にご注意ください。 その場合は、再度phpMyAdminでパスワードを変更し直すか、復旧後に管理画面から再設定を行ってください。 可能であれば、管理画面にアクセスできる状態を確認してからデータベース復元を検討するのがおすすめです。 3. 復元後は再度パスワードを変更する ファイルやデータベースを安全な状態に戻した後は、WordPress管理画面から改めてパスワードを再設定しましょう。 これは万が一、以前のパスワードが漏洩していた場合に備えるためです。 4. 今後の対策：再発を防ぐには セキュリティプラグインの導入：WordfenceやiThemes Securityなどでファイアウォールとスキャンを有効に WordPress本体・プラグインを常に最新に保つ 不要なテーマやプラグインは削除 ログイン試行制限・2段階認証の導入 サーバーのアクセスログ確認で不審な動きを早期発見 まとめ WordPressがスパム攻撃を受けて改ざんされた場合でも、落ち着いて対応すれば復旧は可能です。 パスワード変更 → バックアップ復元 → 再設定という3ステップを踏んで、被害の拡大を防ぎましょう。 日ごろからのバックアップ体制とセキュリティ対策の習慣が、いざという時にサイトを守る最大の武器になります。 この記事がトラブルに遭遇された方の参考になれば幸いです。

検索結果に「パンくずリスト」や「ナビゲーションリンク」が表示されているサイトを見たことはありませんか？ これは構造化データという仕組みを使って、Googleにサイトの構造を正しく伝えているからです。この記事では、自作テーマでも簡単に導入できる構造化データの設定方法を初心者向けに解説します。 構造化データとは？ 構造化データとは、「この部分はナビゲーションです」「これは記事です」といった情報を、Googleなどの検索エンジンに伝えるためのコードです。設定しておくと、検索結果がリッチになり、ユーザーにとってもわかりやすい表示になります。 ナビゲーションメニューに構造化データを設定 まずは、グローバルナビ（メインメニュー）に「これはナビゲーションです」と伝える構造化データを追加します。以下のように<nav>タグに属性を加え、各リンクにitempropを指定します。 コピー <nav itemscope itemtype="https://schema.org/SiteNavigationElement"> <ul> <li><a href="/" itemprop="url"><span itemprop="name">ホーム</span></a></li> <li><a href="/category/html" itemprop="url"><span itemprop="name">HTML</span></a></li> <li><a href="/category/css" itemprop="url"><span itemprop="name">CSS</span></a></li> </ul> </nav> この設定により、モバイル検索でナビゲーションリンクがボタンのように表示されることがあります。 パンくずリストを構造化する 次に、サイト内の階層を示すパンくずリストに構造化データを追加します。Googleがページの位置づけを理解しやすくなります。 コピー <ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="/"> <span itemprop="name">ホーム</span> </a> <meta itemprop="position" content="1"> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="/category/css"> <span itemprop="name">CSS</span> </a> <meta itemprop="position" content="2"> </li> </ol> positionを指定することで、Googleに階層の順番まで伝えることができます。 記事ページに構造化データ（Article）を追加 ブログ記事や解説記事にはArticle型の構造化データを設定すると、著者情報や公開日などが検索結果に反映されることがあります。JSON-LD形式で記述します。 コピー <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "構造化データの設定方法を初心者向けに解説", "author": { "@type": "Person", "name": "Yowashi" }, "datePublished": "2025-07-02", "publisher": { "@type": "Organization", "name": "HPBUILD", "logo": { "@type": "ImageObject", "url": "https://www.hpbuild.net/public/img/logo.png" } } } </script> このコードは、記事ページの<head>内に挿入するのがおすすめです。 初心者が気をつけたいポイント 順位が上がるわけではない：構造化データは「検索結果の見た目」に効く技術です 正確に書く：誤った記述があると、逆に無視されたり警告が出ることも Search Consoleで確認：構造化データが認識されているかチェックできます おわりに 構造化データは、サイトの「裏側の設計」をGoogleに正しく伝えるための重要な技術です。難しそうに見えて、実はほんの少しのタグやJSONを書くだけで実装できます。 今後も、WordPress自作テーマでできるSEO対策を紹介していきますので、ぜひブックマークしておいてくださいね。

パンくずリストは、今どこにいるのかをユーザーに伝える重要なナビゲーション要素です。 今回は、functions.phpに関数を追加するだけで表示できるパンくずリストを、初心者向けにわかりやすく解説します。 1. functions.phpにパンくず関数を追加しよう テーマフォルダ内の functions.php に以下のコードを追記します。 コピーfunction breadcrumb() { echo '<nav class="breadcrumb"><ul>'; // トップページへのリンク echo '<li><a href="' . home_url() . '">ホーム</a></li>'; // 投稿ページ（single.php）またはカテゴリーページの場合 if (is_category() || is_single()) { // カテゴリー情報を取得 $cat = get_the_category(); // 最初のカテゴリがある場合 if (!empty($cat)) { echo '<li><a href="' . get_category_link($cat[0]->term_id) . '">' . $cat[0]->cat_name . '</a></li>'; } // 投稿ページなら記事タイトルを追加 if (is_single()) { echo '<li>' . get_the_title() . '</li>'; } // 固定ページ（page.php）の場合 } elseif (is_page()) { global $post; // 親ページがある場合、親ページへのリンクを追加 if ($post->post_parent) { $parent_title = get_the_title($post->post_parent); $parent_link = get_permalink($post->post_parent); echo '<li><a href="' . $parent_link . '">' . $parent_title . '</a></li>'; } // 現在のページタイトル echo '<li>' . get_the_title() . '</li>'; // 検索結果ページ } elseif (is_search()) { echo '<li>検索結果: ' . get_search_query() . '</li>'; // 404ページ } elseif (is_404()) { echo '<li>ページが見つかりませんでした</li>'; } echo '</ul></nav>'; } 2. 表示させたい位置に関数を呼び出す パンくずリストを表示したいテンプレート（例：header.php や page.php）に以下のコードを追加します。 コピー<?php if (function_exists('breadcrumb')) breadcrumb(); ?> 3. CSSでデザインを整える（例） パンくずリストにスタイルをつけて見やすくしましょう。 コピー.breadcrumb ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; font-size: 14px; } .breadcrumb li + li::before { content: "＞"; padding: 0 8px; color: #888; } .breadcrumb a { color: #0073aa; text-decoration: none; } .breadcrumb li:last-child { color: #555; } 初心者が気をつけたいポイント ホームリンクは必ず含めるとUXが良くなる is_single()とis_page()の違いを理解して使い分けよう 投稿に複数カテゴリがある場合、最初の1つだけを表示しています おわりに 自作テーマにパンくずリストを組み込めば、ユーザーにもSEOにも優しい構造になります。 プラグイン不要なので、デザインも自由自在。ぜひ取り入れてみてくださいね！

Prism.jsは軽量で使いやすいシンタックスハイライトライブラリですが、最初に読み込んだときに含まれていない言語をあとから追加したい場面もあります。 この記事では、途中から言語を追加する2つの方法と、ファイル差し替え時の注意点について初心者向けにわかりやすく解説します。 1. Prism.jsは「必要な言語だけ」を読み込む設計 Prism.jsは読み込みを高速にするため、初期状態ではHTMLやCSSなど一部の言語しか含まれていません。 追加で使用したい言語（例：PHP、Pythonなど）がある場合は、自分でファイルを追加する必要があります。 2. CDNであとから言語を追加する方法 Prism公式CDNでは、各言語用の `.js` ファイルが用意されています。 📌 例：PHPをあとから追加する コピー <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script> <script>Prism.highlightAll();</script> 注意： Prism本体（prism.js）より後に読み込む必要があります。 3. Downloadページからファイルを差し替える方法 複数の言語をまとめて管理したい場合は、Prism.js公式ダウンロードページから必要な言語を選び直してファイルを再生成します。 ✅ 再ダウンロード時の注意点 今まで使っていた言語も必ず選び直す必要があります。 選び忘れると、以前ハイライトされていた言語が無効になることがあります。 CSS・JSともに古いファイルは差し替え（上書き）します。 📥 ダウンロード手順 公式ダウンロードページを開く 必要な言語（今まで使っていた＋今回追加したいもの）をチェック Download JSとDownload CSSをクリック ダウンロードしたファイルを自作テーマ内の `js/` や `css/` に配置 既存のファイル（prism.js, prism.css）は上書き コピー <link rel="stylesheet" href="css/prism.css"> <script src="js/prism.js"></script> <script>Prism.highlightAll();</script> 4. 動的に追加された要素に対応させる Ajaxなどで後から挿入されたコードブロックは、自動でハイライトされません。 その場合は次のように明示的に適用します。 コピー const newCode = document.querySelector('pre code.language-php'); Prism.highlightElement(newCode); 5. よくある注意点 読み込み順： 本体 → 言語 → highlightAll() の順に CSSを編集している場合： 上書き前にバックアップ 同じ言語を複数回読み込まない： 動作不安定の原因になります おわりに Prism.jsで途中から言語を追加したい場合は、CDNで読み込む方法と再ビルドして差し替える方法があります。 特に後者の場合は「使っていた言語を忘れずに再選択する」ことと「ファイルの差し替え」に注意しましょう。 プロジェクトの規模や管理のしやすさに応じて、どちらかを使い分けてください。

記事一覧ページで「1 / 2 / 3 … 次へ」といったページ送り（ページネーション）を表示したいとき、自作テーマでは自分で組み込む必要があります。今回は、初心者向けにWordPressテーマでページネーションを表示する方法をわかりやすく解説します。 まずは functions.php にテンプレート関数を用意 ページネーションの出力処理を関数化しておくと、管理しやすくなります。 コピー function my_custom_pagination() { global $wp_query; $big = 999999999; echo paginate_links(array( 'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))), 'format' => '?paged=%#%', 'current' => max(1, get_query_var('paged')), 'total' => $wp_query->max_num_pages, 'mid_size' => 2, 'prev_text' => '« 前へ', 'next_text' => '次へ »', )); } 表示させたい位置に関数を呼び出す 記事一覧を表示しているテンプレート（例：index.phpやarchive.php）の下部に次のコードを追加します。 コピー <?php if (function_exists('my_custom_pagination')) { my_custom_pagination(); } ?> CSSで見た目を整える（例） 出力されたページ番号には.page-numbersなどのクラスがついています。以下のように装飾できます。 コピー .page-numbers { display: inline-block; padding: 6px 12px; margin: 4px; background: #eee; color: #333; text-decoration: none; } .page-numbers.current { background: #333; color: #fff; } .page-numbers:hover { background: #555; color: #fff; } 注意点：クエリをカスタマイズしている場合 WP_Queryを使ってカスタムループをしている場合は、'total'に手動で$query->max_num_pagesを指定する必要があります。 コピー <?php $my_query = new WP_Query(array( 'post_type' => 'post', 'paged' => get_query_var('paged') ? get_query_var('paged') : 1 )); if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); the_title(); endwhile; echo paginate_links(array( 'total' => $my_query->max_num_pages )); endif; wp_reset_postdata(); ?> 初心者がつまずきやすいポイント query_posts を使っていると paginate_links が正しく動かない カスタムクエリ使用時は max_num_pages を明示的に指定 CSSでリンクをボタン風に整えるとクリックしやすくなる おわりに ページネーションがあると記事一覧のナビゲーションがしやすくなり、SEOやユーザー体験の面でも効果的です。 自作テーマでも、数行のコードで実装できるので、ぜひ取り入れてみてください。

文字が背景に埋もれて読みにくいとき、便利なのがテキストの縁取り（アウトライン）です。CSSだけで簡単に文字のまわりに縁をつけることができます。今回は基本から応用まで、初心者向けにわかりやすく解説します。 基本：text-shadowを使った縁取り もっとも簡単な方法は、text-shadowを4方向に重ねて、文字のまわりに影をつける方法です。 コピー .outlined-text { color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; } 応用：太めの縁取りをしたい場合 縁取りをより目立たせたいときは、さらに多方向に text-shadow を重ねます。 コピー .outlined-bold { color: yellow; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black, 0px -2px 0 black, 0px 2px 0 black, -2px 0px 0 black, 2px 0px 0 black; } 別の方法：-webkit-text-stroke + text-shadow を併用 Webkit系ブラウザ（Chrome、Safari）で使える -webkit-text-stroke を使うと、より滑らかで太い縁が作れます。 ただし、Firefoxなどでは非対応のため、フォールバックとして text-shadow を一緒に使うのがおすすめです。 コピー .stroke-combo { color: white; -webkit-text-stroke: 2px black; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; } このように書くと、Chromeでは -webkit-text-stroke が使われ、Firefoxでは text-shadow が働いて、両方のブラウザで美しい縁取りが表示されます。 実用例：背景画像の上の見出しに 背景に写真や色があると、テキストが読みにくくなることがあります。 そんなときにこの縁取りを使えば、テキストがくっきり目立つようになります。 初心者が気をつけたいポイント 縁の色と文字色のコントラストをしっかりつける 小さい文字には向かない：縁がつぶれて読みにくくなることがあります スマホ表示では太すぎる縁取りは避ける（メディアクエリで調整してもOK） おわりに CSSでテキストに縁取りを加えることで、視認性を高めたり、見た目のインパクトを出すことができます。 さまざまなサイトやデザインのアクセントとして、ぜひ活用してみてください！ 次回は、グラデーション文字やアニメーション文字など、さらにデザイン性を高めるテクニックを紹介予定です！

「もっと自由に、きれいにレイアウトしたい！」と思ったことはありませんか？ そんなときに役立つのが、CSSグリッドレイアウトです。 グリッドは、要素を“行と列”に分けて、キレイに並べることができるレイアウト方法です。 難しそうに見えるかもしれませんが、ポイントを押さえれば初心者でもすぐ使えるようになります！ CSSグリッドとは？ CSSグリッドは、ページの中の要素を「マス目状（グリッド）」に配置するための方法です。 上から下、左から右へ、2方向に自由にレイアウトできるのが特徴です。 たとえば、3つの写真やカードを横に並べたいとき、Flexboxでは1列にしか配置できませんが、グリッドなら「2列 × 2行」なども簡単にできます。 基本のグリッドレイアウト まずは3つのボックスを横並びに表示する基本コードです。 コピー<div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> </div> コピー.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } display: grid;でグリッドレイアウトを有効にします。 grid-template-columnsは「横の列数と幅」を決めるプロパティです。 ここでは 1fr を3つ並べることで、「幅を3等分した3列レイアウト」になります。 gapは、マス目とマス目のあいだのすき間（余白）を指定しています。 応用1：エリア名でわかりやすく配置 もっと複雑なレイアウトをしたいときは、grid-template-areas を使って名前でエリアを指定できます。 コピー.grid-container { display: grid; grid-template-areas: "header header" "sidebar content"; grid-template-columns: 1fr 3fr; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } このように書くと、ページの構造を名前でわかりやすく整理できます。特にブログのレイアウトなどに便利です。 応用2：画面サイズに合わせて自動調整 レスポンシブ対応も簡単にできます。カードやボックスを、画面が広いときは複数列、狭いときは1列に並べたいときに便利です。 コピー.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } auto-fitで「入るだけ列を増やす」、minmaxで「最小幅200px・最大で広がる」ように設定しています。 スマホでもPCでも、見た目が自然になる便利な書き方です。 初心者がつまずきやすいポイント grid-container と中の要素（子要素）をセットで考える grid-template-columnsやgrid-areaなどは、綴りを間違えないように 行・列のすき間には gap を使うと簡単 おわりに CSSグリッドを使えば、見た目も整って、スマホ対応もやりやすくなります。最初は「むずかしそう…」と思うかもしれませんが、何度か試せばすぐに慣れてきます！ 次回は、グリッドとFlexboxの違いや、実践的なレイアウト例も紹介予定ですので、ぜひご覧ください！