it-swarm.com.de

Hinzufügen von <script> zu WordPress im <head> -Element

Ich versuche diesen Code einzufügen:

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

zu WordPress '<head></head> Abschnitt im Frontend und im Admin-Panel

Zum Beispiel Joomla! 1.6 verfügt über eine API, die Folgendes ermöglicht:

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

Ich muss verschiedene Dinge für verschiedene Seiten hinzufügen. Beispielsweise:

Seite 1 Ich muss hinzufügen

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

Für ein paar Seiten

Seite 2 Ich muss hinzufügen

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

für ein paar seiten

Seite Ich muss hinzufügen

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

für ein paar seiten

Ich habe über 70 Seiten im Admin-Bereich wie oben.

Der Versuch, den Header von WordPress mit dem Beispiel zu verwalten, ist etwas schwierig.

44
trichnosis

In Ihrem Thema 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

Für alle anderen, die hierher kommen und suchen, bin ich leider mit @ usama sulaiman hier.

Die Verwendung der Enqueue-Funktion bietet eine sichere Möglichkeit, Stylesheets und Skripte gemäß den Skriptabhängigkeiten zu laden, und ist die von WordPress empfohlene Methode, um das zu erreichen, was das ursprüngliche Poster erreichen wollte. Stellen Sie sich zum Beispiel alle Plugins vor, die versuchen, eine eigene Kopie von jQuery zu laden. Du solltest besser hoffen, dass sie Enqueue verwenden: D.

Erstellen Sie außerdem nach Möglichkeit ein Plugin. Das Hinzufügen von benutzerdefiniertem Code zu Ihrer Funktionsdatei kann eine Pita sein, wenn Sie keine Sicherung haben und Ihr Design aktualisieren und dabei Ihre Funktionsdatei überschreiben.

Wenn ein Plugin diese und andere benutzerdefinierte Funktionen verwaltet, können Sie sie auch ausschalten, wenn der Code mit einem anderen Plugin oder einer anderen Funktionalität in Konflikt gerät.

Folgendes in einer Plugin-Datei ist genau das, wonach Sie suchen:

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

?>

Strukturieren Sie Ihre Ordner wie folgt:

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

Dann packe es hoch und lade es in deine WordPress) - Installation hoch, aktiviere es und Bob ist dein Onkel.

10
johnmackay61

Anhand der vorherigen Antwort können Sie alle erforderlichen Snippets sammeln, bevor Sie den Header ausgeben. Erst dann können Sie mit einem Aktionshaken alles in den Kopf injizieren, was Sie benötigen.

Fügen Sie in Ihrer functions.php-Datei hinzu

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

Und dann in Ihrer Seite oder Vorlage verwenden Sie es wie

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

Ich habe es für Javascript gemacht, weil es am häufigsten verwendet wird, aber es kann leicht an jedes Tag im Kopf angepasst werden, entweder mit Inline-Code oder durch Übergabe einer href/src an eine externe URL.

5
djjeck

Ich glaube, dass codex.wordpress.org Ihre beste Referenz ist, um diese Aufgabe sehr gut zu bewältigen. Dies hängt von Ihren Bedürfnissen ab

schau dir diese beiden Seiten auf WordPress Codex:

wp_enqueue_script

wp_enqueue_style

2
usama sulaiman

Wenn Sie ein externes Plugin verwenden möchten, können Sie das Plugin Kopf- und Fußzeilenskripte verwenden

Aus der Beschreibung:

Viele WordPress Themes haben keine Optionen zum Einfügen von Kopf- und Fußzeilenskripten in Ihre Site oder. Es hilft Ihnen, sich von der Themensperre fernzuhalten. Manchmal bereitet es aber auch manchen Ärger Wo soll ich Google Analytics-Code (oder einen anderen Webanalyse-Code) einfügen? Dieses Plugin stellt eine zentrale und einfache Lösung dafür dar. Mit diesem "Kopf- und Fußzeilen-Skript" -Plugin können HTML-Tags, JS- und CSS-Codes eingefügt werden und leicht.

2
Nicola Pedretti

Eine Möglichkeit, die ich gerne benutze, ist Vanilla JavaScript mit Vorlagenliteral:

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

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