新增<script> 在<head> 中的 wordpress 元件

問題描述

我試圖插入這個程式碼：

 <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%20url" />

幾頁

我需要新增

<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 的頭部有點困難。

最佳解決辦法

在您的主題 functions.php：

function my_custom_js() {
    echo '<script type="text/javascript" src="myjsfile.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');

次佳解決辦法

在前面的答案中，您可以在輸出標題之前收集所有必需的片段，然後使用動作鉤將所有需要的部分注入到頭上。

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

第三種解決辦法

對於任何來這裡的人來說，恐怕我和 @usama sulaiman 在這裡。使用入隊功能提供了一種安全的方式來根據指令碼依賴關係載入樣式表和指令碼，是 WP 推薦的實現 OP 所要實現的方法。想想所有的外掛試圖載入他們自己的 JQuery 副本; 你最好希望他們使用排隊：D

另外，儘可能地建立一個外掛; 如果您沒有 back-up，並且升級您的主題並在該過程中覆蓋您的功能檔案，那麼在您的函式檔案中新增自定義程式碼可以是 pita 。

有一個外掛處理這個和其他自定義函式也意味著如果你認為他們的程式碼與其他外掛或功能衝突，你可以關閉它們。

外掛檔案中的以下內容是您要查詢的內容：

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

然後將其壓縮並使用您的新增外掛介面將其上傳到您的 WP 安裝，啟用它和 Bob 的叔叔。

參考文獻

adding <script> to wordpress in <head> element

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

新增<script> 在<head> 中的 wordpress 元件