php - Enqueue assets from multiple directories using add_actiondo_action

admin管理员组

文章数量:1387404

I might not be using the actions correctly, but I think they work for my idea? Maybe? I'm trying to enqueue js and css from various directories based on do_actions.

To simplify my setup and to make this easier to explain:

Root:

• assets
  • css
    • global.css
  • js
    • global.js
• functions.php
• components
  • card
    • script.js
    • style.css
    • card.php
  • teaser
    • script.js
    • style.css
    • teaser.php
• index.php

On my index.php, I have get_template_part( '/components/card/card' ); and get_template_part( '/components/teaser/teaser' );

on my functions.php, I'm enqueuing the global.css and global.js, I also want to enqueue component assets based on do_action. Thinking, this will ONLY enqueue if the page uses that component.

Within each of those components, I have some basic HTML. But on top I have a do_action( 'enqueue_custom_assets', 'card', '/components/card/' );

My goal is, on the homepage, for this example. global.css, component/card/style.css, component/teaser/style.css would load. Not combined but as individual .css files.

So, more details for the functions.php. My idea was to create an array via do_action. I am declaring a global var, then when the action is called, it updates the array. That part kinda works, but it processes each time the component is called ( which I understand ). Anywho, I update the array but I can't seem to figure out a way to have the wp_enqueue_scripts add_action, to run after the array is created. If I could have it run after the array is created, I would be able to loop through the array and enqueue each .css and .js.

function setup() {
    $n = function( $function ) {
        return __NAMESPACE__ . "\\$function";
    };

    add_action( 'after_setup_theme', $n( 'i18n' ) );
    add_action( 'after_setup_theme', $n( 'theme_setup' ) );
    add_action( 'init', $n( 'global_var' ), 0 );
    add_action( 'custom_assets', $n( 'enqueue_custom_assets' ), 1, 2 );
    add_action( 'wp_enqueue_scripts', $n( 'scripts' ) );
    add_action( 'wp_enqueue_scripts', $n( 'styles' ) );
    add_action( 'wp_head', $n( 'js_detection' ), 0 );
    add_action( 'wp_head', $n( 'add_manifest' ), 10 );

    add_filter( 'script_loader_tag', $n( 'script_loader_tag' ), 10, 2 );
}

/**
 * Create global var
 */
function global_var() {
    global $assets_to_load;
    global $index;
    $index          = 0;
    $assets_to_load = array();
}

The commented out enqueues work, but they output after the global, and I don't want that. I want the global assets to be enqueued last.

/**
 * Register scripts / styles for front-end.
 *
 * @param string $handle Handle
 * @param string $file_path Path of the files
 */
function enqueue_custom_assets( $handle, $file_path ) {

    // wp_enqueue_script(
    // $handle,
    // TEMPLATE_URL . $file_path . 'script.js',
    // [],
    // VERSION,
    // true
    // );

    // wp_enqueue_style(
    // $handle,
    // TEMPLATE_URL . $file_path . 'style.css',
    // [],
    // VERSION,
    // true
    // );

    global $assets_to_load;
    global $index;
    $added = null;
    $obj   = [];
    if ( ! array_key_exists( $handle, $assets_to_load ) ) {
        $obj['handle']            = $handle;
        $obj['css']               = $file_path . 'style.css';
        $obj['js']                = $file_path . 'script.js';
        $assets_to_load[ $index ] = $obj;
    }
    $added = $handle;
    echo ' ran ' . $index;
    $index++;
}

This doesn't work just yet. It kinda works, but its not optimized but that's due to the array above processing every time the do_action is called.

/**
 * Enqueue scripts for front-end.
 *
 * @return void
 */
function scripts() {

    global $assets_to_load;

    foreach ( $assets_to_load as $asset_to_load ) {
        wp_enqueue_script(
            $asset_to_load['handle'],
            TEMPLATE_URL . $asset_to_load['js'],
            [],
            VERSION,
            true
        );
    }

    wp_enqueue_script(
        'frontend',
        TEMPLATE_URL . '/dist/js/global.js',
        [],
        VERSION,
        true
    );
}

card.php

<?php
do_action( 'custom_assets', 'card', '/components/card/' );
?>

<div class="card">
    <div class="card__title">
        CARD TEST COMPONENT
    </div>
</div>

This is where I'm at and a bit stuck. Any suggestions / direction would be appreciated.

本文标签： phpEnqueue assets from multiple directories using addactiondoaction