插件在每个页面上加载脚本和样式-即使在不使用时也是如此

时间：2015-06-12 作者：W00tW00t111

我有一个使用类风格编程的插件。我完全被难住了——脚本被加载到每个页面上，即使插件没有在该页面上使用。

由于插件应该只在调用它的一个短代码时运行，我不明白为什么它们总是被排队。代码为：

<?php
if ( ! defined( \'ABSPATH\' ) ) exit; // Exit if accessed directly

add_action( \'plugins_loaded\', array ( \'Lipstick_Consultation\', \'init\' ));

if (!class_exists(\'Lipstick_Consultation\')){

//used for the script loader, to load custom jquery at the footer
$plugin_script = "";

class Lipstick_Consultation{

    public static function init() {
        $class = __CLASS__;
        new $class;
    }

    /**
     * @since 1.0
     */
    public function __construct() {

        //get contstants
        $this->setup_constants();

        //get file includes
        $this->includes();

        //register plugin shortcodes
        $this->register_shortcodes();

        //Register Styles
        add_action( \'wp_enqueue_scripts\', array( $this, \'register_styles\' ) );

        //Register Scripts
        add_action( \'wp_enqueue_scripts\', array( $this, \'register_scripts\' ) );

        $this->page_scripts();

        return $this;
    }

    /**
     * Include our Class files
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    private function includes() {

        /****SHORTCODES****/
        //[slider_person]
        require_once LC_DIR . \'inc/shortcodes/slider.php\';

        //[suggested_colors]
        require_once LC_DIR . \'inc/templates/tmpl-suggestedcolors.php\';
    }

    /**
     * Setup plugin constants
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    private function setup_constants() {

        // Plugin information
        define( \'LC_VERSION\',       \'1.0.0\' ); // Current plugin version
        define( \'LC_URL\',           plugin_dir_url( __FILE__ ) );
        define( \'LC_DIR\',           plugin_dir_path( __FILE__ ) );

    }

    /**
     * Register Styles
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    public function register_styles() {

        //main style file
        wp_register_style( \'consultation_style\', LC_URL . "assets/css/style.css", array(), time(), \'all\' );
        wp_enqueue_style( \'consultation_style\' );

        //styles for full page plugin
        wp_register_style( \'lc_full_page_style\', LC_URL . "assets/css/jquery.fullPage.css", array(), time(), \'all\' );
        wp_enqueue_style( \'lc_full_page_style\' );

    }

    /**
     * Register Scripts
     *
     * @access private
     * @since 1.0.0
     * @return void
     */
    public function register_scripts() {
        //Script that makes div have a scrollbar
        wp_register_script( \'lc_slim_scroll\', LC_URL . "assets/js/jquery.slimscroll". SUFFIX . ".js", array( \'jquery\' ), time() );
        wp_enqueue_script( \'lc_slim_scroll\' );


        //Script that makes full width/height/page divs
        wp_register_script( \'lc_full_page\', LC_URL . "assets/js/jquery.fullPage". SUFFIX . ".js", array( \'jquery\' ), time() );
        wp_enqueue_script( \'lc_full_page\' );

    }

    private function register_shortcodes(){
        //slider for "Choose You" Slider
        add_shortcode("lipstick_person", array(\'Lipstick_Consultation\', "shortcode_person_slider"));

        //Template for lipstick color suggestions
        add_shortcode("suggested_colors", array($this, "suggested_colors_template"));
    }

    private function page_scripts(){

        //load fullPage jquery code
        $this->add_full_page_script();

    }

    /*
    *function to echo the script that triggers the plugin
    */
    public function add_script_footer(){
        echo $this->plugin_script;
    } 

    /**********************************************************************/
    /**********************************************************************/
    /*************MAY BE BETTER TO INCLUDE THIS IN ITS OWN FILE************/
    /**********************************************************************/
    /**********************************************************************/

    /*
    * Add script to get the full page effect on all page elements (this is for the page content)
    */
    private function add_full_page_script(){
        ob_start();
    ?>
        <!--jQuery Function to Trigger the plugin for this page-->
        <script type="text/javascript">
        //on document ready
        jQuery(document).ready(function($){
            $(\'#fullpage\').fullpage({
                anchors:[\'instructions\', \'choose-you\', \'consultation-suggested-colors\', \'all-colors\'],
                scrollOverflow: true

                //look into the menu option https://github.com/alvarotrigo/fullPage.js

            });
        });


        </script>

    <?php
        //get jQuery script, set it as global script variable and call the WP callback
        $script = ob_get_contents();
        ob_end_clean();

        //set variable to the script above
        $this->plugin_script = $script;

        //call hook to add script to footer.
        add_action(\'wp_footer\', array($this,\'add_script_footer\'),20); 

    }
}
}
?>
如果我理解发生了什么，在plugins\\u加载的挂钩上，插件正在实例化。当调用construct方法时，它将授予脚本。这一切都有道理。

当查看其他插件时，它们似乎使用了类似的结构，然而，它们的脚本文件只有在该页面上调用插件时才会加载。

我做错了什么？谢谢

UPDATE #1

伙计们，我就是不知道怎么做。我对代码进行了以下编辑：

    public function __construct() {

        //get contstants
        $this->setup_constants();

        //get file includes
        $this->includes();

        //register plugin shortcodes
        $this->register_shortcodes();

        return $this;
    }

    /**
     * Registers the styles and scripts for the shortcodes
     */
    private function register_shortcode_requirements() {

        //Register Styles
        add_action( \'wp_enqueue_scripts\', array( $this, \'register_styles\' ) );

        //Register Scripts
        add_action( \'wp_enqueue_scripts\', array( $this, \'register_scripts\' ) );

    }

    /**
     * Register Styles
     */
    public function register_styles() {

        //main style file
        wp_register_script( \'consultation_style\', LC_URL . "assets/css/style.css", array(), time(), \'all\' );
        wp_enqueue_script( \'consultation_style\' );

        //styles for full page plugin
        wp_register_script( \'lc_full_page_style\', LC_URL . "assets/css/jquery.fullPage.css", array(), time(), \'all\' );
        wp_enqueue_script( \'lc_full_page_style\' );

    }

    /**
     * Register Scripts
     */
    public function register_scripts() {
        //Script that makes div have a scrollbar
        wp_register_script( \'lc_slim_scroll\', LC_URL . "assets/js/jquery.slimscroll". SUFFIX . ".js", array( \'jquery\' ), time() );
        wp_enqueue_script( \'lc_slim_scroll\' );


        //Script that makes full width/height/page divs
        wp_register_script( \'lc_full_page\', LC_URL . "assets/js/jquery.fullPage". SUFFIX . ".js", array( \'jquery\' ), time() );
        wp_enqueue_script( \'lc_full_page\' );

    }

    private function register_shortcodes(){
        //slider for "Choose You" Slider
        add_shortcode("lipstick_person", array($this,"shortcode_person_slider_caller"));

    }
    /*
    * Calling Function to include scripts and then fire the actual shortcode function contained in separate .php file
     */
    public function shortcode_person_slider_caller($atts, $content){

        //register styles/scripts
        $this->register_shortcode_requirements();

        //run actual function for rendering
        $content = shortcode_person_slider($atts);
        return $content;
    }
然后在调用者函数中shortcode_person_slider 是一个函数，包含在加载后的require\\u文件中。

该函数正在该函数中启动（使用var\\u转储测试），并显示。然而，内容并没有显示在页面上（即使$content包含所有html标记）。

此外，脚本/样式文件没有排队。

测试时register_shortcode_requirements() 正在激发，但每个wp\\u enqueue\\u脚本挂钩均未激发。

有什么建议吗？非常感谢。

2 个回复
最合适的回答,由SO网友:s_ha_dum 整理而成

正如Rarst已经指出的，您回答了您的问题。您正在告诉软件始终加载这些脚本。你需要控制这个过程。软件是愚蠢的。它无法决定何时加载代码。所以

由于插件应该只在调用其一个短代码时运行。。。

既然您说脚本应该只在使用短代码时加载，那么请继续注册您的脚本，然后在短代码处理程序中排队，如this from another question:

function my_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
            \'title\'  => \'\',
           ), $atts));
    static $counter = 0;
    echo $counter++;
    wp_enqueue_script(\'wp-mediaelement\'); 

}
add_shortcode(\'enq\',\'my_shortcode\');
您的脚本将加载到页面的页脚，因此请确保Javascript可以管理它。

至于样式表，

您可以像脚本一样加载页面页脚中的内容。这是无效的标记，但往往有效

  • 您可以让javascript动态插入样式，您可以“预处理”短代码，类似于此（这是一种资源密集型解决方案）：https://wordpress.stackexchange.com/a/101515/21376

    • SO网友:Rarst

    您正在回答自己的问题-脚本正在排队，因为这就是插件无条件加载的原因。

    没有逻辑来控制什么时候应该发生或不发生，它总是发生。

    如果您仔细观察一个插件，它可以更智能地完成这项工作，您通常会注意到以下事项之一：

    挂接方法或内部方法本身有条件检查使用的挂接是特定于特定上下文的，队列是从具有相关函数的代码调用的，例如，当从短代码的处理程序内部调用时，短代码所需的脚本可能会排队

    结束
    标签： plugin-development   wp-enqueue-script   小码农  

    相关推荐