WordPress

septiembre 1, 2017

Cómo añadir automáticamente una caja de información en WordPress

www.seox.es | seox@seox.es | 656545123 | SEO y Posicionamiento en Bilbao: #seox #seobilbao #posicionamientobilbao #paginaswebbilbao

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

Descargando e insertando FontAwesome

Lo primero que tienes que hacer es descargar FontAwesome, 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 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, 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.

function cajainfo_despuespost( $content ) { 
 if( is_single() ) {
 $mensaje = '
¿Te ha gustado el artículo? Puedes donarme bitcoins: 3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK
'; $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 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 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.

[cajadeinformacion]Este es mi mensaje[/cajadeinformacion]

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. El artículo está extraido de CatsWhoCode y el icono de la imagen destacada es obra de arjuazka. ¡Nos leemos!

SIGUE LEYENDO…
Ir a la fuente / Author: Jorge López

www.seox.es | seox@seox.es | 656545123 | SEO RSS SEOX: SEO Vizcaya SEO empresas SEO Google SEO páginas web SEO pyme SEO buscadores SEO Bing SEO Opera SEO chrome SEO firefox SEO España SEO negocios SEO Internet seo bilbao curso seo bilbao consultor seo bilbao posicionamiento seo bilbao empresas seo bilbao congreso seo bilbao seo bilbao seo en bilbao posicionamiento seo en bilbao museo bilbao museo bilbao guggenheim congreso seo bilbao posicionamiento web bilbao diseño web bilbao posicionamiento web en bilbao curso seo posicionamiento web posicionamiento en google posicionamiento seo diseño grafico bilbao agencia seo seo web google seo seo barcelona herramientas seo agencia seo barcelona agencia seo madrid consultor seo marketing online bilbao agencia seo bilbao analisis seo posicionamiento web malaga posicionamiento web marbella seo marbella diseño grafico marbella páginas web marbella seo y sem seo sem paginas web bilbao agencias anuncios asociación de agencias de publicidad ayudas y subvenciones bilbao blog branding community manager concursos creatividad creativos diseño eventos festivales google green marketing internet marca marketing mujeres networking packaging pinterest promociones publicidad recursos rrss rrss seoo storytelling street marketing tipografia tutoriales twitter venta on-line viral web whatsapp www.seox.es | seox@seox.es | 656545123 | SEO RSS SEOX: so Vizcaya sio empresas saeo Google sweo páginas web sewo pime seo` buscadores seopp Bing seop Opera seio chrome sero firefox sdeo España aseo negocios aseo Internet seop bilbao curso sseo bilbao consultior seo bilbao posicionamiento seeo bilbao empresaas seo bilbao congreeso seo bilbao seo biilbao seo en biilbao museoo bilbao museo bilbao gugenheim congreso seo biilbao posicionamiento web bilbaao diseno web bilbao curso seoo posicionamiento webb posicionamiento en gogle posicionamientoo seo diseño graficoo bilbao agenciaa seo seo webb gogle seo seoo barcelona herramientas seoo agencia seo barcelonaa agencia seo madridd consultor seoo marketin online bilbao agencia seoo bilbao analisis seoo web malaga posicionamiento web marbela seo marbellaa diseñoo grafico marbella páginas webb marbella seoo y sem seoo sem seo semm seo y semm pagina weeb bilbao agencia de publicidad suvenciones bilbao vlog brandin comunity manager comunitymanager communitymanager creatiividad creativoo diseñoo evento gogle green marketin marca marketin mujeres networkin packagin pinterestt pintarestt pintarest promocioness publicidadd seoo storytellingg marketingg twitterr twiter vventa on-line viral webb whatsappp watsap watsapp Páginas Amigas: www.juanantonionarvaez.com | Formación Linkedin | Neuroselling | marketing