WordPress ウェブサイトで Importmap を使用する方法-jsチュートリアル-php.cn

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

DDD

リリース： 2024-09-13 18:15:10

オリジナル

587 人が閲覧しました

How to Use Importmap in a WordPress Website

私は、将来クライアントサイトを開発するためのスターターテーマとして使用できる、ビルド手順なしの基本的な 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 サイトの他の関連記事を参照してください。