WordPress短代码改造：实现商品属性限显及折叠展开功能

需求背景 #

已有短代码[display_attributes]可在商品页面以表格形式展示全部商品属性，现需实现以下任一效果：

• 限制显示的商品属性数量
• 默认显示部分属性，剩余属性隐藏在可折叠区域，点击按钮展开

方案1：限制显示属性数量 #

修改原代码，新增limit参数，可指定最多显示的属性数量，默认显示全部。修改后的代码如下：

function so_39394127_attributes_shortcode( $atts ) {
    global $product;

    if( ! is_object( $product ) || ! $product->has_attributes() ){
        return;
    }

    // 解析短代码参数，新增limit参数
    $args = shortcode_atts( array(
        'attributes' => array_keys( $product->get_attributes() ),
        'limit'      => -1 // 默认-1表示不限制数量
    ), $atts );

    // 处理attributes参数转为数组
    if( is_string( $args['attributes'] ) ){
        $args['attributes'] = array_map( 'trim', explode( '|' , $args['attributes'] ) );
    }

    $html = '';

    if( ! empty( $args['attributes'] ) ) {
        // 如果设置了limit，截取前N个属性
        if( $args['limit'] > 0 ){
            $args['attributes'] = array_slice( $args['attributes'], 0, $args['limit'] );
        }

        foreach ( $args['attributes'] as $attribute ) {
            $taxonomy = strpos( $attribute, 'pa_' ) === true ? wc_attribute_taxonomy_name( $attribute ) : $attribute;
        
            if( taxonomy_is_product_attribute( $taxonomy ) ){
                $attribute_label = wc_attribute_label( $taxonomy );
                $html .= '<tr class=" "><th style="background-color:white;font-size:12px;font-weight:700;width:40%;line-height:1em;">' . $attribute_label . '</th><td class="tableattr2">' . get_the_term_list( $product->get_id(), $taxonomy,' ' , ', ', )  . '</td></tr>';
            }
        }

        $html = '<table style="line-height:1em;">' . $html . '</table>';
    }

    return $html;
}
add_shortcode( 'display_attributes', 'so_39394127_attributes_shortcode' );

使用方法 #

• 默认显示全部：[display_attributes]
• 只显示前3个属性：[display_attributes limit="3"]

方案2：折叠显示剩余属性 #

默认显示指定数量的属性，剩余属性隐藏在折叠区域，点击按钮切换显示/隐藏。修改后的代码如下：

function so_39394127_attributes_shortcode( $atts ) {
    global $product;

    if( ! is_object( $product ) || ! $product->has_attributes() ){
        return;
    }

    // 解析短代码参数，新增show参数控制默认显示数量
    $args = shortcode_atts( array(
        'attributes' => array_keys( $product->get_attributes() ),
        'show'       => 3 // 默认显示前3个属性
    ), $atts );

    // 处理attributes参数转为数组
    if( is_string( $args['attributes'] ) ){
        $args['attributes'] = array_map( 'trim', explode( '|' , $args['attributes'] ) );
    }

    $total_attributes = count( $args['attributes'] );
    $html = '';
    $hidden_html = '';

    if( ! empty( $args['attributes'] ) ) {
        foreach ( $args['attributes'] as $index => $attribute ) {
            $taxonomy = strpos( $attribute, 'pa_' ) === true ? wc_attribute_taxonomy_name( $attribute ) : $attribute;
        
            if( taxonomy_is_product_attribute( $taxonomy ) ){
                $attribute_label = wc_attribute_label( $taxonomy );
                $row_html = '<tr class=" "><th style="background-color:white;font-size:12px;font-weight:700;width:40%;line-height:1em;">' . $attribute_label . '</th><td class="tableattr2">' . get_the_term_list( $product->get_id(), $taxonomy,' ' , ', ', )  . '</td></tr>';
                
                // 前show个属性显示，其余放入隐藏区域
                if( $index < $args['show'] ){
                    $html .= $row_html;
                } else {
                    $hidden_html .= $row_html;
                }
            }
        }

        $html = '<table style="line-height:1em;">' . $html . '</table>';

        // 如果有隐藏的属性，添加折叠按钮和隐藏区域
        if( ! empty( $hidden_html ) ){
            $html .= '
            <div class="attribute-collapse-container">
                <button class="attribute-collapse-btn" onclick="toggleAttributes(this)">显示更多属性</button>
                <div class="attribute-hidden-content" style="display:none;">
                    <table style="line-height:1em;">' . $hidden_html . '</table>
                </div>
            </div>
            <script>
                function toggleAttributes(btn) {
                    const content = btn.nextElementSibling;
                    if(content.style.display === "none"){
                        content.style.display = "block";
                        btn.textContent = "收起属性";
                    } else {
                        content.style.display = "none";
                        btn.textContent = "显示更多属性";
                    }
                }
            </script>
            <style>
                .attribute-collapse-btn {
                    margin-top: 10px;
                    padding: 5px 15px;
                    cursor: pointer;
                    border: 1px solid #ddd;
                    background: #f5f5f5;
                }
                .attribute-hidden-content {
                    margin-top: 10px;
                }
            </style>
            ';
        }
    }

    return $html;
}
add_shortcode( 'display_attributes', 'so_39394127_attributes_shortcode' );

使用方法 #

• 默认显示前3个，剩余折叠：[display_attributes]
• 自定义默认显示数量（比如前5个）：[display_attributes show="5"]

内容的提问来源于stack exchange，提问作者Fun Pics