Use diferentes archivos javascript para cada página en el sitio web

2

Actualmente estoy tratando de crear mi primer tema en wordpress. Lo hospedaré localmente hasta que funcione correctamente y luego usaré el tema en un sitio web.

Todo iba bien hasta que llegué al javascript. Cada página del tema tiene un cuadro de contador de caracteres que cuenta los contadores a medida que el usuario los ingresa. Cada una de estas cajas tiene su propio archivo javascript.

Pongo un archivo javascript en el archivo header.php y la página que usa ese archivo funciona (la página de inicio), pero quiero poder crear diferentes plantillas de página y en esas plantillas usar archivos diferentes.

Es esto posible.

(No estoy seguro de haber explicado esto lo suficientemente bien, ya que dije que soy nuevo en todo el lado del desarrollo del tema de wordpress)

Gracias de antemano, y asegúrese de solicitar más detalles.

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

Así es como se ve mi archivo 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><scriptsrc="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>

Ese es mi archivo header.php

    
pregunta Tim Davis 09.12.2016 - 21:49

1 respuesta

4
  

Puse un archivo javascript en el archivo header.php y esa página que   utiliza ese archivo funciona (la página de inicio)

No hagas eso. Utilice wp_enqueue_script() en su lugar.

Puede usar tags condicionales para cargar scripts y estilos en las ubicaciones deseadas. Por ejemplo, para verificar si se está utilizando una plantilla de página en particular, usaría is_page_template() .

Los scripts y los estilos se pueden registrar en el gancho wp_loaded , y luego encolar en el gancho 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' );
    }
}
    
respondido por el Dave Romsey 09.12.2016 - 22:36

Lea otras preguntas en las etiquetas