Share
La semana pasada introdujimos cómo crear meta box personalizados dentro del editor posterior y guardar los datos que ingresó. ¿Pero cuáles son algunas aplicaciones prácticas de esta técnica? Hoy en día, el objetivo es repasar tres ejemplos reales del uso de meta box personalizados para mejorar la página de publicación..
En el artículo de introducción, aprendió todo sobre cómo implementar meta box y cómo guardar / limpiar los datos que contiene. ¡Que gran! Pero es hora de ir más allá de la información conceptual y poner esas meta cajas personalizadas para trabajar.
El escenario: Usted ejecuta un sitio web que publica principalmente contenido inspirador. Una de las cosas que haces consistentemente es poner las citas en la parte superior de cada publicación. Para separar estas citas del contenido, desea moverlas a un meta box personalizado..
En el artículo "cómo hacer", aprendiste cómo implementar realmente las cajas de meta, pero aquí hay una revisión rápida.
Enganche una función en el add_meta_boxes que contiene una llamada a la add_meta_box función.
El crear una función con el mismo nombre que el $ devolución de llamada especificado en add_meta_box. Esta es la pieza que realmente muestra contenido de meta box.
Accentsconagua
ID, '_cd_quote_content', verdadero); $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); // Nonce para verificar la intención más tarde wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Enganchar una función en save_post que primero maneja los permisos de verificación y la intención y luego limpia y guarda los datos.
array ()); if (isset ($ _POST ['_ cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['_ cd_quote_content'], $ permitido)); if (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author', esc_attr (strip_tags ($ _POST ['_ cd_quote_author')))); if (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date', esc_attr (strip_tags ($ _POST ['_ cd_quote_date')))); ?>
Podríamos usar los datos guardados en nuestras cajas de metadatos editando los archivos de plantilla de nuestro tema. Pero eso es demasiado fácil. Para mantener nuestro código de cotización modular (un archivo de complemento), usaremos enganches de filtro, parte de la API de complemento. Los ganchos de filtro son un poco diferentes de las acciones. Cuando te conectas a un filtro, el propósito es, la mayoría de las veces, alterar la forma en que aparece una parte del contenido en una página. En nuestro caso, vamos a enganchar en el contenido, y si estamos en una sola página de publicación que tiene una cotización, la agregaremos arriba.
Otra forma de pensar en la acción frente a los ganchos de filtro es que eco cosas fuera de las acciones (por ejemplo, wp_head, consulte la sección 2), pero con los filtros que toma en una o más variables, modifíquelas, luego regreso ellos.
Para mostrar nuestra cotización, vamos a enganchar en el contenido, que pasa una variable de forma predeterminada: el contenido de una publicación determinada. Dentro de nuestra función enganchada, nos aseguraremos de que estemos en una sola publicación y, si no lo hacemos, devolveremos el contenido de forma correcta (sin alteraciones).
A continuación, obtendremos nuestra $ post variable. Porque estamos en el bucle, solo llamamos global $ post. Luego obtendremos nuestra cotización, si ningún valor regresa, sabemos que no se ingresó ninguna cotización y devolvemos el contenido una vez más sin alteración..
ID, '_cd_quote_content', verdadero); // Fianza si no tenemos una cotización; if (empty ($ quote)) devuelve $ content; ?>
Ahora que nos hemos asegurado de estar en una sola publicación y de hecho tenemos una cita, nos encargamos de poner las cosas juntas. Primero llamaremos a nuestra autora y sus fechas vía. get_post_meta (), entonces podemos empezar a construir una cadena en el $ fuera variable. Primero agregaremos un y nuestra cita. Luego verificamos si el campo del autor fue completado. Si fue que comenzaremos un párrafo para el autor, luego verificamos si hubo una fecha y también agregamos eso al párrafo. Finalmente, añadiremos nuestro cierre. etiqueta.
ID, '_cd_quote_content', verdadero); // Fianza si no tenemos una cotización; if (empty ($ quote)) devuelve $ content; // Arme nuestra cotización $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ cotización; si (! vacío ($ autor)) $ fuera. = ''; ?>-'. $ autor; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ fuera. = '
'; $ out. = '
Ahora el paso más crucial: devolver la combinación de nuestros recién hechos. $ fuera cadena que contiene la cita y el contenido original encontrado en $ contenido.
ID, '_cd_quote_content', verdadero); // Fianza si no tenemos una cotización; if (empty ($ quote)) devuelve $ content; // Arme nuestra cotización $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ cotización; si (! vacío ($ autor)) $ fuera. = ''; // Devuelve los valores: cita primero, luego el contenido devuelve $ out. $ contenido; ?>-'. $ autor; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ fuera. = '
'; $ out. = '
¡Eso es! Puedes ver el resultado..
El escenario: Tienes una comunidad activa de lectores que comparten regularmente tus artículos en Facebook. Esto es increíble, y te envía mucho tráfico. Pero empiezas a notar que las imágenes que aparecen con tus artículos en Facebook son menos que ideales. Tampoco estás contento con la forma en que se publican los títulos de tus publicaciones. La solución es agregar etiquetas meta de Open Graph para controlar cómo se muestran sus artículos. En lugar de dejar que esto se solucione automáticamente, usted decide implementar un meta box personalizado para cuidarlo..
Probablemente ya tengas esto abajo, pero aquí está el código para hacer funcionar tu meta box.
ID, '_cd_opengraph_title', verdadero); $ desc = get_post_meta ($ post-> ID, '_cd_opengraph_desc', true); $ image = get_post_meta ($ post-> ID, '_cd_opengraph_image', true); // Agregar un campo nonce wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Las imágenes pequeñas y cuadradas funcionan mejor.
Para hacer que el botón "Subir imagen" funcione, tendremos que agregar un poco de javascript que secuestra el cargador de WordPress incorporado. Esto significa que vamos a utilizar otro gancho de acción. Esta vez su admin_print_script - $ page.
Al agregar scripts y / o estilos al área de administración de WordPress, hay una regla de oro: solo agregue los scripts / estilos donde los necesite. Esto evita que su plugin / tema rompa algo más en un accidente. admin_print_scripts - $ page le permite solo insertar scripts (a través de la función wp_enqueue_script) solo en la $ página especificado. En este caso, tenemos que añadir nuestro script a la post.php y post-new.php pantallas Esto requiere enganchar la misma función en ambos..
Y el javascript.
jQuery (documento) .ready (function () var ogfield = null; jQuery ('# cdog-thickbox') .click (function () ogfield = jQuery ('input # og-image') .attr ('nombre' ); tb_show (", 'media-upload.php? type = image & TB_iframe = true'); devolver false;); window.send_to_editor_old = window.send_to_editor; window.send_to_editor = function (html) var ogimg; if (ogfield ! = nulo) ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # og-image') .val (ogimg); tb_remove (); ogfield = null; else window.send_to_editor_old (html);;); Primero, nos aseguramos de que el cargador de la caja gruesa aparezca al hacer clic en el botón, y configuramos una variable que le dice a WordPress que fue nuestro botón el que se hizo clic. A continuación, guardamos el window.send_to_editor función con un nuevo nombre. Esta es la función que realmente inserta el HTML de la imagen en el área de edición posterior. Vamos a secuestrar esta función para enviar en el atributo src a nuestro propio campo de formulario, pero solo si la espesa fue activada por nuestro botón.
Vamos a enganchar en el wp_head Acción para agregar nuestras etiquetas meta en el sección. Primero nos aseguraremos de que estemos en una sola página de publicación y luego configuraremos $ post variable. $ post no debería estar vacío en este punto, ya que WordPress ya ha decidido qué tipo de objeto está representando y qué archivo de plantilla necesita usar. Pero, en caso de que lo sea, recuperaremos el post con get_queried_object ().
get_queried_object (); ?>
A continuación podemos ir a través de cada variable de Open Graph, obteniendo todo con get_post_custom (), y, si está allí, haz eco en la sección principal de nuestra página.
get_queried_object (); $ valores = get_post_custom ($ post-> ID); if (isset ($ valores ['_ cd_opengraph_title'])) echo ''. "\ n"; if (isset ($ valores ['_ cd_opengraph_desc'])) echo ''. "\norte"; if (isset ($ valores ['_ cd_opengraph_image'])) echo ''. "\norte"; ?>
El escenario: Confías mucho en la plantilla de la página de la barra lateral de Twenty Eleven. Pero desea poder cambiar entre las barras laterales izquierda y derecha para cada página.
El siguiente código sería algo mejor dejado en el archivo de funciones de un tema. Dicho esto, porque estamos usando un complemento aquí, podemos conectarnos a la en eso y con nuestra verificación de funciones para asegurarnos de que Twenty Eleven sea el tema actual. Si no es así, desactivaremos el plugin. Primero, sin embargo, definiremos una constante que contenga la URL del directorio en el que reside nuestro complemento.
La misma rutina que antes: agregue el meta box, renderícelo y guarde los datos. Esta vez, sin embargo, vamos a mostrar nuestro cuadro de meta en la pantalla de edición para las páginas. También vamos a utilizar una función de wordpress ingeniosa llamada get_template_directory_uri, que devuelve una cadena que contiene el URI del directorio para el tema actual. Vamos a usar esto para tomar prestadas algunas imágenes que Twenty Eleven usa en su página de opciones de tema. También vamos a utilizar la constante que definimos anteriormente para agregar una imagen propia..
ID, '_cd_post_layout', verdadero); // Establezca nuestra variable de diseño, incluso en las nuevas publicaciones si (vacío ($ layout)) $ layout = 'default'; // Directorio de temas para tomar prestadas las imágenes de 2011 $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> Para pretender un poco nuestra meta box, también tendremos que agregar nuestra propia hoja de estilos. Recuerda admin_print_scripts - $ page ¿Del segundo escenario anterior? Tiene un hermano, admin_print_styles - $ page, que, como su nombre lo indica, le permite agregar una hoja de estilo al administrador de wordpress en páginas específicas. Tendremos que enganchar en esta función para post.php y post-new.php. También usaremos wp_enqueue_style (); funciona igual que wp_enqueue_script (), que usamos en el segundo ejemplo anterior.
Y el CSS.
div.cd-layout width: 200px; flotador izquierdo; entrada div.cd-layout display: block; # cd-sidebar-pos .clearfix: after clear: both; contenido: "; pantalla: bloque; fuente-tamaño: 0; línea-altura: 0; visibilidad: oculta; ancho: 0; altura: 0; # cd-sidebar-pos etiqueta span pantalla: bloque; 5px;
Twenty Eleven logra su posicionamiento en la barra lateral al engancharse en un filtro llamado body_class. Esto es parte de la función llamada , el cual, si has diseñado un tema anteriormente, probablemente lo hayas usado. Si el diseño predeterminado es dos columnas, Twenty Eleven agrega uno de los dos elementos adicionales a body_class: barra lateral derecha o barra lateral izquierda. Puedes ver el código para esto en el tema Cía carpeta en el archivo theme-options.php.
Nuestro propio código también va a enganchar en body_class. Primero, nos aseguraremos de que estemos en una página y de que esa página esté usando el Plantilla de barra lateral. Entonces obtendremos el $ post Variable o configurarlo si está vacío. Note dos argumentos adicionales para Añadir filtro. 99 es la prioridad. Queremos que esto se dispare al final, así que usamos un número más alto. 1 es el número o argumentos a enviar a nuestra función..
body_class enviará una matriz de todos los elementos que entrarán en el body_class () función de salida. A partir de aquí, solo necesitamos obtener nuestros propios valores meta. Si nuestro valor es 'correcto', buscaremos "barra lateral izquierda" en la matriz de clases del cuerpo. Si está allí, lo desarmaremos y lo reemplazaremos con la "barra lateral derecha". Viceversa si se deja nuestro valor..
ID, '_cd_post_layout', verdadero); // si estamos usando el diseño correcto, agregue if ($ layout == 'right') $ key = array_search ('left-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'barra lateral derecha'; elseif ($ layout = 'left') $ key = array_search ('right-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'barra lateral izquierda'; devolver $ clases; ?> Lo anterior funcionaría, pero hemos omitido un pequeño detalle. Si un usuario tiene configuradas las opciones de tema de Twenty Eleven en una visualización de una columna, ninguna de las opciones de nuestro meta box funcionará. Así que vamos a modificar add_meta_box llamar un poco Primero obtendremos las opciones de Twenty Eleven, luego nos aseguraremos de que la opción de diseño del tema no esté configurada en una columna. Si el tema se establece en una columna, no agregaremos el meta box.
Como puede imaginar, hay muchos otros usos para las meta cajas personalizadas? Estos son solo algunos ejemplos prácticos para que su mente funcione. Cuando se combinan con tipos de publicaciones personalizados, le permiten crear pantallas de edición extremadamente personalizadas. Sin embargo, la verdadera fortaleza de los meta box personalizados se encuentra en cómo los diseñadores de temas y los desarrolladores de complementos pueden crear interfaces más fáciles de usar para la configuración de nivel de publicación o página..
Esperamos que hayan disfrutado el tutorial.!
