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

Question

我正在尝试插入此代码：

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

到前端和管理面板中的WordPress' <head></head>部分

好吧，Joomla！ 1.6有一个允许这样的API：

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

我需要为不同的页面添加不同的东西。 例如：

第1页我需要添加

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

几页

第2页我需要添加

<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>

几页

第3页我需要添加

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

几页

我在管理面板中有70多个页面，如上所述。

试图用这个例子来管理WordPress的标题有点困难。

Answer 1

在你的主题的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' );

Answer 2

对于任何来这里看的人，我恐怕我和@usama sulaiman在这里。

使用enqueue函数提供了一种根据脚本依赖性加载样式表和脚本的安全方法，并且是WordPress推荐的实现原始海报试图实现的方法。 想想所有试图加载自己的jQuery副本的插件; 你最好希望他们使用入队：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安装，激活它，Bob是您的叔叔。

Answer 3

详细说明上一个答案，您可以在输出标题之前收集所有必需的片段，然后使用动作挂钩将所有需要的内容注入头部。

在你的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。

Answer 4

我相信codex.wordpress.org是您处理此任务的最佳参考，具体取决于您的需求

在WordPress Codex上查看这两页：

wp_enqueue_script

wp_enqueue_style

Answer 5

如果您可以使用外部插件来执行此操作，则可以使用页眉和页脚脚本插件

从描述：

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

Answer 6

我喜欢使用的一种方法是使用模板文字的Vanilla JavaScript：

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

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

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

问题描述

6 个解决方案

解决方案1
124 2011-05-01 19:17:53

解决方案2
10 2013-06-28 10:02:49

解决方案3
5 2013-04-03 22:23:25

解决方案4
2 2013-06-13 21:15:50

解决方案5
2 2017-01-04 10:59:39

解决方案6
0 2019-06-23 16:41:46

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

问题描述

6 个解决方案

解决方案1 124 2011-05-01 19:17:53

解决方案2 10 2013-06-28 10:02:49

解决方案3 5 2013-04-03 22:23:25

解决方案4 2 2013-06-13 21:15:50

解决方案5 2 2017-01-04 10:59:39

解决方案6 0 2019-06-23 16:41:46

解决方案1
124 2011-05-01 19:17:53

解决方案2
10 2013-06-28 10:02:49

解决方案3
5 2013-04-03 22:23:25

解决方案4
2 2013-06-13 21:15:50

解决方案5
2 2017-01-04 10:59:39

解决方案6
0 2019-06-23 16:41:46