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>




Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 📡

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04