我目前正试图在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文件
最合适的回答,由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\' );
}
}