创建 wordpress 插件时，如何在 jQuery 加载页面中启动挂钩？

Posted 2023-05-09

【中文标题】创建 wordpress 插件时，如何在 jQuery 加载页面中启动挂钩？

【英文标题】：How can i initiate hooks in a jQuery loaded page when creating a wordpress plugin?

【发布时间】：2014-01-02 21:21:54

【问题描述】：

我正在编写一个带有以下页面的 wordpress 小部件 1）我有母版页（mas​​ter.php） - 是主插件页面 - 使用 jQuery 加载第二个页面 (slave.php) 2) 从属页面 - 有 php、jquery、css 等。 - 是一个外部页面

下面是master.php的一部分

---

<?php
add_action('init', 'register_masterscript');
function register_masterscript() 
    wp_register_script( 'master_jquery', plugins_url('/js/master-script.js', __FILE__), array('jquery'), '2.5.1' );
        wp_register_script( 'master_jquery2', plugins_url('/js/master.js', __FILE__), array('jquery'), '2.5.1' );
    wp_register_style( 'master_style', plugins_url('/css/master_style.css', __FILE__), false, '1.0.0', 'all');


// using the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_masterstyle');

function enqueue_masterstyle()
   wp_enqueue_script('master_jquery');
   wp_enqueue_script('master_jquery2');
   wp_enqueue_style( 'master_style' );

?>

master.php 成功加载 slave.ph，但我的问题是 jquery 操作或链接不起作用。 由于 slave.php 是外部的，我已经尝试过

define('WP_USE_THEMES', false);
require('../../../wp-blog-header.php');

然后

<?php 
add_action('init', 'register_slavescript');
function register_slavescript() 
    wp_register_script( 'slave_jquery', plugins_url('/js/jQuery1.7.1.js', __FILE__), array('jquery'), '2.5.1' );
        wp_register_script( 'slave_jquery2', plugins_url('/js/highlight.pack.js', __FILE__), array('jquery'), '2.5.1' );
        wp_register_script( 'slave_jquery3', plugins_url('/js/combined.js', __FILE__), array('jquery'), '2.5.1' );
    wp_register_style( 'slave_style', plugins_url('/css/slave_style.css', __FILE__), false, '1.0.0', 'all');
         wp_register_script( 'slave_jquery4', plugins_url('/js/jquery.mousewheel.js', __FILE__), array('jquery'), '2.5.1' );
         wp_register_script( 'slave_jquery5', plugins_url('/js/jquery.jscrollpane.min.js', __FILE__), array('jquery'), '2.5.1' ); 
       
// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_slavestyle');

function enqueue_slavestyle()
   wp_enqueue_script('slave_jquery');
   wp_enqueue_script('slave_jquery2');
   wp_enqueue_script('slave_jquery3');
   wp_enqueue_style( 'slave_style' );
   wp_enqueue_script('slave_jquery4');
   wp_enqueue_script('slave_jquery5');

?>

看起来slave.php enqueue -ing 不起作用，我该如何以正确的方式做到这一点？

【问题讨论】：

文件没有加载吗？显示什么？你想通过这种主从舞蹈来达到什么目的？为什么需要加载 WordPress 两次？

也许很累很抱歉，但按照说明，我在问题下找不到编辑链接。由于 master.php 加载良好，并且它的链接和 jquery 功能还可以，我决定单独测试它，通过 define('WP_USE_THEMES', false);要求（'../../../wp-blog-header.php'）; $posts = get_posts('numberposts=10&order=ASC&orderby=post_title'); foreach ($posts as $post) : setup_postdata( $post ); ?> ”； ?>

使用主从我避免使用 iframe，通过使用 jquery，jQuery(document).ready(function($) $(function() cache: false, 127.0.0.1/livezone/wp -content/plugins/livebak3/slave.php $('#d1').html('

你为什么不把它显示为一个普通的小部件呢？内联？

谢谢，我终于解决了我的问题，通过重新设计项目，我确保所有的 jquery 和 css 脚本都在第一页（mas​​ter）上。它现在工作正常。但这是否意味着您不能在外部/自定义页面上使用 wp_equeue_script？

【参考方案1】：

虽然您可以毫无问题地注册脚本和样式，但 WordPress 不会自动将它们注入页面。

实际执行此操作的函数链附加到在您的情况下未触发的几个操作。

在wp_head、login_head或admin_print_scripts期间输出头脚本；页脚脚本也会发生类似的情况。

例如，wp_head 钩子由主题调用 wp_head() 在适当的情况下触发。你奴隶叫这个吗？我认为它没有。

总的来说，您必须手动调用 wp_print_head_scripts 和 wp_print_footer_scripts 才能在自定义引导页面上输出排队的脚本和样式。

谈到自定义引导：通常情况下，使用Widgets 和AJAX 可以避免自定义引导。因此，如果您发现自己在页面上手动加载 WordPress，那么您很可能做错了，尤其是涉及 iframe 时。

【讨论】：

嗯，谢谢，因为我重新设计了这个小部件，所以我就用这个方法，意思是不需要调用 wp_head 了？但是请给我一个例子，说明我如何在 wordpress 调用它自己的 CSS 之后附加我的 css，这样我的将占主导地位。谢谢

就像我说的，在你的奴隶中手动调用 wp_print_head_scripts 和 wp_print_footer_scripts。如果 WordPress 添加了任何您不需要的脚本，那么您可以使用 wp_deregister_script/style 来控制脚本。不要调用 wp_head，因为除了脚本和样式表之外，它还会注入其他东西。

【参考方案2】：

按照@soulseekah 的回答，不要忘记在</head> 结束标记之前调用wp_head()，在</body> 结束标记之前调用wp_footer()。这些函数通常需要通过插件或在主题的特定插入中呈现 WordPress 脚本和 CSS 标签——通常在 functions.php 文件中使用 wp_enqueue_scripts() 或 wp_enqueue_styles() 排队。

如果您的模板中没有这些功能，您的主题将不会通过 unit tests。

检测此类问题的一个好方法是安装Theme Checker 插件。这将帮助您根据latest WordPress standards 跟踪主题的功能。