// 产品规格表格简码
|
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' );
|
