Accentsconagua
Área de texto: ". $ Textarea".
"; eco "Checkbox: ". $ Checkbox".
"; eco "Botones de radio: ". $ Radio".
"; eco "Desplegable: ". $ Seleccionar".
"; eco "Mapa del sitio
"; eco "- ". wp_list_pages (array ('title_li' =>")). "
Share
En la parte 1 de esta serie de tutoriales presenté el concepto básico de plantillas de página dinámicas y creé una plantilla de página estándar como base para futuros trabajos. Se usó un tema secundario de WordPress basado en el tema principal de Veinte Diecisiete para implementar la plantilla de página.
En este tutorial, aprenderá más detalles específicos sobre las plantillas de página dinámicas y cómo puede usarlas en sus propios proyectos de WordPress.
También le mostraré paso a paso cómo extender la plantilla de página del primer tutorial y convertirla en su primera plantilla de página dinámica de trabajo.!
Entonces, ¿cómo podemos hacer que las plantillas de página sean más flexibles y por qué sería útil de todos modos??
Digamos que tiene una plantilla de página de cartera que genera una galería de elementos de cartera individuales. Cada elemento tendría un tamaño fijo, y solo tantos podrían caber en cada fila.
Por supuesto, podríamos agregar otra plantilla de página para mostrar carteras en diferentes tamaños. Pero, ¿y si quisiéramos mostrar carteras pequeñas, medianas o grandes? Para esto, necesitaríamos tres plantillas de página separadas, cada una con diferentes tamaños para los elementos de la cartera.
Esto podría hacerse instantáneamente más flexible al agregar un control desplegable para seleccionar el tamaño de la cartera (es decir, Pequeño, Mediano o Grande). Esto es más conveniente para el usuario ya que el cuadro de plantilla de página está menos lleno de opciones innecesarias.
¡También tiene más sentido para el desarrollador, que solo tiene una plantilla de página para mantener en lugar de tres! Esto sigue el principio de desarrollo de software Don't Repeat Yourself (DRY).
Vale la pena señalar que no todas las plantillas de página se beneficiarían necesariamente de ser dinámicas. Si tiene una plantilla de página que hace una cosa, y una sola cosa, entonces está bien. No tendría sentido agregar controles personalizados y lógica adicional a una plantilla de página en este caso.
Pero, como verá al final de este tutorial, muchas plantillas de página se beneficiarían enormemente de ser más flexibles.
Otro ejemplo útil para una plantilla de página dinámica sería un formulario de contacto. Hay muchos controles personalizados que podrían agregarse para hacer esta plantilla de página altamente flexible.
Por ejemplo, en lugar de generar un conjunto fijo de campos de formulario, se podrían agregar controles de plantilla de página para permitirle omitir ciertos campos. ¿O tal vez un campo de Captcha podría mostrarse opcionalmente para evitar envíos de formularios de spam? Hay tantas formas de personalizar un formulario de contacto..
Crearé una plantilla de página de formulario dinámico en la parte 3 de esta serie de tutoriales. Pero primero comencemos con la creación de una plantilla de página dinámica de propósito general..
Para empezar, estaremos creando una plantilla de página dinámica básica para demostrar cómo encajan todas las partes componentes. Los controles personalizados se agregarán al editor de la página, que se usará más adelante para controlar el resultado de la plantilla de la página..
Los controles de plantilla de página personalizados que agregaremos en breve son:
Lo ideal es que los controles se agreguen directamente debajo del cuadro desplegable de plantilla de página para que sea obvio que están relacionados con una plantilla de página..
Sin embargo, WordPress no proporciona ningún enlace para esto, por lo que tendrá que hacerlo (por ahora) con la adición de controles de plantillas de página personalizados a un meta box por separado. En la tercera parte de esta serie de tutoriales, te mostraré cómo solucionar este problema.
Los ganchos son fundamentales para el desarrollo de WordPress. Permiten a los desarrolladores ampliar el código base sin tener que recurrir a la edición de archivos principales, lo que generalmente se considera una mala idea. Esto se debe a que cualquier código personalizado se eliminará cada vez que se realice una actualización de WordPress (lo que puede suceder con bastante frecuencia).
Para mostrar nuestro cuadro de meta en la pantalla del editor de página, agregue el load-post.php y load-post-new.php se engancha al tema del niño en eso() método que creamos en la parte 1.
Usamos dos enlaces de WordPress para asegurarnos de que el cuadro de meta aparezca en el editor de páginas, ya sea que esté creando una nueva página o editando una existente. También hay una
save_postenganche que maneja el guardado de metadatos posteriores, que cubriré un poco más adelante.Agregue los siguientes cuatro métodos de clase para crear, mostrar y guardar datos para el meta box.
/ * Agregar meta caja gancho. * / función pública page_template_meta_box () add_action ('add_meta_boxes', array ($ this, 'add_page_template_meta_box'));/ * Registrar meta box. * / public function add_page_template_meta_box () add_meta_box ('page-template-meta-box', esc_html __ ('Page Template Meta Box', 'veintisiete-niños'), matriz ($ this, 'display_page_template_meta_box'), 'page ',' lado ',' predeterminado ');/ * Renderizar meta box en el editor de la página. * / public function display_page_template_meta_box ($ object) wp_nonce_field (basename (__FILE__), 'page_template_meta_box_nonce');No voy a entrar en demasiados detalles aquí sobre las meta box de WordPress, ya que podría ser un tutorial completo por sí solo, pero tenga en cuenta los siguientes puntos sobre el código que agregué anteriormente:
page_template_meta_box () y add_page_template_meta_box () Los métodos de clase registran el meta box con WordPress..add_page_template_meta_box (), la 'página' El parámetro especifica que este cuadro de meta solo se mostrará en el editor de tipo de página de 'página' en el administrador de WordPress.display_page_template_meta_box () el método de clase representa el cuadro de metadatos y configura un nonce para que los controles de formulario sean más seguros.Si todo está bien, ahora debería tener un cuadro de metadatos en el editor de páginas, como se muestra a continuación.
Sin embargo, está un poco vacío en este momento, así que vamos a agregar algunos controles.
Si recuerda desde arriba, agregaremos un cuadro de texto, área de texto, casilla de verificación, botón de opción y controles de casilla de selección al meta box. Comience agregando el siguiente código a la display_page_template_meta_box () método debajo de la función nonce.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true);
Esto recupera los valores actuales de nuestros controles de meta box y los almacena en variables locales. Ahora agregue el siguiente HTML directamente después, para representar los controles de meta box.
?>
/>
>
>
>
Cada control está contenido dentro de una etiqueta de párrafo, y su valor actual se actualiza a través de la variable local que creamos anteriormente. Esto asegura que los controles de meta box siempre muestren la configuración correcta.
Sin embargo, esto no sucederá a menos que guardemos los datos de control de meta box actuales en la base de datos de WordPress.
Un poco antes, registré un gancho para ejecutar un método de clase cada vez que se actualizaba el editor de páginas. Agreguemos ese método a nuestra clase de tema infantil ahora.
post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['page-template-textarea'])? -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value);los
save_page_template_meta ()El método de clase maneja guardar los datos de control de meta box. Solo guarda los datos de la caja meta si se verifica el nonce, los usuarios actuales pueden editar publicaciones, y estamos en la pantalla de administración del editor de la página.Si se cumplen esas condiciones, entonces extraemos los datos para cada control que se almacena en el registro global.
$ _POSTvariable. Esta variable se establece cada vez que se envía un formulario..Finalmente, los datos de control de meta box se guardan en la base de datos de WordPress como metadatos para la página actual.
Con los controles de plantilla de página personalizados agregados, nuestro cuadro de meta debe tener este aspecto.
Ingrese un texto para el cuadro de texto y el área de texto, y haga selecciones para la casilla de verificación, el botón de opción y la casilla de selección. Presione actualizar para guardar sus cambios, y cuando el editor de la página se vuelva a cargar, los controles de su meta box deben mostrar los datos que acaba de ingresar..
A continuación se muestra el código fuente completo del archivo de funciones del tema secundario.php.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true); ?>post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['page-template-textarea'])? -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value); $ ts_child_theme = new DPT_Twenty_Seventeen_Child (); $ ts_child_theme-> init ()!
/>
>
>
>
La última pieza del rompecabezas es utilizar los datos de control de meta box en nuestra plantilla de página en el extremo delantero. Abre el
test-page-template.phparchivo que creamos en la parte 1 y reemplazamos los contenidos con este código actualizado.Cuadro de texto: ". $ Texto"."; eco " Área de texto: ". $ Textarea".
"; eco "Checkbox: ". $ Checkbox".
"; eco "Botones de radio: ". $ Radio".
"; eco "Desplegable: ". $ Seleccionar".
"; eco "Mapa del sitio
"; eco "". wp_list_pages (array ('title_li' =>")). "
"; endwhile; // Fin del bucle.?>Asegúrese de que la 'Plantilla de página de prueba' sea la plantilla de página seleccionada actualmente y vea la página en la parte delantera.
Como puede ver, la plantilla de página ahora incluye los valores que se acaban de configurar para los controles de meta box en el editor de páginas. Esto es fundamental para el resto del tutorial, ya que desarrollaremos este ejemplo básico y crearemos varios ejemplos de plantillas de páginas dinámicas que funcionan completamente y que puede usar en sus propios proyectos de WordPress..
Conclusión
En este tutorial, cubrimos cómo construir una plantilla de página dinámica que funcione. En este momento, aunque es funcional, nuestra plantilla de página básica no es muy útil.
En la tercera y última parte de esta serie de tutoriales, le mostraré cómo crear varias plantillas de página dinámicas, de principio a fin, que puede usar (y ampliar) en sus propios proyectos de WordPress.
Si tiene alguna pregunta, por favor déjeme un mensaje en los comentarios a continuación. Me encantaría escuchar tus pensamientos sobre el tutorial..
