< Tu wordpress a medida />
Como hacer 2 columnas con un shortcode

Como hacer 2 columnas con un shortcode

Para crear un shortcode en el que podamos crear contenido en dos columnas lo primero que tenemos que hacer es añadir este código en nuestro functions.php

add_shortcode( 'half', 'columna_izquierda_ext' );
function columna_izquierda_ext( $atts, $content = null ) {
	return '
		<div class="one_half columns">'.
			do_shortcode( $content ) .'
		</div>
	';
}

add_shortcode( 'half_last', 'columna_derecha_ext' );
function columna_derecha_ext( $atts, $content = null ) {
	return '
		<div class="one_half columns last">'.
			do_shortcode( $content ) .'
		</div>
		<div class="clearfix"></div>
	';
}

Ahora le damos estilos con CSS. Lo añadimos en style.css de nuestro child theme.

/*Columnas*/
.one_half {
 width: 48%;
  }

.columns {
  position: relative;
  margin-right: 4%;
  float: left;
}

body .columns {
  float: left;
  margin-left: 0;
  margin-right: 4%;
}

@media (max-width: 768px) {
  .columns {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

.columns.last {
  margin-right: 0;
  clear: right;
}

body .columns.last {
  clear: right;
  margin-left: 0;
}

Y ya podemos crear nuestro contenido en dos columnas.

[one_half]

[half]contenido[/half]

[/one_half]

[one_half_last]

[half_last]contenido[/half_last]

[/one_half_last]

¿Ha sido útil esta publicación?
Déjanos tu feedback para poder ayudar a otros usuarios.
0
No0

Deja un comentario