WordPress の表示でつまずいた5点｜リンクの変換、日本語の太字、共有用の画像、テーマの部品の流用

開発記録（第12回）。AI に日本株の売買判断をさせる投資システム investTool を個人で開発しています。全体像は目次記事にまとめています。

この記事の要点

固定ページの文面を Markdown のプレビューからコピーしたら、内部リンク8本のうち7本が壊れていました
日本語の Markdown では、括弧の直後に ** を閉じると太字にならず、記号がそのまま出ます
どれも画面の見た目では気づきにくく、HTML やリンク先を確かめて見つかりました

やりたかったこと
つまずいた点と解決
実際にどう使っているか
この記事の内容に近い書籍

やりたかったこと

新しく立ち上げた WordPress に、免責事項・プライバシーポリシーなどの固定ページを公開し、サイトの見た目を整えることです。文面は設計書（Markdown）に先に書いておき、それを WordPress に貼り付けました。

つまずいた点と解決

1. プレビューからコピーしたら、リンクが壊れた

症状: 固定ページの内部リンク8本のうち7本が、https://file+.vscode-resource.vscode-cdn.net/… のような存在しない URL になっていた
原因: Markdown のプレビューは、相対リンクをプレビューを表示している場所を基準にした URL に変えてから表示する。それをコピーした
対処: リンクを相対パス（/disclaimer/ など）に直す。今は記事を API で投稿し、コピーをやめた

文面の中のリンクは /disclaimer/ のような相対パスで書いていました。これを VS Code の Markdown のプレビュー画面からコピーすると、リンクはプレビュー側の URL（https://file+.vscode-resource.vscode-cdn.net/disclaimer/）になっていました。GitHub の画面からコピーしたページは、https://github.com/…/blob/…/contact になっていました。

リンクの文字は正しく表示されるため、画面を見ただけでは分かりません。各ページの HTML からリンクを抜き出し、1本ずつ開けるかを確かめて見つかりました。

2. 存在しない URL が、別のページに転送された

症状: まだ作っていない /about/ へのリンクを開くと、404 にならず、似た名前の /about-me/（リンクを置いたページ自身）に転送された
原因: WordPress は、存在しない URL を、前方一致するスラッグのページへ推測して転送する
対処: ページを作るまでリンクを外す。スラッグを決めるときは、前方一致で重なる組み合わせに注意する

運営者情報のページ（/about-me/）に、後で作る予定の「このサイトについて」（/about/）へのリンクを置いていました。リンク切れ（404）になると思って確かめると、/about/ は /about-me/ に転送されていました。

結果として、ページの中のリンクが自分自身に戻るという、404 より気づきにくい壊れ方になりました。リンクを確かめる道具でも「200 で開けた」と判定されるため、正常に見えます。

3. 日本語の Markdown で、太字にならない

症状: **実際の資金を用いない仮想売買（ペーパートレード）**です の ** が、太字にならずそのまま表示された
原因: 閉じる ** の直前が括弧、直後が文字だと、Markdown の規則（CommonMark）で閉じ記号と認識されない
対処: 括弧を太字の外に出す。投稿時に、変換後の本文に ** が残っていないかを検査する

英語は単語の間に空白があるので起きにくい問題ですが、日本語は空白を入れないため、括弧や句読点の後で太字を閉じると頻繁に起きます。同じ文書の他の太字は、閉じる記号の直後が空白・行末・句読点だったため問題ありませんでした。

ポイント

記事を自動で作るようになると、同じ問題が何度も起きます。今は、投稿の前に変換後の本文を検査し、** などの記号が残っていたら投稿を止めるようにしています。この連載の記事も、この検査を通してから投稿しています。

4. SNS で共有すると、テーマの見本画像が出る

症状: アイキャッチのないページ（トップページや固定ページ）の共有用の画像（og:image）が、テーマの見本のスクリーンショットになっていた
原因: テーマ（Cocoon）の既定の共有用の画像が、テーマ一覧に出る見本画像のままだった
対処: サイト共通の共有用の画像を作り、テーマの設定で既定の画像に指定する

X（旧 Twitter）などで共有すると、サイトと関係のないテーマの宣伝用の画像が表示される状態でした。共有用の画像は画面には表示されない部分なので、HTML の <meta property="og:image"> を見るまで気づけませんでした。

サイト名とキャッチフレーズを載せた画像（1200×630）を作り、テーマの設定で既定の画像にしました。

5. テーマの部品を流用したら、表示が崩れた

症状: サイドバーの自己紹介を、テーマのプロフィール欄の HTML をコピーして作ったら、画像が空白になり、改行も効かなかった
原因: コピーした HTML が、テーマ側の前提（アバター画像のサービスや、ユーザーの設定）ごと持ち込んでいた
対処: 自己紹介は、独自のクラス名を付けた HTML と CSS で書き直した

テーマが表示しているプロフィール欄の HTML をコピーし、文面だけを書き換えて「カスタム HTML」に貼りました。すると、次の問題が出ました。

問題	原因
アバター画像が空白	Gravatar（メールアドレスに紐づくアバター画像のサービス）を指していて、登録していなかった
URL にメールアドレスから作った文字列が入る	Gravatar の URL は、ログインユーザーのメールアドレスから作られる
改行が表示されない	HTML では、文章中の改行はそのまま表示されない
英単語の途中で折り返す	中央揃えのまま、長い英単語を並べていた