fix:增加添越智

wzp

8 天以前 4dc3ea6edab4552daf646e7b34171b1727ddbd23

fix:增加添越智

 ÌíÔ½ÖÇ/²úÆ·ÏêÇéÒ³¼òÂë

New file
@@ -0,0 +1,179 @@
// äº§å“è§„格表格简码
function product_spec_table_shortcode() {
    $post_id = get_the_ID();

    $tab_top_title        = get_field( 'tab_top_title', $post_id );
    $table_left_title     = get_field( 'table_left_title', $post_id );
    $specifications_table = get_field( 'specifications_table', $post_id );

    if ( empty( $specifications_table ) ) {
        return '';
    }

    $row_count = count( $specifications_table );

    ob_start();
    ?>
    <div class="pst-wrapper">
        <table class="pst-table" cellspacing="0" cellpadding="0">
            <colgroup>
                <col style="width: 90px;">
                <col style="width: 210px;">
                <col>
            </colgroup>
            <thead>
                <?php if ( $tab_top_title ) : ?>
                <tr>
                    <th class="pst-top-title" colspan="3">
                        <?php echo esc_html( $tab_top_title ); ?>
                    </th>
                </tr>
                <?php endif; ?>
            </thead>
            <tbody>
                <?php foreach ( $specifications_table as $index => $row ) :
                    $cell_bg  = '#ffffff';
                    $key_val  = isset( $row['key'] )   ? esc_html( $row['key'] )   : '';
                    $val_val  = isset( $row['value'] ) ? esc_html( $row['value'] ) : '';
                ?>
                <tr>
                    <?php if ( $index === 0 ) : ?>
                    <td
                        class="pst-left-title"
                        rowspan="<?php echo esc_attr( $row_count ); ?>"
                    >
                        <span><?php echo esc_html( $table_left_title ); ?></span>
                    </td>
                    <?php endif; ?>
                    <td
                        class="pst-key"
                        style="background-color: <?php echo esc_attr( $cell_bg ); ?>;"
                    ><?php echo $key_val; ?></td>
                    <td
                        class="pst-value"
                        style="background-color: <?php echo esc_attr( $cell_bg ); ?>;"
                    ><?php echo nl2br( $val_val ); ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <style>
    .pst-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .pst-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        border: 1px solid #e6e6e6;
    }

    .pst-table .pst-top-title {
        background-color: #ffffff;
        color: #333333;
        text-align: center;
        font-size: 26px;
        font-weight: 600;
        padding: 15px 19px;
        border-bottom: 1px solid #eeeeee;
    }

    .pst-table .pst-left-title {
        background-color: #ffffff;
        color: #333333;
        text-align: center;
        vertical-align: middle;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #eeeeee;
        padding: 0;
    }

    .pst-table .pst-left-title span {
        display: block;
        font-size: 20px;
        line-height: 1.5;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
        white-space: nowrap;
        margin: auto;
    }

    .pst-table .pst-key {
        font-size: 15px;
        color: #333333;
        padding: 19px;
        vertical-align: middle;
        word-break: break-word;
        white-space: pre-wrap;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #eeeeee;
    }

    .pst-table .pst-value {
        font-size: 15px;
        color: #333333;
        padding: 19px;
        vertical-align: middle;
        word-break: break-word;
        white-space: pre-wrap;
        border-bottom: 1px solid #eeeeee;
    }

    .pst-table tr:last-child .pst-key,
    .pst-table tr:last-child .pst-value {
        border-bottom: none;
    }

    @media (max-width: 768px) {
        .pst-table {
            min-width: 600px;
        }

        .pst-table .pst-top-title {
            font-size: 20px;
            padding: 12px 14px;
        }

        .pst-table .pst-left-title span {
            font-size: 16px;
            line-height: 1.4;
        }

        .pst-table .pst-key,
        .pst-table .pst-value {
            font-size: 14px;
            padding: 12px;
            line-height: 1.6;
        }
    }

    @media (max-width: 480px) {
        .pst-table {
            min-width: 520px;
        }

        .pst-table .pst-top-title {
            font-size: 18px;
            padding: 10px 12px;
        }

        .pst-table .pst-left-title span {
            font-size: 14px;
        }

        .pst-table .pst-key,
        .pst-table .pst-value {
            font-size: 13px;
            padding: 10px;
        }
    }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode( 'product_spec_table', 'product_spec_table_shortcode' );