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>

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)