web-dev-qa-db-fra.com

Ajout de <script> à WordPress dans l'élément <head>

J'essaie d'insérer ce code:

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

à WordPress '<head></head> section dans le panneau frontal et dans le panneau d'administration

Par exemple, Joomla! 1.6 a une API qui permet ceci:

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

J'ai besoin d'ajouter différentes choses pour différentes pages. Par exemple:

Page 1 Je dois ajouter

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

Pour quelques pages

Page 2 Je dois ajouter

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

pour quelques pages

Page J'ai besoin d'ajouter

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

pour quelques pages

J'ai plus de 70 pages dans le panneau d'administration comme celles ci-dessus.

Essayer de gérer l'en-tête du WordPress avec l'exemple est un peu difficile.

javascriptwordpressplugins
44
trichnosis

Dans votre thème 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

Pour tous ceux qui viennent ici à la recherche, j'ai peur d'être avec @ usama sulaiman ici.

L'utilisation de la fonction de mise en file d'attente offre un moyen sûr de charger des feuilles de style et des scripts en fonction des dépendances entre les scripts. Il s'agit de la méthode recommandée par WordPress pour atteindre les objectifs que l'affiche originale visait. Il suffit de penser à tous les plugins essayant de charger leur propre copie de jQuery par exemple; vous feriez mieux d'espérer qu'ils utilisent enqueue: D.

Aussi, chaque fois que possible, créez un plugin; Par exemple, vous pouvez ajouter du code personnalisé à votre fichier de fonctions si vous ne possédez pas de sauvegarde, mettez à jour votre thème et écrasez votre fichier de fonctions au cours du processus.

Avoir un plugin pour gérer cela et d'autres fonctions personnalisées signifie également que vous pouvez les désactiver si vous pensez que leur code entre en conflit avec un autre plugin ou fonctionnalité.

Vous recherchez quelque chose dans un fichier de plug-in:

<?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' );
  }

?>

Structurez vos dossiers comme suit:

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

Ensuite, zippez-le et téléchargez-le sur votre WordPress à l’aide de votre interface de plug-in add plugins, activez-le ainsi que Bob, votre oncle.

10
johnmackay61

En vous appuyant sur la réponse précédente, vous pouvez rassembler tous les extraits requis avant de sortir l'en-tête, puis utiliser un crochet d'action pour injecter tout ce dont vous avez besoin sur la tête.

Dans votre fichier functions.php, ajoutez

$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');

Et puis dans votre page ou modèle, utilisez-le comme

<?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();
[...]

Je l'ai fait pour javascript parce que c'est l'utilisation la plus courante, mais il peut être facilement adapté à n'importe quelle balise dans la tête, et soit avec du code en ligne, soit en passant un href/src à une URL externe.

5
djjeck

Je pense que codex.wordpress.org est votre meilleure référence pour bien gérer cette tâche, cela dépend de vos besoins.

découvrez ces deux pages sur WordPress Codex:

wp_enqueue_script

wp_enqueue_style

2
usama sulaiman

Si vous utilisez un plugin externe, vous pouvez utiliser Scripts d'en-tête et de pied de page plugin

De la description:

De nombreux WordPress Thèmes ne disposent d'aucune option permettant d'insérer des scripts d'en-tête et de pied de page dans votre site ou. Cela vous aide à vous protéger du verrouillage du thème. Mais, parfois, cela cause également quelques difficultés pour beaucoup. Où puis-je insérer du code Google Analytics (ou tout autre code d'analyse Web)? Ce plugin est une solution simple et légère pour cela. Avec ce plugin "Header and Footer Script", vous pourrez injecter des balises HTML, JS et CSS dans et facilement.

2
Nicola Pedretti

Un des moyens que j'aime utiliser est le code JavaScript vanille avec un modèle littéral:

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

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