Cómo crear una página a ancho completo en WordPress

Muchos temas de WordPress vienen con plantillas para páginas a ancho completo que puedes utilizar pero, por desgracia, muchos otros no cuentan con esta característica. En este artículo, te mostraremos cómo crear de forma sencilla una página a ancho completo en WordPress.

Cómo crear una página a ancho completo a mano

Este método requiere que edites ficheros del tema de WordPress que estés utilizando actualmente, y conocimientos básicos sobre PHP, CSS y HTML. Si nunca has hecho esto antes, echa un vistazo a nuestro artículo sobre cómo encontrar qué ficheros editar en un theme de WordPress.

Antes de empezar, lo primordial es que realices una copia de seguridad de tu sitio web, o al menos del tema que vas a modificar. Con esto nos curaremos en salud por si acaso ocurre algún problema y tengamos que restaurar lo que había antes.

Empezaremos abriendo un editor de texto plano como por ejemplo Notepad, y pegando este código en un archivo en blanco.

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Ahora guarda este archivo como full-width.php en tu equipo.

Este código simplemente define el nombre de la plantilla y le pide a WordPress que inserte la plantilla del header en su interior.

A continuación, tendrás que insertar la parte de código relativa al contenido. Conéctate a tu sitio web utilizando un cliente FTP y luego ve a /wp-content/themes/el-nombre-del-tema-que-estes-utilizando.

Una vez dentro de la carpeta del tema, localiza un fichero llamado page.php. Este es el fichero de la plantilla de página por defecto en tu tema. Copia todo su contenido después de la línea get_header() y pégalo en el archivo full-width.php que acabamos de crear y que debes tener guardado en tu equipo.

Ahora, debes modificar el archivo full-width.php y eliminar esta línea de código.

<?php get_sidebar(); ?>

Esta línea lo que hace es extraer el sidebar y mostrarlo en tu tema. Eliminándolo impedirás que tu tema muestre el sidebar cuando selecciones la plantilla a ancho completo.

Verás esta línea aparecer más de una vez en tu tema. Si tu tema cuenta con múltiples sidebars (las áreas del footer donde se incluyen wodgets también son llamadas sidebars), entonces tendrás que eliminar cada referencia en el código. Tendrás que decidir con qué sidebars quedarte…

Si por el contrario, tu tema no muestra sidebars en las páginas, no tendrás que buscarlo(s) en el código.

Así es como ha quedado nuestro archivo full-width.php después de hacer los cambios pertinentes. Es posible que el código sea diferente dependiendo del tema.

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Empieza el loop.
		while ( have_posts() ) : the_post();

			// Incluimos la plantilla de contenido de la pagina.
			get_template_part( 'template-parts/content', 'page' );

			// Insertamos la plantilla de comentarios
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// Fin del loop.
		endwhile;
		?>

	</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>

Ahora, debes subir el fichero full-width.php a la carpeta de tu tema utilizando un cliente FTP.

Enhorabuena, acabas de crear una nueva plantilla para páginas en tu tema. El próximo paso es utilizarla en el editor de páginas del backoffice de WordPress. Así que ve al admin y crea una nueva página.

En la pantalla de edición de página, selecciona la plantilla de ancho completo (Full Width), justo dentro de la caja de atributos de la página.

Ahora puedes visitar la parte pública de tu sitio web y comprobar si los sidebars han desaparecido y si la página aparece en una sola columna. Es posible que el contenido aún no se muestre a ancho completo, pero para ello debemos darle algo de estilo.

Para ello abre el Inspector de código de tu navegador y busca las clases de CSS utilizadas por tu tema que definen el área de contenido.

Después solo tienes que ajustar el ancho al 100% para que se muestre a pantalla completa. Nosotros hemos utilizado este código CSS para ello.

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Y hasta aquí nuestro artículo sobre cómo crear una página a ancho completo en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales.

Icono: Angel M

Guardar