Spanish (Español) translation by Alfonso Mora (you can also view the original English article)
En la parte 1 de esta serie de tutoriales me introdujo el concepto básico de plantillas de página dinámica y crear una plantilla de página estándar como base para futuros trabajos. Un tema para WordPress basado en el tema de los padres de diecisiete veinte hijo fue utilizado para aplicar la plantilla de página.
En este tutorial, usted aprenderá detalles más específicos sobre las plantillas de página dinámica y cómo se puede utilizar en sus propios proyectos de WordPress.
También te mostraré paso a paso cómo ampliar la plantilla de página desde el primer tutorial y convertirlo en la primera plantilla de página dinámica de trabajo!
Plantillas de Página Dinámica: Un Enfoque más Flexible
Entonces, ¿cómo podemos hacer las plantillas de página más flexible, y por qué sería útil de todos modos?
Digamos que tienes una plantilla de página del portafolio que salidas de una galería de elementos individuales del portafolio. Cada elemento sería un tamaño fijo, y sólo así muchos podrían caber en cada fila.
Por supuesto, podríamos añadir otra plantilla de página para mostrar portafolios en diferentes tamaños. Pero ¿qué pasa si queríamos Mostrar portafolios de pequeño, medianos o grandes? Para ello, necesitamos tres plantillas de página separada, con cada uno teniendo diferentes tamaños para los elementos del portafolio.
Esto podría inmediatamente hacerse más flexible mediante la adición de un control de lista desplegable para seleccionar el tamaño del portafolio (es decir, pequeño, mediano o grande). Esto es más conveniente para el usuario como el cuadro de la plantilla de página es que menos tiempo con opciones innecesarias.
Tiene más sentido para el desarrollador, que sólo 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).
¿Deben Todas las Página de Plantillas ser Dinámica?
Cabe destacar que no todas las plantillas página necesariamente beneficiarían de ser dinámico. Si tienes una plantilla de página que hace una cosa y una cosa solamente, eso está bien. No tendría sentido para añadir controles personalizados y la lógica adicional, a una plantilla de página en este caso.
Pero, como veremos al final de este tutorial, muchas plantillas de página se beneficiarían enormemente de ser más flexible.
Otro ejemplo útil para una plantilla de página dinámica sería un formulario de contacto. Hay muchos controles personalizados que se podrían añadir para hacer esta plantilla altamente flexible.
Por ejemplo, en lugar de salida un conjunto fijo de campos de formulario, controles de plantilla de página podrían añadirse para que pueda omitir algunos campos. ¿O tal vez un campo Captcha puede visualizarse opcionalmente para evitar spam forma? Hay tan sólo muchas maneras usted puede personalizar un formulario de contacto.
Ire creando una plantilla de página de forma dinámica en la parte 3 de esta serie de tutoriales. Pero primero vamos a empezar con la creación de una plantilla de página dinámica de propósito general.
Nuestra Primera Plantilla de Página Dinámica
Comenzaremos creando una plantilla de página dinámica básica para demostrar cómo todas las piezas encajan. Se agregará controles personalizados para el editor de la página que se utilizará más adelante en la salida de plantilla de página de control.
Los controles de plantilla de página personalizada que se va añadiendo son:
- Cuadro de texto
- TextArea
- Casilla de verificación
- Botones de radio
- Cuadro de selección desplegable
Idealmente, los controles deben añadirse directamente debajo del cuadro de lista desplegable plantilla de página para que sea obvio que están relacionadas con una plantilla de página.
Sin embargo, WordPress no proporciona cualquier ganchos para esto, así que tendrás que hacer que hacer (por ahora) con la adición de controles de plantilla de página personalizada a una caja de meta medida separada. En la parte tres de esta serie de tutoriales, te mostraré cómo conseguir alrededor de este problema.
Son fundamentales para el desarrollo de WordPress. Permite a los desarrolladores ampliar la base de código sin tener que recurrir a la edición de archivos del núcleo, que generalmente se considera una mala idea. Esto es porque cualquier código personalizado limpiar hacia fuera cada vez que se realiza una actualización de WordPress (que puede suceder muy regularmente).
Para mostrar el cuadro de la meta en la pantalla de editor de la página, agregar load-post.php y load-post-new.php ganchos al tema al método init() que creamos en la parte 1.
1 |
<?php
|
2 |
add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) ); |
3 |
add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) ); |
4 |
add_action( 'save_post', 'save_page_template_meta', 10, 2 ); |
5 |
}
|
Utilizamos dos anzuelos de WordPress para asegurar que la caja meta muestra en el editor de la página, si quieres crear una nueva página o editar uno ya existente. También hay un gancho de save_post que se encarga de guardar de post meta datos, que hablaré un poco más adelante.
Agregue los siguientes métodos de la cuatro clase para crear, mostrar y guardar los datos de la casilla de meta.
1 |
/* Add meta box hook. */
|
2 |
public function page_template_meta_box() { |
3 |
add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) ); |
4 |
}
|
1 |
/* Register meta box. */
|
2 |
public function add_page_template_meta_box() { |
3 |
add_meta_box( |
4 |
'page-template-meta-box', |
5 |
esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ), |
6 |
array( $this, 'display_page_template_meta_box' ), |
7 |
'page', |
8 |
'side', |
9 |
'default'
|
10 |
);
|
11 |
}
|
1 |
/* Render meta box on the page editor. */
|
2 |
public function display_page_template_meta_box($object) { |
3 |
wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' ); |
4 |
}
|
No entraré en detalles aquí sobre cajas de meta de WordPress, ya podría ser un tutorial entero por sí mismo, pero tenga en cuenta los siguientes puntos sobre el código que he añadido por encima:
- Los métodos de la clase
page_template_meta_box()yadd_page_template_meta_box()registran las metas de caja con WordPress. - En
add_page_template_meta_box(), el parámetro'page'especifica que sólo se mostrará este cuadro de meta en el editor de tipos de correos 'página' en el administrador de WordPress. - Método de la clase
display_page_template_meta_box()representa la caja de meta y establece un valor nonce para hacer los controles de forma más segura.
Si todo está bien, ahora tiene una caja de meta aparece en el editor de la página, como se muestra a continuación.
Es un poco vacía por el momento, sin embargo, así que vamos a agregar algunos controles.
Agregar Controles Personalizados
Si lo recuerdan desde arriba, vamos a añadir un cuadro de texto, área de texto, casilla de verificación, botón de opción y seleccione controles de cuadro de la caja de meta. Comenzar agregando el código siguiente al método display_page_template_meta_box() por debajo de la función de nonce.
1 |
<?php
|
2 |
$text = get_post_meta( $object->ID, 'page_template_text', true ); |
3 |
$textarea = get_post_meta( $object->ID, 'page_template_textarea', true ); |
4 |
$checkbox = get_post_meta( $object->ID, 'page_template_chk', true ); |
5 |
$radio = get_post_meta( $object->ID, 'page_template_radio', true ); |
6 |
$select = get_post_meta( $object->ID, 'page_template_select', true ); |
Esto recupera los valores actuales de los controles de la caja de meta y los almacena en variables locales. Ahora agregue el siguiente código HTML directamente, para controles de cuadro de la meta.
1 |
?> |
2 |
<div>
|
3 |
<p>
|
4 |
<label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br> |
5 |
<input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" /> |
6 |
</p>
|
7 |
|
8 |
<p>
|
9 |
<label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br> |
10 |
<textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea> |
11 |
</p>
|
12 |
|
13 |
<p>
|
14 |
<input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> /> <label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br> |
15 |
</p>
|
16 |
|
17 |
<p>
|
18 |
<label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br> |
19 |
<input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br> |
20 |
<input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br> |
21 |
<input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br> |
22 |
</p>
|
23 |
|
24 |
<p>
|
25 |
<label for="page-template-select">Dropdown</label> |
26 |
<select name="page-template-select" class="widefat"> |
27 |
<option value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option> |
28 |
<option value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option> |
29 |
<option value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option> |
30 |
<option value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option> |
31 |
</select>
|
32 |
</p>
|
33 |
</div><?php |
Cada control está contenida dentro de una etiqueta de párrafo, y su valor actual se actualiza mediante la variable local que creamos anteriormente. Esto asegura que los controles de cuadro de meta siempre Mostrar la configuración correcta.
Sin embargo, esto no ocurrirá a menos que guardar los datos actuales de control de caja de meta en la base de datos de WordPress.
Un poco antes, colocó un gancho para ejecutar un método de clase cada vez que se actualiza el editor de la página. Vamos a añadir este método a nuestra clase de tema ahora.
1 |
<?php
|
2 |
/* Save meta box data. */
|
3 |
public function save_page_template_meta( $post_id, $post ) { |
4 |
|
5 |
if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) { |
6 |
return $post_id; |
7 |
}
|
8 |
|
9 |
if ( ! current_user_can( 'edit_post', $post_id ) ) { |
10 |
return $post_id; |
11 |
}
|
12 |
|
13 |
if( 'page' != $post->post_type ) { |
14 |
return $post_id; |
15 |
}
|
16 |
|
17 |
$page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : ''; |
18 |
update_post_meta( $post_id, 'page_template_text', $page_template_text_value ); |
19 |
|
20 |
$page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : ''; |
21 |
update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value ); |
22 |
|
23 |
$page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : ''; |
24 |
update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value ); |
25 |
|
26 |
$page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : ''; |
27 |
update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value ); |
28 |
|
29 |
$page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : ''; |
30 |
update_post_meta( $post_id, 'page_template_select', $page_template_select_value ); |
31 |
}
|
Método de la clase save_page_template_meta() encarga de guardar los datos de control de caja de meta. Solamente guarda los datos de la caja de meta si se verifica el nonce, los usuarios actuales pueden editar los mensajes y estamos en la pantalla de administración del editor de página.
Si se cumplen esas condiciones, extraemos los datos para cada control que se almacena en la variable de global $_POST. Esta variable se establece cada vez que se envía un formulario.
Por último, los metadatos de control de caja se guardan en la base de datos de WordPress como meta datos para la página actual.
Con los controles de plantilla de página personalizada agregados, nuestra caja de meta debe parecerse a esto.
Introduzca algún texto para el cuadro de texto y textarea y selecciones la casilla de verificación, botón de opción y casilla. Actualizar para guardar los cambios del golpe, y cuando vuelve a cargar el editor de la página, tus controles de cuadro de meta deben mostrar los datos que acaba de entrar.
Continuación se muestra el código fuente completo para el archivo de functions.php del tema.
1 |
<?php
|
2 |
|
3 |
/**
|
4 |
* Twenty Seventeen child theme class.
|
5 |
*
|
6 |
* DPT = D[ynamic] P[age] T[emplates].
|
7 |
*/
|
8 |
class DPT_Twenty_Seventeen_Child { |
9 |
|
10 |
/**
|
11 |
* Register hooks.
|
12 |
*/
|
13 |
public function init() { |
14 |
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) ); |
15 |
add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) ); |
16 |
add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) ); |
17 |
add_action( 'save_post', array( $this, 'save_page_template_meta' ), 10, 2 ); |
18 |
}
|
19 |
|
20 |
/* Enqueue parent theme styles. */
|
21 |
public function enqueue_parent_theme_styles() { |
22 |
wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' ); |
23 |
}
|
24 |
|
25 |
/* Add meta box hook. */
|
26 |
public function page_template_meta_box() { |
27 |
add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) ); |
28 |
}
|
29 |
|
30 |
/* Register meta box. */
|
31 |
public function add_page_template_meta_box() { |
32 |
add_meta_box( |
33 |
'page-template-meta-box', |
34 |
esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ), |
35 |
array( $this, 'display_page_template_meta_box' ), |
36 |
'page', |
37 |
'side', |
38 |
'default'
|
39 |
);
|
40 |
}
|
41 |
|
42 |
/* Render meta box on the page editor. */
|
43 |
public function display_page_template_meta_box( $object ) { |
44 |
|
45 |
wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' ); |
46 |
|
47 |
$text = get_post_meta( $object->ID, 'page_template_text', true ); |
48 |
$textarea = get_post_meta( $object->ID, 'page_template_textarea', true ); |
49 |
$checkbox = get_post_meta( $object->ID, 'page_template_chk', true ); |
50 |
$radio = get_post_meta( $object->ID, 'page_template_radio', true ); |
51 |
$select = get_post_meta( $object->ID, 'page_template_select', true ); |
52 |
?>
|
53 |
<div>
|
54 |
<p>
|
55 |
<label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br> |
56 |
<input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" /> |
57 |
</p>
|
58 |
|
59 |
<p>
|
60 |
<label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br> |
61 |
<textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea> |
62 |
</p>
|
63 |
|
64 |
<p>
|
65 |
<input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> /> <label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br> |
66 |
</p>
|
67 |
|
68 |
<p>
|
69 |
<label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br> |
70 |
<input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br> |
71 |
<input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br> |
72 |
<input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br> |
73 |
</p>
|
74 |
|
75 |
<p>
|
76 |
<label for="page-template-select">Dropdown</label> |
77 |
<select name="page-template-select" class="widefat"> |
78 |
<option value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option> |
79 |
<option value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option> |
80 |
<option value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option> |
81 |
<option value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option> |
82 |
</select>
|
83 |
</p>
|
84 |
</div><?php |
85 |
}
|
86 |
|
87 |
/* Save meta box data. */
|
88 |
public function save_page_template_meta( $post_id, $post ) { |
89 |
|
90 |
if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) { |
91 |
return $post_id; |
92 |
}
|
93 |
|
94 |
if ( ! current_user_can( 'edit_post', $post_id ) ) { |
95 |
return $post_id; |
96 |
}
|
97 |
|
98 |
if( 'page' != $post->post_type ) { |
99 |
return $post_id; |
100 |
}
|
101 |
|
102 |
$page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : ''; |
103 |
update_post_meta( $post_id, 'page_template_text', $page_template_text_value ); |
104 |
|
105 |
$page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : ''; |
106 |
update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value ); |
107 |
|
108 |
$page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : ''; |
109 |
update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value ); |
110 |
|
111 |
$page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : ''; |
112 |
update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value ); |
113 |
|
114 |
$page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : ''; |
115 |
update_post_meta( $post_id, 'page_template_select', $page_template_select_value ); |
116 |
}
|
117 |
}
|
118 |
|
119 |
$ts_child_theme = new DPT_Twenty_Seventeen_Child(); |
120 |
$ts_child_theme->init(); |
La pieza final del rompecabezas es utilizar los metadatos de control de caja en nuestra plantilla de página en la parte delantera. Abrir el archivo de test-page-template.php que hemos creado en la parte 1 y reemplazar el contenido con este código actualizado.
1 |
<?php
|
2 |
/**
|
3 |
* Template Name: Test Page Template
|
4 |
*
|
5 |
* @package WordPress
|
6 |
* @subpackage Twenty_Seventeen
|
7 |
* @since 1.0
|
8 |
*/
|
9 |
|
10 |
get_header(); ?> |
11 |
|
12 |
<div class="wrap"> |
13 |
<div id="primary" class="content-area"> |
14 |
<main id="main" class="site-main" role="main"> |
15 |
|
16 |
<?php
|
17 |
while ( have_posts() ) : the_post(); |
18 |
|
19 |
$text = get_post_meta( get_the_ID(), 'page_template_text', true ); |
20 |
$textarea = get_post_meta( get_the_ID(), 'page_template_textarea', true ); |
21 |
$checkbox = get_post_meta( get_the_ID(), 'page_template_chk', true ); |
22 |
$radio = get_post_meta( get_the_ID(), 'page_template_radio', true ); |
23 |
$select = get_post_meta( get_the_ID(), 'page_template_select', true ); |
24 |
|
25 |
echo "<p>Text Box: " . $text . "</p>"; |
26 |
echo "<p>Text Area: " . $textarea . "</p>"; |
27 |
echo "<p>Checkbox: " . $checkbox . "</p>"; |
28 |
echo "<p>Radio Buttons: " . $radio . "</p>"; |
29 |
echo "<p>Dropdown: " . $select . "</p>"; |
30 |
|
31 |
echo "<h2>Sitemap</h2>"; |
32 |
echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>"; |
33 |
|
34 |
endwhile; // End of the loop. |
35 |
?>
|
36 |
|
37 |
</main><!-- #main --> |
38 |
</div><!-- #primary --> |
39 |
</div><!-- .wrap --> |
40 |
|
41 |
<?php get_footer(); |
Asegúrese de que la 'Plantilla de Página de Prueba" es la plantilla de página actualmente seleccionado y ver la página en la parte delantera.
Como se puede ver, la plantilla de página ahora incluye sólo los valores para los controles de cuadro de meta en el editor de la página. Esto es base para el resto del tutorial ya que vamos construir en este ejemplo básico y crear varios ejemplos de trabajar totalmente las plantillas de página dinámica que se pueden utilizar en sus propios proyectos de WordPress.
Conclusión
En este tutorial, cubrimos cómo construir una plantilla de página dinámico funcionamiento. Por el momento, aunque es funcional, nuestra plantilla de página básica no es terriblemente útil.
En la tercera y última parte de esta serie de tutoriales, te voy a mostrar cómo crear diferentes plantillas de página dinámica, de principio a fin, que puede utilizar (y expandir) en sus propios proyectos de WordPress.
Si usted tiene alguna pregunta, por favor déjeme un mensaje en los comentarios. Me encantaría escuchar sus pensamientos en el tutorial.
By
