wordpressにsvelteを組み込みたい

発端

とある案件でSvelteKitを使用。

当初、CMSを導入する予定はなく静的にページを数十ページ作って終わる予定であった。

が、リリース後、CMSでの更新はできないか？との相談が。相談という名の絶対事項が発生。

さてどうしよう、headlessCMSを提案しよう。
提案資料を作って代理店とクライアントへ説明。

「WordPressが無料なのに知らない有料のCMSは使えないよ〜笑。」

おっしゃる通りである。
中小や零細企業にとって、ウェブサイトというのはサーバー費用・ドメイン費用・無料のCMSで今まで出来上がってきた。
わざわざ費用を捻出する必要性を考えたらWordPressで十分なのである。
セキュリティリスクなんて知らんのである。

リスクヘッジしたとて、リスクヘッジにかけるコストよりもサイトが停止するくらいのコストのほうが低いと見積もってしまうのだ。

例えば、とあるCMSのプラン。
約5,000円 X 12ヶ月 = 60,000
年間６０，０００円が最低でも加算される。おそらくここにメリットがクライアントからすると見いだせないのだ。
無論、コーポレートブランディングやガバナンスがしっかりしていればいるほどセキュアなheadlessCMSへ傾倒していそうなものではあるが。

話が明後日の方向へだいぶそれましたが、
背景は以上。
SvelteKit + wordpress(+svelte)の話へ移行したいと思います

もちろん、上記のこともあってgithubActionsやCICDの話は頭出しだけして諦めた。

実導入

さて、なぜSvelteを入れたかったのか、ヘッダー・フッターコンポーネントを使いたかったからである。
jsでゴリゴリに作られたヘッダー・フッターをイベント含めて生のjsで書き直すのは些か面倒。
ゆえにesbuildとSvelteで書きました。
以下手順。

yarn add esbuild esbuild-svelte svelte

まずyarn add でそれぞれのmoduleをインストール・

package.jsonにscriptを追加。

  "scripts": {
    "js": "node buildscript.js",
  },

buildscript.jsを作ります。

buildscript.js

import fs from "fs";
import esbuild from "esbuild";
import sveltePlugin from "esbuild-svelte";
import sveltePreprocess from "svelte-preprocess";

const entryPoint = "./src/js/entry.js";
const outputDir = "./public/wp-content/themes/themeName/assets/js/";

const buildProject = () => {
  esbuild
    .build({
      entryPoints: [entryPoint],
      mainFields: ["svelte", "browser", "module", "main"],
      conditions: ["svelte", "browser"],
      outdir: outputDir,
      format: "esm",
      logLevel: "info",
      minify: false,
      bundle: true,
      splitting: true,
      sourcemap: "inline",
      plugins: [
        sveltePlugin({
          preprocess: sveltePreprocess(),
        }),
      ],
    })
    .catch((err) => {
      console.error(err);
      process.exit(1);
    });
};

buildProject();

fs.watch("./src/js/", { recursive: true }, (eventType, filename) => {
  if (filename && eventType === "change") {
    console.log(`File ${filename} changed. Rebuilding...`);
    buildProject();
  }
});

これでsrc/js/entry.jsをビルドしてWordPressのテーマフォルダへアウトプットする準備ができました。

あとは、以下のファイルで動かせます。（もろもろ割愛）

entry.js

// header component
import Header from "./Header.svelte";

// 挿入したい場所を指定してオブジェクトを生成
new Header({
    target: document.getElementById("#header"),
});

Header.svelte

<script>
  export let open;
  function MenuToggle () {
    open = !open;
  }

</script>


<header id="header">
  <button class={open ? 'menu-toggle:open' : 'menu-toggle'} on:click={MenuToggle}></button>
</header>

<style lang="scss">
#header {
  display: block;
}

.menu-toggle {
  display:none;
  &\:open {
    display:block;
  }
}
</style>

yarn run jsをすると outputDirで指定した　./public/wp-content/themes/themeName/assets/js/にentry.jsとentry.cssが生成されます。
これをtheme内のヘッダーなり、function.phpで指定してあげるなりして読み込めばOKです。

備忘録含めて残しておきます。