作ってみた

エックスサーバー×AFFINGERでブログを立ち上げて、手順書になかった3つの落とし穴

Ginusagi

平日はメーカーでエンジニアをしていて、週末に個人でアプリを作っています。その記録を残す場所がほしくなって、このブログを立ち上げました。

「WordPress 始め方」で検索すれば手順記事はいくらでも出てきます。実際、サーバー契約からテーマ導入まではその通りに進みました。でも、そこから先で手が止まったのは、どの記事にも書いていないところでした。

この記事では、エックスサーバー＋AFFINGERという構成で実際に詰まった3つと、その原因と直し方を書きます。同じ組み合わせで立ち上げる人は、たぶん同じところで止まります。

落とし穴1：サイトマップが404を返す

Google Search Consoleに登録しようとして、最初につまずいたのがこれでした。

WordPressは5.5以降、標準でXMLサイトマップを吐きます。だから https://自分のドメイン/wp-sitemap.xml を開けば出てくるはず——なのですが、404が返ってきました。

原因の切り分け方

404の原因は大きく2つに分かれます。パーマリンクのルールが古くなっているだけか、サイトマップ機能そのものが無効化されているか。この2つは対処がまったく違うので、先に切り分けます。

判定は簡単で、https://自分のドメイン/?sitemap=index にアクセスしてみてください。これはURLの整形ルールを通さない直接アクセスなので、

  • XMLが表示される → 機能は生きている。パーマリンク設定を開いて「変更を保存」を押すだけで直ります
  • トップページが表示される → 機能が無効化されている。保存を押しても直りません

私の場合は後者でした。パーマリンク設定を何度保存しても404のままで、しばらく原因が分からずにいました。

AFFINGERにXMLサイトマップ機能はない

結論から言うと、AFFINGER本体にも、同梱されているプラグインにも、XMLサイトマップを生成する機能はありません。「サイトマップは専用プラグインで用意してください」という設計思想になっています。

ここで紛らわしいのが、AFFINGERに同梱されているSUGOI MOKUJI（すごいもくじ）です。名前にサイトマップ感がありますが、これは記事内の目次を作るプラグインで、まったくの別物でした。

ついでに整理しておくと、「サイトマップ」には2種類あります。

  • XMLサイトマップ：検索エンジンのクローラー向け。Search Consoleに登録するのはこちら
  • HTMLサイトマップ：読者向けの記事一覧ページ。あってもいいが必須ではない

今すぐ必要なのは前者だけです。

直し方：プラグインを入れて「サーバー」を切り替える

私は「XML Sitemap & Google News」を入れました。ただし、入れて有効化しただけでは直りません。ここが最後の罠でした。

このプラグインの初期設定は「サーバー：WordPress」、つまりWordPress標準の機能を使うモードになっています。その標準機能が止められているのだから、当然そのままでは何も出ません。

  • 「設定」→「XML サイトマップ」を開く
  • 一番上の「サーバー」を WordPress から プラグイン に変更
  • 「変更を保存」

これで出力されるようになりました。出力先は /wp-sitemap.xml ではなく /sitemap.xml です。Search Consoleに登録するのもこちらなので、間違えないように。

ちなみに、このプラグインはrobots.txtにサイトマップの場所も自動で書き足してくれます。/robots.txt を開いて Sitemap: https://... の行があれば成功です。

落とし穴2：エックスサーバーの国外IP制限に足を取られる

これはセキュリティ的には正しい挙動なのですが、知らないと原因不明の403に悩まされます。

エックスサーバーには「WordPressセキュリティ設定」という機能があり、その中の国外IPアクセス制限が既定でオンになっています。配下にぶら下がっているのは、この3つです。

  • 管理画面（ダッシュボード）へのアクセス制限
  • REST APIへのアクセス制限
  • XML-RPCへのアクセス制限

つまり、海外のサーバーやクラウドサービスから自分のWordPressのAPIを叩こうとすると、そこで止まります。外部ツールと連携させて記事を自動投稿しよう、といったことを考えている人はここで詰まるはずです。

ここで 制限をオフにするのは最後の手段です。日本国内のIPからは通るので、自分のPCのターミナルやブラウザから叩く経路にすれば、制限はオンのままで問題なく動きます。わざわざ穴を開ける必要はありません。

WAFがコードを含む記事を弾くことがある

同じ系統の話をもうひとつ。エックスサーバーのWAF（攻撃を遮断する仕組み）は、記事本文にコードやSQLらしき文字列が入っていると、投稿の保存自体を403で弾くことがあります。

技術記事を書くブログでは遅かれ早かれ踏むので、覚えておくと慌てずに済みます。踏んだときは、サーバーパネルの「WAF設定」で対象ドメインの該当項目を一時的にオフにして保存し、また戻す、という運用になります。

落とし穴3：お問い合わせフォームにプラグインは要らなかった

お問い合わせページはAdSenseの審査でも前提になるので、早めに作りたいところです。定番はContact Form 7ですが、少し考えてGoogleフォームの埋め込みにしました。

比較するとこうなります。

  • Contact Form 7：サイト内で完結して見た目も揃う。ただしプラグインが1つ増え、スパム対策（Akismetの有効化やreCAPTCHAの設定などが別途必要）と、メールがちゃんと届くかの確認作業がついてくる
  • Googleフォーム：プラグイン不要。回答はGoogleフォーム側に確実に貯まる。スパムもほぼ来ない

月に数件あるかどうかのお問い合わせのために、プラグインを増やして到達確認までするのは割に合わないと判断しました。読者から見ると、どちらもページ内にフォームが表示されて、そのまま送信できる点は同じです。

埋め込みで一箇所だけ手を入れる

Googleフォームが出力する埋め込みコードは、幅と高さがピクセル固定です。そのまま貼るとスマホで横にはみ出すので、次のCSSを一緒に入れておきます。

<div class="gform-embed">
  ここに Google フォームの iframe を貼る
</div>
<style>.gform-embed iframe{max-width:100%;}</style>

これだけで画面幅に追従するようになります。埋め込みの高さは固定のままなので、フォームの中に縦スクロールが出るのが気になる場合は、高さの値を大きめにしておくとページ側のスクロールだけで完結します。

もうひとつ、フォームを作ったあとに回答の通知メールは自分でオンにする必要があります。既定ではオフなので、お問い合わせが来ても気づけません。フォームの「回答」タブから設定しておいてください。

結局、立ち上げでやったことの順番

順番には理由があります。特に最初の1つは、後回しにすると取り返しがつきません。

  1. パーマリンクを「投稿名」に設定：記事を書いたあとに変えると全記事のURLが変わります。最優先
  2. 無料独自SSLの適用：httpsでないと、あとで使う機能がいくつか動きません
  3. 固定ページを3枚：プライバシーポリシー、お問い合わせ、運営者情報。AdSenseでもアフィリエイトでも前提になります
  4. カテゴリを決める：最初は少なく。スラッグは必ず英数字にすること（日本語のままだとURLが読めない文字列になります）
  5. XMLサイトマップを用意：この記事の落とし穴1
  6. Search ConsoleとGA4を接続：記事を書き始める前に入れないと、初期のデータが残りません

Search Consoleの所有権確認は、AFFINGERの「Google・広告」にサーチコンソールHTMLタグという専用の入力欄があります。ただしここに入れるのはメタタグ全体ではなくcontentの中身だけなので、コピーしたタグをそのまま貼ると通りません。

まとめ

3つとも、「壊れている」わけではありませんでした。テーマの設計思想だったり、サーバーが親切で厳しめの初期設定になっていたり、そもそも別の手段のほうが適切だったり。理由が分かればどれも数分で片付きます。

この構成で立ち上げる人の時間が少しでも短くなればうれしいです。次はブログのトップページを、デモのままではなく自分のものにしていきます。

Recommend

-作ってみた