M
mrv89
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Este tutorial lo escribo porque hace un tiempo comencé a desarrollar temas para wordpress con licencias comerciales y de inmediato surgió la necesidad de incorporar un panel de opciones de personalización para cada tema. Al buscar información sobre paneles de usuario (opciones) para wordpress encontré muy pocos tutoriales buenos, y la mayoría incluía mucho pero mucho código. Este tutorial se basa en incorporar un panel de opciones para temas wordpress utilizando un framework llamado NHP Theme Options Panel, que es el framework que utilizo actualmente, y con el cual he obtenido muy buenos resultados.
¿Para qué sirve un panel de opciones?
Ver el archivo adjunto 11925
Un panel de opciones le ofrece a los usuarios distintos niveles de personalización que de otra forma sólo sería posible modificando el código fuente del tema. El panel permite cambiar logos, colores, fondos, títulos, fuentes y una infinidad de opciones.
El NHP Theme Options Framework está disponible para descargarlo en GitHub y puede ser utilizado tanto para proyectos comerciales como personales.
Instalación del Framework
Paso 1: Descargar desde GitHub.
Paso 2: Extraer los archivos, en ellos encontrarás un documento llamado “nhp-options.php” y una carpeta con el nombre “opt”.
Paso 3: Copia los archivos al directorio raiz de tu theme ej: (wp-content/themes/tu-theme)
Ver el archivo adjunto 11928
Paso 4: Ve al archivo “functions.php” de tu theme y escribe la siguiente línea de código:
Paso 5: Listo!, ahora el panel está instalado y listo para trabajar.
Ver el archivo adjunto 11926
Ahora se viene lo bueno..
Paso 7: Abrir el archivo que incluimos en el directorio del theme (nhp-options.php), en la línea 103 aproximadamente encontraremos este código:
Importante: Aquí debemos reemplazar donde dice ‘twenty_eleven’ por el nombre de nuestro theme, o cualquier nombre que deseen.
Paso 8: Personalizar, personalizar!
Ahora viene lo importante, no sacamos nada con tener un panel repleto de opciones que nunca vamos a utilizar, por lo que hay que decidir qué es lo que vamos a necesitar y que es lo que no.
A partir de la línea 153 aprox, encontraremos las opciones del framework, todo que agreguemos o quitemos aqui se vera reflejado en el panel de opciones.
Ver el archivo adjunto 11927
En la imagen anterior podemos ver como funciona el panel, las opciones están almacenadas en arrays, entonces por ejemplo, en la segunda sección se puede ver lo siguiente (Versión simplificada):
Ahora a modo de ejemplo voy a agregar una sección que utilizaré en uno de mis temas:
En el código de arriba creamos una sección llamada "Opciones Generales", dentro de esa sección van dos campos, uno de tipo SELECT y otro de tipo TEXT, el primero va a servir como estructura de control para decidir si utilizar, o no, una imagen como logo. En caso contrario mostraremos el titulo del Blog, (definido en las opciones generales de wordpress).
Entonces, al guardar el archivo y actualizar, mi nueva sección debería verse así:
Y ahora ¿Como diablos utilizo esto en mi tema?, sencillo:
En el paso 7 definimos un nombre para las opciones, ahora debemos insertar este código en el lugar que tu desees del theme (header.php de preferencia, pero probar en otras secciones en caso de que no lo tome):
Esto almacena todas nuestras opciones del theme en $options, y podremos acceder a ellas definiendo su índice o ID que utilizamos para cada campo, cuando creamos el select para decidir si utilizamos o no una imagen como logo se le asignó el id de 'slc_logo'
Y ahora utlizamos la sección que creamos:
En mi caso y para mis necesidades, el código quedo así:
En el código de arriba tengo un div que define el header del theme, luego viene el h1 donde estará el titulo del blog o el logo, para determinar esto utilizamos las opciones del theme. Utilizando un if bastante simple verificamos que valor tiene asignado el select que creamos en el panel, en caso de que el select tenga asignado el valor "2" (que significa "si") vamos a mostrar una imagen como logo, la url de la imagen sera la que el usuario ingresó en el segundo de nuestros campos, el text. Llamamos al valor a través de su ID 'logo_url'. Si el select tiene un valor distinto a 2 dentro del h1 va a ir el titulo del blog, esto a través de la funcion de wordpress bloginfo('name').
Como ven es cosa de experimentar, el framework viene con todas las opciones posibles, campos para generar degradados, colores, fechas, seleccionar posts, texto, etc, etc, etc. Es sólo cosa de bajar y probar.
No está demás decir que este es el primer tutorial que hago en mi vida, no tengo experiencia enseñando y si me salió muy enredado me pueden consultar, no tengo problemas en responder cualquier tipo de duda al respecto.
Bueno espero que esto le sirva a alguien, un saludo.
¿Para qué sirve un panel de opciones?
Ver el archivo adjunto 11925
Un panel de opciones le ofrece a los usuarios distintos niveles de personalización que de otra forma sólo sería posible modificando el código fuente del tema. El panel permite cambiar logos, colores, fondos, títulos, fuentes y una infinidad de opciones.
El NHP Theme Options Framework está disponible para descargarlo en GitHub y puede ser utilizado tanto para proyectos comerciales como personales.
Instalación del Framework
Paso 1: Descargar desde GitHub.
Paso 2: Extraer los archivos, en ellos encontrarás un documento llamado “nhp-options.php” y una carpeta con el nombre “opt”.
Paso 3: Copia los archivos al directorio raiz de tu theme ej: (wp-content/themes/tu-theme)
Ver el archivo adjunto 11928
Paso 4: Ve al archivo “functions.php” de tu theme y escribe la siguiente línea de código:
PHP:
// NHP Theme Options Panel
if (is_admin()) {
require('nhp-options.php' );
}Paso 5: Listo!, ahora el panel está instalado y listo para trabajar.
Ver el archivo adjunto 11926
Ahora se viene lo bueno..
Paso 7: Abrir el archivo que incluimos en el directorio del theme (nhp-options.php), en la línea 103 aproximadamente encontraremos este código:
PHP:
//Choose a custom option name for your theme options, the default is the theme name in lowercase with spaces replaced by underscores
$args['opt_name'] = 'twenty_eleven';Importante: Aquí debemos reemplazar donde dice ‘twenty_eleven’ por el nombre de nuestro theme, o cualquier nombre que deseen.
Paso 8: Personalizar, personalizar!
Ahora viene lo importante, no sacamos nada con tener un panel repleto de opciones que nunca vamos a utilizar, por lo que hay que decidir qué es lo que vamos a necesitar y que es lo que no.
A partir de la línea 153 aprox, encontraremos las opciones del framework, todo que agreguemos o quitemos aqui se vera reflejado en el panel de opciones.
Ver el archivo adjunto 11927
En la imagen anterior podemos ver como funciona el panel, las opciones están almacenadas en arrays, entonces por ejemplo, en la segunda sección se puede ver lo siguiente (Versión simplificada):
PHP:
$sections[] = array(
'icon' => NHP_OPTIONS_URL.'img/glyphicons/glyphicons_107_text_resize.png', // EL ÍCONO QUE LLEVARÁ LA SECCIÓN
'title' => __('Text Fields', 'nhp-opts'), //EN NOMBRE QUE LLEVARÁ LA SECCIÓN
'desc' => __('<p class="description">This is the Description. Again HTML is allowed2</p>', 'nhp-opts'), //LA DESCRIPCIÓN
'fields' => array( //AQUÍ COMIENZAN LOS CAMPOS DE LA SECCIÓN
array(
'id' => '1', //EL ID DEL CAMPO (Puede ser en texto por ejemplo: txt_titulo_principal)
'type' => 'text', // TIPO DE CAMPO (En este caso es un text)
'title' => __('Text Option', 'nhp-opts'), //EL TITULO
'sub_desc' => __('La descripción del campo', 'nhp-opts'),
'desc' => __('Otra descripción para información adicional', 'nhp-opts'),
'std' => '', //EL VALOR POR DEFECTO (Si el usuario lo deja vacio, o el valor con el que vendrá el theme)
),
// más campos de aquí hacia abajo...Ahora a modo de ejemplo voy a agregar una sección que utilizaré en uno de mis temas:
PHP:
$sections[] = array(
'icon' => NHP_OPTIONS_URL.'img/glyphicons/glyphicons_023_cogwheels.png',
'title' => __('Opciones Generales', 'nhp-opts'),
'desc' => __('', 'nhp-opts'),
'fields' => array(
array(
//Select para decidir si se usara una imagen como logo o no.
'id' => 'slc_logo', //El id del campo
'type' => 'select', //Campo del tipo Select
'title' => __('Utilizar un logo para el theme?', 'nhp-opts'), //Titulo
'sub_desc' => __('Selecciona entre si o no', 'nhp-opts'), //Descripción (Opcional)
'desc' => __('', 'nhp-opts'), //Otra descripción (Opcional)
'options' => array('1' => 'No','2' => 'Si'),//Valores del Select (No es = 1 y Si es = 2) IMPORTANTE!
'std' => '1' //El valor por defecto es 1 (Es decir No)
),
array(
//Text para la url de la imagen
'id' => 'logo_url', //El ID será logo_url
'type' => 'text', //Campo tipo texto
'title' => __('Logo URL', 'nhp-opts'), //Titulo
'sub_desc' => __('Ingresa la URL de tu logo', 'nhp-opts'), //Descripción (Opcional)
'desc' => __('Deja este campo vacío si no quieres usar una imagen como logo', 'nhp-opts'), //Otra descripción (Opcional)
'std' => '' //Valor por defecto vacío
)
)
);En el código de arriba creamos una sección llamada "Opciones Generales", dentro de esa sección van dos campos, uno de tipo SELECT y otro de tipo TEXT, el primero va a servir como estructura de control para decidir si utilizar, o no, una imagen como logo. En caso contrario mostraremos el titulo del Blog, (definido en las opciones generales de wordpress).
Entonces, al guardar el archivo y actualizar, mi nueva sección debería verse así:
Y ahora ¿Como diablos utilizo esto en mi tema?, sencillo:
En el paso 7 definimos un nombre para las opciones, ahora debemos insertar este código en el lugar que tu desees del theme (header.php de preferencia, pero probar en otras secciones en caso de que no lo tome):
PHP:
<?php $options = get_option('el_nombre_que_elegiste'); ?>Esto almacena todas nuestras opciones del theme en $options, y podremos acceder a ellas definiendo su índice o ID que utilizamos para cada campo, cuando creamos el select para decidir si utilizamos o no una imagen como logo se le asignó el id de 'slc_logo'
Y ahora utlizamos la sección que creamos:
En mi caso y para mis necesidades, el código quedo así:
PHP:
<div id="header">
<h1>
<?php if($options['slc_logo'] == 2): ?>
<a href="<?php echo get_option('home'); ?>/"><img class="logot" src="<?php $options['logo_url'] ?>" /></a>
<?php else: ?>
<a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a>
</h1>
</div>En el código de arriba tengo un div que define el header del theme, luego viene el h1 donde estará el titulo del blog o el logo, para determinar esto utilizamos las opciones del theme. Utilizando un if bastante simple verificamos que valor tiene asignado el select que creamos en el panel, en caso de que el select tenga asignado el valor "2" (que significa "si") vamos a mostrar una imagen como logo, la url de la imagen sera la que el usuario ingresó en el segundo de nuestros campos, el text. Llamamos al valor a través de su ID 'logo_url'. Si el select tiene un valor distinto a 2 dentro del h1 va a ir el titulo del blog, esto a través de la funcion de wordpress bloginfo('name').
Como ven es cosa de experimentar, el framework viene con todas las opciones posibles, campos para generar degradados, colores, fechas, seleccionar posts, texto, etc, etc, etc. Es sólo cosa de bajar y probar.
No está demás decir que este es el primer tutorial que hago en mi vida, no tengo experiencia enseñando y si me salió muy enredado me pueden consultar, no tengo problemas en responder cualquier tipo de duda al respecto.
Bueno espero que esto le sirva a alguien, un saludo.
