wake-up-neo.com

Verwenden Sie für jede Seite der Website unterschiedliche Javascript-Dateien

Ich versuche gerade, mein erstes Theme auf WordPress zu erstellen. Ich hoste es lokal, bis ich alles zum Laufen bringen kann, und dann werde ich das Thema auf einer Website verwenden.

Alles lief super, bis ich zum Javascript kam. Jede Seite des Themas verfügt über ein Zeichenzählerfeld, in dem die Zähler beim Eingeben durch den Benutzer hochgezählt werden. Jede dieser Boxen hat eine eigene Javascript-Datei.

Ich habe eine Javascript-Datei in die Datei header.php eingefügt und die Seite, die diese Datei verwendet, funktioniert (die Homepage). Ich möchte jedoch verschiedene Seitenvorlagen erstellen und auf diesen Vorlagen verschiedene Dateien verwenden können.

Ist das möglich.

(Ich bin mir nicht sicher, ob ich das gut genug erklärt habe, wie gesagt, ich bin neu in der Entwicklung des gesamten Themas von WordPress.)

Vielen Dank im Voraus und fragen Sie nach weiteren Einzelheiten.

    <?php

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', '/js/char-counter.min.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

// Theme Support
function wpb_theme_setup(){
    // Nav Menu
    register_nav_menus(array(
      'primary' => __('Primary Menu ')
    ));
}

  add_action('after_setup_theme', 'wpb_theme_setup');

  // Register scripts/styles. They can be optionally enqueued later on.
  add_action( 'wp_loaded', 'wpse248829_register_scripts' );
  function wpse248829_register_scripts() {
      wp_register_script( 'character-counter-script-js', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/char-counter.min.js', array( 'jquery' ), true );
      wp_register_script( 'Tweet-counter', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/Tweet-counter.min.js', array(), true );
      wp_register_script( 'title-tag-counter-script', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/title-tag.min.js', array(), true );
      wp_register_script( 'description-counter-script', get_template_directory_uri() . 'http://localhost/mysite/wp-content/themes/char-counter/js/description-tag.min.js', array(), true );
  }

  // Enqueue scripts/styles.
  add_action( 'wp_enqueue_scripts', 'wpse248829_enqueue_scripts' );
  function wpse248829_enqueue_scripts() {
      // Load everywhere.
      wp_enqueue_style( 'style', get_stylesheet_uri() );
      wp_enqueue_script( 'script', get_template_directory_uri() . '/js/jquery.min.js', array ( 'jquery' ), 1.1, true);

      // Only enqueue scripts/styles on static front page.
      if ( is_front_page() ) {
        wp_enqueue_script( 'character-counter-script-js' );
    }

      if ( is_page_template( 'Tweet-template.php' ) ) {
          wp_enqueue_script( 'Tweet-counter' );
      }

      if ( is_page_template( 'title-tag-template.php' ) ) {
          wp_enqueue_script( 'title-tag-counter-script' );
      }

      if ( is_page_template( 'description-tag-template.php' ) ) {
          wp_enqueue_script( 'description-counter-script' );
      }
  }

So sieht meine functions.php-Datei aus

    <!DOCTYPE html>
<html dir="ltr" lang="en-GB" prefix="og: http://ogp.me/ns#">

<head>

  <meta charset="<?php bloginfo('charset'); ?>">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Core CSS -->
  <link href="<?php bloginfo('template_url') ?>/css/bootstrap.css" rel="stylesheet">

    <!-- Custom Fonts -->
  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>


    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

    <!-- Theme CSS -->


    <link rel="shortcut icon" href="/img/favicon.ico">

    <script src="//load.sumome.com/" data-sumo-site-id="63887403fa39b3ec361069237f61eca50baf36e10e2973ac54b998b5095b3bb2" async="async"></script>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

        <title><?php wp_title(''); ?></title>

        <?php wp_head(); ?>

</head>

<body itemscope itemtype="http://schema.org/WebPage">

    <div id="wrapper" class="clearfix" itemprop="mainContentOfPage">

    <nav id="mainNav" class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>

                <?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

                    <img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

                    </a>

                  <?php else : ?>

                    <hgroup>
                        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                        <p class="site-description"><?php bloginfo( 'description' ); ?></p>
                    </hgroup>

                <?php endif; ?>
          </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                  <?php
                wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

Das ist meine header.php Datei

2
Tim Davis

Ich habe eine Javascript-Datei in die Datei header.php eingefügt und die Seite, die diese Datei verwendet, funktioniert (die Homepage).

Mach das nicht. Verwenden Sie stattdessen wp_enqueue_script() .

Sie können Bedingte Tags verwenden, um Skripte und Stile an den gewünschten Stellen zu laden. Um beispielsweise zu überprüfen, ob eine bestimmte Seitenvorlage verwendet wird, verwenden Sie is_page_template().

Skripte und Stile können im Hook wp_loaded registriert und dann im Hook wp_enqueue_scripts in die Warteschlange gestellt werden:

// Register scripts/styles. They can be optionally enqueued later on.
add_action( 'wp_loaded', 'wpse248829_register_scripts' );
function wpse248829_register_scripts() {
    wp_register_script( 'character-counter-script-js', get_template_directory_uri() . '/js/char-counter.min.js', array( 'jquery' ), false, true );
    wp_register_script( 'Tweet-counter', get_template_directory_uri() . '/js/Tweet-counter.min.js', array( 'jquery' ), false, true );
    wp_register_script( 'title-tag-counter-script', get_template_directory_uri() . '/char-counter/js/title-tag.min.js', array( 'jquery' ), false, true );
    wp_register_script( 'description-counter-script', get_template_directory_uri() . '/js/description-tag.min.js', array( 'jquery' ), false, true );
}

// Enqueue scripts/styles.
add_action( 'wp_enqueue_scripts', 'wpse248829_enqueue_scripts' );
function wpse248829_enqueue_scripts() {
    // Load everywhere.
    wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Probably not needed, because it was already specified as a dependency.
    // wp_enqueue_script( 'jquery' );

    // Only enqueue scripts/styles on static front page.
    if ( is_front_page() ) {
        wp_enqueue_script( 'character-counter-script-js' );
    }

    if ( is_page_template( 'Tweet-template.php' ) ) {
        wp_enqueue_script( 'Tweet-counter' );
    }

    if ( is_page_template( 'title-tag-template.php' ) ) {
        wp_enqueue_script( 'title-tag-counter-script' );
    }

    if ( is_page_template( 'description-tag-template.php' ) ) {
        wp_enqueue_script( 'description-counter-script' );
    }
}
4
Dave Romsey