web-dev-qa-db-ja.com

<head>要素のWordPressに<script>を追加

私はこのコードを挿入しようとしています：

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

数ページ

ページ追加する必要があります

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

数ページ

上記のような管理パネルに70以上のページがあります。

例でWordPressのヘッダーを管理しようとするのは少し難しいです。

javascriptwordpressplugins
44
trichnosis

テーマの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' );
124
ggutenberg

ここに来て探している人にとって、私は @ usama sulaiman hereと一緒にいるのではないかと心配しています。

エンキュー機能を使用すると、スクリプトの依存関係に応じてスタイルシートとスクリプトを安全にロードでき、元のポスターが達成しようとしていた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

次に、Zipで圧縮し、プラグインの追加インターフェイスを使用してWordPressインストール済み環境にアップロードし、アクティベートしてから、Bobが叔父になります。

10
johnmackay61

前の答えを詳しく説明すると、ヘッダーを出力する前に必要なすべてのスニペットを収集し、アクションフックを使用して必要なものを頭に挿入することができます。

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に渡すことで、ヘッド内の任意のタグに簡単に適用できます。

5
djjeck

Codex.wordpress.orgは、このタスクを非常にうまく処理するための最良のリファレンスであると信じています

WordPress Codex：

wp_enqueue_script

wp_enqueue_style

2
usama sulaiman

外部プラグインを使用して大丈夫な場合は、 ヘッダーおよびフッタースクリプト プラグインを使用できます

説明から：

多くのWordPressテーマには、サイトにヘッダーやフッターのスクリプトを挿入するオプションがありません。テーマのロックから自分を守るのに役立ちます。 Googleアナリティクスコード（またはその他のWebアナリティクスコード）をどこに挿入する必要があります。このプラグインは、そのための1つのストップで軽量なソリューションです。そして簡単に。

2
Nicola Pedretti

私が使用したい方法の1つは、テンプレートリテラルを使用したVanilla JavaScriptです。

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

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