脱WordPress、始めました(第1回)

この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

こんにちは、あるいはごきげんよう。
888FXです。

今回はトレードの話じゃなく、このブログそのものの話。……実は今、このブログをWordPressから引っ越し中です。

私はもう十年以上、運営しているサイトのほとんどがWordPress。それをやめる。AIと一緒に。やってみたら、詰まるところはちゃんと詰まって、楽なところは拍子抜けするほど楽。たぶん、これから試す人もみんな同じところでつまずくはず。なので、その行程をぜんぶ書いておきます。

シリーズ「脱WordPress、始めました」、第1回です。

なぜ、脱WordPressなのか

きっかけは、先月のPHPの脆弱性のニュース。PHPといえばWordPress。WordPressはPHPで動いています。つまり、このブログもその上に乗っている。

そしてその直後、GMO(お名前.com)のVPSへの不正アクセス。僕はそのVPSを7年くらい、つい去年まで使っていました。……いや、他人事じゃない。この件は以前の記事でも書いたので、気になる人はそちらも。

プロップファーム挑戦Day14:4000割れとお名前.com VPS不正アクセス。

WordPress自体が悪いわけじゃない。でも、PHPもサーバーもプラグインも、ずっと自分で面倒を見続けなきゃいけない。更新を忘れたら穴になる。何年も運営してきて、その「見張り」に疲れていたのかも。……なら、PHPを使わない仕組みに移ればいいじゃないか。

AI前提で選ぶ、今どきのCMS

そこでAIに相談しながら、候補を並べてみました。ポイントは「AIと一緒に作りやすいか」。

候補どんなもの?ひとこと
EmDashWordPressの後継を目指す新しいCMS。PHPを使わない管理画面がWordPressに似ていて迷わない。今回はこれ
Astro+Markdown記事をただのテキストファイルで管理一番シンプル。管理画面はない
Ghostブログ・ニュースレター向けメルマガや有料会員をやるなら
Webflowノーコードでデザイン見た目は自由。ただし月額制
Sanity・Payload開発者向けの本格派気軽に始めるには重い

結局、最後に残るのは「記事の中身」だけ。それさえ持ち出せれば、どこへでも引っ越せる。なので一択にはしない。まずはEmDashでやってみる、という負けない姿勢でいきます。

準備:まずはNode.jsを入れる

EmDashは、PHPの代わりにNode.jsという仕組みで動きます。今回はいきなり本番に置かず、自分のPCの中(ローカル環境)で作って、完成してから公開する作戦。

※PowerShellは、Windowsのスタートボタンを右クリック →「ターミナル」(Windows 10は「Windows PowerShell」)で開けます。

で、PowerShellを開いて確認したら……

そもそも入っていない(笑)。ここからかい!……でも、コマンド1行で入ります。

winget install OpenJS.NodeJS.LTS

ちなみに、次の一歩でもう一回つまずきました。npmを動かそうとしたら、Windowsの安全機能で「このスクリプトは実行できません」。これもコマンド1行。

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

どちらも「何を打てばいいか」はAIに聞いて、そのまま貼るだけ。エラー画面をそのまま見せればいいので、黒い画面が苦手でも何とかなります。

EmDashを作る:質問に答えるだけ

ここは拍子抜け。コマンドを打つと、「プロジェクト名は?」「どこに置く?」「テンプレートは?」と聞いてくるので、答えていくだけ。

置き場所は「Node.js」、テンプレートは「Starter」。必要な部品のインストールも自動で、約30秒。

あとは npm run dev で起動して、ブラウザで開くだけ。

サイト名を入れて、ログインはパスワードではなくパスキー(指紋や顔認証)。このあたりも今どき。で、管理画面がこちら。

左に「投稿」「ページ」「メディア」「カテゴリー」「タグ」……。WordPressを使っていた人なら、ほぼ迷わないと思います。それもそのはずで、EmDashは「WordPressの後継」を目指して作られています。管理画面は似ているのに、中身は別物。

移行プラグインで、挫折

次は記事の引っ越し。EmDashには、WordPressから丸ごと持ってくるための専用プラグインがあります。……が、まずこれがどこにあるのか分からない。WordPressのプラグイン検索では出てこないんですよね。

置き場所はGitHub。「emdash-cms / wp-emdash」というページの右側にある「Releases」から。

ページを下に進むと「Assets」が3つ並んでいて、落とすのは一番上の emdash-exporter.zip。「Source code」の方を落とすと、WordPressに入れても動きません。ここ、引っかかる人多そう。

あとはWordPressの「プラグインを追加」→「プラグインのアップロード」で入れるだけ。

有効化すると「ツール」に「EmDash Migration」が出てきて、サイトのチェックが走ります。結果は、全部クリア。いい感じじゃん。

ここで「移行キー」を作って、EmDash側に貼り付ける。……と、

「You must be authenticated with export permissions.」。チェックは全部通ってるのに?何度やっても同じ。調べてみると、開発元でもすでに報告されている不具合らしい。つまり、こちらではどうにもならない。……挫折。

この移行キー、持っている人はサイトの中身を全部読めてしまうもの。使い終わったら、WordPress側で必ず無効化しておきましょう。スクショを撮る時も注意。

WordPress標準の「エクスポート」なら、一発だった

で、もう一つの方法。WordPressに最初からついているツール → エクスポート。何年もWordPressを使っていて、たぶん一度も押したことがないボタン(笑)。

「すべてのコンテンツ」を選んでダウンロード。XMLというファイルが1つ落ちてきます。これをEmDashの「インポート」に渡すだけ。

記事64件、固定ページ2件。次に画像。

165件の画像をWordPressから自動でダウンロードして、記事の中の画像の場所まで書き換えてくれる。で、

以上、終わり。……え、これだけ?さっきの挫折は何だったんだ。

プラグインも移行キーもGitHubもいらない。WordPressから移るなら、まずは標準のエクスポート。これが今回一番伝えたいことかも。

取り込んだ直後の、素の姿

さっそくサイトを開いてみると……

すんごい見た目(笑)。文字は小さいし、画像はそのままだし、リンクは青い。……でも、これで正常。

WordPressの「テーマ」にあたる部分が、まだ空っぽなだけ。記事も画像も、中身はぜんぶ入っています。ここから見た目を作っていく。

ローカルで、AIとデザインを作る

ここからが、今回一番楽しかったところ。

やり方は、AIに「こうしたい」を言うだけ。AIが自分のPCの中のファイルを直接書き換えて、ブラウザを更新するともう変わっている。たとえば、実際に頼んだのはこんな感じ。

  • 「ダーク系は最近多すぎるから廃止。旧ブログの色味で」
  • 「グリッドは横4列じゃなく3列。フィルターは中央に」
  • 「記事ページの幅が狭すぎて、昔のサイトっぽい」
  • 「目次はもっと小さく、最初は閉じておいて」

専門用語はいらない。参考にしたいサイトのスクショを渡すだけでも伝わります。

昔挫折した「絞り込み」が、あっさり

実はこのブログでずっとやりたかったのが、トップの記事を口座ごとに絞り込めるタイル表示。昔WordPressで挑戦して、タイルまでは作れたけど絞り込みで挫折。結局、海外の有料プラグインを買った記憶があります。

それが今回は、会話しているうちにできた。「これ、やりたかったのは!」って声が出た(笑)。カードが小さく消えて、残ったカードがふわっと出てくる。プラグインは使っていません。

さっきの素の姿から、パンくずも目次もついて、ちゃんと「ブログ」になりました。画面の下の黒いバーは、ログイン中だけ出る「編集モード」のスイッチ。ページを見たまま、その場で文章を直せます。

もちろん、エラーも出る

全部がすんなりいくわけじゃない。書き換えたら赤いエラー画面、なんてことも。でも、その画面をそのままAIに渡せば、原因を見つけて直してくれる。大事なのは、壊しても戻せるようにしておくこと。

そこで使っているのがGit。ゲームのセーブポイントみたいなもので、「見た目を確認して、よければ保存」を繰り返すだけ。気に入らなければ、前の状態に戻せる。正直Gitは苦手だけど、やっているのはこの2行だけ。

git add .
git commit -m "変更内容のメモ"

ちなみに最初の保存では「名前とメールアドレスを登録して」と怒られました。ここもみんな通る道のはず。

自分のPCの中で、AIと会話しながら作って、壊して、戻して、また作る。これが今どきのサイトの作り方な気がします。

まとめ:つまずくところは、みんな同じ

ここまでやってみて、つまずいたのはこのあたり。

  • Node.jsが入っていない・Windowsにスクリプトを止められる
  • 移行プラグインの置き場所が分からない、入れてもエラー
  • Gitの最初の保存で怒られる

どれも、エラー画面をAIに見せれば数分で解決。そして一番の発見は、記事の引っ越しはWordPress標準のエクスポートで十分だったこと。何年もWordPressを使ってきて、一番使っていなかったボタンが、一番役に立ちました。

今はまだ、自分のPCの中だけで動いている状態。次回はいよいよ本番公開です。……うまくいけば、その記事はEmDashからお届けします。

それまで、日々のトレード日誌はこのWordPressで続けます。