使用 jquery 在 wp-login 页面中添加段落

Posted 2023-05-09

【中文标题】使用 jquery 在 wp-login 页面中添加段落

【英文标题】：Add paragraph in wp-login page with jquery

【发布时间】：2021-11-08 18:28:31

【问题描述】：

我需要在我的 Wordpress 网站的 wp-login.php 页面中添加一些自定义文本。我的想法是使用一些自定义 jQuery（通过主题选项中的自定义代码设置），如下所示：

(function($) 
$(document).ready( function() 
  $('#nav').after('<p>some text</p>');
);
)(jQuery);

#nav id 是 wp-login.php 中登录表单后面的段落

没有结果。你有什么想法？是否可以使用一些自定义代码自定义 wp-login.php？

【问题讨论】：

尝试使用 document.ready 处理程序而不是 IIFE：learn.jquery.com/using-jquery-core/document-ready。您当前的代码很可能在 DOM 加载之前运行。

在这种情况下，您能否编辑问题以包含正确的代码，最好也包含相关的 html

谢谢你，Rory，但无论如何它不起作用。

既然您使用的是wordpress，那么您如何使用您的javascript？我的意思是您使用哪个动作/过滤器挂钩将您的 javascript 注入页面？

嗨@Ruvee，通过主题选项中的自定义代码设置。通常每次都有效。

【参考方案1】：

使用以下步骤确保您的自定义代码有效：

在您的主题目录或主题根目录的子目录中创建一个javascript file，并将其命名为your_custom_js_code.js。

然后，使用名为login_enqueue_scripts 的action hook 在正确的时刻将您的javascript 文件排队/加载到正确的页面上。 （即 wp-login.php）

然后将jquery 入队/加载到页面上。

最后，将您的自定义代码加入队列/加载到页面上。

---

1- 您的自定义 jquery 代码：（此代码进入您的 javascript 文件）

jQuery(document).ready($ => 
  $('#nav').after('<p>some text</p>');
);

2, 3, 4- 使用login_enqueue_scripts 动作挂钩在适当的时候将jquery 和您的自定义jquery 文件加载到正确的页面上：（此代码进入您主题的functions.php）

请注意，我在我的主题根目录中名为js 的子文件夹中创建了your_custom_js_code.js。所以该文件的路径是get_theme_file_uri('/js/your_custom_js_code.js')。如果您决定在其他地方创建自定义 javascript 文件，请随意更改路径，相应地在以下 sn-p 中使用。

add_action("login_enqueue_scripts", "your_custom_jquery");

function your_custom_jquery()

  wp_enqueue_script('jquery');
  wp_enqueue_script('your-custom-jquery-code', get_theme_file_uri('/js/your_custom_js_code.js'), 'JQuery', microtime(), TRUE);

如果你能让它工作，请告诉我！