Cómo personalizar una Homepage (Página Principal) en WordPress

¡Hola! ¿Qué tal? Aquí Romuald Fons de RomuTV. En este episodio, el número 40, vamos a seguir con la saga sobre cómo explotar el poner una página estática en WordPress. Cómo personalizar una homepage.

Ha tenido tanto éxito y hemos recibido tantas preguntas que las vamos a responder aquí. Además, te vamos a enseñar cómo ponerla como homepage y la vamos a tunear un poco para que dé el pego.

Página estática como homepage

¿Qué hace falta para personalizar una homepage y que esté de puta madre?

Primero lo que tenemos que hacer es ver cómo poner una página de WordPress como homepage.

Tenemos que ir a «Ajustes» en la barra lateral izquierda y pinchamos en «Lectura».

Seleccionas «Una página estática», eliges la página que has creado (en este caso Ya es Halloween!!) y guardas cambios. Con esto la home de tu web ya es esa página estática que has creado.

En el vídeo puedes ver que si voy a decalaveras.com, la homepage de esta web es una página estática.

No tiene nada que ver con aquella página de WordPress que creamos en el RomuTV 39.

Ahora te vamos a enseñar diversas cosas que harán que esa página funcione mejor.

Esto es aplicable a todas las páginas del w3schools que te puse el otro día, porque todas siguen el mismo patrón.

Veremos cómo poner un menú chulo, una imagen de fondo, tocaremos un poco el H1, H2 para que las metas estén mejor y algo muy importante que debe tener cualquier homepage es un listado de los últimos post o últimas páginas, en este caso lo hemos hecho con los posts. Y mira qué bonito queda aquí abajo.

Estas son cards cuyos estilos ya están en el w3schools. Así que es súper fácil de implementar.

Vamos a «Apariencia» en la barra lateral izquierda y clicas en «Editor»

En la barra derecha clicas en la página que hayas creado (la nuestra del otro día es «test»)

Ahora te enseñaré cuatro códigos pequeños que harán que esa página se vea bien. Luego ya si quieres cambiar los colores o meterle más cosas, ya te espabilas o me lo preguntas y haremos la versión 3.

Los códigos

1. Para que el título de la página principal sea el mismo que el de la página de WordPress creada

Esto es muy útil. ¿Te acuerdas que la llamamos hello o test? Ahora hemos puesto ‘Ya es halloween’ y el title será ‘Ya es Halloween’. De esta forma, es dinámico y hace una llamada al title de WordPress. El primer código es una línea sencillita:

<title><?php the_title(); ?></title>

2. Para poner la imagen destacada de la página de WordPress como imagen del fondo de la cabecera

Con el siguiente código lo que hacemos es poner la imagen destacada de la página, es decir, a la página estática que hemos creado le ponemos una imagen destacada y ya se verá en el header. Ahí puedes poner la que quieras. La eliges como destacada y automáticamente con este código tan bonito de aquí, ya ves con background, aparecerá de fondo:

<?php if ( has_post_thumbnail() ) { ?>
		header {
			background: url(<?php the_post_thumbnail_url(); ?>);
			background-size: contain; 
		}
		<?php }	?>

3. Para personalizar los enlaces del menú para desktop y móvil

Es muy sencillo. Es un código básico en el que tienes que poner el enlace hacia el que quieres que vaya el botón del menú y lo que quieres que aparezca en ese menú. En este caso, está separado tanto para desktop como para móvil.

Puedes ponerlo diferente, yo te aconsejo que sea lo mismo, pero en w3schools lo haces. Hay otras formas de hacerlo, de hecho Pau prefiere otra, uno único, pero esta hecho así y no te quiero liar más.

Ves que pone disfraces y el enlace decalaveras.com/disfraces/. Si vas a la home y clicas en disfraces, te lleva a la página de disfraces. Y es este código de aquí. Lo puedes copiar y pegar tantas veces como puedas e irás poniendo pestañas una al lado de la otra. Sólo tienes que cambiar el enlace y el nombre de la pestaña:

<!-- 
			Estos son los enlaces del menú para desktop
			-->
			<li class="w3-hide-small"><a href="http://decalaveras.com/disfraces/" class="w3-padding-large w3-hover-white">Disfraces</a></li>
			<li class="w3-hide-small"><a href="http://decalaveras.com/camisetas-de-calaveras/" class="w3-padding-large w3-hover-white">Camisetas</a></li>
			<li class="w3-hide-small"><a href="http://decalaveras.com/anillos-de-calaveras/" class="w3-padding-large w3-hover-white">Anillos</a></li>
			<li class="w3-hide-small"><a href="http://decalaveras.com/mascaras-de-calaveras/" class="w3-padding-large w3-hover-white">Máscaras</a></li>
		</ul>
		<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium">
			<ul class="w3-navbar w3-left-align w3-large w3-black">
				<!--
				Estos son los enlaces del menú para móvil
				-->
				<li class="w3-padding-large"><a href="http://decalaveras.com" class="w3-padding-large">Inicio</a></li>
				<li class="w3-padding-large"><a href="http://decalaveras.com/disfraces/" class="w3-padding-large w3-hover-white">Disfraces</a></li>
				<li class="w3-padding-large"><a href="http://decalaveras.com/camisetas-de-calaveras/" class="w3-padding-large w3-hover-white">Camisetas</a></li>
				<li class="w3-padding-large"><a href="http://decalaveras.com/anillos-de-calaveras/" class="w3-padding-large w3-hover-white">Anillos</a></li>
				<li class="w3-padding-large"><a href="http://decalaveras.com/mascaras-de-calaveras/" class="w3-padding-large w3-hover-white">Máscaras</a></li>
			</ul>

4. Para que el título de la página sea h1

Este es el que te he dicho que cambiábamos en la página porque tenía dos h1. De esta forma, con este código de aquí, tanto el title como el h1 es el mismo y es dinámico:

<h1 class="w3-margin w3-jumbo"><?php the_title(); ?></h1>

5. Para mostrar los últimos 9 artículos

Aquí tienes la llamada a los últimos 9 posts, las últimas entradas. Son cards, que ya tienen los estilos por defecto en w3schools y que a nivel de código están bastante bien. Solo tienes que copiar este código de aquí:

<?php
				$query = new WP_Query( array ('posts_per_page' => '9'));
				if ( $query->have_posts() ) {
					while ( $query->have_posts() ) {
						$query->the_post(); ?>
						<div class="w3-col m4 l4 w3-padding-medium">
							<div class="w3-card-12 w3-padding-16">
								<a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="<?php the_title(); ?>"></a>
								<div class="w3-container w3-center">
									<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
								</div>
							</div>
						</div>

						<?php
					}
				}
				wp_reset_postdata(); ?>

Con esto estamos diciendo que si hay posts, que muestre los 9 últimos y está haciendo una llamada a las cards del w3schools, con ese estilo que se ve tan chulo.

Ya tenemos una homepage chula, una homepage estática.

Me ha dicho Pau que te diga que tiene 0 errores porque está orgulloso. A nivel de código está de coña.

Y a nivel de pagespeed, de velocidad tiene un 95 en mobile y un 96 en desktop. Carga súper bien.

Ya ha visto cómo personalizar una homepage. Tienes control del menú de arriba, de cómo se ve la imagen de cabecera, para poner el texto que quieras en medio SEO optimizado, para que aparezcan los últimos posts y es una página estática que carga súper rápido. Ya lo ves.

Nos vemos en el siguiente RomuTV

¡Chao!

No te pierdas ningún vídeo, suscríbete a RomuTV.