Como hacer 2 columnas con un shortcode

ShortcodesWordPress

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.

[half]contenido[/half]

[half_last]contenido[/half_last]

¿Te ha sido útil este código?
Ayúdanos a saber si este código o función te ha funcionado y así poder ayudar a otros usuarios
SÍ. 🙂
NO. 🙁
Mostrar Más

Artículos Relacionados

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *