لقد كنت أحاول العمل على سمة WordPress الكلاسيكية الأساسية دون خطوات البناء التي يمكنني استخدامها كموضوع بداية ربما لتطوير مواقع العملاء في المستقبل. في وقت كتابة هذا المقال، لم أكن أقوم بأي أعمال مستقلة لأنني أعمل في وكالة ويب والمواقع التي نبنيها كلها تتضمن خطوات بناء. لذلك فكرت في كتابة برنامج تعليمي قصير حول كيفية استخدام importmap في قالب WordPress.

Career Tracker هو مشروع جانبي موجود بالفعل يستخدم خريطة الاستيراد بدون خطوة بناء، ولكنه تطبيق JavaScript خالص.

دعونا نرى كيف يمكننا القيام بذلك في عالم WordPress.

Enqueue البرنامج النصي للوحدة النمطية

في ملف jobs.php الخاص بي، أقوم بوضع ملف JavaScript app.js في قائمة الانتظار كبرنامج نصي للوحدة باستخدام وظيفة wp_enqueue_script_module من WordPress.

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

كما ترون في بنية الملفات هذه، أحتاج إلى استيراد ملف Index.js من مجلد utils وmenu.js من مجلد المكونات إلى app.js الخاص بي. قبل أن نضيف خريطة الاستيراد، دعونا نرى كيف سيبدو عندما أقوم باستيراد هذين الملفين مثل هذا في ملف 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 الخاصة بالقالب. قد تحتاج إلى تقديم هذا الجزء بلغة php حتى تتمكن من الحصول على عنوان url الديناميكي للمجلد الثابت.

استخدمه في تطبيقي app.js

الآن مع إعداد importmap، على الرغم من أن هذه ليست بيئة Node، لا يزال بإمكاننا استيراد الملفات ضمن البنية التي نعرفها. ضع في اعتبارك أن الملفات يجب أن تنتهي بـ .js.

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

إذا قمت بإزالة .js من utils/index.js الخاص بي إلى utils/index، فسيقوم المتصفح بتسجيل هذا الخطأ في وحدة التحكم.

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

أضف ملفات من CDN إلى خريطة الاستيراد الخاصة بنا

أحصل على رابط CDN لمجموعة مكونات الويب الخاصة بي وأضيفه إلى خريطة الاستيراد الخاصة بي. بمجرد الإضافة، يمكننا الآن استيراد مكونات الويب إلى 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";

بالنسبة لمكونات الويب، من الواضح أنني لا أستخدمها في قالب WordPress الخاص بي، ولكن يمكنك التحقق من المشروع الجانبي Career Tracker الذي ذكرته في البداية لمعرفة كيفية عمله.