Este post es un codekata o howto sobre WordPress para hacer plantillas de páginas individuales. Es decir, tenemos lo que se llaman temas completos para el frontend de WordPress. En los temas de WordPress todo el diseño web viene definido, y a veces nos traen una serie de plantillas que se pueden asignar individualmente a cada página, a cada post, a cada contenido..
Estas plantillas de página, podemos además maquetarlas y programarlas para que tengan cierto aspecto visual. Podemos crear nuevas y definir nuevas estructuras. Por ejemplo, en el tema de Customizr que estoy usando actualmente en este blog, tenemos una plantilla de página que nos proponen, y podemos crear nuevas replicándola y editándola fácilmente.
Cómo crear una nueva plantilla de página
Simplemente añadiendo lo siguiente en el fichero de plantilla, en la cabecera del fichero:
<?php
/**
* Template Name: No header, no footer
* Template Post Type: post, page
*/
?>Es decir, al poner las palabras ‘Template Name’ definiremos una plantilla de página. En mi caso, para elaborar este post, la he subido en el fichero:
wp-content/themes/customizr-child/templates/no-header-footer-template.phpHe copiado la plantilla que nos propone el tema que está en el fichero:
wp-content/themes/customizr/custom-page.phpComo se puede ver, ya tengo creado un tema hijo, por esto el directorio customizr-child/ pero realmente no haría falta. Y como su nombre indica no-header-footer-template.php lo que he hecho ha sido quitarle la cabecera y pie de página, también las barras laterales. Una vez ponemos el fichero en su sitio, nos sale la opción de seleccionar la nueva plantilla cuando editamos una página así como en la imagen siguiente:
Código fuente de la plantilla de página
Para el que quiera curiosearla, el código es el siguiente:
<?php
/**
* Template Name: No header, no footer
*/
?>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7 no-js" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8 no-js" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html class="no-js" <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<?php if (! function_exists('_wp_render_title_tag')) :?>
<title><?php wp_title('|', true, 'right'); ?></title>
<?php endif; ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- html5shiv for IE8 and less -->
<!--[if lt IE 9]>
<script src="<?php echo CZR_FRONT_ASSETS_URL ?>js/libs/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> <?php echo apply_filters('tc_body_attributes', '') ?>>
<div id="main-wrapper" class="section">
<div class="<?php czr_fn_main_container_class() ?>" role="main">
<div class="<?php czr_fn_column_content_wrapper_class() ?>">
<div id="content" class="<?php czr_fn_article_container_class() ?>">
<?php
do_action('__before_loop');
if (have_posts()) {
czr_fn_render_template('loop');
}
?>
</div>
</div><!-- .column-content-wrapper -->
</div><!-- .container -->
<p class="text-center">..:: <a href="/">JnjSite.com</a> ::..</p>
</div><!-- #main-wrapper -->
<?php wp_footer() ?>Un caso de uso con el resultado aplicado de esta plantilla es la siguiente página:
https://jnjsite.com/miscellaneous-scripts-for-wordpress/
Para terminar no me queda más que dejarte enlace a la documentación oficial que está muy bien:
https://wordpress.org/support/
Si te ha parecido interesante este tema, alguna pregunta, o tienes alguna sugerencia, no dudes en dejar un comentario. ¡Un saludo!
