json ACF Pro的基于Genesis的页面模板，允许嵌套的选项卡组。第一级是水平标签，第二级是垂直标签。使用Flex
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了json ACF Pro的基于Genesis的页面模板，允许嵌套的选项卡组。第一级是水平标签，第二级是垂直标签。使用Flex相关的知识，希望对你有一定的参考价值。
<?php
/**
* Template Name: Tabs
*/
// Register tab js including jQuery UI Tabs.
add_action( 'wp_enqueue_scripts', 'prefix_load_tab_script' );
function prefix_load_tab_script() {
wp_register_script( 'prefix-tabs-wrap', get_stylesheet_directory_uri() . '/js/prefix-tabs.js', array( 'jquery-ui-tabs' ), '1.0.0', true );
}
// Output the tabs.
add_action( 'genesis_entry_content', 'prefix_maybe_do_tabs' );
function prefix_maybe_do_tabs() {
// Bail if ACF is not active.
if ( ! function_exists( 'get_field' ) ) {
return;
}
// Get the tabs.
$tabs = get_field( 'tabs' );
// Bail if no tabs.
if ( ! $tabs ) {
return;
}
// Enqueue our script now that we know we have tabs.
wp_enqueue_script( 'prefix-tabs-wrap' );
echo prefix_get_tabs( $tabs );
}
/**
* Helper function to get the tabs, maybe as vertical tabs.
*
* @param array $tabs The ACF repeater field for the tabs. Keys of 'title', 'content'.
* @param boolean $vertical Whether this should be a horizontal or vertical tab group.
*
* @return string|HTML The tab group HTML.
*/
function prefix_get_tabs( $tabs, $vertical = false ) {
// Bail if no tabs.
if ( ! $tabs || ! is_array( $tabs ) ) {
return;
}
$html = '';
$prefix = '';
$class = 'prefix-tabs-wrap';
if ( $vertical ) {
$prefix = 'nested-';
$class .= ' prefix-tabs-vertical';
} else {
$class .= ' prefix-tabs-horizontal';
}
$html .= sprintf( '<div class="%s">', $class );
if ( $vertical ) {
$html .= '<div class="row">';
}
$tab_columns = '';
if ( $vertical ) {
$tab_columns = ' col col-xs-12 col-sm-3 col-md-3';
}
$html .= sprintf( '<ul class="prefix-tabs%s">', $tab_columns );
// Tabs.
foreach ( $tabs as $tab ) {
// Skip if no title.
if ( ! isset( $tab['title'] ) || empty( $tab['title'] ) ) {
continue;
}
// Output the title.
$html .= sprintf( '<li class="prefix-tab"><a href="#%s">%s</a></li>', $prefix . sanitize_key( $tab['title'] ), sanitize_text_field( $tab['title'] ) );
}
$html .= '</ul>';
$content_columns = '';
if ( $vertical ) {
$content_columns = ' col col-xs-12 col-sm-9 col-md-9';
}
// Content.
foreach ( $tabs as $tab ) {
// Skip if no title.
if ( ! isset( $tab['title'] ) || empty( $tab['title'] ) ) {
continue;
}
$content = isset( $tab['content'] ) ? $tab['content'] : '';
if ( isset( $tab['tabs'] ) ) {
$nested_tabs = prefix_get_tabs( $tab['tabs'], true );
if ( ! empty( $nested_tabs ) ) {
$content .= $nested_tabs;
}
}
// Output the content.
$html .= sprintf( '<div id="%s" class="prefix-tab-content%s">%s</div>', $prefix . sanitize_key( $tab['title'] ), $content_columns, $content );
}
if ( $vertical ) {
$html .= '</div>';
}
$html .= '</div>';
return $html;
}
genesis();
/* ## Tabs - General
--------------------------------------------- */
.prefix-tab a {
display: block;
background: #f5f5f5;
color: #555;
text-transform: uppercase;
font-size: 14px;
padding: 8px 16px;
border: 1px solid #eee;
text-decoration: none;
outline: none;
letter-spacing: .2pt;
font-family: 'Open Sans', sans-serif;
}
.prefix-tab a:hover {
color: #888;
}
.prefix-tab.ui-tabs-active a {
background: #fff;
}
.prefix-tab.ui-tabs-active a:hover {
color: #555; /* this counteracts the tab color hover */
}
.prefix-tab-content {
padding: 24px;
overflow: hidden;
}
/* ## Tabs - Horizontal
--------------------------------------------- */
.prefix-tabs-horizontal > .prefix-tabs,
.entry-content .prefix-tabs-horizontal > .prefix-tabs {
margin: 0 0 -1px;
overflow: hidden;
}
.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab {
display: inline-block;
margin: 0 5px 0 0;
}
.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab a {
border-bottom: 0;
}
.prefix-tabs-horizontal > .prefix-tab-content {
border: 1px solid #eee;
}
/* ## Tabs - Vertical
--------------------------------------------- */
.prefix-tabs-vertical,
.entry-content .prefix-tabs-vertical {
margin: 0 0 0 -25px;
border: 1px solid #eee;
}
.prefix-tabs-vertical > .row > .prefix-tabs,
.entry-content .prefix-tabs-vertical > .row > .prefix-tabs {
background-color: #fafafa;
margin: -1px -1px 0;
border-right: 1px solid #eee;
overflow: visible;
}
.prefix-tabs-vertical .prefix-tab {
display: block;
width: 100%;
}
.prefix-tabs-vertical .prefix-tab a {
margin-bottom: -1px;
border: 1px solid #eee;
border-right: 0;
}
.prefix-tabs-vertical .prefix-tab.ui-tabs-active a {
margin-right: -1px;
}
/* ## Tabs - Mobile
--------------------------------------------- */
@media only screen and (max-width: 544px) {
.prefix-tabs-vertical,
.entry-content .prefix-tabs-vertical {
margin: 0 -16px;
}
.prefix-tabs-horizontal > .prefix-tabs,
.prefix-tabs-vertical > .row > .prefix-tabs,
.entry-content .prefix-tabs-horizontal > .prefix-tabs,
.entry-content .prefix-tabs-vertical > .row > .prefix-tabs {
display: block;
background-color: #fafafa;
margin: 0;
padding: 4px;
}
.prefix-tabs-horizontal > .prefix-tabs,
.entry-content .prefix-tabs-horizontal > .prefix-tabs {
margin: 0;
border: 1px solid #eee;
border-bottom: 0;
}
.prefix-tabs-vertical > .row > .prefix-tabs,
.entry-content .prefix-tabs-vertical > .row > .prefix-tabs {
border: 0;
border-bottom: 1px solid #eee;
}
.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab,
.prefix-tabs-vertical > .row > .prefix-tabs > .prefix-tab {
display: inline-block;
width: auto;
margin: 2px;
}
.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab a,
.prefix-tabs-vertical > .row > .prefix-tabs > .prefix-tab a,
.prefix-tabs-horizontal > .prefix-tabs > .prefix-tab.ui-tabs-active a,
.prefix-tabs-vertical > .row > .prefix-tabs > .prefix-tab.ui-tabs-active a {
display: block;
width: 100%;
margin: 0;
border: 1px solid #eee;
}
}
jQuery(function( $ ){
$( '.prefix-tabs-wrap' ).tabs();
$( '.prefix-tabs-vertical' ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( '.prefix-tabs-vertical' ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
[
{
"key": "group_59c02d79966e4",
"title": "Tabbed Content",
"fields": [
{
"key": "field_59c02db106f90",
"label": "Tabs",
"name": "tabs",
"type": "repeater",
"value": null,
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "field_59c02dee06f91",
"min": 0,
"max": 0,
"layout": "block",
"button_label": "Add Tab",
"sub_fields": [
{
"key": "field_59c02dee06f91",
"label": "Title",
"name": "title",
"type": "text",
"value": null,
"instructions": "",
"required": 1,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_59c02f1d06f92",
"label": "Content",
"name": "content",
"type": "wysiwyg",
"value": null,
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_59c030d2694b7",
"label": "Tabs",
"name": "tabs",
"type": "repeater",
"value": null,
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "field_59e7d655a8de2",
"min": 0,
"max": 0,
"layout": "block",
"button_label": "Add Tab",
"sub_fields": [
{
"key": "field_59e7d655a8de2",
"label": "Title",
"name": "title",
"type": "text",
"value": null,
"instructions": "",
"required": 1,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_59e7d66ca8de3",
"label": "Content",
"name": "content",
"type": "wysiwyg",
"value": null,
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
}
]
}
]
}
],
"location": [
[
{
"param": "page_template",
"operator": "==",
"value": "templates\/tabs.php"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": 1,
"description": ""
}
]以上是关于json ACF Pro的基于Genesis的页面模板，允许嵌套的选项卡组。第一级是水平标签，第二级是垂直标签。使用Flex的主要内容，如果未能解决你的问题，请参考以下文章