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.
にインポートするとどうなるかを見てみましょう。

// Utilsimport { onDocumentReady } from \\'./utils/index.js\\';// Componentsimport Menu from \\'./components/menu.js\\';

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

// Utilsimport { onDocumentReady } from \\'utils/index.js\\';// Componentsimport 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 でレンダリングする必要がある場合があります。

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

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

// Utilsimport { onDocumentReady } from \\'utils/index.js\\';// Componentsimport 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 からインポートマップにファイルを追加します

Web コンポーネント コレクションへの CDN リンクを取得し、インポートマップに追加します。追加したら、次のようにして 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 をチェックして、それらがどのように機能するかを確認できます。

","image":"http://www.luping.net/uploads/20241003/172792980566fe1dcd107d6.jpg","datePublished":"2024-11-01T00:21:15+08:00","dateModified":"2024-11-01T00:21:15+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > WordPress ウェブサイトで Importmap を使用する方法

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

2024 年 11 月 1 日に公開
ブラウズ:470

How to Use Importmap in a WordPress Website

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

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

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

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

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

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

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


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 でレンダリングする必要がある場合があります。


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

インポートマップのセットアップにより、これが 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 からインポートマップにファイルを追加します


Web コンポーネント コレクションへの CDN リンクを取得し、インポートマップに追加します。追加したら、次のようにして 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 をチェックして、それらがどのように機能するかを確認できます。

リリースステートメント この記事は次の場所に転載されています: https://dev.to/heybran/how-to-use-importmap-in-a-wordpress-website-1cnd?1 侵害がある場合は、[email protected] に連絡して削除してください。それ
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3