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

Question

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

其中“%1$s”是类别的名称。我尝试在#link 末尾添加“%1$s”，但它不起作用。

主题功能：

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;
}

本地页面来源：

本地页面来源：

                <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> 

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

-排名

Answer 1

我也在为同样的事情苦苦挣扎。最后，我做了一个不稳定的解决方法。

首先，我在该区域的 Divi > Theme Options > Integration > 部分添加了一个自定义脚本。在我的例子中，该类别称为“可用”。

<script>
function doAvailable() {
setTimeout( function() { document.querySelector('[data-category-slug="available"]').click(); }, 1000);
}
</script>

然后在我创建的页面中，我在页面底部添加了一个代码模块来调用自定义函数。

<script>
doAvailable();
</script>

我希望我能找到更好的方法，但这确实对我有用。

Answer 2

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

Answer 3

Jordi 的回答似乎不正确，我不想与javascript 混在一起。我发现url/project/slug 工作正常，即mydomain.com/project/my-project