WordPress ウェブサイトで Importmap を使用する方法

私は、将来クライアント サイトを開発するためのスターター テーマとして使用できる、ビルド手順なしの基本的な WordPress クラシック テーマに取り組んでいます。この記事を書いている時点では、私は Web 代理店で働いており、構築しているサイトにはすべてビルド ステップが含まれているため、フリーランスの仕事はしていません。そこで、WordPress テーマで importmap を使用する方法についての短いチュートリアルを書こうと思いました。

Career Tracker は私の既存のサイド プロジェクトで、ビルド手順なしで importmap をすでに使用していますが、純粋な JavaScript アプリです。

WordPress の世界でそれを行う方法を見てみましょう。

エンキューモジュールスクリプト

テーマのfunctions.phpでは、JavaScriptファイルapp.jsをWordPressのwp_enqueue_script_module関数を使用したモジュールスクリプトとしてキューに入れます。

wp_enqueue_script_module( 'frontend-scripts', GEARUP_THEME_URL . '/static/js/app.js', [], GEARUP_THEME_VERSION, true );

これにより、フロントエンドの以下のスクリプトタグに出力されます。

<script type="module" src="http://test.local/wp-content/themes/GearUp/static/js/app.js?ver=0.1.0" id="frontend-scripts-js-module"></script>

JavaScript ファイルはテーマ フォルダーの静的フォルダーに配置されます。

static
├── css
│   ├── app.css
│   ├── global.css
│   ├── reset.css
│   ├── utils.css
│   └── variables.css
└── js
    ├── admin.js
    ├── app.js
    ├── components
    │   └── menu.js
    └── utils
        └── index.js

このファイル構造からわかるように、utils フォルダーからindex.js をインポートし、components フォルダーから menu.js を app.js にインポートする必要があります。 importmap を追加する前に、この 2 つのファイルを app.js にインポートするとどうなるかを見てみましょう。

// Utils
import { onDocumentReady } from './utils/index.js';
// Components
import Menu from './components/menu.js';

しかし、私が考えているのは、次のようなファイルをインポートすることです。

// Utils
import { onDocumentReady } from 'utils/index.js';
// Components
import Menu from 'components/menu.js';

インポートをこの形式に変更すると、ブラウザーはコンソールにこのエラーをスローします。

Uncaught TypeError: Failed to resolve module specifier "utils/index.js". Relative references must start with either "/", "./", or "../".

Importmap が助けに来ます

これをテンプレートの HTML head タグ内に追加します。静的フォルダーへの動的 URL を取得できるように、この部分を PHP でレンダリングする必要がある場合があります。

<script type="importmap">
    {
      "imports": {
        "utils/": "/wp-content/themes/GearUp/static/js/utils/",
        "components/": "/wp-content/themes/GearUp/static/js/components/"
      }
    }
</script>

私のapp.jsで使用してください

importmap のセットアップにより、これが Node 環境ではない場合でも、使い慣れた構造でファイルをインポートできます。ファイルは .js.
で終わる必要があることに注意してください。

// Utils
import { onDocumentReady } from 'utils/index.js';
// Components
import Menu from 'components/menu.js';

utils/index.js から .js を utils/index に削除すると、ブラウザーはこのエラーをコンソールに記録します。

GET http://test.local/wp-content/themes/GearUp/static/js/utils/index net::ERR_ABORTED 404 (Not Found)

CDN からインポートマップにファイルを追加します

<script type="importmap">
    {
      "imports": {
        "utils/": "/wp-content/themes/GearUp/static/js/utils/",
        "components/": "/wp-content/themes/GearUp/static/js/components/",
        "ccw/": "https://unpkg.com/cucumber-web-components@0.5.2/dist/"
      }
    }
</script>

Web コンポーネント コレクションへの CDN リンクを取得し、importmap に追加します。追加したら、次のようにして Web コンポーネントを app.js にインポートできるようになります。とても綺麗ですね?

import "ccw/side-nav/index.js";
import "ccw/side-nav-item/index.js";
import "ccw/icon/index.js";
import "ccw/form-layout/index.js";
import "ccw/text-field/index.js";
import "ccw/email-field/index.js";
import "ccw/date-picker/index.js";
import "ccw/option/index.js";
import "ccw/select/index.js";

Web コンポーネントについては、明らかに WordPress テーマでは使用していませんが、最初に説明したサイド プロジェクト Career Tracker をチェックして、それらがどのように機能するかを確認できます。

以上がWordPress ウェブサイトで Importmap を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。