Adding [removed] to WordPress in <head> element

前端 未结 6 416
你的背包
你的背包 2020-12-23 09:16

I\'m trying to insert this code:

 

to WordPress

相关标签:
6条回答
  • 2020-12-23 09:55

    If you are ok using an external plugin to do that you can use Header and Footer Scripts plugin

    From the description:

    Many WordPress Themes do not have any options to insert header and footer scripts in your site or . It helps you to keep yourself from theme lock. But, sometimes it also causes some pain for many. like where should I insert Google Analytics code (or any other web-analytics codes). This plugin is one stop and lightweight solution for that. With this "Header and Footer Script" plugin will be able to inject HTML tags, JS and CSS codes to and easily.

    0 讨论(0)
  • 2020-12-23 09:58

    I believe that codex.wordpress.org is your best reference to handle this task very well depends on your needs

    check out these two pages on WordPress Codex:

    wp_enqueue_script

    wp_enqueue_style

    0 讨论(0)
  • 2020-12-23 10:08

    Elaborating on the previous answer, you can gather all the required snippets before outputting the header, and only then use an action hook to inject all you need on the head.

    In your functions.php file, add

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

    And then in your page or template, use it like

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

    I made it for javascript because it's the most common use, but it can be easily adapted to any tag in the head, and either with inline code or by passing a href/src to an external URL.

    0 讨论(0)
  • 2020-12-23 10:18

    For anyone else who comes here looking, I'm afraid I'm with @usama sulaiman here.

    Using the enqueue function provides a safe way to load style sheets and scripts according to the script dependencies and is WordPress' recommended method of achieving what the original poster was trying to achieve. Just think of all the plugins trying to load their own copy of jQuery for instance; you better hope they're using enqueue :D.

    Also, wherever possible create a plugin; as adding custom code to your functions file can be pita if you don't have a back-up and you upgrade your theme and overwrite your functions file in the process.

    Having a plugin handle this and other custom functions also means you can switch them off if you think their code is clashing with some other plugin or functionality.

    Something along the following in a plugin file is what you are looking for:

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

    Structure your folders as follows:

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

    Then zip it up and upload it to your WordPress installation using your add plugins interface, activate it and Bob's your uncle.

    0 讨论(0)
  • 2020-12-23 10:20

    In your theme's 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' );
    
    0 讨论(0)
  • 2020-12-23 10:20

    One way I like to use is Vanilla JavaScript with template literal:

    var templateLiteral = [`
        <!-- HTML_CODE_COMES_HERE -->
    `]
    
    var head = document.querySelector("head");
    head.innerHTML = templateLiteral;
    
    0 讨论(0)
提交回复
热议问题