SummArg | Cursos y recursos para webmasters

Clase 15: Framework para opciones administrativas e inserción de anuncios

Nuestro theme ya está listo, pero ¿cómo podemos hacernos la vida mas simple a la hora de gestionar los anuncios de un sitio? Sabemos que colocar anuncios Adsense acá y allá es cosa de una vez, pero el asunto se vuelve mas complejo si además vendemos espacios de forma mensual y nuestros anunciantes cambian con frecuencia.

Vamos a retomar una herramienta que les presentamos hace tiempo, que es gratuita y se integra a nuestro theme muy bien: Options Framework Theme de WP Theming (tiene una versión paga con varias herramientas muy interesantes).

Esta herramienta, que podemos descargar desde github, nos permite usar variables personalizadas en situaciones diferentes de las que vamos a plantear en esta clase. Pensemos que nos puede permitir ingresar el código hexadecimal de un nuevo color de fondo, o texto para incluir en un área en donde no queremos usar widgets, trozos de código completos, mensajes globales a usuarios, etc.

Lo primero que necesitamos hacer es descomprimir el paquete y colocar el siguiente código al inicio de nuestro functions.php, después de la etiqueta <?php.

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

Luego copiamos el archivo options.php y la carpeta /inc/ y las colocamos en el raíz de nuestro theme.

estructura

Ahora editemos el archivo options.php, que es en donde podremos gestionar las pestañas y sus contenidos dentro de Theme Options.

options

Para eliminar el contenido de pruebas debemos borrar desde la línea 105 del options.php hasta la 288. Vamos a buscar añadir dos sectores de publicidad a los que le añadiremos una imagen y su respectivo link, y aprovechamos a completar los tres cuadros de texto que figuran debajo del slider desde las opciones de nuestro theme.

theme

Vamos a trabajar insertando las opciones a partir de la línea 105. Primero generamos el encabezado de nuestra sección “Publicidad”.

$options[] = array(
 'name' => __('Publicidad', 'options_framework_theme'),
 'type' => 'heading');

Luego añadimos dos campos de texto que vamos a usar para colocar los links, y dos campos de upload para las imágenes.

$options[] = array(
 'name' => __('Link Ad Header', 'options_framework_theme'),
 'desc' => __('Link conteniendo http://...', 'options_framework_theme'),
 'id' => 'link_ad_header',
 'type' => 'text');
$options[] = array(
 'name' => __('Imagen Ad Header', 'options_framework_theme'),
 'desc' => __('400x60px', 'options_framework_theme'),
 'id' => 'image_ad_header',
 'type' => 'upload');
$options[] = array(
 'name' => __('Link Ad Footer', 'options_framework_theme'),
 'desc' => __('Link conteniendo http://...', 'options_framework_theme'),
 'id' => 'link_ad_footer',
 'std' => 'Default',
 'type' => 'text');
$options[] = array(
 'name' => __('Imagen Ad Footer', 'options_framework_theme'),
 'desc' => __('281x100px', 'options_framework_theme'),
 'id' => 'image_ad_footer',
 'type' => 'upload');

El parámetro name especifica el título de nuestro campo, desc sirve para colocar una descripción que se verá debajo del título, id se utiliza luego para invocar al contenido del elemento, type define el tipo de campo que será. También tenemos adicionalmente class (para elegir algunas variantes de type) y std que sirve para colocar contenido por defecto.

options2

Abrimos nuestro header.php y colocamos el siguiente código luego del div#logo:

<?php if ( of_get_option( 'image_ad_header' ) ) { ?>
 <div class="adHeader">
 <a href="<?php echo of_get_option( 'link_ad_header', 'no entry' ); ?>">
 <img src="<?php echo of_get_option( 'image_ad_header' ); ?>" />
 </a>
 </div>
 <?php } ?>

Con ello establecemos un condicional en el que si encuentra que #image_ad_header (nuestro id de la imagen para el header) tiene contenido, entonces coloca un div.adHeader y en su interior el link con el contenido de #link_ad_header y la imagen del id ya mencionado. Le damos un poco de estilo a la clase que acabamos de crear.

.adHeader {
 width: 400px;
 height:60px;
 float:left;
 margin: 35px 0 0 10px;
 }

Subimos contenido para estos dos campos.

options3

Y confirmamos que se vea como lo deseamos.

voila

Excelente! Ahora procedemos a repetir la operación pero esta vez en el footer. Aprovechamos a comentar que la clase .widget en el footer debería tener 293px de ancho, así que lo corregimos, del mismo modo la imagen del aviso deberá tener ese valor para su ancho. Podemos usar dicha clase para colocar dentro nuestra imagen en caso de que exista.

<?php if ( of_get_option( 'image_ad_footer' ) ) { ?>
 <div class="widget">
 <a href="<?php echo of_get_option( 'link_ad_footer', 'no entry' ); ?>">
 <img src="<?php echo of_get_option( 'image_ad_footer' ); ?>" />
 </a>
 </div>
 <?php } ?>

Finalmente vamos a nuestra sección de destacados. Hasta ahora lo veníamos manejando con publicaciones en la categoría Productos Destacados, pero dado el formato que necesitamos queda algo desprolijo y se nos ocurre que podríamos mejorarlo de este modo. Además suponemos que puede haber muchísimas entradas y que cuando el dueño del sitio decida modificar los destacados puede cometer varios errores, como excederse en la cantidad de texto o colocar una imagen dentro, y eso rompería nuestro home.

Este es el código que tenemos ahora.

<div id="featured">
<?php query_posts('category_name=Producto Destacado&posts_per_page=3' );
while ( have_posts() ) : the_post(); ?>
<div class="item">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div><!-- end of item" -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end of featured -->

Vamos a crear en options.php tres campos para cada uno de los destacados, uno para el título, otro para el texto y uno mas para el link. Nos quedarán un total de nueve campos. Les mostramos los primeros tres junto con el separador para que todo esto esté en una pestaña a la que llamaremos “Destacados”.

$options[] = array(
 'name' => __('Destacados', 'options_framework_theme'),
 'type' => 'heading');
 $options[] = array(
 'name' => __('Titulo destacado 1', 'options_framework_theme'),
 'id' => 'titulo_destacado_1',
 'std' => 'Default Value',
 'type' => 'text');
$options[] = array(
 'name' => __('Link destacado 1', 'options_framework_theme'),
 'id' => 'link_destacado_1',
 'type' => 'text');
$options[] = array(
 'name' => __('Texto destacado 1', 'options_framework_theme'),
 'id' => 'textarea_destacado_1',
 'type' => 'textarea');

Y en el index.php reemplazamos el bucle que llama a los tres elementos por:

<div class="item">
 <h3><?php echo of_get_option( 'titulo_destacado_1' ); ?></h3>
 <a href="<?php echo of_get_option( 'link_destacado_1' ); ?>">
 <p><?php echo of_get_option( 'textarea_destacado_1' ); ?></p>
 </a>
 </div><!-- end of item -->
 <div class="item">
 <h3><?php echo of_get_option( 'titulo_destacado_2' ); ?></h3>
 <a href="<?php echo of_get_option( 'link_destacado_2' ); ?>">
 <p><?php echo of_get_option( 'textarea_destacado_2' ); ?></p>
 </a>
 </div><!-- end of item -->
 <div class="item">
 <h3><?php echo of_get_option( 'titulo_destacado_3' ); ?></h3>
 <a href="<?php echo of_get_option( 'link_destacado_3' ); ?>">
 <p><?php echo of_get_option( 'textarea_destacado_3' ); ?></p>
 </a>
 </div><!-- end of item -->

Los links que añadimos van a generar un subrayado que no vamos a querer, así que lo eliminamos vía CSS y de paso le cambiamos el color de fondo a cada elemento cuando se le hace un hover.

.item a {
text-decoration:none;
}
.item:hover {
background-color:#f4f4f4;
}

options44

Nuestro panel va a quedar con dos pestañas ahora:

options5

Podemos ver el resutado en nuestro demo, y descargar la clase de hoy themeTaller 15 (92).

Antes de finalizar queremos destacar que el framework que elegimos contiene las siguientes opciones de campos para incluir:

  • Campos de texto (pequeños, medianos, largos)
  • Textarea con el editor
  • Upload de archivos
  • Radio buttons
  • Checkboxes
  • Selects
  • Select con las páginas de WordPress
  • Select con las categorías de WordPress
  • Select con las etiquetas de WordPress
  • Color picker
  • Selector de imágenes precargadas

Todas estas opciones nos dan mucho margen de trabajo para hacer un theme amigable y completo. Además de ser fácil de entender, es muy liviano y cuenta con la posibilidad de comprar la licencia para extender sus funciones.

Dejar un comentario

  1. […] Clase 15: Framework para opciones administrativas e inserción de anuncios. […]

  2. […] Clase 15: Framework para opciones administrativas e inserción de anuncios. […]

Dejar un comentario