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! 😜

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.