Working Bootstrap Carousel to WP-技术问题

时间:2018-08-29 作者:Adnan

我已经编码了一个工作引导转盘,它需要转换为WP。这只是网站的一小部分,但作为Wordpress的新手,我一直在理解技术问题。

下面是我想做的:

显示所有上传了特色图像的帖子,作为引导传送带的一部分显示,然后根据需要限制每页的帖子。

作为第一步,我认为不要为此使用WP\\u查询。然后尝试常规POST循环。

<?php if(have_posts()) {
          ?>
            <div class="carousel-inner" role="listbox">
              <?php
                $postNumber = 0;
                    while(have_posts()) {

                          the_post(); ?>
  <!-- 1st Slide  -->
  <div class="carousel-item <?php echo $postNumber == 0 ? \'active\' : \'\'; ?>">

    <!-- Section Featured Posts Start -->
    <div class="featured">
      <div class="container">
        <div class="row text-center">
          <div class="col-12 m-auto pt-5">

            <?php if(has_post_thumbnail()) {  ?>
因此,我使用has\\u post\\u thumbnail()作为检查,只包括那些附加了特色缩略图以在旋转木马中显示这些内容的帖子。如果我将活动类附加到carousel item div,则所有这些帖子都会在carousel中同时显示。

如果我使用标志,例如$postNumber在1处启动它,对于while循环,检查$postNumber是否为1,然后使用条件将“active”添加到carousel item div.并在第一个循环结束时将$postNumber重置为0。它工作不太正常。因此,我尝试使用current\\u post和自定义查询,但这不起作用。旋转木马中不显示任何内容,或者显示其他内容,但旋转木马不会自动移动,而是只在单击后退箭头时移动一次。

另一个问题是,如何根据帖子数量动态设置旋转木马的指标。如果我们限制查询中的帖子数量并在这里使用相同的数字,那么这很容易,但如果我们可以使其动态化。

作为一名Wordpress新手,我学到了很多不同的东西,从使用短代码到子主题,再到使用Options API以及许多其他主题和插件的东西。把这些经验教训付诸行动是很重要的。

所以我在Photoshop中从头设计了一个网站,在Bootstrap中进行了编码,现在将其转换为Wordpress。因此,这是我坚持要取得进一步进展的问题之一。希望有人能帮忙。

谢谢

1 个回复
SO网友:Mirza Sisic

我最近也遇到了类似的情况,制作了一个引导旋转木马动态。

这是我的功能。php代码:

//Images Slider
function themename_slider_home_images_setup($wp_customize)
{
    $wp_customize->add_section(\'home-slider-images\', array(
        \'title\' => \'Home Slider\',
        ));

        $wp_customize->add_setting(\'home-slider-first-image\');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            \'home-slider-first-image\',
            array(
                \'label\'      => __( \'First Image\', \'theme_name\' ),
                \'section\'    => \'home-slider-images\',
                \'settings\'   => \'home-slider-first-image\'
            )
        )
        );

        $wp_customize->add_setting(\'home-slider-second-image\');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            \'home-slider-second-image\',
            array(
                \'label\'      => __( \'Second Image\', \'theme_name\' ),
                \'section\'    => \'home-slider-images\',
                \'settings\'   => \'home-slider-second-image\'
            )
        )
        );

        $wp_customize->add_setting(\'home-slider-third-image\');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            \'home-slider-third-image\',
            array(
                \'label\'      => __( \'Third Image\', \'theme_name\' ),
                \'section\'    => \'home-slider-images\',
                \'settings\'   => \'home-slider-third-image\'
            )
        )
    );
}
add_action(\'customize_register\', \'themename_slider_home_images_setup\');
对于模板文件:

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="<?php echo get_theme_mod(\'home-slider-first-image\');?>" alt="Sinan" >
      </div>

      <div class="item header-image">
        <img  src="<?php echo get_theme_mod(\'home-slider-second-image\');?>" alt="Sinan" >
      </div>

      <div class="item header-image">
        <img src="<?php echo get_theme_mod(\'home-slider-third-image\');?>" alt="Sinan" >
      </div>
    </div>

    <!-- Left and right controls -->

  </div>
我打赌有更多优雅的方法可以做到这一点,但我对WordPress自定义主题开发也很陌生,这对我来说很有帮助。

编辑:您可以使用相同的逻辑使其他内容可编辑,例如alt属性、为幻灯片添加标题等。方法是在函数文件中添加更多设置,并将HTML硬编码属性值替换为将出现在自定义程序中的适当PHP标记。

希望这有帮助!

结束

相关推荐

文件获取内容(includes_url(‘/js/jquery/jquery.js’));不工作

您好,我想在我的wordpress主题中从本地jquery路径获取内容。我正在执行以下代码:$jq = file_get_contents(includes_url( \'/js/jquery/jquery.js\' ));当我回显变量时jq 里面什么都没有echo $mergedJs; // nothing只有当我将主题上传到服务器时才会发生这种情况,它在我的本地服务器上运行良好,这很奇怪。有什么建议吗?谢谢