---
title: "Cómo añadir automáticamente una caja de información con estilo en WordPress"
description: "Las cajas de información son una forma muy conveniente y bonita de mostrar información relevante a tus lectores. Las hay de diversos tipos, ya sea para advertir, para avisar de un error, para notifica..."
url: https://wpdirecto.com/caja-de-informacion/
date: 2017-08-31
modified: 2017-08-31
author: "MyR"
image: https://wpdirecto.com/wp-content/uploads/2017/08/mensajes-con-estilo-wordpress.jpg
categories: ["Guías"]
tags: ["caja de información", "mensajes con CSS", "mensajes con iconos", "mensajes en WordPress", "mensajes personalizados"]
type: post
lang: es
---
# Cómo añadir automáticamente una caja de información con estilo en WordPress
Las cajas de información son una forma muy conveniente y bonita de mostrar información relevante a tus lectores. Las hay de diversos tipos, ya sea para advertir, para avisar de un error, para notificar al usuario de que algo sea hecho satisfactoriamente… **En este artículo te mostraré cómo añadir automáticamente una caja de información con estilo en WordPress utilizando los hooks, la [fuente de iconos](https://wpdirecto.com/como-anadir-una-fuente-de-iconos-en-wordpress-2131/) FontAwesome y algo de CSS.**
[](https://wpdirecto.com/caja-de-informacion-4623/mensajes-con-estilo-wordpress/)
## Descargando e insertando FontAwesome
**Lo primero que tienes que hacer es descargar [FontAwesome](http://fontawesome.io/get-started/)**, para que podamos utilizar sus populares iconos.
Una vez la hayas descargado, **debes incluirla dentro del tag del archivo header.php de tu tema**:
```
```
## El CSS
Vamos a continuar [añadiendo algo de CSS](https://wpdirecto.com/anadir-codigo-css-3867/) para que nuestras cajas de información luzcan con estilo. Así que, **abre el style.css de tu tema y añade 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; }
```
Si no has entendido ni papa, te lo explico. En la primera clase definimos el estilo de nuestra caja de información, y las dos siguientes nos servirán para cambiar su color. Es decir, la caja de información por defecto es azul, pero mediante las otras dos clases, podremos cambiarle el color a rojo y verde, respectivamente. **Ojo, debes ajustar el padding de .box i .fa puesto que los iconos de FontAwesome pueden tener distintos tamaños**. Ajusta el padding según tus necesidades…
## Añadir la caja de información después de cada post
**Muchos blogs muestran una caja de información automáticamente después del contenido del post**. Puedes utilizar esto para mostrar [posts relacionados](https://wpdirecto.com/los-4-mejores-plugins-para-mostrar-posts-relacionados-en-wordpress-1736/), información del autor o, como vamos a hacer en el ejemplo, sugerir a tus lectores que te donen Bitcoins.
Para ello, añade este código dentro del [fichero functions.php](https://wpdirecto.com/archivo-functions-php-3817/).
```
function cajainfo_despuespost( $content ) {
if( is_single() ) {
$mensaje = '
';
$content .= $mensaje;
}
return $content;
}
add_filter( 'the_content', 'cajainfo_despuespost' );
```
## Añadir la caja de información antes de cada post
Ahora que ya sabemos cómo añadir la caja de información automáticamente después de un artículo, **es muy sencillo adaptar el mismo código para que muestre la caja justo antes de cada post**.
Pega el siguiente código en el archivo functions.php de tu tema:
```
function cajainfo_antespost( $content ) {
if( is_single() ) {
$mensaje = '
Pon lo que quieras aquí.
';
$mensaje .= $content;
}
return $mensaje;
}
add_filter( 'the_content', 'cajainfo_antespost' );
```
## Añadir una advertencia después de cada post que tenga más de 2 años
**Si ya llevas con tu sitio web mucho tiempo, probablemente ciertos artículos [estén un pelín desfasados](https://wpdirecto.com/8-consejos-para-promover-tus-antiguos-posts-2138/) con el avance de las nuevas tecnologías**.
Por dicha razón, lo ideal es avisar a tus lectores. Mediante la función is_old_post() es muy fácil, solo tienes que agregarla al archivo function.php de tu tema y llamarla cuando el post supere el tiempo que determines 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 = '
Ojo: Este artículo tiene más de dos años, así que no te lo tomes al pie de la letra.
';
$mensaje .= $content;
}
return $mensaje;
}
add_filter( 'the_content', 'alerta_postviejo' );
```
## Crear un shortcode para estas cajas de información
Este artículo no estaría completo sin una manera de mostrar estas cajas de información cuando queramos en nuestros posts. **Para ello [crearemos un shortcode](https://wpdirecto.com/crear-tus-propios-shortcodes-wordpress-4479/) personalizado mediante una función en el fichero function.php del tema**.
```
function cajainfo( $atts, $content = null ) {
return '
'.$content.'
';
}
add_shortcode('cajadeinformacion', 'cajainfo');
```
Una vez hechos los cambios, puedes emplear las cajas de información utilizando el shortcode que acabamos de crear.
```
Este es mi mensaje
```
Y hasta aquí nuestro artículo sobre cómo añadir automáticamente una caja de información con estilo en WordPress. **Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en [redes sociales](https://wpdirecto.com/como-insertar-publicaciones-de-redes-sociales-en-wordpress-1504/)**. El artículo está extraido de [CatsWhoCode](https://www.catswhocode.com/blog/how-to-automatically-add-pretty-messages-on-your-wordpress-blog) y el icono de la imagen destacada es obra de [arjuazka](https://thenounproject.com/term/messages/1169255). ¡Nos leemos!