Crear un panel de opciones en un theme en WordPress
En el mundo de los themes premium para WordPress se ha puesto de moda el uso de Paneles de Opciones personalizadas, aunque en los gratis, todavía no se ve mucho.
Pero gracias a varias personas, podemos utilizar el plugin Options Framework para crear una página de opciones dedicada a nuestro theme de una manera muy fácil.
En este tutorial, veremos como utilizar este plugin para crear los varios tipos de opciones disponibles. El resultado final sería algo de este estilo:
Shall we start? Paso 1: instalar el plugin
Como cualquier plugin para WordPress: lo descargamos y lo subimos a wp-content/plugins. Luego lo activamos desde el Panel de Administración de WordPress.
Paso 2: Empieza lo difícil
Ya teniendo el theme instalado y listo para modificar, en la carpeta de nuestro theme creamos un archivo vacío llamado options.php.
Este archivo se compone de 2 funciones:
- La primera, establece un idenficador que se utilizará cuando se guarden las opciones. Si este identificador es cambiado en algún momento, las opciones se "reiniciarán".
- La segunda, contiene un array con las opciones que deberá el panel.
Paso 3: Estructurando el archivo
Para crear la primera función, agregamos el siguiente contenido al archivo que creamos mas arriba:
<?php
function optionsframework_option_name()
{
$setting = get_option('optionsframework');
$setting['id'] = 'nombre-de-mi-theme';
update_option('optionsframework', $setting);
}
Obviamente, reemplazamos nombre-de-mi-theme por un identificador único. Luego creamos la siguiente función, que contendrá nuestras opciones:
function optionsframework_options()
{
$options = array();
// Opciones
return $options;
}
Paso 4: Entendiendo como funciona todo
Existen varios tipos de opciones que se pueden crear, las cuales son:
- Texto - Código: text
- Area de texto - Código: textarea
- Checkbox - Código: checkbox
- Checkbox múltiple - Código: multicheck
- Menú de opciones (Selects) - Código: select
- Radio - Código: radio
- Subida de archivo - Código: upload
- Color - Código: color
- Tipografía - Código: typography
- Fondo (Varias opciones para definir un fondo) - Código: background
- Checkbox utilizando imágenes - Código: images
Cada opcion es definida en un array, el cual necesita de (la mayoría de) los siguientes valores:
- name - El nombre
- desc - Una (breve?) descripción
- id - Identificador único (Este ID es el que se utilizará en el theme para obtener el valor de la opción)
- std - Valor por defecto (Opcional)
- type - Que tipo de opción es
- options - Array de opciones (Usado solo en checkboxs múltiples, selects, radio, tipografía y los checkboxs múltiples usando imágenes)
Paso 5: Creando nuestra primera opción
Visto todo esto, intentemos crear nuestra primera opción: un campo de texto que será mostrado en la página entre el header y el contenido. Para crear la opción, debemos crear un array que contenga la información necesaria. En nuestro caso, el resultado es este:
array( 'name' => 'Mensaje de prueba', 'desc' => 'Este mensaje aparecera en el inicio del blog entre el header y el contenido', 'id' => 'mensajito_de_prueba', 'std' => '', // Si lo deseamos, podemos eliminar este campo, ya que no se utiliza 'type' => 'text' )
Ya completados todos los datos, agregamos el array al super-array $options, quedandonos así:
function optionsframework_options()
{
$options = array();
// Opciones
$options[] = array(
'name' => 'Mensaje de prueba',
'desc' => 'Este mensaje aparecera en el inicio del blog entre el header y el contenido',
'id' => 'mensajito_de_prueba',
'std' => '', // Si lo deseamos, podemos eliminar este campo, ya que no se utiliza
'type' => 'text'
);
return $options;
}
Guardamos y si entramos a la página, debemos ver la opción recien creada:
Sin embargo, podemos ver que el resultado no es lo esperado (Podemos ver un espacio a la derecha que es desperdiciado). Esto sucede porque el plugin divide la página de opciones en varias sub-páginas, y nosotros no estamos definiendo ninguna.
Para arreglar esto, agregamos una nueva opción (antes de la opción que ya agregamos) pero con solo dos valores: type con el valor de heading y name con algún título que nos guste.
El código resultante sería parecido al siguiente:
function optionsframework_options()
{
$options = array();
// Opciones
$options[] = array(
'name' => 'Categoria de prueba',
'type' => 'heading'
);
$options[] = array(
'name' => 'Mensaje de prueba',
'desc' => 'Este mensaje aparecera en el inicio del blog entre el header y el contenido',
'id' => 'mensajito_de_prueba',
'std' => '', // Si lo deseamos, podemos eliminar este campo, ya que no se utiliza
'type' => 'text'
);
return $options;
}
Y el resultado, perfecto como este:
Paso 6: Utilizar la opción en nuestro theme
Ahora que ya creamos nuestra primera opción, podemos ponerla en práctica. Editemos el archivo header.php de nuestro theme y agreguemos lo siguiente:
<?php if($msg = of_get_option('mensajito_de_prueba'))
{
echo '
<div class="alert">
' . $msg . '
</div><!-- .alert -->
';
}
?>
Con esto lo que hacemos es obtener el valor de la opción que hemos creado y, si esta contiene algun valor, la mostramos en nuestro theme. Hagan la prueba. :)
Paso 7: Crear otras opciones
El resto de las opciones se crean del mismo modo, pero con distintos valores. Les dejo un ejemplo de como crear cada tipo de opción disponible:
/* ========== Subida de archivo ========== */ $options[] = array( 'name' => 'Subir un archivo', 'desc' => 'Prueba de subida de archivo', 'id' => 'archivo_subido', 'type' => 'upload' ); /* Nota: Luego de subir la imágen, debemos apretar el botón "Insertar al post" para que la dirección de la imágen quede guardada en las opciones. */ /* ========== Area de texto ========== */ $options[] = array( 'name' => 'Alerta con multiples lineas', 'id' => 'area_de_texto', 'type' => 'textarea' ); /* ========== Checkbox ========== */ $options[] = array( 'name' => 'Activar slider?', 'id' => 'activar_slider', 'std' => '0', // Desactivado por defecto 'type' => 'checkbox' ); /* ========== Checkbox multiple ========== */ $options[] = array( 'name' => 'Seleccione un script', 'id' => 'multicheck_script', 'options' => array( 'wp' => 'WordPress', 'mybb' => 'MyBulletinBoard' ), 'type' => 'multicheck' ); /* ========== Menú de opciones (select) ========== */ $options[] = array( 'name' => 'Seleccione un script', 'id' => 'select_script', 'options' => array( 'wp' => 'WordPress', 'mybb' => 'MyBulletinBoard' ), 'type' => 'select' ); /* ========== Radio ========== */ $options[] = array( 'name' => 'Seleccione un script', 'id' => 'radio_script', 'options' => array( 'wp' => 'WordPress', 'mybb' => 'MyBulletinBoard' ), 'type' => 'radio' ); /* ========== Color ========== */ $options[] = array( 'name' => 'Color de fondo', 'id' => 'color_de_fondo', 'type' => 'color' ); /* ========== Tipografía ========== */ $options[] = array( 'name' => 'Estilo del titulo', 'id' => 'estilo_de_titulo', 'std' => array( 'size' => '12px', 'face' => 'georgia', 'style' => 'bold', 'color' => '#fff', ), 'type' => 'typography' ); /* Nota: Cuando utilizemos la opción de tipografía, es obligatorio establecer las opciones predeterminadas, tal como lo hicimos arriba. */ /* ========== Checkbox utilizando imágenes ========== */ $options[] = array( 'name' => 'Seleccione una imagen', 'id' => 'que_imagen', 'std' => 'imagen-3', 'options' => array( 'imagen-1' => 'http://blog.com/images/img1.jpg', 'imagen-2' => 'http://blog.com/images/img2.jpg', 'imagen-3' => 'http://blog.com/images/img3.jpg', 'imagen-4' => 'http://blog.com/images/img4.jpg', ), 'type' => 'images' );
Paso 8: Y si no tengo instalado el plugin...?
Muy buena pregunta! Si el plugin no se encuentra activado, cuando entremos a nuestro blog obtendremos el siguiente error:
Para solucionar esto, nuestro theme deberá crear la función of_get_option() si es que no existe.
Para lograr esto, agregamos lo siguiente en el archivo functions.php de nuestro theme:
if(!function_exists('of_get_option'))
{
function of_get_option($name, $default = false)
{
return $default;
}
}
Esta función devolvera el valor por defecto, el cual debemos pasar en el segundo parámetro. La función original también acepta este segundo parámetro, el cual se usa cuando no se pudieron obtener las opciones desde la base de datos.
Final!
En tan solo un rato, podemos crear un avanzado panel de opciones muy fácil de usar y, lo mejor de todo, plug & play! Tan solo faltaría adaptar el theme para que haga uso de estas opciones, pero eso ya queda en sus manos.