Hacer una página web

Vamos a ponernos manos a la obra y aplicar todo lo aprendido. Para ello, el objetivo de esta lección será hacer esta página web:

Utilizaremos estos recursos visuales:

Para ello, utilizaremos los siguientes plugins:

Code Snippets

Snippet 1: años desde cierta fecha

El siguiente código hará que cuando utilicemos el siguiente shortcode…

[yearsFrom year="1982"]

… se nos indiquen los años que han pasado desde 1982.

Para ello utilizaremos el siguiente código php:

add_shortcode('yearsFrom', function ($atts) {
	return date('Y') - $atts['year'];
});

Snippet 2: el efecto lightbox de las imágenes en OceanWP (es incompatible con Envira Gallery)

/**
 * Disable the Lightbox scripts
 */
function my_enqueue_scripts() {

	// Unregister JS files
	wp_deregister_script( 'magnific-popup' );
	wp_deregister_script( 'oceanwp-lightbox' );

	// Unregister CSS file
	wp_deregister_style( 'magnific-popup' );

}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 99 );

/**
 * Add the no-lightbox class in the body tag
 */
function my_body_classes( $classes ) {

	$classes[] = 'no-lightbox';

	// Return classes
	return $classes;
}
add_filter( 'body_class', 'my_body_classes' );

Códigos de Font Awesome

Para añadir los iconos de Font Awesome utilizaremos los siguientes códigos:

En la home:

<i class="fab fa-angellist" style="font-size:5rem; display: block; margin:20px auto"></i>
<i class="fab fa-angrycreative" style="font-size:5rem; display: block; margin:20px auto"></i>
<i class="fas fa-award" style="font-size:5rem; display: block; margin:20px auto"></i>

En la la top bar:

<i class="fas fa-phone"></i> 123 - 456 -789       <i class="fas fa-envelope"></i> pablomonteserin@pablomonteserin.com 

Código CSS para juntar el mapa al footer en la página de contacto

.page-id-8 #content-wrap{
	padding-bottom: 0 !important
}

.page-id-8 .wp-block-columns{
	margin-bottom:0 !important
}

.page-id-8 iframe{
	display: block
}
← Importar desde blogger, otro wordpress...
Tips para administrar nuestra página Wordpress →

Aviso Legal | Política de privacidad