Las cajas de información funcionan para mostrar datos importante a sus lectores. Existen diversos tipos, las hay para advertir, para notificar de alguna acción que se realizó satisfactoriamente o simplemente para avisar de un error.
En este artículo de Ayuda Hosting que leerás a continuación te explicaremos como añadir una caja de información en WordPress.
También puede que te interese conocer cómo agregar correctamente Google Fonts en temas de WordPress.
Índice
Descarga e inserta FontAwesome
En primer lugar debe descargar FontAwesome para poder utilizar los iconos más populares.
Ya descargado, deberás insertarla dentro del tag <head> del documento header.php de tu correspondiente tema.
<link rel="stylesheet" href="ruta/a/font-awesome/css/font-awesome.min.css">
Añadir CSS
Continuaremos ingresando un poco de CSS para que las cajas de información tengan un buen estilo. Deberás abrir el style.css en tu tema e inserta el siguiente código:
.box{
background: #E4F0FC;
margin: 1em 0px 1.5em;
padding: 12px 10px 12px 15px;
color: #555;
text-shadow: none;
font-weight: bold;
}
.box i.fa{
background: #5999cf;
color:#fff;
padding:7px 10px 8px 11px;
border-radius:50%;
}
.box a{ color:#5999cf !important}
.box.red{ background: #FFD9C8; }
.box.red a{ color:#E97373 !important}
.box.red i.fa{ background: #E97373; }
.box.green{ background: #edfcd5}
.box.green a{ color:#80b42b !important}
.box.green i.fa{ background: #80b42b; }Ingresar luego de cada post la caja información
Esto puedes considerarlo para enseñar tus posts relacionados, información sobre el autor o simplemente para pedirles a tus usuarios que te donen bitcoins.
Para esto, debes añadir un código dentro del archivo functions.php.
function cajainfo_despuespost( $content ) {
if( is_single() ) {
$mensaje = '<div class="box"><i class="fa fa-btc" aria-hidden="true"></i>¿Te ha gustado el artículo? Puedes donarme bitcoins: <a href="bitcoin:3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK">3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK</a></div>';
$content .= $mensaje;
}
return $content;
}
add_filter( 'the_content', 'cajainfo_despuespost' );Ingresar previo a cada post la caja de información
Una vez que ya sabemos cómo añadirlo de forma automática después de cada artículo, notaremos que es muy fácil adaptar el código para que la caja se muestre antes del post.
Deberás pegar el código siguiente en el documento functions.php de tu tema:
function cajainfo_antespost( $content ) {
if( is_single() ) {
$mensaje = '<div class="box green"><i class="fa fa-info" aria-hidden="true"></i> Pon lo que quieras aquí.</div>';
$mensaje .= $content;
}
return $mensaje;
}
add_filter( 'the_content', 'cajainfo_antespost' );Ingresar después de cada post una advertencia
Si tu sitio web posee bastante tiempo es probable que muchos de sus artículos estén desfasados con respecto al avance de las tecnologías.
Por esta razón, es necesario informarle a tus lectores. Por medio de la función is_old_post() se te hará muy fácil.
Sólo deberás insertarla al documento function.php de tu tema y llamarla cuando la entrada supere un determinado tiempo que señales como antiguo.
function is_old_post($days = 5) {
$days = (int) $days;
$offset = $days*60*60*24;
if ( get_post_time() < date('U') - $offset )
return true;
return false;
}
function alerta_postviejo( $content ) {
if( is_single() && is_old_post(730) ) {
$mensaje = '<div class="box red"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Ojo: Este artículo tiene más de dos años, así que no te lo tomes al pie de la letra.</div>';
$mensaje .= $content;
}
return $mensaje;
}
add_filter( 'the_content', 'alerta_postviejo' );Establecer un shortcode para las cajas de información
Crear un shortcode personalizado es muy sencillo por medio de la función en el archivo function.php de tu tema.
function cajainfo( $atts, $content = null ) {
return '<div class="box"><i class="fa fa-info" aria-hidden="true"></i> '.$content.'</div>';
}
add_shortcode('cajadeinformacion', 'cajainfo');Ya realizados los cambios, podrás contar con las cajas de información con el shortcode que acabas de establecer.
[cajadeinformacion]Este es mi mensaje[/cajadeinformacion]
