对网站上的每个页面使用不同的Java脚本文件

时间:2016-12-09 作者:Tim Davis

我目前正试图在wordpress上创建我的第一个主题。我在本地托管它,直到我可以让它全部工作,然后我将在网站上使用该主题。

在我使用javascript之前,一切都很顺利。主题上的每个页面都有一个字符计数器框,当用户输入计数器时,该框会对计数器进行计数。每个框都有自己的javascript文件。

我在标题中放了一个javascript文件。php文件和使用该文件的页面正常工作(主页),但我希望能够创建不同的页面模板,并且在这些模板上使用不同的文件?

这可能吗。

(不确定我是否已经对此进行了充分的解释,正如我所说,我对wordpress的整个主题开发方面还不熟悉)

提前感谢,请务必询问更多详细信息。

    <?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\' );
      }
  }
这就是我的职责所在。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>
这是我的头球。php文件

1 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

我在标题中放了一个javascript文件。php文件和使用该文件的页面(主页)

不要那样做。使用wp_enqueue_script() 相反

您可以使用conditional tags 在所需位置加载脚本和样式。例如,要检查是否正在使用特定的页面模板,可以使用is_page_template().

可以在上注册脚本和样式wp_loaded 钩子,然后在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\' );
    }
}