Manual de Redux Framework para WordPress
Redux framework es una herramienta que nos ayuda a crear diferentes tipos de campos para poder configurar diferentes partes de nuestro wordpress.
Algunos de esos campos que redux nos ofrese son los siguientes:
Palette Color
ACE Editor
Background
Border
Button Set
Checkbox Color
Color Gradient
Color RGBA
Date
y muchos mas.
Los campos mas importantes son los que vamos a enseñar en estos videos:
Lista de categorias de fields: https://docs.reduxframework.com/category/core/fields/
En el siguiente codigo muestro su completo funcionamiento:
<?php
/**
* For full documentation, please visit: http://docs.reduxframework.com/
* For a more extensive sample-config file, you may look at:
* https://github.com/reduxframework/redux-framework/blob/master/sample/sample-config.php
*/
if ( ! class_exists( 'Redux' ) ) {
return;
}
// This is your option name where all the Redux data is stored.
$opt_name = "imprenta";
/**
* ---> SET ARGUMENTS
* All the possible arguments for Redux.
* For full documentation on arguments, please refer to: https://github.com/ReduxFramework/ReduxFramework/wiki/Arguments
* */
$theme = wp_get_theme(); // For use with some settings. Not necessary.
$args = array(
'opt_name' => 'imprenta',
'dev_mode' => FALSE,
'use_cdn' => TRUE,
'display_name' => 'Imprenta',
'display_version' => '1.0.0',
'page_slug' => 'Imprenta',
'page_title' => 'Imprenta',
'update_notice' => TRUE,
'admin_bar' => TRUE,
'menu_type' => 'menu',
'menu_title' => 'Imprenta',
'allow_sub_menu' => TRUE,
'page_parent_post_type' => 'your_post_type',
'customizer' => TRUE,
'default_mark' => '*',
'hints' => array(
'icon_position' => 'right',
'icon_color' => 'lightgray',
'icon_size' => 'normal',
'tip_style' => array(
'color' => 'light',
),
'tip_position' => array(
'my' => 'top left',
'at' => 'bottom right',
),
'tip_effect' => array(
'show' => array(
'duration' => '500',
'event' => 'mouseover',
),
'hide' => array(
'duration' => '500',
'event' => 'mouseleave unfocus',
),
),
),
'output' => TRUE,
'output_tag' => TRUE,
'settings_api' => TRUE,
'cdn_check_time' => '1440',
'compiler' => TRUE,
'page_permissions' => 'manage_options',
'save_defaults' => TRUE,
'show_import_export' => TRUE,
'database' => 'options',
'transient_time' => '3600',
'network_sites' => TRUE,
);
// SOCIAL ICONS -> Setup custom links in the footer for quick links in your panel footer icons.
$args['share_icons'][] = array(
'url' => 'https://github.com/ReduxFramework/ReduxFramework',
'title' => 'Visit us on GitHub',
'icon' => 'el el-github'
//'img' => '', // You can use icon OR img. IMG needs to be a full URL.
);
$args['share_icons'][] = array(
'url' => 'https://www.facebook.com/pages/Redux-Framework/243141545850368',
'title' => 'Like us on Facebook',
'icon' => 'el el-facebook'
);
$args['share_icons'][] = array(
'url' => 'http://twitter.com/reduxframework',
'title' => 'Follow us on Twitter',
'icon' => 'el el-twitter'
);
$args['share_icons'][] = array(
'url' => 'http://www.linkedin.com/company/redux-framework',
'title' => 'Find us on LinkedIn',
'icon' => 'el el-linkedin'
);
Redux::setArgs( $opt_name, $args );
/*
* ---> END ARGUMENTS
*/
/*
* ---> START HELP TABS
*/
$tabs = array(
array(
'id' => 'redux-help-tab-1',
'title' => __( 'Theme Information 1', 'admin_folder' ),
'content' => __( '<p>This is the tab content, HTML is allowed.</p>', 'admin_folder' )
),
array(
'id' => 'redux-help-tab-2',
'title' => __( 'Theme Information 2', 'admin_folder' ),
'content' => __( '<p>This is the tab content, HTML is allowed 2.</p>', 'admin_folder' )
)
);
Redux::setHelpTab( $opt_name, $tabs );
// Set the help sidebar
$content = __( '<p>This is the sidebar content, HTML is allowed.</p>', 'admin_folder' );
Redux::setHelpSidebar( $opt_name, $content );
/*
* <--- END HELP TABS
*/
/*
*
* ---> START SECTIONS
*
*/
Redux::setSection( $opt_name, array(
'title' => __( 'Basic Field', 'redux-framework-demo' ),
'id' => 'basic',
'desc' => __( 'Basic field with no subsections.', 'redux-framework-demo' ),
'icon' => 'el el-home',
'fields' => array(
array(
'id' => 'opt-text',
'type' => 'text',
'title' => __( 'Example Text', 'redux-framework-demo' ),
'desc' => __( 'Example description.', 'redux-framework-demo' ),
'subtitle' => __( 'Example subtitle.', 'redux-framework-demo' ),
)
)
) );
Redux::setSection( $opt_name, array(
'title' => __( 'Basic Fields', 'redux-framework-demo' ),
'id' => 'basic',
'desc' => __( 'Basic fields as subsections.', 'redux-framework-demo' ),
'icon' => 'el el-home'
) );
Redux::setSection( $opt_name, array(
'title' => __( 'Text', 'redux-framework-demo' ),
'desc' => __( 'For full documentation on this field, visit: ', 'redux-framework-demo' ) . '<a href="http://docs.reduxframework.com/core/fields/text/" target="_blank">http://docs.reduxframework.com/core/fields/text/</a>',
'id' => 'opt-text-subsection',
'subsection' => true,
'fields' => array(
array(
'id' => 'text-example',
'type' => 'text',
'title' => __( 'Text Field', 'redux-framework-demo' ),
'subtitle' => __( 'Subtitle', 'redux-framework-demo' ),
'desc' => __( 'Field Description', 'redux-framework-demo' ),
'default' => 'Default Text',
),
)
) );
Redux::setSection( $opt_name, array(
'title' => __( 'Text Area', 'redux-framework-demo' ),
'desc' => __( 'For full documentation on this field, visit: ', 'redux-framework-demo' ) . '<a href="http://docs.reduxframework.com/core/fields/textarea/" target="_blank">http://docs.reduxframework.com/core/fields/textarea/</a>',
'id' => 'opt-textarea-subsection',
'subsection' => true,
'fields' => array(
array(
'id' => 'textarea-example',
'type' => 'textarea',
'title' => __( 'Text Area Field', 'redux-framework-demo' ),
'subtitle' => __( 'Subtitle', 'redux-framework-demo' ),
'desc' => __( 'Field Description', 'redux-framework-demo' ),
'default' => 'Default Text',
),
)
) );
//2DO PANEL
Redux::setSection( $opt_name, array(
'title' => 'Panel 2',
'desc' => 'Panel 2',
'id' => 'panel2',
'icon' => 'el el-dashboard',
'fields' => array(
array(
'id' => 'info_normal',
'type' => 'info',
'desc' => __('This is the info field, if you want to break sections up.', 'redux-framework-demo')
)
)
) );
Redux::setSection( $opt_name, array(
'title' => 'Sub Panel 2.1',
'desc' => 'Sub Panel 2.1',
'id' => 'sub-panel-21',
'subsection' => true,
'fields' => array(
//Selector de color multiple
array(
'id' => 'opt-palette-color',
'type' => 'palette',
'title' => __( 'Palette Color Option', 'redux-framework-demo' ),
'subtitle' => __( 'Only color validation can be done on this field type', 'redux-framework-demo' ),
'desc' => __( 'This is the description field, again good for additional info.', 'redux-framework-demo' ),
'default' => 'red',
'palettes' => array(
'red' => array(
'#ef9a9a',
'#f44336',
'#ff1744',
),
'pink' => array(
'#fce4ec',
'#f06292',
'#e91e63',
'#ad1457',
'#f50057',
),
'cyan' => array(
'#e0f7fa',
'#80deea',
'#26c6da',
'#0097a7',
'#00e5ff',
),
)
),
//Editor de estilos
array(
'id' => 'css_editor',
'type' => 'ace_editor',
'title' => __('CSS Code', 'redux-framework-demo'),
'subtitle' => __('Paste your CSS code here.', 'redux-framework-demo'),
'mode' => 'css',
'theme' => 'monokai',
'desc' => 'Possible modes can be found at <a href="http://ace.c9.io" target="_blank">http://ace.c9.io/</a>.',
'default' => "#header{nmargin: 0 auto;n}"
),
//Fondo con imagenes o color
array(
'id' => 'opt-background',
'type' => 'background',
'title' => __('Body Background', 'redux-framework-demo'),
'subtitle' => __('Body background with image, color, etc.', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
'default' => array(
'background-color' => '#1e73be',
)
),
)
) );
Redux::setSection( $opt_name, array(
'title' => 'Sub Panel 2.2',
'desc' => 'Sub Panel 2.2',
'id' => 'sub-panel-22',
'subsection' => true,
'fields' => array(
//Selector de borde
array(
'id' => 'header-border',
'type' => 'border',
'title' => __('Header Border Option', 'redux-framework-demo'),
'subtitle' => __('Only color validation can be done on this field type', 'redux-framework-demo'),
'output' => array('.site-header'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
'default' => array(
'border-color' => '#1e73be',
'border-style' => 'solid',
'border-top' => '3px',
'border-right' => '3px',
'border-bottom' => '3px',
'border-left' => '3px'
)
),
//Set de botones
array(
'id' => 'button-set-single',
'type' => 'button_set',
'title' => __('Button Set, Single', 'redux-framework-demo'),
'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
//Must provide key => value pairs for options
'options' => array(
'1' => 'Opt 1',
'2' => 'Opt 2',
'3' => 'Opt 3'
),
'default' => '2'
),
//Checkbox simple
array(
'id' => 'opt_checkbox',
'type' => 'checkbox',
'title' => __('Checkbox Option', 'redux-framework-demo'),
'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
'default' => '1'// 1 = on | 0 = off
),
//Checkbox multiple
array(
'id' => 'opt_multi_checkbox',
'type' => 'checkbox',
'title' => __('Multi Checkbox Option', 'redux-framework-demo'),
'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
//Must provide key => value pairs for multi checkbox options
'options' => array(
'1' => 'Opt 1',
'2' => 'Opt 2',
'3' => 'Opt 3'
),
//See how default has changed? you also don't need to specify opts that are 0.
'default' => array(
'1' => '1',
'2' => '0',
'3' => '0'
)
),
//Color
array(
'id' => 'opt-color',
'type' => 'color',
'title' => __('Body Background Color', 'redux-framework-demo'),
'subtitle' => __('Pick a background color for the theme (default: #fff).', 'redux-framework-demo'),
'default' => '#FFFFFF',
'validate' => 'color',
)
)
));
Redux::setSection( $opt_name, array(
'title' => 'Sub Panel 2.3',
'desc' => 'Sub Panel 2.3',
'id' => 'sub-panel-23',
'subsection' => true,
'fields' => array(
array(
'id' => 'opt-date',
'type' => 'date',
'title' => __('Date Option', 'redux-framework-demo'),
'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
'placeholder' => 'Click to enter a date'
),
//Editor WYSWYG
array(
'id' => 'editor-text',
'type' => 'editor',
'title' => __('Editor Text', 'redux-framework-demo'),
'subtitle' => __('Subtitle text would go here.', 'redux-framework-demo'),
'default' => 'Powered by Redux.',
'args' => array(
'teeny' => true,
'textarea_rows' => 10
)
),
array(
'id'=>'multi-text',
'type' => 'multi_text',
'title' => __('Multi Text Option - Color Validated', 'redux-framework-demo'),
'validate' => 'color',
'subtitle' => __('If you enter an invalid color it will be removed. Try using the text "blue" as a color. ;)', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo')
),
array(
'id' => 'opt-password',
'type' => 'password',
'username' => true,
'title' => 'SMTP Account',
'placeholder' => array(
'username' => 'Enter your Username',
'password' => 'Enter your Password'
)
),
//Radio button
array(
'id' => 'opt-radio',
'type' => 'radio',
'title' => __('Radio Option', 'redux-framework-demo'),
'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
//Must provide key => value pairs for radio options
'options' => array(
'1' => 'Opt 1',
'2' => 'Opt 2',
'3' => 'Opt 3'
),
'default' => '2'
),
//Select sencillo
array(
'id' => 'opt-select',
'type' => 'select',
'title' => __('Select Option', 'redux-framework-demo'),
'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
// Must provide key => value pairs for select options
'options' => array(
'1' => 'Opt 1',
'2' => 'Opt 2',
'3' => 'Opt 3'
),
'default' => '2',
),
//Multiselect
array(
'id' => 'opt-multi-select',
'type' => 'select',
'multi' => true,
'title' => __('Multi Select Option', 'redux-framework-demo'),
'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
'desc' => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
//Must provide key => value pairs for radio options
'options' => array(
'1' => 'Opt 1',
'2' => 'Opt 2',
'3' => 'Opt 3'),
'default' => array('2','3')
),
//Swich options
array(
'id' => 'opt-switch',
'type' => 'switch',
'title' => __('Switch On', 'redux-framework-demo'),
'subtitle' => __('Look, it's on!', 'redux-framework-demo'),
'default' => true,
),
)
));
/*
* <--- END SECTIONS
*/
Para llamar los datos colocados en redux solo debemos llamar la variable global opt_name y colocar el nombre del id de nuestro elemento asi:
Archivo:
wp-content/themes/twentynineteen/footer.php
<?php
global $opt_name;
?>
<table>
<tr>
<th>Nombre</th>
<th>Valor</th>
</tr>
<tr>
<td>opt-text</th>
<td><?php echo $opt_name['opt-text']; ?></th>
</tr>
<tr>
<td>text-example</th>
<td><?php echo $opt_name['text-example']; ?></th>
</tr>
<tr>
<td>opt-palette-color</th>
<td><?php echo $opt_name['opt-palette-color']; ?></th>
</tr>
<tr>
<td>css_editor</th>
<td><?php echo $opt_name['css_editor']; ?></th>
</tr>
<tr>
<td>opt-background</th>
<td><?php var_dump ($opt_name['opt-background']); ?></th>
</tr>
<tr>
<td>header-border</th>
<td><?php var_dump ( $opt_name['header-border']); ?></th>
</tr>
<tr>
<td>button-set-single</th>
<td><?php echo $opt_name['button-set-single']; ?></th>
</tr>
<tr>
<td>opt_checkbox</th>
<td><?php echo $opt_name['opt_checkbox']; ?></th>
</tr>
<tr>
<td>opt_multi_checkbox</th>
<td><?php var_dump ($opt_name['opt_multi_checkbox']); ?></th>
</tr>
<tr>
<td>opt-color</th>
<td><?php echo $opt_name['opt-color']; ?></th>
</tr>
<tr>
<td>opt-date</th>
<td><?php echo $opt_name['opt-date']; ?></th>
</tr>
<tr>
<td>editor-text</th>
<td><?php echo $opt_name['editor-text']; ?></th>
</tr>
<tr>
<td>multi-text</th>
<td><?php var_dump ($opt_name['multi-text']); ?></th>
</tr>
<tr>
<td>opt-password</th>
<td><?php var_dump( $opt_name['opt-password']); ?></th>
</tr>
<tr>
<td>opt-radio</th>
<td><?php echo $opt_name['opt-radio']; ?></th>
</tr>
<tr>
<td>opt-select</th>
<td><?php echo $opt_name['opt-select']; ?></th>
</tr>
<tr>
<td>opt-multi-select</th>
<td><?php var_dump ($opt_name['opt-multi-select']); ?></th>
</tr>
<tr>
<td>opt-switch</th>
<td><?php echo $opt_name['opt-switch']; ?></th>
</tr>
</table>
