web-dev-qa-db-fra.com

Utiliser des fichiers javascript différents pour chaque page du site Web

J'essaie actuellement de créer mon premier thème sur Wordpress. Je l'héberge localement jusqu'à ce que je puisse tout faire fonctionner, puis j'utiliserai le thème sur un site Web.

Tout allait bien jusqu'à ce que je parvienne au javascript. Chaque page du thème comporte un compteur de caractères qui compte les compteurs au fur et à mesure que l'utilisateur les saisit. Chacune de ces boîtes a son propre fichier javascript.

Je mets un fichier javascript dans le fichier header.php et cette page qui utilise ce fichier fonctionne (la page d'accueil), mais je veux pouvoir créer différents modèles de page et sur ces modèles utiliser des fichiers différents?

Est-ce possible.

(Je ne sais pas si j'ai bien expliqué cela, comme je l'ai dit, je suis novice dans le développement de wordpress dans son ensemble)

Merci d'avance, et assurez-vous de demander plus de détails.

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

Voilà à quoi ressemble mon fichier functions.php

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

C'est mon fichier header.php

phptheme-developmentthemesjavascript
2
Tim Davis

Je mets un fichier javascript dans le fichier header.php et cette page qui utilise ce fichier fonctionne (la page d'accueil)

Ne fais pas ça. Utilisez wp_enqueue_script() à la place.

Vous pouvez utiliser balises conditionnelles pour charger des scripts et des styles aux emplacements souhaités. Par exemple, pour vérifier si un modèle de page particulier est utilisé, utilisez is_page_template().

Les scripts et les styles peuvent être enregistrés sur le hook wp_loaded, puis mis en file d'attente sur le hook wp_enqueue_scripts:

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