Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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:
Ver ejemploUtilizaremos estos recursos visuales:
Descargar código fuentePara 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
}