在WordPress中将<script>添加到<head>元素。

Question

在WordPress中将<script>添加到<head>元素。

58

我正在尝试插入这段代码：

 <script type="text/javascript">
    some Javascript codes comes here
</script>

将代码添加到WordPress前端和管理面板的<head></head>部分。

例如，Joomla！1.6具有允许此操作的API：

        $doc =& JFactory::getDocument();
        $doc->addCustomTag($headTag);

我需要为不同的页面添加不同的内容。例如：

第一页，我需要添加

<link rel="alternate" type="application/rss+xml" title="feed title" href="feed url" />

对于几个页面

第二页 我需要添加

<script type=\"text/javascript\" src=\"" . LIVE_SITE .
 "/wp-content/plugins/jobs/lknlibrary/js/ajax.js\"></script>
    <script type=\"text/javascript\">

    var ajax = new sack();
    var currentClientID=false;
    function getClientData()
    {
        var clientId = document.getElementById('db_country_id').value.replace(/[^0-9]/g,'');
        ajax.requestFile = '" .BASE_PATH . "/wp-content/plugins/jobs/com_jobs_admin/tasks/get_location_data.php?task=get_location_data&name=db_parent_id&getClientId='+clientId;    // Specifying which file to get
        ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found
        ajax.runAJAX();        // Execute AJAX function
    }

    function showClientData()
    {
        clearJS = ajax.response;
        var strTagStrippedText = clearJS.replace(/(<\s*\/?\s*)div(\s*([^>]*)?\s*>)/gi ,'');
        document.getElementById('locationsDiv').innerHTML=strTagStrippedText ;
    }

    function initFormEvents()
    {
        if (document.getElementById('db_country_id')){
            document.getElementById('db_country_id').onchange = getClientData;
            document.getElementById('db_country_id').focus();
        }
    }

    window.onload = initFormEvents;
</script>

对于几个页面

第三页 我需要添加

 <link rel="stylesheet" type="text/css" href="/wordpress/wp-content/plugins/jobs/lknlibrary/js/tabs/tab.webfx.css" />

有几个页面

我在管理面板中有70多个像上面那样的页面。

尝试使用示例来管理WordPress的页眉有点困难。

- trichnosis

2

一个是纯HTML，另一个是PHP框架...它们都会产生相同的HTML输出。请澄清您的问题。 - Elzo Valugi

为什么不直接将您的代码粘贴到header.php文件中呢？ - JohnP

@JohnP 在前端确实可以这样做，但在管理面板中不行。 - Pekka

@pekka 没有看到管理员面板的评论。我猜这里最好的选择是插件或过滤器。 - JohnP

1

我知道你是新来的，但你对问题所做的修改完全改变了它。最好的做法是接受你最初提出的问题的答案，并为你添加的所有其他信息创建一个新问题。 - ggutenberg

我相信codex.wordpress.org是您处理此任务的最佳参考，具体取决于您的需求，请查看WordPress Codex上的这两个页面：wp_enqueue_script和wp_enqueue_style. - usama sulaiman

5个回答

18

对于其他寻求帮助的人，我很抱歉，我和@usama sulaiman 的想法一样。

使用enqueue函数提供了一种安全的方式来根据脚本依赖项加载样式表和脚本，并且这是WordPress推荐实现原始发布者试图实现的方法。想想所有试图加载自己的jQuery副本的插件吧; 你最好希望他们使用enqueue :D。

此外，尽可能创建一个插件; 因为如果您没有备份并升级主题并在此过程中覆盖功能文件，则将自定义代码添加到功能文件中可能会导致麻烦。

让插件处理此类自定义功能还意味着您可以关闭它们，如果您认为它们的代码与某些其他插件或功能冲突。

以下是在插件文件中编写的示例：

<?php
/*
Plugin Name: Your plugin name
Description: Your description
Version: 1.0
Author: Your name
Author URI: 
Plugin URI: 
*/

function $yourJS() {
    wp_enqueue_script(
        'custom_script',
        plugins_url( '/js/your-script.js', __FILE__ ),
        array( 'jquery' )
    );
}
 add_action( 'wp_enqueue_scripts',  '$yourJS' );
 add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );

 function prefix_add_my_stylesheet() {
    wp_register_style( 'prefix-style', plugins_url( '/css/your-stylesheet.css', __FILE__ ) );
    wp_enqueue_style( 'prefix-style' );
  }

?>

按照以下方式构建你的文件夹结构：

Plugin Folder
  |_ css folder
  |_ js folder
  |_ plugin.php ...contains the above code - modified of course ;D

然后将其压缩并使用您的“添加插件”界面上传到WordPress安装中，激活它，就完成了。

- johnmackay61

5

进一步解释之前的答案，您可以在输出标题之前收集所有所需的片段，然后仅使用操作挂钩将所有内容注入头部。

在您的functions.php文件中添加以下内容：

$inject_required_scripts = array();

/**
 * Call this function before calling get_header() to request custom js code to be injected on head.
 *
 * @param code the javascript code to be injected.
 */
function require_script($code) {
  global $inject_required_scripts;
  $inject_required_scripts[] = $code; // store code snippet for later injection
}

function inject_required_scripts() {
  global $inject_required_scripts;
  foreach($inject_required_scripts as $script)
    // inject all code snippets, if any
    echo '<script type="text/javascript">'.$script.'</script>';
}
add_action('wp_head', 'inject_required_scripts');

然后在您的页面或模板中，像这样使用它

<?php
/* Template Name: coolstuff */

require_script(<<<JS
  jQuery(function(){jQuery('div').wrap('<blink/>')});
JS
);

require_script(<<<JS
  jQuery(function(){jQuery('p,span,a').html('Internet is cool')});
JS
);

get_header();
[...]

我选择使用JavaScript编写这个程序是因为它是最常用的，但是它可以轻松地适应于头部中的任何标签，并且可以通过内联代码或通过传递href / src到外部URL来完成。

- djjeck

我想知道这是否是WordPress的方式。有没有WordPress爱好者愿意发表评论？ - djjeck

请参见下面的johnmackay61答案。我在写作时不知道wp_enqueue_script。基本上，我的解决方案可能仍适用于小片段，但对于更大的代码，最好将其放在单独的js文件中，并通过wp_enqueue_script函数进行要求。 - djjeck

2

如果您愿意使用外部插件来实现这一点，您可以使用 Header and Footer Scripts 插件。

从描述中可以看出：

许多 WordPress 主题没有任何选项可以在您的网站中插入页眉和页脚脚本。它可以帮助您避免主题锁定。但是，有时它也会给许多人带来一些痛苦。比如，我应该在哪里插入 Google Analytics 代码（或任何其他 Web 分析代码）。这个插件是一个轻量级的解决方案。通过这个 "Header and Footer Script" 插件，您将能够轻松地将 HTML 标签、JS 和 CSS 代码注入到页眉和页脚中。

- Nicola Pedretti

1

这将是管理添加脚本到页脚或页眉的最简单方法。将来您可能会忘记如何实际添加代码，但使用此方法可以更容易地记住。 - Andres Ramos

1

很遗憾，现在似乎不受支持了。更新答案可能是值得的。 - Eoin

-3

我喜欢使用的一种方法是使用原生JavaScript和模板字面量：

var templateLiteral = [`
    <!-- HTML_CODE_COMES_HERE -->
`]

var head = document.querySelector("head");
head.innerHTML = templateLiteral;

- user3578082

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ggutenberg · Accepted Answer

在您的主题的 functions.php 文件中：

function my_custom_js() {
    echo '<script type="text/javascript" src="myscript.js"></script>';
}
// Add hook for admin <head></head>
add_action( 'admin_head', 'my_custom_js' );
// Add hook for front-end <head></head>
add_action( 'wp_head', 'my_custom_js' );