Instalación del Plugin Options Framework de WordPress: Guía Paso a Paso

Una de las cosas que dan valor a la hora de crear un Theme para WordPress es que el propio usuario pueda configurarlo. Cambiar tipografía, colores, sliders, datos personales como dirección, teléfono, … son algunos datos a los que me refiero.

Para ello podríamos programar un complicado Framework, o utilizar uno de los plugins que lo permite. Contretamente Options Framework es el que yo utilizo, ya que tiene una API muy sencilla y todas las funciones necesarias para crear el panel de opciones de su tema.

Los tipos de campo de que dispone son los siguientes:

  • text
  • textarea
  • checkbox
  • select
  • radio
  • upload (subir imágenes)
  • images (usar imágenes en lugar de radio buttons)
  • background (conjunto de opciones para definir el background)
  • multicheck
  • color (color picker con jquery)
  • typography (conjunto de opciones para definir la tipografía)
  • editor

He de decir que este plugin no lo vamos a instalar como tal, sino que lo vamos a integrar en el Theme, con la intención de que no haya que instalar el plugin «oficial» en cada instalación en la que pongamos el Theme.

Descarga y configuración inicial de Options Framework

Antes de empezar hay que descargarnos el plugin Options Framework Theme de GibHub. Es una versión, como decía, mucho más fácil de integrar en el Theme y, además, no necesita tener el plugin como tal descargado.

De GibHub se descargarán los siguientes archivos:

options-framework-archivos

De los archivos que descarga, sólo hay que seleccionar el archivos options.php, y las carpetas inc e images (la última es la que contiene las imágenes de los datos de ejemplo) y copiarlas en nuestro Theme. El resto de archivos forman parte del Theme, y de copiarlos también sobreescribiría los nuestros con lo que, de no tener copia de seguridad, se iría al traste todo nuestro trabajo. Hay que tener cuidado con este punto.

Llegados a este punto, y como yo no encuentro en la carpeta inc relación alguna con el Plugin, me gusta renombrarla. La suelo llamar options-framework, que define más claramente su contenido. Digo esto porque en el siguiente paso, vamos a poner unas líneas en el archivo functions.php que hacen referencia a la carpeta inc, por lo que hay que sustituirlo por el nombre que demos a la carpeta, en mi caso options-framework.

Las líneas a poner en functions.php son las siguientes:

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

que, en mi caso, tendrían que ser:

/*-----------------------------------------*/
/* Cargar Panle de Opciones
/*-----------------------------------------*/
if ( !function_exists( 'optionsframework_init' ) ) {
	define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/options-framework/' );
	require_once dirname( __FILE__ ) . '/options-framework/options-framework.php';
}

El código anterior simplemente dice que si existe la función optionsframework_init, busque en el directorio inc (para mi options-framework) el archivo options-framework.php, para poder utilizar las opciones disponibles en el plugin.

Simplemente con esto ya tenemos registrado el plugin en nuestro Theme, sin necesidad de instalación y activación previa. Si ahora vamos a la opción Apariencia, veremos que hay un punto de menú de Theme options.

Agregando opciones a nuestro Theme

Si abrimos el archivo options.php, tenemos todas las funciones disponibles en el plugin, pero nos falta algo. Al principio hay una función en la que pone lo siguiente:

function optionsframework_option_name() {
	// Change this to use your theme slug
	return 'options-framework-theme';
}

Bien, hay que sustituirla por esta:

function optionsframework_option_name() {
	// This gets the theme name from the stylesheet
	$themename = wp_get_theme();
	$themename = preg_replace("/W/", "_", strtolower($themename) );
 
	$optionsframework_settings = get_option( 'optionsframework' );
	$optionsframework_settings['id'] = $themename;
	update_option( 'optionsframework', $optionsframework_settings );
}

Con esta función obtenemos el nombre del theme, que será utilizado en la configuración interna del plugin. Se define para almacenar las opciones en la base de datos y hacer referencia a ellos en el theme.

Unos sencillos ejemplos

No voy a explicar todas las opciones que trae este plugin, eso labor la dejo para vosotros. La API es sencilla y se aprende rápido, lo que voy a hacer es poner un ejemplo básico.

Como las opciones se pueden dividir por pestañas, voy a crear dos. Una para los datos personales y la otra para el logotipo.

La manera de definir las pestañas es esta:

function optionsframework_options() {
 
//Pestaña Datos personales
$options[] = array(
     'name' => __('Datos personales', 'mi-theme'),
     'type' => 'heading');
 
//Pestaña Logotipo
$options[] = array(
     'name' => __('Logotipo', 'mi-theme'),
     'type' => 'heading' );
 
     return $options;
}

Nota que ponemos ‘type’ => ‘heading’, precisamente esto es lo que las define como pestañas. Las opciones que definamos para cada pestaña deberán ir debajo de sus respectivos heading.

Un ejemplo muy básico de cómo quedaría el fichero options.php es este:

<?php

function optionsframework_option_name() {
	// This gets the theme name from the stylesheet
	$themename = wp_get_theme();
	$themename = preg_replace("/W/", "_", strtolower($themename) );

	$optionsframework_settings = get_option( 'optionsframework' );
	$optionsframework_settings['id'] = $themename;
	update_option( 'optionsframework', $optionsframework_settings );
}

function optionsframework_options() {
 
//Pestaña Datos personales
$options[] = array(
     'name' => __('Datos personales', 'mi-theme'),
     'type' => 'heading');
 
	$options[] = array(
		'name' => __( 'Nombre', 'mi-theme' ),
		'desc' => __( 'Introduce tu nombre', 'mi-theme' ),
		'id' => 'of_nombre',
		'std' => 'Mi nombre',
		'type' => 'text'
	);

	$options[] = array(
		'name' => __( 'Dirección', 'mi-theme' ),
		'desc' => __( 'Introduce tu dirección', 'mi-theme' ),
		'id' => 'of_direccion',
		'std' => 'Dirección inventada.',
		'type' => 'textarea'
	);

//Pestaña Logotipo
$options[] = array(
     'name' => __('Logotipo', 'mi-theme'),
     'type' => 'heading' );

	$options[] = array(
		'name' => __( 'Logotipo', 'mi-theme' ),
		'desc' => __( 'Sube tu logo', 'mi-theme' ),
		'id' => 'of_logo',
		'type' => 'upload'
	);

    return $options;
}
?>

Algo muy recomendable es utilizar el parámetro ‘std’, que es lo que hay por defecto, sobre todo en campos como color, si definimos alguna tipografía, … Es recomentable por dos cosas; para que dichos campos tengan valor de entrada, y para que cuando quieras puedas volver a poner los valores iniciales.

También es conveniente, cuando el Theme es para un particular y tiene datos como el teléfono, dirección, e-mail, … definido, no ponerlo como parte de la plantilla, sino ponerlo como opción, de forma que si el cliente cambia algún dato pueda cambiarlo él mismo. Estos datos se recuperan fácilmente, como explico más adelante.

Estas opciones, con sus pestañas, quedarían  así:

captura-pantalla-options-framework

La manera de recuperar la información para mostrarla es con un simple script en PHP. Para mostrar el nombre, por ejemplo, sería:

<?php 
	$nombre = of_get_option( 'of_nombre', '');
	echo $nombre;
?&gt

Nota que he elegido el ‘id’ asignado al nombre, en nuestro caso ‘of_nombre’.

Esto muestra la opción Nombre de forma simple, pero podemos añadir HTML para que quede más aparente. Aprender es muy sencillo, basta con practicar un poquito probando todas las opciones que este plugin nos ofrece, o por lo menos las que más vayamos a utilizar, ya verás que pronto das un toque especial a tus Themes para WordPress.

Un saludo.

Deja un comentario