javascript - 仅当存在一个或多个相关项目时才显示 slider

标签 javascript php jquery wordpress

我有一个 WordPress 主题的作品集，在单个作品集页面上有一个相关作品集项目的 slider 。嗯，这是一个很酷的功能，但即使没有相关项目与特定的投资组合项目匹配，它也会显示 slider 。

这是我显示 slider 的模板:

<div class="related_portfolio">
    <?php gbx_related_portfolio($post->ID); ?>
</div>

以下是我用来创建 slider 的函数:

function get_related_portfolio($post_id) {
$item_cats = get_the_terms($post_id, 'portfolio_category');
if ($item_cats) {
    foreach ($item_cats as $item_cat) $item_array[] = $item_cat->term_id;
}

$args = wp_parse_args($args, array(
    'showposts' => 5,
    'post__not_in' => array($post_id),
    'ignore_sticky_posts' => 0,
    'post_type' => 'portfolio',
    'tax_query' => array(
        array(
            'taxonomy' => 'portfolio_category',
            'field' => 'id',
            'terms' => $item_array
        )
    ),
    'orderby' => 'rand'
));

$query = new WP_Query($args);
return $query;
}

并且

function gbx_related_portfolio($post_id) {
?>
<div class="recentportfolio-wrapper">
    <div class="image-carousel-header">
        <div class="image-carousel-title"><span>Related Items</span></div>
        <div class="image-carousel-nav">
            <a class="prev"><i class="fa fa-chevron-left"></i></a><a class="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="iosslider recentportfolio-carousel <?php echo 'recentportfolio-carousel'.$randomid; ?>">
        <ul><?php
            $recentPortfolio = get_related_portfolio($post_id);

            if ($recentPortfolio->have_posts()) {
                while ( $recentPortfolio->have_posts() ) { $recentPortfolio->the_post(); global $post; ?>
                <li class="portfolioslider_item">
                    <div class="portfolio-item">
                        <div class="image">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                if('' != get_the_post_thumbnail())
                                    $full_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
                                else
                                    $full_image = get_template_directory_uri().'/images/thumbnail_placeholder.png';

                                echo '<img class="size-full" src="' . gbx_process_image($full_image, 270, 240).'" alt="'.get_the_title(get_post_thumbnail_id($post->ID)).'"/>';
                                ?>
                            </a>
                            <div class="image-extras">
                                <div class="image-extras-bg"></div>
                                <div class="image-extras-content">
                                    <a class="icon" href="<?php the_permalink(); ?>"><span class="glyphicon glyphicon-paperclip"></span></a>
                                    <a class="icon swipebox" href="<?php echo $full_image; ?>" title="<?php echo get_the_title($post->ID); ?>"><span class="glyphicon glyphicon-search"></span></a>
                                </div>
                            </div>
                        </div>

                        <div class="portfolio-meta">
                            <div class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                            <div class="pull-left"><span class="glyphicon glyphicon-time"></span><?php echo get_the_date('F j, Y'); ?></div>
                            <div class="pull-right">
                                <span class="likeanimation"></span>
                                <a href="#" class="like <?php echo gbx_get_like_status($post->ID); ?>" title="<?php echo gbx_get_like_title($post->ID); ?>" data_action="likepost" data_postid="<?php echo $post->ID; ?>" data_nonce="<?php echo wp_create_nonce("gbx_like_nonce"); ?>">
                                    <span class="glyphicon glyphicon-heart"></span>
                                    <span class="likecount"><?php echo gbx_get_likecount($post->ID); ?></span>
                                </a>
                                <span class="glyphicon glyphicon-eye-open"></span><?php echo gbx_get_viewcount($post->ID); ?>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </li>
            <?php } } ?>
        </ul>
    </div>
</div>
<script>
(function($){
    $(window).load(function() {
        var $recentportfolio_carousel = $('.<?php echo 'recentportfolio-carousel'.$randomid; ?>');
        function custom_recent_portfolio_UpdateSliderHeight(args) {               
            var height = $('.<?php echo 'recentportfolio-carousel'.$randomid; ?> .portfolioslider_item:eq(' + (args.currentSlideNumber-1) + ')').outerHeight(true);
            $recentportfolio_carousel.css({ height: height });
        }
        $recentportfolio_carousel.iosSlider({
            snapToChildren: true,
            desktopClickDrag: true,
            navPrevSelector: $recentportfolio_carousel.parent().find('a.prev'),
            navNextSelector: $recentportfolio_carousel.parent().find('a.next'),
            onSliderLoaded: custom_recent_portfolio_UpdateSliderHeight,
            onSlideChange: custom_recent_portfolio_UpdateSliderHeight,
            onSliderResize: custom_recent_portfolio_UpdateSliderHeight
        });
    });
})(jQuery);
</script>
<?php
}

最佳答案

您的代码混杂着很多语法错误。我已将您的所有代码放在一个函数中并重新排列并修复了错误。不过，我对这部分不是 100% 确定，它未经测试

 function gbx_related_portfolio() {
wp_reset_postdata();
global $post;
$orig_post = $post;
if ( 'portfolio' == get_post_type() ) {
$tags = wp_get_post_terms($post->ID, 'portfolio_category');
if ($tags) {
    $tag_ids = array();

    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
    $args=array(
        'tax_query' => array(
        array(
            'taxonomy'  => 'portfolio_category',
            'terms'     => $tag_ids,
            'operator'  => 'IN'
        )
    ),
    'post__not_in'          => array( $post->ID ),
    'posts_per_page'        => 5,
    'ignore_sticky_posts'   => 0
    );
    $my_query = new wp_query( $args );

    if( $my_query->have_posts() ) { ?>

<div class="recentportfolio-wrapper">
    <div class="image-carousel-header">
        <div class="image-carousel-title"><span>Related Items</span></div>
        <div class="image-carousel-nav">
            <a class="prev"><i class="fa fa-chevron-left"></i></a><a class="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="iosslider recentportfolio-carousel <?php echo 'recentportfolio-carousel'.$randomid; ?>">
        <ul>

        <?php  while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

                <li class="portfolioslider_item">
                    <div class="portfolio-item">
                        <div class="image">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                if('' != get_the_post_thumbnail())
                                    $full_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
                                else
                                    $full_image = get_template_directory_uri().'/images/thumbnail_placeholder.png';

                                ?>
                            </a>
                            <div class="image-extras">
                                <div class="image-extras-bg"></div>
                                <div class="image-extras-content">
                                    <a class="icon" href="<?php the_permalink(); ?>"><span class="glyphicon glyphicon-paperclip"></span></a>
                                    <a class="icon swipebox" href="<?php echo $full_image; ?>" title="<?php echo get_the_title($post->ID); ?>"><span class="glyphicon glyphicon-search"></span></a>
                                </div>
                            </div>
                        </div>

                        <div class="portfolio-meta">
                            <div class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                            <div class="pull-left"><span class="glyphicon glyphicon-time"></span><?php echo get_the_date('F j, Y'); ?></div>
                            <div class="pull-right">
                                <span class="likeanimation"></span>
                                <a href="#" class="like <?php echo gbx_get_like_status($post->ID); ?>" title="<?php echo gbx_get_like_title($post->ID); ?>" data_action="likepost" data_postid="<?php echo $post->ID; ?>" data_nonce="<?php echo wp_create_nonce("gbx_like_nonce"); ?>">
                                    <span class="glyphicon glyphicon-heart"></span>
                                    <span class="likecount"><?php echo gbx_get_likecount($post->ID); ?></span>
                                </a>
                                <span class="glyphicon glyphicon-eye-open"></span><?php echo gbx_get_viewcount($post->ID); ?>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </li>

            <?php endwhile; ?>  

        </ul>
    </div>
</div>
<script>
(function($){
    $(window).load(function() {
        var $recentportfolio_carousel = $('.<?php echo 'recentportfolio-carousel'.$randomid; ?>');
        function custom_recent_portfolio_UpdateSliderHeight(args) {               
            var height = $('.<?php echo 'recentportfolio-carousel'.$randomid; ?> .portfolioslider_item:eq(' + (args.currentSlideNumber-1) + ')').outerHeight(true);
            $recentportfolio_carousel.css({ height: height });
        }
        $recentportfolio_carousel.iosSlider({
            snapToChildren: true,
            desktopClickDrag: true,
            navPrevSelector: $recentportfolio_carousel.parent().find('a.prev'),
            navNextSelector: $recentportfolio_carousel.parent().find('a.next'),
            onSliderLoaded: custom_recent_portfolio_UpdateSliderHeight,
            onSlideChange: custom_recent_portfolio_UpdateSliderHeight,
            onSliderResize: custom_recent_portfolio_UpdateSliderHeight
        });
    });
})(jQuery);
</script>
<?php
}
}
}
$post = $orig_post;
wp_reset_query(); 
}

直接调用即可

<div class="related_portfolio">
    <?php gbx_related_portfolio(); ?>
</div>

关于javascript - 仅当存在一个或多个相关项目时才显示 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22953260/

上一篇：javascript - 将 d3.map 快速转换为值数组

下一篇：javascript - 如何更新UI部分的knockout js observablearray的编辑项？

相关文章：

php - 使用数组语法访问字符串中的字符

jQuery minicolor.js 未按预期运行

javascript - 如何限制datepair.js中的时间范围？

php - 如何在 mysql 数据库中列出这个 javascript 数组？我应该使用什么索引？

php - 找不到保存处理程序 'redis' - Ubuntu

javascript - 错误 TS2739 : Type '{}' is missing the following properties from type

javascript - 如何在 html 或 javascript 中将 ID 更改为类

jquery - 从缓存的选择器遍历 DOM 是否比在 DOM 中查找 ID 元素更快？

javascript - 下划线减少表示增加价格

javascript - 无法从 Azure AD B2C 登录 URL 获取查询参数

©2024 IT工具网  联系我们