Sistema de configuración de un theme WordPress – Serie crear galería con Flickr – Parte 3

Inicio » Tecnología » Diseño Web » Sistema de configuración de un theme WordPress – Serie crear galería con Flickr – Parte 3

El día de hoy vamos a continuar con la tercera parte del tutorial para crear o integrar una galería de Flickr en WordPress, y siguiente con la parte de la configuración, hoy vamos a aprender a realizar un sistema de configuración de themes, ya que esto lo vamos a necesitar para poder configurar más adelante nuestra galería de imágenes de Flickr.

No les voy a enseñar como hacer la estructura completa de la plantilla de administración, pero si les voy a enseñar las áreas que son importantes para que puedan hacer las modificaciones necesarias al archivo adjunto y crear sus propias opciones de configuración.

Carga del sistema de administración

En el archivo comprimido publicado con este artículo encontrarán un archivo php llamado admin-functions.php y una carpeta llamada admin, todo este contenido lo copiarán directamente en su theme, quedando su estructura de la siguiente forma:

Abrimos el archivos functions.php de nuestro theme y colocamos la siguiente línea:

Con esta línea vamos a cargar las funciones de administración del theme contenidas en dicho archivo, bien las funciones podrían crearse dentro del archivo functions.php, pero hacer esto conllevaría a tener un archivo extenso y desordenado, así que separado está bien.

Personalizar el sistema de administración

Las funciones del archivo de configuración del theme son sencillas de aplicar, actualmente, he utilizado y he necesitado los siguientes campos: una lista de opciones, campos texto, áreas de texto y un cargador de imágenes para el logo.

Lo primero que hay que hacer es modificar las siglas del theme y el prefijo, esto lo hacemos modificando las siguientes líneas:

El primer tab, corresponde generalmente a un mensaje para los usuarios, el tab se modifica en el siguiente código:

Ahora a dar un vistaso a los diferentes bloques.

Campo Upload: eg. Logotipo del sitio:

Creo que algo fundamental en un theme que tenga un sistema de configuración, poder cambiar su logotipo sería lo primero con lo que debería contar.

Cómo mostrar el contenido del campo de carga de imágenes.

Normalmente el logotipo del theme, tiene la siguiente estructura:

Lo cual muestra el nombre del sitio, sin embargo normalmente podemos reemplazar el nombre del sitio utilizando CSS para mostrar una imagen de fondo y desplazando el texto; si este es el caso, debemos quitar la imagen de fondo para el logotipo en la hoja de estilos y dejar de desplazar el texto.

Según como estemos mostrando el logotipo, para mostrar la imagen cargada desde la configuración del theme, tenemos que reemplazar las función por lo siguiente:

Como ustedes pueden observar que en lugar de la ruta de imagen hemos colocado una función, lo cual va a imprimir el contenido del campo del logotipo.

Lo único que cambiarán en dicha función es “$shortname_site_logo_url”, en este caso en lugar de “$shortname” lo reemplazamos por el prefijo que indicamos es la primera parte, en el caso del ejemplo he utilizado el prefijo “cbdc”, así que dicha función quedaría como:

Lista de opciones y área de texto: eg. Google Analitycs:

Normalmente tenemos la costumbre de editar nuestro footer.php o header.php para insertar el código que nos brinda google para el seguimiento y estadísticas de nuestro sitio, pero si realizamos el diseño para algún cliente, tenemos que facilitarle un poco las cosas y permitir que pueda ingresar código dentro del footer o header.

Para el uso de una lista de opciones y área de texto para insertar código, he tomado el caso de google analitycs, aunque bien se podría utilizar para otras cosas, en el archivo adjunto al artículo, el archivo contiene también el código para mostrar mapas de google, que se pueden insertar en la página de contacto por ejemplo.

En este caso, utilizaremos un listado de opciones para preguntar al usuario si desea o no mostrar el bloque en cuestión y en una segunda parte utilizaremos un textarea donde el usuario podrá insertar el código que desea utilizar, recuerden que no necesariamente se puede utilizar el código de google analitycs, ya que el campo de diferencia un código de otro.

Listado de opciones:

Con esto ya tenemos al menos las opciones, ahora sólo queda el campo para insertar el código:

Mostrar contenido de una lista de opciones y área de texto:

Dependiendo donde deseamos mostrar el código insertado, abrimos el archivo correspondiente, y en la parte donde deseamos que los valores de dicho campo se impriman insertaremos lo siguiente:

Con esto ya hemos terminado con las listas y las áreas de texto donde necesitamos insertar código.

Campos de texto: eg. Redes Sociales

Algo imprescindible en cada red es el uso de enlaces a nuestros perfiles o páginas en las diferentes redes sociales, si bien es cierto que existen plugins para hacer esto, nosotros podemos personalizar o utilizar este tipo de campos para otro tipo de cosas.

Este tipo de campos se pueden utilizar de la siguiente manera:

En este caso vamos a utilizar el campo para que el usuario indique su página de facebook.

Mostrar contenido de un campo de texto

Como este campo no tiene opciones, tenemos que hacer que la función donde se mostrará el contenido discrimine entre si el campo tiene o no algún valor ingresado; en tal caso se podría utilizar de la siguiente forma:

Por ahora esto es lo que corresponde al uso de los campos más utilizados en este tipo de themes, ustedes lo pueden personalizar mucho más si desean, ahora que ya tienen una idea de como funciona.

A partir de la línea 246 hasta la línea 290, podemos cambiar el contenido de texto a mostrar en la cabecera de la página de configuración, así como también los diferentes mensajes que se mostrarán, tanto en la pantalla iniciar, así como de las diferentes acciones tomadas.

En la próxima parte de esta guía culminaremos la galería Flickr, ahora que ya hemos aprendido a editar el archivo de configuración del theme.

OBSERVACIONES: Los campos en la configuración del theme, se muestran en el mismo orden en el cual se encuentran ubicados en el archivo.

Sistema de configuración de un theme WordPress – Serie crear galería con Flickr – Parte 3:

Descargar el archivo
Probando si se muestra seleccin de Google Adsense

Deja un comentario