Wordpress Divi主题链接到过滤的投资组合类别

时间:2015-03-17 01:40:11

标签: wordpress hyperlink filter gallery portfolio

我使用当前版本的Divi 2.0主题和Wordpress。该主题使用可过滤的投资组合库,用户可以单击该库以在类别之间进行过滤。链接是#,而我认为点击是通过使用:data-category-slug ="%1 $ s"

在哪里"%1 $ s"是类别的名称。我试过添加"%1 $ s"到#link的末尾,但它没有用。

主题功能:

function et_pb_filterable_portfolio( $atts ) {
extract( shortcode_atts( array(
        'module_id' => '',
        'module_class' => '',
        'fullwidth' => 'on',
        'posts_number' => 10,
        'include_categories' => '',
        'show_title' => 'on',
        'show_categories' => 'on',
        'show_pagination' => 'on',
        'background_layout' => 'light',
    ), $atts
) );

wp_enqueue_script( 'jquery-masonry-3' );
wp_enqueue_script( 'hashchange' );

$args = array();

if( 'on' === $show_pagination ) {
    $args['nopaging'] = true;
} else {
    $args['posts_per_page'] = (int) $posts_number;
}

if ( '' !== $include_categories ) {
    $args['tax_query'] = array(
        array(
            'taxonomy' => 'project_category',
            'field' => 'id',
            'terms' => explode( ',', $include_categories ),
            'operator' => 'IN',
        )
    );
}

$projects = et_divi_get_projects( $args );

$categories_included = array();
ob_start();
if( $projects->post_count > 0 ) {
    while ( $projects->have_posts() ) {
        $projects->the_post();

        $category_classes = array();
        $categories = get_the_terms( get_the_ID(), 'project_category' );
        if ( $categories ) {
            foreach ( $categories as $category ) {
                $category_classes[] = 'project_category_' . urldecode( $category->slug );
                $categories_included[] = $category->term_id;
            }
        }

        $category_classes = implode( ' ', $category_classes );

        ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_portfolio_item ' . $category_classes ); ?>>
        <?php
            $thumb = '';

            $width = 'on' === $fullwidth ?  1080 : 400;
            $width = (int) apply_filters( 'et_pb_portfolio_image_width', $width );

            $height = 'on' === $fullwidth ?  9999 : 284;
            $height = (int) apply_filters( 'et_pb_portfolio_image_height', $height );
            $classtext = 'on' === $fullwidth ? 'et_pb_post_main_image' : '';
            $titletext = get_the_title();
            $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
            $thumb = $thumbnail["thumb"];

            if ( '' !== $thumb ) : ?>
                <a href="<?php the_permalink(); ?>">
                <?php if ( 'on' !== $fullwidth ) : ?>
                    <span class="et_portfolio_image">
                <?php endif; ?>
                        <?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
                <?php if ( 'on' !== $fullwidth ) : ?>
                        <span class="et_overlay"></span>
                    </span>
                <?php endif; ?>
                </a>
        <?php
            endif;
        ?>

        <?php if ( 'on' === $show_title ) : ?>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php endif; ?>

        <?php if ( 'on' === $show_categories ) : ?>
            <p class="post-meta"><?php echo get_the_term_list( get_the_ID(), 'project_category', '', ', ' ); ?></p>
        <?php endif; ?>

        </div><!-- .et_pb_portfolio_item -->
        <?php
    }
}

wp_reset_postdata();

$posts = ob_get_clean();

$categories_included = explode ( ',', $include_categories );
$terms_args = array(
    'include' => $categories_included,
    'orderby' => 'name',
    'order' => 'ASC',
);
$terms = get_terms( 'project_category', $terms_args );

$category_filters = '<ul class="clearfix">';
$category_filters .= sprintf( '<li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">%1$s</a></li>',
    esc_html__( 'All', 'Divi' )
);
foreach ( $terms as $term  ) {
    $category_filters .= sprintf( '<li class="et_pb_portfolio_filter"><a href="#" data-category-slug="%1$s">%2$s</a></li>',
        esc_attr( urldecode( $term->slug ) ),
        esc_html( $term->name )
    );
}
$category_filters .= '</ul>';

$class = " et_pb_bg_layout_{$background_layout}";

$output = sprintf(
    '<div%5$s class="et_pb_filterable_portfolio %1$s%4$s%6$s" data-posts-number="%7$d"%10$s>
        <div class="et_pb_portfolio_filters clearfix">%2$s</div><!-- .et_pb_portfolio_filters -->

        <div class="et_pb_portfolio_items_wrapper %8$s">
            <div class="column_width"></div>
            <div class="gutter_width"></div>
            <div class="et_pb_portfolio_items">%3$s</div><!-- .et_pb_portfolio_items -->
        </div>
        %9$s
    </div> <!-- .et_pb_filterable_portfolio -->',
    ( 'on' === $fullwidth ? 'et_pb_filterable_portfolio_fullwidth' : 'et_pb_filterable_portfolio_grid clearfix' ),
    $category_filters,
    $posts,
    esc_attr( $class ),
    ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
    ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
    esc_attr( $posts_number),
    ('on' === $show_pagination ? '' : 'no_pagination' ),
    ('on' === $show_pagination ? '<div class="et_pb_portofolio_pagination"></div>' : '' ),
    is_rtl() ? ' data-rtl="true"' : ''
);

return $output;
}

localhost页面源:

localhost页面源:

                <div class="et_pb_row">
        <div class="et_pb_column et_pb_column_4_4">
        <div class="et_pb_filterable_portfolio et_pb_filterable_portfolio_grid clearfix et_pb_bg_layout_light" data-posts-number="10">
        <div class="et_pb_portfolio_filters clearfix"><ul class="clearfix"><li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">All</a></li><li class="et_pb_portfolio_filter"><a href="#" id="verizon-4g-lte-smartphones" data-category-slug="verizon-4g-lte-smartphones">4G LTE Smartphones</a></li><li class="et_pb_portfolio_filter"><a href="#" id="verizon-connected-devices" data-category-slug="verizon-connected-devices">Specialty Devices</a></li></ul></div><!-- .et_pb_portfolio_filters -->

        <div class="et_pb_portfolio_items_wrapper ">
            <div class="column_width"></div>
            <div class="gutter_width"></div>
            <div class="et_pb_portfolio_items">         <div id="post-253" class="post-253 project type-project status-publish has-post-thumbnail hentry et_pb_portfolio_item project_category_verizon-4g-lte-smartphones">
                            <a href="http://localhost/project/galaxy-note-edge-by-samsung/">
                                        <span class="et_portfolio_image">
                                            <img src="http://localhost/wp-content/uploads/2015/02/devices-samsung-note-edge-thumb3-216x284.png" alt='Galaxy Note™ Edge by Samsung' width='400' height='284' />                                              <span class="et_overlay"></span>
                    </span>
                                    </a>

                        <h2><a href="http://localhost/project/galaxy-note-edge-by-samsung/">Galaxy Note™ Edge by Samsung</a></h2>

                        <p class="post-meta"><a href="http://localhost/project_category/verizon-4g-lte-smartphones/" rel="tag">4G LTE Smartphones</a></p>

        </div><!-- .et_pb_portfolio_item -->
                    <div id="post-97" class="post-97 project type-project status-publish has-post-thumbnail hentry et_pb_portfolio_item project_category_verizon-connected-devices">
                            <a href="http://localhost/project/lg-gizmopal/">
                                        <span class="et_portfolio_image">
                                            <img src="http://localhost/wp-content/uploads/2015/02/devices-gizmopal-thumb-216x284.png" alt='GizmoPal™ by LG' width='400' height='284' />                                             <span class="et_overlay"></span>
                    </span>
                                    </a>

                        <h2><a href="http://localhost/project/lg-gizmopal/">GizmoPal™ by LG</a></h2>

                        <p class="post-meta"><a href="http://localhost/project_category/verizon-connected-devices/" rel="tag">Specialty Devices</a></p>

        </div><!-- .et_pb_portfolio_item -->
        </div><!-- .et_pb_portfolio_items -->
        </div>
        <div class="et_pb_portofolio_pagination"></div>
    </div> <!-- .et_pb_filterable_portfolio -->
    </div> <!-- .et_pb_column -->
    </div> <!-- .et_pb_row -->

    </div> <!-- .et_pb_section -->
                </div> <!-- .entry-content -->


            </article> <!-- .et_pb_post -->



</div> 

我想通过已选择的过滤器从一个页面链接到已过滤的投资组合?任何帮助表示赞赏。

-Ranks

2 个答案:

答案 0 :(得分:0)

Jordi 的答案似乎不正确,我不想惹恼javascript。我发现url/project/slug工作正常,即mydomain.com/project/my-project

答案 1 :(得分:-1)

我所做的是使用google sitemap插件生成站点地图,并在配置菜单“sitemap的内容”中选择自定义分类。然后,我检查了站点地图,我看到项目类别在url/project_category/category_slug下可用。