背景

gatsbyは素晴らしいですね。
簡単に静的サイトが作れて、かつReact.jsをガリガリ書けばカスタマイズ性も抜群。

欠点としてはworedpressのように記事を管理する機能(CMS)がないことです。

それを補う方法としてgatsbyにはプラグインとしてgatsby-source-wordpressが用意されており、このプラグインはwordpress APIを使って既存のwordpressのサイトからAPI経由で記事を持ってくることができます。

実際に使う時はgatsby-theme-wordpress-mdxとともに使いうと、一瞬で静的サイトを作ることができます(詳しい作り方は別に投稿します)。

課題

大変便利なgatsby-theme-wordpress-mdxですが、欠点としてwordpress側のURLに日本語が含まれている場合、下のようなエラーが出てしまい使えません。

どうやらURLエンコーディングに対応できていないようです。

解決策

クライアント側での解決策をいろいろ探したのですが、どうすることもできないようなのでwordpress側で対応します。

URLに日本語が含まれなければ良いのです。

普通にwordpressを使っている場合、wordpressの記事のURL末尾に自動的に付与される"slug"と呼ばれる部分が日本語になって今います。

http://[ドメイン]/2021/02/20/[slugはこの部分]/

そこで、wordpressのfunction.phpを弄ってslug部分を日本語からpost-[id]に変更します。

function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
    if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {
        $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;
    }
    return $slug;
}
add_filter('wp_unique_post_slug', 'auto_post_slug', 10, 4  );

すると、urlから日本語がなくなるのでクライアント側で問題なく投稿記事が見れるはずです。