法律やサイバーセキュリティのテーマは、ITリサーチ・アートでブログを書くのですが、それ以外の趣味とかのブログを書きためるスペースがほしいと思って、comit.jpのサイトのお引っ越しをしたのをきっかけに、ミスターIT の部屋をつくってみました。
趣味としてAIをいじってみているところですが、Claudeでwordpressのテーマを作成してみました。
wordpressのテーマでロゴをいれることのできるテーマをつくれますか。趣味のページで、スポーツや株式投資などがメインのブログになります。
とChatでいれたところ
レイアウトはどれがよいですか?
右サイドバー付き2カラム(おすすめ)
全体の雰囲気・配色は?
スポーティ×知的(おすすめ)
入れたい機能を選んでください(複数可)
ロゴ+ダークモード切替
テーマの方式はどちらにしますか?
クラシックテーマ(おすすめ)
などが質問されて、このページのテーマが自動的にできました。作成手順を紹介するページとしては
があります。が、これらのページをすることなく、簡単にできてしまいました。イメージは、こんな感じです。
もっとも、データベース等を利用する場合については、セキュリティなどの確認をするように推奨されています。
ということで、「セキュリティなどの確認は、大丈夫でしょうか。」と聞いたところ
セキュリティは、ここまで専用の点検をしていませんでした。エスケープなどには気を付けて書きましたが、確認したとは言えない状態です。これから実際にコードを点検します。
4個のコマンドを実行しました, ファイルを検索しました, ファイルを共有しました
点検した範囲では重大な問題は見つかりませんでした。小さな修正を2点入れ、修正版のzipを送り直しています。ただし、WordPress用の自動検査ツール(コーディング規約チェッカーなど)は、この環境から配布元に接続できず実行できていません。以下は、コードを実際に読んで確認した結果です。
問題がなかった点
入力の扱い: テーマは、URLパラメータやフォーム入力を自前で読み取る処理をしていません。データベースへの直接アクセス、eval、外部サーバーへの通信もありません。検索や投稿コメントはWordPress本体の機能だけで処理しています。
直接アクセス: 全PHPファイルの先頭に、URLから直接開かれても実行を止める記述があります。
出力の安全性: 画面に出す値は、サイト名・カテゴリー名・日付・リンクなどすべてエスケープ関数を通しています。管理画面で入力する設定値も、色は16進数、ロゴの高さは24〜120の数値、ロゴ画像は画像かどうかを確認してから使っています。
外部への影響: 外部のフォントやスクリプトを読み込んでいないため、閲覧者の情報が第三者に送られることはありません。ダークモードの設定を保存するのも、閲覧者のブラウザ内だけです。
という検討がなされた上で、修正ファイルができました。そこで、このファイルをテーマとしてwordpressにアップロードして、使っています。
「このテーマを公開配布したり販売したりする場合は、WordPress公式の Theme Check などによる検査をお勧めします。」とのことで、WordPress公式の Theme Checkというのは、WordPress のテーマが公式ディレクトリの要件を満たしているかを自動で調べる、公式のプラグインです。WordPress の公式ページによると公式ディレクトリ(WordPress.org theme directory )に載せるテーマは、これをエラーなしで通す必要があるとされています(https://make.wordpress.org/themes/handbook/review/required/theme-check-plugin/)。
(おまけ)Facebookに投稿してみて
Facebookにこのブログを作成したことを投稿してみたところ、いつもは、でてくるプレビュー画面が403 Forbiddenのコメントになってでてきませんでした。この原因については
Facebook の取得用プログラム(名前は facebookexternalhit)だけがサーバー側で拒否されている可能性が高いです。
考えられる原因(可能性が高い順)
WAF やセキュリティプラグインの遮断。 ホスティング会社の WAF 機能、SiteGuard WP Plugin や Wordfence などのプラグイン、Cloudflare などが、Facebook の取得プログラムを不審なボットとして拒否している場合です。
国外IPアクセス制限。 Facebook の取得プログラムは海外のIPアドレスから来ることが多く、日本国内のIPしか許可しない設定だと弾かれます。ホスティングの管理画面や、.htaccess にある設定です。
アクセス元による拒否設定。 .htaccess やプラグインで、特定のボットのアクセスを弾く設定が入っている場合です。
ということでした。そして、Facebook の「シェアデバッガー」(developers.facebook.com/tools/debug/)にURLを入れて「デバッグ」を押すことが推奨されました。その結果、「不正なレスポンスコード URLがエラーHTTPステークスコードを返しました。」という回答が返ってきました。具体的には
レスポンスコード 403
レスポンスコードの理由 This response code could be due to a robots.txt block. Please allowlist facebookexternalhit on your sites robots.txt config to utilize Facebook scraping
となりました。「ただし、画面の「robots.txt の可能性」という文言は、403 のときに Facebook が定型的に出す説明です。原因が robots.txt だと示しているわけではありません。robots.txt はボットへのお願いにすぎず、それだけでは、サーバーが 403 で拒否することにはなりません。」とのことです。原因が「User-Agent(アクセス元の名乗り)による拒否」か「アクセス元のIPアドレスによる拒否」かは、次の確認で切り分けられるということで
Windows の「PowerShell」の場合:
curl.exe -sL -o NUL -w "%{http_code}" -A "facebookexternalhit/1.1" "https://www.comit.jp/?p=50"として、200が返ってきました。Claudeによると結果の見方は次のとおりです。
- 403 が出た場合: User-Agent による拒否です。WAF、セキュリティプラグイン、
.htaccessのいずれかに、facebookexternalhit を弾く設定があります。前回お伝えした手順1〜4のうち、プラグインの一時停止と WAF の確認が該当します。 - 200 が出た場合: 名乗りではなく、アクセス元のIPアドレスが原因です。国外IPアクセス制限が最も疑わしく、ホスティングの管理画面で確認してください。
ということで、国外IPアクセス制限が最も疑わしく、ホスティングの管理画面で確認してくださいとなりました。確認したところ、私の利用しているホスティングのサービスでは、
となりました。ということで、このアクセス制限を解除したところ、無事、プレビューがでるようになりました。