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;
}