Question

我必须在wordpress网站上创建一个新主页，新主页必须使用与主题的css和js不同的css和javascript。我用新的布局创建了一个页面模板但是我发现很难包含样式和js，如果这是正确的话，我已经开始徘徊了。我所做的是创建一个新的页面模板，其中包含一个单独的头标记，其中我将包含样式，但我无法找到如何正确设置文件的路径。我还要添加bootstrap css和4个js文件，新文件不应该影响网站的其他页面。

另外，我必须添加一个滑块，该滑块应该是一个必须从管理面板中编辑的文本。我是否必须使用插件制作它，因为我获得了html和css文件，滑块是用javascript制作的，我必须使用这些文件。

任何人都可以提出建议，这是制作新页面的正确方法吗？

Answer 1

您可以使用is_page（）或is_home（）或is_front_page（）来确定主页，然后使用wp_dequeue_style（），wp_enqueue_style（），wp_dequeue_script（），wp_enqueue_script（）来删除/添加样式和js文件到你的需求

Answer 2

根据主题的构建方式，您可以在标题中添加if语句以包含相应的css / js文件。

您可以执行以下操作 -

    <?php if(is_front_page()):?> 
       <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/homestyle.css"> 
       <script src="<?php bloginfo('template_directory');?>/js/homescripts.js"></script> 
    <?php else: ?> 
      <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/regularstyle.css">
      <script src="<?php bloginfo('template_directory'); ?>/js/regularscripts.js"></script> 
   <?php endif;?>

如果没有具体细节，滑块问题难以回答。回购中有许多滑块插件，您可以使用短代码或PHP代码添加，但您也可以使用常规的jQuery滑块。

Answer 3

如您所述，您可以通过使用第二个标题创建新模板来完成您想要的任务。您提到您遇到的唯一问题是尝试设置文件路径，我认为您的意思是在模板中调用新标头。这就是你做的......

复制主页模板并将其命名为其他内容（我认为您已经这样做了）
复制标题文件并将其重命名为header.php至header-home.php
使用<?php get_header( $header-home ); ?>
使用新的css和js文件编辑新的header-home.php。

那就是它！主页模板现在将使用自定义标题。

关于Codebloo所说的滑块，有很多免费的滑块插件，但我推荐Slider Revolution。您所做的就是像任何其他插件一样安装它，您就可以设置幻灯片了。创建幻灯片后，您将获得一个短代码或php插入，您可以在任何页面，帖子或模板上使用。

Answer 4

好的，你有模板。接下来，您需要在functions.php中排队样式和脚本，或者根据您是否显示该模板将资产排入队列。

这可以很容易地完成：

function assets() {
  $assets = array(
    'bootstrap-css' => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css',
    'bootstrap-js'  => '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js',
    'css'           => '/assets/css/main.min.css',
    'js'            => '/assets/js/main.min.js',
    'home-css'      => '/different-assets-path/css/main.min.css',
    'home-js'       => '/different-assets-path/js/main.min.js',
  );

  // enqueue common assets here
  wp_enqueue_style( 'bootstrap_css', $assets['bootstrap-css'], false, null );
  wp_enqueue_script( 'jquery' );
  wp_enqueue_script( 'bootstrap_js', $assets['bootstrap-js'], array(), null, true );

  if ( is_page_template( 'templates/home.php' ) ) {
    wp_enqueue_style( 'home_css', get_template_directory_uri() . $assets['home-css'], false, null );
    wp_enqueue_script( 'home_js', get_template_directory_uri() . $assets['home-js'], array(), null, true );
  } else {
    wp_enqueue_style( 'main_css', get_template_directory_uri() . $assets['css'], false, null );
    wp_enqueue_script( 'main_js', get_template_directory_uri() . $assets['js'], array(), null, true );
  }

}
add_action( 'wp_enqueue_scripts', 'assets', 100 );

关于添加可从管理界面编辑的滑块。我喜欢使用Advanced Custom Fields创建可编辑的内容区域，然后像其他任何内容一样显示在前端。这样您就不会受任何特定滑块插件的束缚，可以更改javascript和标记以显示您选择的滑块。

添加wordpress web模板与不同的风格和js

4 个答案: