owl url 哈希导航 wordpress

Question

我正在尝试通过回显我的 div 将 OwlCarousel2 Url 哈希导航添加到 wordpress，但是有 wordpress 功能，我真的不知道如何处理它我的回声

这是我的代码：

<div id="owl-main" class="owl-hash">
       <?php $feat_query = new WP_Query( array( 'showposts' => 5,'meta_key'=>'_thumbnail_id') ); ?>
        <?php  if ( $feat_query->have_posts() ) {
    while ( $feat_query->have_posts() ) {
        $feat_query->the_post(); 
        $counter = 1;
        $counter++;
        $permalink = get_permalink($post->ID);
        echo'<div class="item" data-hash='.$counter.'<a href=.'$permalink'.'>'<?php the_post_thumbnail(); ?><?php the_title(); ?></a></div>';}
        {
        echo'<a class="button<?php echo $counter?>" href= "#<?php echo $counter;?>"><?php the_title(); ?></a>';
         }

} // end if?>
    </div>

Answer 1

不太确定你想得到什么，但试试这样：

<div id="owl-main" class="owl-hash">
    <?php $counter = 1; ?>
    <?php $feat_query = new WP_Query( array( 'showposts' => 5,'meta_key'=>'_thumbnail_id') ); ?>
    <?php
    if ( $feat_query->have_posts() ) {
        while ( $feat_query->have_posts() ) {
            $feat_query->the_post();
            $permalink = get_permalink($post->ID);
            echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
            $counter++;
        }
        echo '<a class="button '.$counter.'" href="#'.$counter.'">'.get_the_title().'</a>';
    } // end if?>
</div>

你有回声，然后 php 标签已经在 php 环境中。和多重回声。这样不好。

安装 SublimeText 3，当你编写代码时，你会看到颜色。如果颜色不对，你就知道出了问题。

例如，我的代码如下所示：

而你的看起来像这样

您可以清楚地看到绿色的变量、橙色的函数和蓝色的 html。在你的情况下，甚至 php 代码也是蓝色的（不好）。

我还对您的代码进行了一些重组。您应该将您的初始化计数器变量移到循环之外，否则它将始终设置为 1，并且您将无法完成任何计数。我也没有测试这个，所以结果可能是你必须使用 the_post_thumbnail() 而不是 get_the_post_thumbnail() （get_ 函数通常在 return 环境中使用，而不是 echo)。但试试看是否有效。

已编辑代码

所以如果你这样说

<div id="owl-main" class="owl-hash">
    <?php $counter = 1; ?>
    <?php $feat_query = new WP_Query( array( 'showposts' => 5,'meta_key'=>'_thumbnail_id') ); ?>
    <?php
    if ( $feat_query->have_posts() ) {
        while ( $feat_query->have_posts() ) {
            $feat_query->the_post();
            $permalink = get_permalink($post->ID);
            echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
            echo '<a class="button '.$counter.'" href="#'.$counter.'">'.get_the_title().'</a>';
            $counter++;
        }
    } // end if
    wp_reset_postdata();
    ?>
</div>

您会得到一个如下所示的代码：

<div id="owl-main" class="owl-hash">
    <div class="item" data-hash="1">
        <a href="http://yoursite.com/?p=98">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image1.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 1">
            Image post 1
        </a>
    </div>
    <a class="button 1" href="#1">Image post 1</a>
    <div class="item" data-hash="2">
        <a href="http://yoursite.com/?p=95">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image2.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 2">
            Image post 2
        </a>
    </div>
    <a class="button 2" href="#2">Image post 2</a>
    <div class="item" data-hash="3">
        <a href="http://yoursite.com/?p=93">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image3.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 3">
            Image post 3
        </a>
    </div>
    <a class="button 3" href="#3">Image post 3</a>
    <div class="item" data-hash="4">
        <a href="http://yoursite.com/?p=91">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image4.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 4">
            Image post 4
        </a>
    </div>
    <a class="button 4" href="#4">Image post 4</a>
    <div class="item" data-hash="5">
        <a href="http://yoursite.com/?p=89">
            <img width="825" height="510" src="http://yoursite.com/wp-content/uploads/image5.jpg" class="attachment-post-thumbnail wp-post-image" alt="Image 5">
            Image post 5
        </a>
    </div>
    <a class="button 5" href="#5">Image post 5</a>
</div>

我测试过它并且有效。

新代码

根据你最后的代码，我认为你的意思是这样的：

<section>
    <div class="wrapper">
        <div  class="owl-hash">
            <?php $counter = 1; ?>
            <?php $feat_query = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') ); ?>
            <?php
            if ( $feat_query->have_posts() ) {
                while ( $feat_query->have_posts() ) {
                    $feat_query->the_post();
                    $permalink = get_permalink($post->ID);
                    echo '<div class="item" data-hash="'.$counter.'"><a href="'.$permalink.'">'. get_the_post_thumbnail() . get_the_title().'</a></div>';
                    $counter++;
                }
            }
            wp_reset_postdata(); ?>
        </div>
        <?php
        $counter_2 = 1;
        $feat_query_2 = new WP_Query( array( 'posts_per_page' => 5,'meta_key'=>'_thumbnail_id') );

        if ( $feat_query_2->have_posts() ) {
            while ( $feat_query_2->have_posts() ) {
                $feat_query_2->the_post();
                echo '<a class="button '.$counter_2.'" href="#'.$counter_2.'">'.get_the_title().'</a>';
                $counter_2++;
            }
        }
        wp_reset_postdata();
        ?>
    </div>
</section>

注意不要重复你的变量，那是行不通的（因为它们实际上是对象，你希望它们有不同的名字）。也只在每次查询后重置 post 数据，而不是查询本身。这样你只是重置主查询循环的全局 $post 变量。 wp_reset_query() 将 $wp_query 和全局 post 数据恢复到原始主查询，这里不受影响。

WP_Query 实际上是一个 class，您的查询实际上是在创建一个对象，您可以从中提取所需的所有必要数据。 wp_reset_query() 和 wp_reset_postdata() 是 WP_Query class 的方法，可以让您多次使用它而不会影响全局。

希望这对您有所帮助。

owl url 哈希导航 wordpress

owl url hash navigation wordpress

php

wordpress

owl-carousel