Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins
Code

Tres usos prácticos de las cajas meta personalizadas

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La última semana explicamos cómo crear cajas meta personalizadas dentro del editor de entrada y cómo guardar los datos que introducíamos en ellas. Pero, ¿cuáles son las aplicaciones prácticas de esta técnica? Hoy, el objetivo es ver tres ejemplos reales del uso de las cajas meta personalizadas para mejorar la página de la entrada.


En el artículo de introducción, aprendiste todo sobre la implementación de cajas meta y sobre cómo almacenar/limpiar los datos que contienen. ¡Eso es genial! Pero ahora es el momento de avanzar más allá de los conceptos y de hacer funcionar esas cajas meta.


Ejemplo 1: Añadir una cita en la parte superior de las entradas

El escenario: Tienes un sitio web en el que principalmente publicas contenido inspirador. Una de las cosas que haces contínuamente es colocar citas en la parte superior de cada entrada. Para separar estas citas del resto de contenido, quieres desplazarlas a una caja meta personalizada.

En el anterior artículo "cómo…", aprendiste cómo implementar cajas meta, no obstante, aquí tienes un breve resumen.

1. Añadir la caja meta

Engancha una función en add_meta_boxes que contiene una llamada a la función add_meta_box.

2. Mostrar la caja meta

Crea una función con el mismo nombre que el $callback especificado en add_meta_box. Esta es la pieza que mostrará realmente el contenido de la caja meta.

3. Guardar los datos

Engancha una función en save_post que primero verifica los permisos y la intención y después limpia y guarda los datos.

The Quote Meta Box

Ahora la parte divertida: Usar los datos

Podríamos usar los datos guardados en nuestras cajas meta editando las plantillas de nuestro tema. Pero eso no es fácil. Para que el código de nuestra cita sea modular (un archivo de plugin), vamos a usar ganchos de filtro, parte de la API Plugin. Los ganchos de filtro son un poco diferentes a los de las acciones. Cuando enganchas en un filtro, el objetivo es, la mayoría de las veces, modificar cómo aparece en una página una parte del contenido. En nuestro caso, vamos a enganchar en the_content, y si estamos en la página de una que tenga una cita, la añadiremos en la parte superior.

Otra forma de entender la diferencia entre las acciones y los ganchos de filtros es que en las primeras mostramos cosas con echo (por ej. wp_head, ver sección2), pero con los filtros tienes en cuenta una o más variables, las alteras, y después las devuelves con return.

Para mostrar nuestra cita, engancharemos en the_content, que pasa por defecto una variable: el contenido de una determinada entrada. Dentro de la función que enganchamos, nos aseguraremos de estar en una página de entrada, si no es así, devolveremos directamente el contenido (sin alteraciones).

Después, obtendremos nuestra variable $post. Como estamos en el loop, simplemente hacemos una llamada a global $post. Después obtenemos nuestra cita, si no devuelve ningún valor, sabremos que no se introdujo ninguna cita y, de nuevo, devolvemos el contenido sin alterarlo.

Ahora que nos hemos asegurado de que estamos en una página de entrada y de que tenemos realmente una cita, podremos ocuparnos de reunirlo todo de forma correcta. Primero llamaremos a nuestro autor y sus fechas vía get_post_meta(), después podemos empezar a construir una cadena en la variable $out. Primero añadiremos una etiqueta <blockquote> y nuestra cita. Después comprobamos si el campo del autor ha sido rellenado. Si es así colocamos una etiqueta de apertura de párrafo para el autor, después comprobamos si existe una fecha y la añadimos a su vez al párrafo. Por último, añadiremos la etiqueta de cierre de la cita, </blockquote>.

Y ahora el paso más crucial: devolver la combinación de nuestra cadena $out recién creada la cual contiene la cita en sí y el contenido original de $content.

¡Eso es todo! Ahora puedes comprobar el resultado.

Meta Box Quote Display

Ejemplo 2: Añadir Etiquetas Meta para Open Graph

El escenario: Tienes una comunidad activa de lectores que regularmente comparten tus artículos en Facebook. Eso es estupendo, y proporciona un montón de tráfico hacia tu sitio. Pero empiezas a darte cuenta de que las imágenes que se muestran acompañando a los artículos compartidos en Facebook están muy lejos de lo ideal. Tampoco te gusta la forma en que aparecen los títulos de los artículos. La solución es añadir etiquetas meta de Open Graph para controlar la forma en la que se muestran los artículos. En lugar de dejar que esto se encargue de forma automática, decides implementar una caja meta personalizada que se ocupe de ello.

Configurar la caja meta

Probablemente ya tengas esto, pero aquí tienes el código para la caja meta.

Open Graph meta box

Añade algo de JavaScript

Para que funcione ese botón "Upload image", tendremos que añadir un poco de javascript que piratee el cargador nativo de WordPress. Esto significa que vamos a usar otro action hook. Esta vez se trata de admin_print_script-{$page}.

Cuando se añaden scripts y/o estilos en el área de administración de WordPress, hay una regla de oro: añádelos sólo allí donde los necesites. Esto evitará que tu plugin o tema rompa cualquier otra cosa accidentalmente. admin_print_scripts-{$page} te permite insertar scripts (usando la función wp_enqueue_script) únicamente en la $page especificada. En este caso, necesitamos añadir nuestro script en las pantallas post.php y post-new.php. Para ello es necesario enganchar la misma función en ambos.

Y el javascript.

Primero nos aseguramos de que la ventana del cargador salte cuando se pulse el botón, y establecemos una variable que le indica a WordPress que lo que fue clicado es nuestro botón. Después, guardamos la función window.send_to_editor con un nuevo nombre. Esta es la función que inserta realmente el HTML de la imagen en el área de edición de la entrada. Vamos a utilizar esta función para enviar el atributo src a nuestro propio campo de formulario, pero sólo si se ha desencadenado la aparición de la ventana de carga a través de nuestro botón.

Añadir las etiquetas de Open Graph

Vamos a enganchar en la acción wp_head para añadir nuestras etiquetas meta en la sección <head>. Primero nos aseguramos de que estamos en una página de entrada, y después establecemos nuestra variable $post. $post no debería estar vacío en este momento ya que WordPress ya ha decidido qué tipo de objeto está renderizando y qué archivo de plantilla debe usar. Pero, en caso de que sí sea, devolveremos la entrada mediante get_queried_object().

Después podemos repasar cada variable Open Graph, extrayendo todo con get_post_custom(), y, si existe, lo devolvemos a la sección head de nuestra página.

Open Graph meta box frontend

Ejemplo 3: Cambiar la maquetación del tema Twenty Eleven en tiempo real

El escenario: Usas mucho la plantilla del sidebar del tema Twenty Eleven. Pero quieres poder cambiar en cada página entre el sidebar izquierdo y derecho.

El siguiente código encajaría mejor en la izquierda en el archivo functions.php del tema. Dicho esto, como aquí estamos usando un plugin, podemos enganchar a la función init y comprobar con nuestra función que el tema que estamos usando es el Twenty Eleven. Si no lo es, desactivaremos el plugin. Sin embargo, primero definiremos una constante que contiene la URL del directorio en el que está ubicado el plugin.

Añadir la caja meta

La misma rutina anterior: añadir la caja meta, renderizarla, y guardar los datos. Sin embargo, esta vez vamos a mostrar nuestra caja meta en la pantalla de edición de las páginas. También vamos a usar una pequeña función de WordPress llamada get_template_directory_uri, que devuelve una cadena con el URI del directorio del tema actual. Vamos a usar esto para coger prestadas algunas imágenes que usa el tema Twenty Eleven en su página de opciones. También vamos a usar la constante que definimos anteriormente para añadir una imagen propia.

Para embellecer un poco nuestra caja meta, necesitamos añadir también nuestra propia hoja de estilo. ¿Te acuerdas de admin_print_scripts-{$page} que usamos en el anterior segundo escenario? Tiene una hermana admin_print_styles-{$page}, la cual, tal y como su nombre implica, te permite añadir hojas de estilo a determinadas páginas del área de administración de WordPress. Tendremos que enganchar en esta función para post.php y post-new.php. También usaremos wp_enqueue_style(); funciona de la misma manera que wp_enqueue_script(), que usamos en el segundo ejemplo.

Y el CSS.

Open Graph meta box frontend

Zambullida en el tema Twenty Eleven

Twenty Eleven posiciona su sidebar enganchándola en un filtro llamado body_class. Esto es parte de la función denominada <?php body_class(); ?>, la cual seguramente ya habrás usado si ya has diseñado con anterioridad algún tema. Si la maquetación predeterminada tiene dos columnas, Twenty Eleven añade uno de los dos elementos adicionales a body_class: right-sidebar o left-sidebar. Puedes ver este código en el archivo theme-options.php ubicado en la carpeta inc del tema.

También vamos a enganchar nuestro propio código en body_class. Primero, nos aseguraremos de que estamos en una página, y de que esa página esté usando la Plantilla del sidebar. Después establecemos la variable $post. Advierte que existen dos argumentos adicionales para add_filter. La prioridad es 99. Queremos que esto se desencadene en último lugar, así que usamos un número alto. 1 hace referencia al número de argumentos que enviamos a nuestra función.

body_class enviará una cadena con todos los elementos que incluirá la función de salida body_class(). A partir de aquí, sólo nos falta obtener nuestros valores meta. Si tu valor es 'correcto', buscaremos 'left-sidebar' en el array de la clase body. Si está ahí, la sustituimos por "right-sidebar". Y viceversa si nuestro valor es "left".

Lo anterior funcionaría, pero nos hemos dejado un pequeño detalle. Si un usuario tiene establecidas las opciones del tema Twenty Eleven de manera que sólo muestre una columna, no funcionarán ninguna de las opciones de nuestra caja meta. Por tanto, vamos a modificar un poco nuestra llamada add_meta_box. Primero obtenemos las opciones de Twenty Elevens, después nos aseguramos de que la opción de maquetación no esté establecida a una columna. Si el tema está configurado para mostrar sólo una columna, no añadiríamos una caja meta.


Resumen

Como habrás imaginado, existen múltiples usos para las cajas meta personalizadas… estos son sólo algunos ejemplos prácticos que exponemos para despertar tu inspiración. Cuando las combinamos con los tipos de entradas personalizadas, nos permiten crear pantallas de edición extremadamente personalizadas. Sin embargo, el verdadero potencial de las cajas meta, reside en cómo los diseñadores de temas y los desarrolladores de temas pueden crear interfaces más útiles y sencillas para los usuarios a nivel de los ajustes de entradas o páginas.

¡Espero que hayas disfrutado de este tutorial!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.