css ACF Pro json文件创建定价表字段组
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css ACF Pro json文件创建定价表字段组相关的知识，希望对你有一定的参考价值。
<?php
$table = get_field( 'pricing_table' );
if ( ! $table ) {
return;
}
echo '<div class="pricing-table">';
foreach ( $table as $col ) {
$classes = 'pt-col';
if ( $col['callout'] ) {
$classes = 'pt-col pt-callout';
}
echo '<div class="' . $classes . '">';
$heading = isset($col['heading']) ? $col['heading'] : '';
echo '<div class="pt-row pt-header">' . sanitize_text_field($heading) . '</div>';
$rows = $col['rows'];
foreach ( $rows as $row ) {
echo '<div class="pt-row">' . sanitize_text_field($row['row']) . '</div>';
}
$button_link = $col['button_link'];
$button_text = $col['button_text'];
if ( $button_link && $button_text ) {
echo '<div class="pt-row pt-footer"><a class="button" href="' . esc_url($button_link) . '" title="' . esc_attr($button_text) . '">' . sanitize_text_field($button_text) . '</a></div>';
}
echo '</div>';
}
echo '</div>';{
"key": "group_56d9bec9ded3e",
"title": "Pricing Table",
"fields": [
{
"key": "field_56d9becfaaa27",
"label": "Pricing Table",
"name": "pricing_table",
"type": "repeater",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "field_56d9c1308d95f",
"min": "",
"max": "",
"layout": "block",
"button_label": "Add Column",
"sub_fields": [
{
"key": "field_56d9c22279fb2",
"label": "Heading",
"name": "heading",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 80,
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": "",
"readonly": 0,
"disabled": 0
},
{
"key": "field_56d9cbf7a8665",
"label": "Callout",
"name": "callout",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 20,
"class": "",
"id": ""
},
"message": "Make callout",
"default_value": 0
},
{
"key": "field_56d9c1308d95f",
"label": "Rows",
"name": "rows",
"type": "repeater",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "",
"min": 1,
"max": "",
"layout": "table",
"button_label": "Add Row",
"sub_fields": [
{
"key": "field_56d9c1588d960",
"label": "Row",
"name": "row",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": "",
"readonly": 0,
"disabled": 0
}
]
},
{
"key": "field_56d9c22b79fb3",
"label": "Button Link",
"name": "button_link",
"type": "url",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 50,
"class": "",
"id": ""
},
"default_value": "",
"placeholder": ""
},
{
"key": "field_56d9c24479fb4",
"label": "Button Text",
"name": "button_text",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 50,
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": "",
"readonly": 0,
"disabled": 0
}
]
}
],
"location": [
[
{
"param": "page",
"operator": "==",
"value": "7"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": 1,
"description": "",
"modified": 1457116658
}/* Pricing Table
--------------------------------------------- */
.pricing-table {
box-sizing: border-box;
display: -webkit-flex;display: -ms-flexbox;display: flex;
-webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;
-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;
-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;
-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
}
.pt-col {
position: relative;
-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
-webkit-flex-basis: 0;-ms-flex-preferred-size: 0;flex-basis: 0;
max-width: 100%;
display: -webkit-flex;display: -ms-flexbox;display: flex;
-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;
-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;
}
.pricing-table {
padding: 30px 0;
}
.pt-col {
text-align: center;
padding-bottom: 80px;
border: 1px solid #333;
border-radius: 3px;
}
.pt-col:first-of-type {
border-radius: 3px 0 0 3px;
}
.pt-col:last-of-type {
border-radius: 0 3px 3px 0;
}
.pt-row {
padding: 8px 12px;
border-top: 1px solid #333;
}
.pt-header {
background-color: #555;
color: #fff;
font-size: 22px;
font-weight: bold;
padding: 20px 12px;
border-bottom: 2px solid #333;
}
.pt-footer {
position: absolute;
bottom: 0; left: 15px; right: 15px;
padding: 20px;
}
.pt-row.pt-header,
.pt-row.pt-footer {
border: none;
}
.pt-callout {
/*background-color: #e4e4e4;*/
margin: -20px -1px -20px;
box-shadow: 0 0 15px rgba(0,0,0,0.15);
}
.pt-callout .pt-header {
background-color: #333;
font-size: 26px;
padding: 36px 12px;
}
@media only screen and (max-width: 800px) {
.pricing-table,
.pt-col,
.pt-col.pt-callout {
display: block;
margin: 0;
}
.pt-col,
.pt-col.pt-callout {
margin-bottom: 30px;
border-radius: 3px;
}
}以上是关于css ACF Pro json文件创建定价表字段组的主要内容，如果未能解决你的问题，请参考以下文章
php 使用ACF Pro将输出自定义字段截断为指定的单词数
php 使用ACF Pro将输出自定义字段截断为指定的单词数