Integrando Options Framework en Underscore

portada-underscore-optionsEn el desarrollo de plantillas de WordPress casi siempre necesitas añadir opciones en el panel de administración. La API de WordPress no es díficil, pero si tienes que añadir muchas opciones, la tarea se vuelve tediosa. Options framework nos proporciona una forma rápida y sencilla para añadir opciones. En esta mini guia veremos como integrar este fantástico Framework en una plantilla Underscore.

Underscore

Underscore es una plantilla base para el desarrollo de nuevas plantillas creado por Autommattic, la empresa que está detrás de WordPress.

Puedes bajar Underscore desde github, o utilizar undesrcore.me para generar una versión con el nombre que tu elijas.

Después de instalar y activar Underscore podemos ver que es una plantilla con texto desnudo sin diseño alguno. Pero recuerda que es una base para iniciar tu propio diseño. Y lo mejor de Underscore está debajo del capó, en el código. El desarrollo de Underscore está basado en la experiencia adquirida en la creación de las mejores plantillas de WordPress como Kubrick, The Sandbox, Thematic, Twenty Ten, Toolbox o Twenty Eleven. Así que sin duda es un buen punto de partida para el desarrollo de la nuestra.

Añadimos algo de estilo a la plantilla. Copia el siguiente código al final del fichero style.css:

/* =Custom Style
----------------------------------------------- */

.site {
    width: 940px;
    margin: 24px auto;
}
.site-title a{
    font: bold 3em Arial, sans-serif;
    text-decoration: none;
    color: #F63;
}
.navigation-main {
    margin-top: 12px;
    margin-bottom: 12px;
}
.menu li {
    background-color: #F63;
    padding: 2px 12px;
}
.menu li a { color: white; }
.site-content { padding: 0 12px; }
.entry-header { font: bold 1.2em Arial, sans-serif; }
aside {
    padding: 15px 12px 15px 12px;
    border: 1px solid #cccccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 24px;
}   

Ahora podemos apreciar las diferentes partes de la página.

Undescore Initial Site

Options Framework

Options Framework ha sido creado por Devin Price de wptheming.com, que también contribuye en el desarrollo de Underscore.

Para usar este framework tienes dos opciones, usarlo como plugin o como “standalone”. Como Plugin tenemos la posibilidad de actualizar la plantilla original sin perder las opciones añadidas, y con la versión “standalone” lo que hacemos es “incrustar” código de este framework, por lo que no podremos actualizar la plantilla original.

En nuestro caso, vamos a crear una plantilla de cero, y no actualizaremos Underscore, por lo que nos interesa utilizar la versión “standalone”.

Integrando Options Framework

Una vez bajado el framework, copia los ficheros de la carpeta inc en la carpeta inc de Underscore. Copia también la carpeta images en el raiz de Undescore (contiene imágenes que luego usaremos en esta guía)

Para activar este framework necesitamos añadir el siguiente código en la función _s_setup() del fichero functions.php

/**
 * Add optionsframework
 */
if ( !function_exists( 'optionsframework_init' ) ) {
    define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
    require_once dirname( __FILE__ ) . '/inc/options-framework.php';
}   

Options Framework utiliza un fichero llamado options.php para configurar las opciones. Creamos este fichero en el raiz y añadimos el siguiente código:

<?php

function optionsframework_options() {

    $options = array();

    // Main Tab
    $options[] = array(
        'name' => __('Basic Settings', '_s'),
        'type' => 'heading');

    return $options;
}

?>   

Options framework ya nos genera un subemenu Theme Options dentro de Apariencia. Y nosotros hemos añadido en el código anterior una pestaña llamada Basic Settings completamente vacía.

Options Basic Tab

Opción sidebar derecha/izquierda

Una opción clásica es poder colocar la barra lateral a la derecha o a la izquierda. Vamos a implementarlo.

Debemos añadir un elemento nuevo para el array options. Se trata de una opción que llamamos sidebar_position, que muestra un selector con dos imágenes con la disposición de la barra lateral. El fichero opctions.php queda así:

<?php

function optionsframework_options() {

    $options = array();

    // Main Tab
    $options[] = array(
        'name' => __('Basic Settings', '_s'),
        'type' => 'heading');

    // If using image radio buttons, define a directory path
    $imagepath =  get_template_directory_uri() . '/images/';

    $options[] = array(
        'name' => __('Sidebar Position', '_s'),
        'desc' => __('Left or Right.', '_s'),
        'id' => "sidebar_position",
        'std' => "sidebar-right",
        'type' => "images",
        'options' => array(
            'sidebar-left' => $imagepath . '2cl.png',
            'sidebar-right' => $imagepath . '2cr.png')
    );

    return $options;
}

?>   

Ahora la página de opciones del panel de administración se muestra de esta forma:

Options Layout Settings

Finalmente hay que implementar la funcionalidad. Underscore ofrece unas hojas de estilo para colocar la barra lateral a la derecha content-sidebar.css o a la izquierda sidebar-content.css.

Vamos a cargar una hoja de estilo u otra dependiendo de la opción guardada en el panel de opciones. Añade el siguiente código en la función _s_scripts() dentro del fichero functions.php:

if ( of_get_option('sidebar_position', 'sidebar-right' ) == 'sidebar-right' ) {
    wp_enqueue_style( '_s-style-layout', get_template_directory_uri() . '/layouts/content-sidebar.css' );
} else {
    wp_enqueue_style( '_s-style-layout', get_template_directory_uri() . '/layouts/sidebar-content.css' );
}   

La función of_get_option pertenece a Options framework y tiene dos parámetros, el primero es la opción que queremos obtener y el segundo es el valor por defecto de la opción (si ésta no existe). Dependiendo del valor de sidebar_position se llama a una hoja de estilo u otra.

Undescore Final Site

Más ejemplos

Puedes ver más ejemplos en el fichero options.php original que bajaste con Options framework. También puedes comprar ejemplos de código con opciones avanzadas en wptheming.com

Como has podido ver, con muy pocas líneas de código puedes crear una interface limpia, añadir pestañas, controles avanzados, y lo mejor de todo, olvidándarte de la validación y de la maquetación. Desde luego una gran herramienta a tener en cuenta.

Puedes bajarte el código desde aquí

Comentarios

  1. Que buen articulo, es fantastico encontrar estos tutoriales en español, os animo a que hagáis mas articulos de Options Framework para WordPress.
    Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *