admin管理员组

文章数量:1122832

How can imports be added to the existing WordPress import map?


Preparing the Module

I have a JavaScript module threeDTest.js which is enqueued using a PHP short-code (set to run everywhere):

add_action('wp_enqueue_scripts', 'enqueue_three_d_script');

function enqueue_three_d_script() {
    wp_enqueue_script_module('three-d-script', SCRIPTS_DIR . 'threeDTest.js');
}

threeDTest.js requires the following imports:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Since threeDTest.js is a module, it requires a corresponding import map within the HTML <head> tag:

<script type="importmap">
    {
        "imports": {
            "three": "/[email protected]/build/three.module.js",
            "three/addons/": "/[email protected]/examples/jsm/"
        }
    }
</script>

Existing WP Import Map

But since WordPress already has an import map in the <head> tag, I am unable to add a new import map (there can only be one). The existing WordPress import map:

<script type="importmap" id="wp-importmap">
{
    "imports": {
        "@wordpress/interactivity":"/wp-includes/js/dist/interactivity.min.js?ver=ca61638fbb0e7d19027303ef6f49511b"
    }
}
</script>

Attempts

I have tried the following, but neither worked:

  • Adding a custom import map using add_action('wp_head', 'add_three_d_import_map'), but this creates an additional import map (there can only be one).
  • Injecting the required imports using JavaScript, but learned all the imports need to be present at page load.

Proof of Concept

Adding the code below to the print_import_map() function in class-wp-script-modules.php (core WordPress file in /wp-includes) does work:

$import_map['imports']['three'] = "/[email protected]/build/three.module.js";
$import_map['imports']['three/addons/'] = "/[email protected]/examples/jsm/";

But since class-wp-script-modules.php is a core WordPress file, it is subject to change in updates. So editing it manually is not an ideal solution.


Any Ideas?

Is there a clean solution to adding your own imports to the already existing WordPress import map?

Any input would be greatly appreciated.

How can imports be added to the existing WordPress import map?


Preparing the Module

I have a JavaScript module threeDTest.js which is enqueued using a PHP short-code (set to run everywhere):

add_action('wp_enqueue_scripts', 'enqueue_three_d_script');

function enqueue_three_d_script() {
    wp_enqueue_script_module('three-d-script', SCRIPTS_DIR . 'threeDTest.js');
}

threeDTest.js requires the following imports:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Since threeDTest.js is a module, it requires a corresponding import map within the HTML <head> tag:

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/[email protected]/build/three.module.js",
            "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
        }
    }
</script>

Existing WP Import Map

But since WordPress already has an import map in the <head> tag, I am unable to add a new import map (there can only be one). The existing WordPress import map:

<script type="importmap" id="wp-importmap">
{
    "imports": {
        "@wordpress/interactivity":"https://local-test-site.test/wp-includes/js/dist/interactivity.min.js?ver=ca61638fbb0e7d19027303ef6f49511b"
    }
}
</script>

Attempts

I have tried the following, but neither worked:

  • Adding a custom import map using add_action('wp_head', 'add_three_d_import_map'), but this creates an additional import map (there can only be one).
  • Injecting the required imports using JavaScript, but learned all the imports need to be present at page load.

Proof of Concept

Adding the code below to the print_import_map() function in class-wp-script-modules.php (core WordPress file in /wp-includes) does work:

$import_map['imports']['three'] = "https://unpkg.com/[email protected]/build/three.module.js";
$import_map['imports']['three/addons/'] = "https://unpkg.com/[email protected]/examples/jsm/";

But since class-wp-script-modules.php is a core WordPress file, it is subject to change in updates. So editing it manually is not an ideal solution.


Any Ideas?

Is there a clean solution to adding your own imports to the already existing WordPress import map?

Any input would be greatly appreciated.

  • php
  • plugin-development
  • javascript
  • hooks
  • core
Share Improve this question edited Sep 8, 2024 at 16:25 Dave asked Sep 8, 2024 at 9:46 DaveDave 113 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

Turns out to be quite simple in WordPress 6.5.

Use wp_register_script_module to register the imports, and include them as dependencies in wp_enqueue_script_module:

add_action('wp_enqueue_scripts', 'enqueue_three_d_script');

function enqueue_three_d_script() {
    wp_register_script_module(
        'three',
        "https://unpkg.com/[email protected]/build/three.module.js",
        array(),
        null
    );
    wp_register_script_module(
        'three/addons/',
        "https://unpkg.com/[email protected]/examples/jsm/",
        array(),
        null
    );
    wp_enqueue_script_module(
        'three-d-script', 
        SCRIPTS_DIR . 'threeDTest.js', 
        array('three', 'three/addons/'), 
        null
    );
}

本文标签： phpAdd Imports to Existing WordPress Import Map

版权声明：本文标题：php - Add Imports to Existing WordPress Import Map 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736294736a1929421.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。