WordPress首次开发插件：CSS与JS入队无效果求助

Hey there! Let's break down the problems in your code and fix them so your CSS and JS files load properly on both front-end and admin pages.

Key Issues in Your Current Code #

• Only targeting admin pages: You're only using the admin_enqueue_scripts hook, which loads assets only in the WordPress admin. To load assets on the front-end, you need to also hook into wp_enqueue_scripts.
• Typos in file path: assests is misspelled—it should be assets (double 's'). If your folder is named assets (the standard), this typo is causing WordPress to look for files in a non-existent directory.
• Class name case inconsistency: You check for class_exists('Firstp') but instantiate new firstp(). PHP class names are case-sensitive on Linux servers, which will cause errors in production. Stick to consistent casing.

Fixed Code Example #

Here's a revised version of your code with all these issues addressed:

class Firstp {
    public function __construct() {
        // Hook into both front-end and admin asset enqueue actions
        add_action('wp_enqueue_scripts', array($this, 'enqueue'));
        add_action('admin_enqueue_scripts', array($this, 'enqueue'));
    }

    public function enqueue() {
        // Load CSS - fixed the folder name typo
        wp_enqueue_style(
            'mypluginstyle',
            plugins_url('/assets/mystyle.css', __FILE__)
        );

        // Load JS - added jQuery dependency (remove if your JS doesn't need it)
        wp_enqueue_script(
            'mypluginscript',
            plugins_url('/assets/myscript.js', __FILE__),
            array('jquery'), // Dependency: load jQuery first
            '1.0', // Version number (helps with caching)
            true // Load script in footer (better for performance)
        );
    }
}

// Initialize the class
if (!class_exists('Firstp')) {
    $firstp = new Firstp();
}

Additional Debugging Tips #

• Check for 404 errors: Open your browser's DevTools (F12) → go to the "Network" tab, reload the page, and look for your CSS/JS files. If they show a 404 status, double-check the folder structure and file paths.
• Verify asset loading: View your page's source code (Ctrl+U) and search for mypluginstyle or mypluginscript to confirm the assets are being added to the page.
• Clear cache: If you're using a caching plugin or server-side cache, clear it after making code changes to ensure you're seeing the latest version.

内容的提问来源于stack exchange，提问作者Abdel Hafiz Al Iaali