Wordpress Customs Shortcodes by 13Node

Vamos a presentarles como crear vuestros propios snippets añadiendo códigos personalizados en vuestro theme, en el archivo functions.php

El primero es como crear una galería personalizada:


// [trecegallery imageone="url" imagetwo="url" imagethree="url"] 
function trecegallery_func( $atts ) {
     $var = shortcode_atts( array(
            'imageone' => '',
            'imagetwo' => '',
		    'imagethree' => '',
		    'urlgaleria' => '',
       ), $atts );
   return "
<div class='container'>
<div class='row no-gutters'>

<div class='col-12'>
<a href='{$var['urlgaleria']}'>
<img class='image1 img-fluid' src='{$var['imageone']}' />
</a>
</div>
  
<div class='col-6 pr-1'>
<a href='{$var['urlgaleria']}'>
<img class='image2 img-fluid' src='{$var['imagetwo']}' />
</a>
</div>
  
<div class='col-6'>
<div class='img-container'>
<a href='{$var['urlgaleria']}'>
<div class='positioning'>
            +
            </div>
          </a>
        <a href='{$var['urlgaleria']}'>
        <img class='image3 img-fluid' src='{$var['imagethree']}' />
        </a>
      </div>
    </div>
  
</div>
</div>
  ";
}
add_shortcode( 'trecegallery', 'trecegallery_func' );

Luego en vuestro style.css


/* TRECE CUSTOM GALLERY
----------------------*/
.parenttrecegal {

}
.image1 {
  max-height:400px!important;
  padding-bottom: 10px;
}
.image2 {
max-height:300px!important;
}
.image3 {
max-height:300px!important;
}
.img-container {
    display: inline-block;
    position: relative;
}
.positioning{
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-color: white;
  color: black;
  padding: 15px;
  font-size: 30px;
  line-height: 18px;
}

En 13Node buscamos freelance con talento que quieran colaborar en nuestros trabajos y proyectos. Si eres diseñador, animador, programador web..., ponte en contacto con nosotros enviando tu portafolio a [email protected]