Cómo crear una sección de posts destacados, sin plugins, en tu WordPress

Cómo crear una sección de posts destacados, sin plugins, en tu WordPress

Blog Diseño

En Café con Web somos partidarios de evitar la utilización de plugins de WordPress para cada recurso que necesitamos implementar en el sitio web de nuestros clientes, siempre que sea beneficioso para el proyecto. Para ello buscamos una solución coherente y adaptada a las necesidades de los proyectos de dichos clientes.

De esta forma, estamos en continua evolución y aprendizaje, y mantenemos el espíritu de nuestra agencia a flote día a día.

Antes de nada, queremos aclarar, que esto se puede llevar a cabo de varias formas diferentes, pero nuestro proyecto requería hacerlo así.

¿Qué necesitamos para llevar a cabo la sección de posts destacados?

El proceso se basa en el CMS WordPress, por lo tanto, tenemos que tener un sitio web en funcionamiento con dicho CMS, y además este sitio debe tener un blog activo.

Nuestra recomendación es siempre trabajar sobre los ficheros de un Child Theme” (Tema Hijo), que evite que cualquier actualización pueda entorpecer el funcionamiento de los cambios generados sobre el tema padre.

Empezamos. Pasito a pasito.

Una vez tengamos claro todo lo nombrado anteriormente, podemos empezar a crear nuestra sección de posts destacados en nuestro sitio web.

Vamos por pasos:

  1. Creamos un checkbox en cada una de las páginas de administración de las entradas de nuestro blog.
  2. Almacenamos el valor introducido en los checkbox creados anteriormente.
  3. A través de la creación y utilización de un shortcode, mostramos el resultado de nuestra programación en el lugar que nos interese de nuestro sitio web.
  4. Aplicamos reglas de maquetación CSS para conseguir una armonía entre nuestra sección de posts destacados y el resto de la web.

1. Creamos el Checkbox

Para crear un Checkbox en cada una de las páginas de administración e las entradas del blog, debemos de copiar el siguiente código en el  fuctions.php  de nuestro tema hijo.

La ruta para acceder fuctions.php desde WordPress es la siguiente: Escritorio/Apariencia/Editor/fuctions.php

 

Después de introducir el código en el fuctions.php aparecerá un checkbox en las páginas de administración de las entradas del blog como este:

 

Si activamos el checkbox, esta entrada se convertirá automáticamente en “post destacado”.

 

 

2. Almacenamos el valor del checkbox

Una vez tenemos creado el Checkbox necesitamos crear una función para determinar el valor de este, es decir, saber si está activado o desactivado en las entradas.

Para ello, introducimos de nuevo el siguiente código en el fuctions.php justo debajo del código introducido anteriormente.

 

Esta función que acabamos de introducir actualiza los datos del “meta-checkbox” de la base de datos.

 

 

3. Creamos un shortcode para mostrar el resultado

A la hora de mostrar esta sección de posts destacados tenemos varias opciones de hacerlo.

Ya que el proyecto en el que estábamos trabajando en este caso requería mostrarlo en la zona de “Widgets” de WordPress, nos vimos en la situación de tener que crear un shortcode para conseguirlo.

Para ello, introducimos de nuevo el siguiente código en el fuctions.php justo debajo del código introducido anteriormente.

 

¡Ya tenemos nuestro shortcode creado!

Ahora únicamente necesitamos colocarlo en el lugar adecuado, en nuestro caso, en la barra lateral derecha como un widget de texto.

 

Si hacemos click en editar dicho widget nos aparece la siguiente pantalla:

 

Únicamente tenemos que colocar en el apartado de texto nuestro shortcode, y el contenido que hemos programado, aparecerá en nuestra barra lateral derecha.

 

4. Maquetamos el contenido con css

A partir de aquí el resto es cosa tuya, conseguir una maquetación acorde al contenido de tu blog para que la sección de posts destacados se integre de manera correcta en tu sitio web.

 

 

Esperamos que el blog os aporte la información necesaria para poder crear secciones de este tipo, y así, dejar de utilizar de vez en cuando un plugin para cada necesidad que os surja en vuestros proyectos.

¡Tu turno! 😜

Mi paso por Congreso SEO Profesional

Mi paso por Congreso SEO Profesional

Blog

El 1 de julio fue el Congreso SEO Profesional (puedes ver los tweets en el hashtag #SEOPRO). Un evento muy pro como dice el nombre y al que Miguel López me invitó a dar una ponencia (MUCHAS GRACIAS). La verdad es que ir a un sitio con gente tan PRO, tanto asistentes como ponentes, da respeto.

Mi charla sobre un ecommerce de venta de colchones gustó mucho a la gente, y cosa impensable a las 4 de la tarde… No les dormí, se rieron y además empatizaron con mis problemas SEO de ese proyecto. Todos hemos pasado por situaciones parecidas…

Seguir leyendo en marketingzaragoza.com

Qué es un error 410 y cómo utilizarlo en tu web

Qué es un error 410 y cómo utilizarlo en tu web

Blog

Las redirecciones 410 son las grandes olvidadas. Pocas veces se utilizan, y menos son las que se utilizan de la manera correcta. Todos estamos acostumbrados a las redirecciones 301 y los errores 404 o los 500 pero, dependiendo de cómo sea tu web, las 410 te pueden venir muy bien. Aquí intentamos arrojar un poco de luz sobre el asunto y, si no, siempre puedes pedirnos ayuda con tu posicionamiento web 😉 .

Qué es un error 410 y para qué sirve

Se trata de un código de estado HTTP conocido como HTTP 410 Gone o Ya no existe/Ya no disponible. Cuando una URL está marcada con esta cabecera se manda un mensaje a los robots de los buscadores donde se les informa que ya no existe y no va a volver a existir con lo cual no hace falta que vuelva a pasar por ella. Veamos un repaso de los principales códigos de respuesta, errores y redirecciones y en qué consisten para apreciar las diferencias:

  • Código 200: Conocido como código de respuesta 200 OK. Esta respuesta se obtiene cuando el servidor responde a una solicitud devolviendo la página que ha sido solicitada de manera correcta.
  • Código 301: La redirección permanente sirve para que una URL que ya no existe o que ha sido modificada apunte al contenido correspondiente. ¡Ojo! Si el contenido no es equivalente puede devolver un soft 404.
  • Código 302: Esta cabecera corresponde a una redirección provisional. Por ejemplo cuando un producto de un ecommerce se encuentra sin stock, pero va a volver a haber existencia próximamente.
  • Código 404: Este error significa que la URL no se encuentra. Se trata de URL que han dejado de existir y no han sido redirigidas. ¡Arréglalo!
  • Código 500: Se trata de un error interno del servidor. Impide completar la petición al servidor. Muchas veces pueden deberse a caídas del mismo, así que contrata un buen hosting.

Existen muchos más tipos de códigos de estado dentro de los 3xx, 4xx y 5xx, pero estos son los más comunes. Si quieres saber más sobre redirecciones 301, te recomendamos leer este post de Tomás de Teresa en el que además incluye un generador de reglas para tus 301.

Diferencias entre un error 404 y un 410

Si no te quedan claras las diferencias, en el siguiente vídeo Matt Cutts explica las diferencias entre 404 y 410 y cómo las trata Google:

Utilidades del redirect gone

Pese a no estar muy extendido su uso, la directiva Redirect Gone tiene varias utilidades interesantes:

  • Tal vez la más recurrente, eliminar productos que ya no van a volver a existir en una tienda online.
  • Suprimir URL creadas puntualmente sin relación directa con otras ya existentes.
  • Eliminación de tags. Resulta muy común encontrar blogs o páginas que indexan las tags sin ningún tipo de estrategia, lo que da lugar a canibalizaciones, thin content,… Usar una regla 410 es una buena solución para atajar el problema.
  • En general, conviene utilizarlos con cualquier URL que no vaya a tener ningún otro uso futuro y que no tenga haya sido útil para el posicionamiento en el pasado.

Cómo usar el error 410 en tu beneficio

A veces, en una agencia de marketing online, la utilización del Redirect Gone te la encuentras sobre la marcha, sin haberlo planeado para nada.

Imagina la situación: un cliente, viene con su web ya montada e indexada. Pero de regalo, esa página trae 41 URL con contenido en latín y URL también en latín. El típico Loren Ipsum por todos lados. Es de suponer que la empresa de desarrollo que creó la web no tuvo para nada en cuenta el SEO, instaló una plantilla de WordPress sin capar la indexación por robots.

¿Qué hacemos en esta situación?

En este caso lo tuvimos claro. Esas URL no tenían nada que ver con la temática de la web, no aportaban nada, no tenían enlaces apuntando a ellas,… Acabamos con ellas de un plumazo añadiendo en el .htaccess las líneas que muestra la imagen.

Redirect gone 410, usos y caso real

¿Cuándo no utilizar el 410?

Aunque se den las condiciones de las que hablábamos en los puntos anteriores, conviene valorar ciertos puntos antes de dar este aviso al amigo Google.

Por ejemplo, si un producto de tu ecommerce va a desaparecer, antes de tomar la decisión, comprueba si tiene enlaces entrantes y cuáles son esos enlaces. Tal vez te interese redireccionar con un 301 al producto más similar que tengas en tu tienda online o personalizar la página con un aviso de falta de stock y productos similares recomendados.

Uso individual: Redirect gone

El uso individual de esta regla, es tal y como se puede ver en la imagen de ejemplo más arriba. Tan sólo es necesario escribir en el .htaccess la directiva Redirect gone, seguida de la URL que deseamos eliminar sin escribir el dominio de la web. Recuerda hacer una copia del archivo antes de escribir las nuevas líneas ya que el .htaccess hay que tratarlo con mucho cuidado.

Redirect gone  /URL-a-eliminar

410 en WordPress

Para realizar un 410 en WordPress tienes otra vía más:

Ya sabes si te ha gustado compártelo en redes sociales, guárdatelo en favoritos o envíaselo a tu desarrollador 😛
Y si quieres coméntanos 😉

El nuevo diseño de nuestra identidad corporativa: Un rediseño tipo Pixel Art

El nuevo diseño de nuestra identidad corporativa: Un rediseño tipo Pixel Art

Blog Diseño

Cuanto más complejo es un logotipo más difícil es que nuestro público objetivo se acuerde de nosotros.  Desde Café con Web, tras mucho trabajo y varias horas de debate, decidimos llevar a cabo un rediseño del que hasta ahora había sido nuestra imagen gráfica. ¿Cómo quedará nuestro nuevo diseño de identidad corporativa?

Caminando hacia un look & feel más trendy  ?

Las tendencias han cambiado y la estética se quedaba obsoleta. Además, nuestra identidad corporativa no estaba del todo definida. Teníamos muchos elementos y características gráficas que nos definían pero no estaban en concordancia: faltaba un “todo”, una línea argumental que guiase el camino de cualquier acción que quisiésemos llevar a cabo.

Imagen gráfica, tipografía y logotipo  ?

Nuestra imagen gráfica utilizaba demasiada gama cromática y, además, el logotipo tenía superposiciones de trazados vectoriales combinadas con imágenes bitmap que limitaba su adaptación a todo tipo de soportes.

La utilización de una tipografía, con un carácter demasiado marcado, impedía que el símbolo de nuestro logotipo cobrara la importancia que en un principio, cuando le dimos “vida”, pretendíamos darle.

En resumen, el logotipo y la imagen de Café con Web pedían a gritos una actualización que perdurase en el futuro y representase adecuadamente nuestra esencia.

Antiguo imagotipo o logotipo (identidad corporativa) de Café con Web: agencia marketing online, diseño web y seo desde Zaragoza
Antiguo imagotipo de Café con Web

 

Naming & Symbol. Amor verdadero  ❤️

“Café” y “Web”, son las dos palabras clave de nuestro naming, que nos definen y que el público percibe al visitarnos. Reforzar estos dos conceptos es el resultado al que más importancia le hemos dado siempre.

Ya en el antiguo logotipo, reforzábamos el naming utilizando una taza de café que, con su asa y su forma circular, formaba el símbolo de “On” de prácticamente cualquier soporte digital.

La representación de la fusión de los conceptos “taza” + “on”, otorgaban el carácter buscado a nuestro naming.

Comparativa de los símbolos de Café con Web y "On"
Comparativa de los símbolos de Café con Web y “On”

 

El logotipo actual sigue reforzando el naming con la utilización de un simbolismo mucho más sencillo, actual y claro, que representa claramente una taza de café. Su construcción se basa en una retícula de píxeles invisible, de la que seleccionamos y coloreamos los píxeles exactos, para poder ver representada nuestra irremplazable y muy querida taza de café, que nos da vida en nuestro día a día. ?

No sé si es necesario recordar que el píxel es una medida que siempre ha estado en constante relación con el mundo digital, y es aquí donde hemos querido reforzar la fusión de conceptos “café” + “web”.

Nuevo imagotipo (logotipo para muchas gente...) de Café con Web
Nuevo imagotipo de Café con Web

 

La unión hace la fuerza   ?

Al trabajar principalmente en un entorno digital, en Café con Web somos conscientes de la necesidad de tener diferentes versiones de nuestro logotipo (en realidad imagotipo, ver más info aquí). Unificar y normalizar la utilización de dichas versiones permite adaptar nuestra imagen gráfica a todos los soportes en los que pueda ser visualizado.

Nuevo Logotipo de Café con Web en sus versiones verticales.
Nuevo Logotipo de Café con Web en sus versiones verticales.

 

Aprovechando la renovación del logotipo y la creación de las versiones de éste, decidimos darle un vuelco completo a los estilos generales de nuestra identidad corporativa, y realizamos una reforma general de los estilos visuales de nuestra página web, imágenes gráficas corporativas, redes sociales, merchandising, etc.

Mock up de la página de inicio de cafeconweb.es
Mock up de la página de inicio de cafeconweb.es

 

¿Un lavado de cara? No, un pequeño reajuste que mantenga nuestra esencia  ✌️

La conclusión más sensata a la que hemos llegado es que exaltar tu lado “friki” mediante la representación de un símbolo con un estilo pixel-art, no tiene que ser el detonante que eche para atrás a tu público, sino todo lo contrario. Dicho público entiende que tienes unos gustos que representan tu marca personal y que puedes llegar a representar los suyos en sus proyectos meadiante tu trabajo.

¿Somos frikis? Hasta el infinito y más alla ?

Un claro ejemplo de hasta qué punto se puede desarrollar tu imagen corporativa y demostrar porqué te identifica consistirá en un taller de pyssla que llevaremos a cabo en Congreso Web 2017. No todo se reduce a un logotipo, una web, o un color corporativo; éstos son solo un reflejo de nuestra personalidad, de lo que somos y de la imagen que queremos transmitir.

Y os preguntaréis, ¿porque pyssla? La relación existente en la forma de darle vida a un elemento creado con este material y la forma de crear la nueva identidad corporativa de Café con Web son idénticas.

Pacman pyssla

¡Esperamos que te guste! ?

¿Os gusta el cambio de la identidad corporativa que hemos llevado a cabo desde Café con Web? Comenta y comparte lo que piensas, estaremos encantados de debatirlo contigo.

Optimización de plantillas de WordPress para SEO en #FTVA17

Optimización de plantillas de WordPress para SEO en #FTVA17

Blog

Este viernes 7 de abril estuve disfrutando de la Feria de Tiendas Virtuales de Aragón. Un evento en el que pude saludar a muchos compañeros del sector “Internet”. Agencias, tiendas y proveedores de todo tipo (mensajeria sobre todo y como novedad las cajas para fotografía de producto) tuvimos una jornada para charlar.

Bueno pues allí estuve dando una charla sobre Optimización de plantillas de WordPress para SEO, en la que me centré en las etiquetas h: Cómo optimizar la estructura de las etiquetas h de una plantilla de WordPress.

Seguir leyendo en marketingzaragoza.com

Guía definitiva para pasar tu WordPress a HTTPS

Guía definitiva para pasar tu WordPress a HTTPS

Blog

Son muchos los que me han preguntado cómo instalar un certificado SSL y pasar de HTTP a HTTPS en su WordPress. Así que, voy a escribir este post indicando paso a paso cómo hacerlo.

Antes de nada, vamos a introducir un poco acerca de qué es el protocolo HTTPS. Este protocolo es la versión segura del protocolo HTTP. Dicho de otro modo, sirve para proteger el envío de datos privados creando un canal cifrado entre el cliente y el servidor.

Seguir leyendo en agmialdea.info

Cursos online de Marketing digital

Cursos online de Marketing digital

Blog

Actualmente se está dando un gran cambio en la forma de ver el mundo web y el marketing en internet. Es un hecho que si no existimos en internet, no existimos. La mayor parte de la población utiliza la red para hacer compras y para ver información sobre productos y servicios. Por eso es imprescindible que seamos una opción a lo que están buscando. Para ello, necesitamos tener una página web optimizada y usable. Con nuestros cursos de marketing online podrás aprender a tener un gran proyecto online y a trabajar en el marketing digital.

Curso online de WordPress

Nuestro curso de programación web en WordPress puede ayudarte ya que es una opción sencilla pero con grandes resultados. Elegimos WordPress porque tiene numerosos beneficios respecto a otros CMS, entre ellos destacan su gran comunidad, el buen posicionamiento y la facilidad respecto a otras técnicas de programación HTML. Además crear una web más acorde a tus preferencias es posible gracias a la multitud de temas que ofrece, a la cantidad de pluggins que podemos instalar para aumentar la funcionalidad de la web y toda la personalización que nos permite.

Curso online de SEO

Pero la programación y el tener una buena web no lo es todo. Ya no solo necesitamos estar presentes en internet sino que debemos dar un paso más. Por eso desde Café con Web, SEAS y Congreso Web queremos ofrecerte la formación necesaria en otra de las especializaciones profesionales, que es y será de las más demandadas en el futuro, el SEO.

Un negocio ya no se conforma con estar en la web sino que además quiere ser visto y que su público acceda a la página. Aquí entra el trabajo del SEO. El SEO es el encargado de hacer que la página adquiera tráfico desde los buscadores para que pueda ser convertido en ventas en nuestra web. Para ello, debemos optimizar la página con las palabras clave que definen nuestro negocio y buscan nuestros clientes potenciales. Además debemos dotarla de  la información necesaria para que Google y otros buscadores la muestren en las primeras posiciones y el posible cliente pueda llegar a ella con mayor facilidad. Puedes ver más información del curso online de SEO aquí.

Curso online de email marketing

Otra de las tendencias que se abre paso en el mundo de las ventas y la comunicación es la del E-mail marketing. Miles de correos llegan a nuestra bandeja de entrada cada día, por eso, es necesario que optimicemos la forma en la que llegar a nuestro público objetivo. Dentro de nuestra variedad de cursos online de marketing digital, hemos elaborado un temario mediante el cual enseñar a los alumnos del curso de E-mail marketing cuales son las claves más importantes en este mundo, cómo diferenciarse de la competencia en Gmail, Outlook y otros servicios de correo electrónico y cómo llegar a nuestros clientes para aumentar los objetivos. Es decir, nuestro temario se centra en que aprendas a sacar partido a las nuevas estrategias de marketing, aplicando técnicas de E-mail marketing para generar campañas efectivas, aprendiendo a utilizar las relaciones con Excel y midiendo los objetivos en Google Analytics. Ver más información del curso de E-mail Marketing aquí.

Con nuestros cursos te ofrecemos la oportunidad de formarte de manera acreditada como experto de marketing online. Si quieres más información acerca de estos cursos accede aquí sin compromiso. ¡Y no dejes pasar la oportunidad de convertirte en el profesional más demandado del sector del marketing!

Desde Café con Web realizamos formación de marketing online para empresas o cursos in-company, cursos de marketing digital en diferentes instituciones y ahora también completamos la formación con cursos online.

Más info sobre los cursos online