Plantillas de página dinámicas en WordPress, Parte 3

En las dos primeras partes de esta serie de tutoriales, cubrimos qué eran las plantillas de páginas dinámicas y por qué se necesitaban. También vimos el código requerido para implementarlos.. 

En este tercer y último tutorial de la serie, crearé dos ejemplos de plantillas de página dinámicas en pleno funcionamiento que puede utilizar en sus propios proyectos. Estos fueron elegidos específicamente para ser fácilmente extensibles para satisfacer sus propias necesidades, y están diseñados como inspiración para cualquier otro tipo de plantillas de página dinámicas que pueda imaginar..

Las dos plantillas de página dinámicas que veremos en breve son:

• Formulario de contacto simple
• Blog Post Archive

Además de implementar nuestras plantillas de página, también le mostraré cómo agregar más pulido, mediante CSS y JavaScript personalizados, para que la interacción sea mucho más intuitiva para los usuarios finales..

Además, veremos cómo puede usar las plantillas de página para alguna tipo de mensaje. Desde WordPress 4.7, puede especificar el tipo de publicación con la que está asociada una plantilla de página. Veremos cómo puede modificar una plantilla de página dinámica existente para aprovechar esta nueva función, de modo que funcione con cualquier tipo de publicación..

Tenemos mucho que cubrir en este tutorial, así que comencemos!

Configuración del tema

Volveremos a utilizar un tema infantil de WordPress Twenty Seventeen, como lo hicimos en la parte 2 de esta serie de tutoriales, para agregar nuestro código de plantilla de página dinámica. Comencemos con un tema infantil en blanco.

Crear una carpeta de tema hijo llamada veintisiete años y agregar los siguientes archivos:

• funciones.php
• style.css

Dentro style.css, añadir:

/ * Nombre del tema: Twenty Seventeen Child Descripción: Twenty Seventeen Child Theme Autor: David Gwyer Plantilla: twentyseventeen Versión: 0.1 Licencia: GNU General Public License v2 o posterior Licencia URI: http://www.gnu.org/licenses/gpl- 2.0.html Dominio de texto: veintisiete-niño * /

Y dentro funciones.php, añadir:

en eso(); 

Agregue el tema secundario a su directorio de temas de WordPress como lo hicimos antes. Si no está seguro de cómo hacerlo, consulte la parte 2 de esta serie de tutoriales..

Ahora tenemos un tema infantil de trabajo (en blanco) listo para que agreguemos nuestro código de plantilla de página dinámica a.

Plantilla de página de formulario dinámico

Nuestra primera implementación real de una plantilla de página dinámica es un formulario de contacto simple. Estaremos agregando los siguientes campos:

• Título
• Nombre
• Tema
• Email
• Número de teléfono

Estos son campos de entrada de texto, aparte del encabezado, que es una etiqueta de encabezado HTML estándar.

Sin embargo, antes de implementar la plantilla de página real, debemos agregar controles personalizados al editor de página que nos permitirá modificar el resultado de la plantilla de página. Luego, cuando creamos la plantilla de página, se representará de acuerdo con la configuración de control del editor de páginas..

En la parte 2 de esta serie de tutoriales, mencioné que no hay una manera fácil de agregar controles personalizados directamente al cuadro de "Atributos de página", donde se encuentra la lista desplegable de plantillas de página.

Esto significa que tenemos que agregar nuestros controles de plantilla de página dinámicos en otro lugar por ahora. Más adelante te mostraré cómo superar esta limitación, con un poco de magia con CSS y JavaScript. Pero por ahora, tendremos que conformarnos con agregar nuestros controles personalizados a una meta caja separada..

En el DPT_Twenty_Seventeen_Child clase, registrar dos nuevos ganchos de acción en el en eso método, y un nuevo método llamado page_template_meta_boxes.

los load-post.php y load-post-new.php los ganchos de acción se ejecutan cada vez que se edita o se crea una publicación (de cualquier tipo). Cuando esto sucede, registramos otro gancho de acción. add_meta_boxes que activará la creación de nuestro meta box personalizado, que se realiza a través de add_page_template_meta_boxes función de devolución de llamada. Vamos a implementar esa función ahora.
La representación real de los controles de meta box se manejará a través de display_form_page_template_meta_box función de devolución de llamada, que se especificó anteriormente como uno de los argumentos para add_meta_box ().
Añadir controles aquí ... 
Por ahora, he agregado un texto de marcador de posición para que podamos ver nuestro nuevo cuadro de meta en el editor de páginas..
Recuerde que anteriormente nuestra plantilla de página de formulario tendrá un encabezado y cuatro campos de texto. Hay muchas maneras en que podríamos elegir personalizar la salida del formulario, pero en nuestro caso, vamos a agregar casillas de verificación para cada campo que nos permitirán cambiar su visibilidad. Actualizar display_form_page_template_meta_box () para incluir el siguiente código.
ID, 'pt_chk_form_heading', verdadero); $ name = get_post_meta ($ object-> ID, 'pt_chk_form_name', true); $ subject = get_post_meta ($ object-> ID, 'pt_chk_form_subject', true); $ email = get_post_meta ($ object-> ID, 'pt_chk_form_email', true); $ phone = get_post_meta ($ object-> ID, 'pt_chk_form_phone', true); ?> 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
 
Incluimos un campo único para la seguridad que se verificará más adelante, justo antes de guardar los valores del formulario en la base de datos.
Nota: si por alguna razón no se puede verificar el valor de nonce, no se guardarán las configuraciones. 
Luego, los valores de formulario actuales se recuperan de la base de datos antes de que los campos de formulario personalizados se envíen dentro del cuadro meta.
Actualmente, nuestras casillas de verificación no se guardarán cuando se actualice la publicación. Para hacer que la configuración del formulario persista, necesitamos registrar un nuevo enlace en el en eso() método que se dispara durante una save_post acción, y luego implementar la devolución de llamada para actualizar manualmente la configuración de meta meta.
post_type) return $ post_id;  $ heading = isset ($ _POST ['pt_chk_form_heading'])? $ _POST ['pt_chk_form_heading']: "; update_post_meta ($ post_id, 'pt_chk_form_heading', $ header); $ name = isset ($ _POST ['pt_chk_form_name'])? $ _POST ['pt_chk_form_name']:"; update_post_meta ($ post_id, 'pt_chk_form_name', $ nombre); $ subject = isset ($ _POST ['pt_chk_form_subject'])? $ _POST ['pt_chk_form_subject']: "; update_post_meta ($ post_id, 'pt_chk_form_subject', $ subject); $ email = isset ($ _POST ['pt_chk_form_email'])? $ _POST ['pt_chk_form_email'": "; update_post_meta ($ post_id, 'pt_chk_form_email', $ email); $ phone = isset ($ _POST ['pt_chk_form_phone'])? $ _POST ['pt_chk_form_phone']: "; update_post_meta ($ post_id, 'pt_chk_form_phone', $ phone); 
Una vez que se haya verificado el valor de formulario y los permisos de usuario, junto con una verificación para asegurarnos de que estamos en el tipo de publicación correcta, podemos probar los valores de formulario publicados y guardarlos de forma segura en la base de datos.
Nuestras casillas de verificación ahora son completamente funcionales, por lo que podemos seguir adelante e implementar la plantilla de página real. Dentro de la carpeta de tema hijo raíz, agregue una nueva carpeta llamada plantillas de página, y añádele un nuevo archivo llamado form-page-template.php.
Agregue el siguiente código al nuevo archivo para crear una plantilla de página en blanco.
 
 
 
  
 
 
 
Para reducir la complejidad del código, nuestro formulario de contacto no valida los comentarios del usuario, y hemos realizado las comprobaciones y validaciones habituales de los formularios, ya que queremos centrarnos únicamente en hacer que los formularios sean dinámicos sin códigos extraños..
Primero, necesitamos recuperar los valores de la casilla de verificación del formulario de contacto dinámico.
Luego podemos añadir en el código del formulario. Esto es muy similar para cada campo de formulario. Echemos un vistazo a la nombre código de campo.
  
 
Probamos el valor de la casilla de verificación desde la configuración de la plantilla de página y solo imprimimos el campo de formulario si está marcado. De lo contrario, nada sale. Esto se repite para cada campo de formulario..
Una vez que se envía el formulario, enviamos un correo electrónico al administrador del sitio y mostramos un mensaje en pantalla. Poniendo todo esto junto, tenemos nuestro código de plantilla de página final.
 
 
 
 El correo enviado con éxito!
";?> 
  
Plantilla de página de formulario dinámico!
    
    
    
    
  
 
  
 
 
 
Para probar que todo funciona correctamente, asegúrese de que todas las casillas de verificación de la plantilla de página de formulario estén marcadas y actualice la publicación. Luego eche un vistazo a la plantilla de página en la parte delantera.
Ahora intente desmarcar algunas de las casillas de verificación de la plantilla de página de formulario. Solo se emiten los campos especificados. ¡Tienes control total sobre cómo se muestra el formulario! En la captura de pantalla a continuación, desactivé solo las casillas de verificación de correo electrónico y teléfono.
Nota: si está trabajando en un entorno de WordPress local, entonces correo La función no puede enviar realmente el correo electrónico. Solo funcionará si tiene un servidor de correo configurado y en ejecución.
El formulario podría extenderse fácilmente para agregar cualquier número de controles de cualquier tipo. Por ejemplo, podría agregar un campo CAPTCHA opcional a su formulario, o podría especificar el orden de los campos generados, o incluso el texto del encabezado / etiquetas del formulario. El punto aquí es que puede usar plantillas de página dinámicas para personalizar su formulario como lo desee. Las posibilidades son literalmente infinitas!
Organizar nuestros controles de plantilla de página
Es posible que haya notado que hay un par de problemas de usabilidad con los controles de administración para nuestra plantilla de página dinámica. Funcionalmente está bien, pero lo ideal es que los controles dinámicos de la plantilla de la página estén en el mismo cuadro de meta que el desplegable de la plantilla de la página.. 
Recuerde que la razón por la que tuvimos que agregar nuestros controles de plantilla de página a un meta box separado en primer lugar fue porque actualmente no hay un gancho de WordPress disponible para agregar controles personalizados directamente al cuadro de meta de la plantilla de página.
Además, cuando se selecciona una plantilla de página dinámica, solo queremos que los controles asociados con esa plantilla sean visibles. Podemos completar ambos requisitos agregando algunos CSS y JavaScript personalizados al editor de páginas.
Específicamente, necesitamos:
 
Ocultar el cuadro de meta de formulario.
 
Espera a que la página del editor de administración se cargue completamente.
 
Mueva los controles de formulario al meta box 'Atributos de página'.
 
Mostrar solo los controles de formulario de administración si se selecciona la plantilla de página asociada.
 
Comience agregando css y js carpetas a su carpeta raíz del tema hijo. Dentro de css crear una carpeta style.css archivo, y en el js crear una carpeta script.js expediente. Sin embargo, puedes llamar a estos lo que quieras. Solo recuerde anotar los nombres de archivo si es así, y reemplácelos en el código de secuencias de comandos de puesta en cola.
Entonces, tenemos que poner en cola ambos archivos solamente en la pantalla del editor de páginas. No queremos que se agreguen a todos páginas de administración Registrar un nuevo gancho de acción en el en eso() Método para cargar scripts en las páginas de administración y agregar la función de devolución de llamada para poner en cola los archivos de script..
Observe cómo nos dirigimos a la página tipo de publicación y luego ya sea el post-new.php o post.php páginas de administración Básicamente, a menos que estemos en el editor de páginas, nuestros scripts no se cargarán, que es lo que queremos.
Continuemos ahora y comencemos a agregar CSS y JavaScript para personalizar los controles de plantilla de página de formulario. En primer lugar, oculte todo el cuadro de metadatos de formulario con CSS agregando esto a style.css:
# form-page-template-meta-box display: none; 
Podríamos haber hecho esto con JavaScript, pero queremos que el cuadro de metadatos se oculte inmediatamente. Si lo hiciéramos a través de JavaScript, tendríamos que esperar hasta que se cargue la página, y verías un pequeño flash como la caja de metadatos que se mostraba en la pantalla y luego se ocultaba con JavaScript. Así que usar CSS en este caso es mejor.
Ahora para el JavaScript. Añadir esto a script.js.
jQuery (document) .ready (function ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); // Mueve los controles de formulario al cuadro de "Atributos de la página" y los oculta default form_controls.insertAfter ('#page_template') .hide (); function displayControls (ptStr, sel) if (ptStr! == pt.val ()) sel.hide (); else else sel.toggle () ; // Call on page load displayControls ('page-templates / form-page-template.php', form_controls); // Call cada vez que se desplieguen cambios pt.on ('change', function () displayControls ( this.value, form_controls);););
No voy a entrar en una gran cantidad de detalles con respecto al JavaScript, pero aquí está el resumen.
Primero almacenamos en caché un par de selectores de CSS y movemos los controles del formulario de administración al Atributos de página cuadro de meta Entonces, tenemos un displayControls () función que oculta o muestra los controles de formulario según el valor actual del menú desplegable de la plantilla de página. Nosotros llamamos displayControls () en la carga de la página, y luego cada vez que se cambia el menú desplegable, para asegurarnos de que siempre estamos sincronizados.
Con el CSS y JavaScript agregado, los controles de la plantilla de la página de formulario ahora se muestran en el cuadro de meta correcto, y solo se muestran si la plantilla de la página asociada está seleccionada.
Esto se ve mucho mejor y es mucho más intuitivo para el usuario. Debido a que los meta box se pueden mover alrededor de las pantallas de administración de WordPress, nuestros controles dinámicos de plantilla de página no necesariamente habrían estado cerca del menú desplegable de la plantilla de página. Hemos resuelto este problema de una manera elegante para garantizar que nuestros controles siempre aparezcan directamente debajo del menú desplegable de la plantilla de página.!
Publicaciones de blog Plantilla de página dinámica
Nuestra próxima plantilla de página dinámica muestra una lista de sus últimas publicaciones en el blog. Pero en lugar de simplemente listar todas las publicaciones, implementaremos un cuadro de lista (similar a un menú desplegable) para permitirle elegir la categoría de publicación. No solo eso, también podrás seleccionar múltiple categorías de correos.
Comience agregando una nueva meta box en add_page_template_meta_boxes ().
Y ahora necesitamos implementar la función de devolución de llamada para renderizar nuestra meta box..
ID, 'blog_category', verdadero); $ categories = get_categories (); ?> 
 :  % 3 $ s (% 4 $ s)', esc_attr ($ category-> cat_ID), esc_attr (selected ($ category-> cat_ID, $ this-> q ($ category-> cat_ID, $ blog_category)), esc_html ($ category-> cat_name), esc_html ( $ category-> category_count)); ?>  
 
Vamos a desglosar esto. Primero definimos una variable para contener la lista de categorías de publicaciones seleccionadas (si las hay) desde la última vez que se actualizó la publicación. Otra variable almacena una matriz de todas las categorías existentes.
Nota: ya tenemos un campo nonce de nuestra plantilla de página de formulario anterior, por lo que no necesitamos usar otro aquí, ya que estamos en la misma página de administración.
Luego, recorramos la lista de las categorías del sitio y rellenamos un control desplegable a medida que avanzamos. Cualquier categoría que se seleccionó previamente se selecciona de nuevo para mantener todo sincronizado.
Puede que hayas notado, sin embargo, que uno de los argumentos para seleccionado() es una llamada de función. Normalmente solo usamos seleccionado() para comparar dos valores para determinar si se debe marcar el elemento actual como seleccionado. Sin embargo, dado que podemos seleccionar más de una categoría, nuestra configuración de base de datos es siempre una matriz de valores (incluso si en realidad solo seleccionamos una categoría).
La función q () es una función auxiliar que nos permite verificar el elemento de la lista actual con la matriz de categorías guardadas.
Para cada categoría, la identificación de la categoría se pasa a q () junto con la matriz de la categoría guardada. Si la categoría actual está en la lista de categorías guardadas, la categoría actual se devuelve a seleccionado() y coincidirá con el primer argumento. Esto causará seleccionado() para marcar la categoría actual como seleccionada. Esta es una forma elegante de manejar múltiples opciones para un solo control.
Todo lo que tenemos que hacer ahora es actualizar save_page_template_meta () para manejar el guardado de las categorías del blog. Agrega este código para hacer precisamente eso..
Ahora, necesitamos crear la plantilla de la página de publicaciones del blog. Dentro de tus temas infantiles plantillas de página carpeta, crea un nuevo archivo llamado blog-page-template.php, y agrega el siguiente código.
 
 
 
  $ paginado, 'cat' => $ cat, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'post'); $ blog_posts = new WP_Query ($ query_args); ?> have_posts ()):?> have_posts ()): $ blog_posts-> the_post (); ?>    
 
 
 
La única diferencia real de nuestra plantilla de página dinámica anterior es el código dentro de 
 Etiqueta HTML, así que echemos un vistazo más de cerca ahora.
Primero establecemos el valor de la paginado variable de consulta, que se utiliza para mostrar publicaciones en varias páginas, dependiendo de la cantidad de páginas devueltas de nuestra consulta de WordPress. Luego, obtenemos todas las categorías seleccionadas en el meta box del editor de páginas. La matriz de categorías se convierte en una cadena y se le asigna un valor predeterminado si está vacío. Luego se crea una nueva consulta de WordPress y los resultados se generan en un bucle estándar..
La clave aquí es que podemos controlar exactamente qué categorías se pasan al objeto de consulta, a través de las selecciones realizadas en el meta box del editor de páginas.. 
Todo lo que tenemos que hacer ahora es ocultar el cuadro de meta de las categorías del blog y mover el control de la lista al Atributos de página cuadro de meta Al igual que hicimos antes.
Dentro style.css actualiza los estilos para ocultar el meta box de las publicaciones del blog:
# form-page-template-meta-box, # blog-page-template-meta-box display: none; 
los script.js El archivo necesita un poco más de código para ser agregado. Aquí está el archivo completamente actualizado.
jQuery (document) .ready (function ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); var blog_post_controls = $ ("#blog_pt_wrapper"); // controles de forma de mover al cuadro de meta 'Atributos de página' y ocultarlos por defecto form_controls.insertAfter ('#page_template') .hide (); blog_post_controls.insertAfter ('#page_template') .hide (); function displayControls (ptStr, sel) if ( ptStr! == pt.val ()) sel.hide (); else sel.toggle (); // Call on page load displayControls ('page-templates / form-page-template.php', form_controls); displayControls ('page-templates / blog-page-template.php', blog_post_controls); // Llamar cada vez que se desplieguen los cambios pt.on ('change', function () var controles; if (this.value === 'page-templates / form-page-template.php') controls = form_controls; blog_post_controls.hide (); else if (this.value === 'page-templates / blog-page-template.php ') controls = blog_post_controls; form_controls.hide () else // hide all blog_post_controls.h ide () form_controls.hide ();  displayControls (este.valor, controles); ); );
La mayoría de los cambios dignos de mención están en el .en ('cambio') función. Debido a que ahora tenemos más de una plantilla de página dinámica, tenemos que probar para ver cuál se seleccionó en el menú desplegable, y luego pasar esto en el selector de elemento correspondiente a displayControls ().
También debemos ocultar todos los demás controles de plantilla de página aparte del seleccionado. Y si se muestra la plantilla de página predeterminada, ocultamos todos los controles de plantilla de página. El código de JavaScript podría optimizarse aún más, pero como solo tenemos dos plantillas de página dinámicas activas, hace un buen trabajo para nuestras necesidades.
Con estas modificaciones implementadas, ahora tenemos dos plantillas de página dinámicas en funcionamiento con cada uno de sus controles asociados mostrados directamente debajo de la lista desplegable de plantillas de página.
Plantillas de página para todos
Anteriormente mencioné cómo, en WordPress 4.7+, ahora puede asignar plantillas de página a alguna tipo de mensaje. Antes de WordPress 4.7, solo podía asignarlas a las páginas, pero ya no.!
Todo lo que tiene que hacer es agregar una línea adicional al bloque de comentarios en el encabezado de la plantilla de página y especificar una lista de tipos de publicación separados por comas en los que desea que esté disponible la plantilla de página..
El nombre del tipo de publicación debe ser el mismo que el slug ingresado cuando se registró por primera vez el tipo de publicación, de lo contrario se ignorará.
Entonces, podemos mostrar plantillas de página para cualquier tipo de publicación, pero ¿qué pasa con las plantillas de página dinámicas? Con solo unas pocas



		
			
	   
	




Código