Divi el tema para wordpress mas usado.

Divi el tema para wordpress mas usado.

 

El tema divi es una de las plantillas más usadas por los usuarios y desarrolladores de wordpress sin duda .

Esto es debido a que los chicos de Elegant Themes has sabido crear un producto que facilita la vida a la gente.

Con divi y su constructor visual integrado , construir páginas en wp es una tarea muy fácil y no necesita conocimientos en programación ni maquetación previos.

Además dispone de módulos que abarcan casi cualquier situación que se te presente para maquetar y lo que no cubren sus módulos seguro hay algun plugin que hace lo necesario.

Si quieres disponer de el tienes dos planes de compra en Elegant Themes.

  • Plan anual: Con este plan tendrás acceso a todos los contenidos de divi , plugins y temas de Elegant Themes por un año , a partir de hay no dispondrás de actualizaciones.
  • Plan De por Vida: Dispones de lo mismo que el anual pero para siempre sin preocuparte de mas pagos que uno único de 248$ ahora mismo.

Mas información en su web.

Si quieres probar divi antes de adquirir un plan , puedes usar el builder online de divi o descargarte el tema gratuito desde aquí :

 

Divi 3.11 Descarga

 

Si es para un proyecto personal puedes usar el tema gratuito ,pero si piensas usarlo con clientes lo mejor es que te acojas a un plan de Elegant Themes.

Plugins para Bloques de Gutemberg

Plugins para Bloques de Gutemberg

Como ya comente en un articulo anterior Gutemberg sera el nuevo editor de wordpress en la versión 5.

Mientras tanto wordpress nos provee del plugin con el mismo nombre para que nos vayamos familiarizando con el nuevo editor .

Este trae un conjunto de bloques para imagen , párrafos , galería , administrar contenido en grillas y alguno mas , pero la verdad es que se hace a poco y la mayoría de ellos su configuración es muy pobre y no satisface necesidades básicas en nuestro diseño.

En este articulo voy a mostrar algunos complementos que yo uso y que me aportan mas bloques para nuestro editor con mejores características y mas configuración que los por defecto.

Empecemos….
 
 

Editor Blocks For Gutemberg

En primer lugar (lo pongo en este puesto porque fue el primero que utilice) se encuentra Editor blocks.

Este complemento trae en estos momentos una lista de 10 bloques entre los que podemos encontrar Wrapper Box : que es para hacer un contenido en ancho completo ,Testimoniales , Otro para editar nuestro equipo de trabajo (Team Members), Feature Block : para nuestro servicios en la landing page y otros mas.

Esta muy bien este complemento porque los blockes tienen un configuración media y ademas nos trae las vistas mas utilizadas en las landing pages actuales .

En su pagina oficial en wordpress.org. podemos ver una demo de cada bloque por separado o una pagina completa construida solo con Editor Blocks lo cual nos ayuda mucho para decidirnos si encaja o no en nuestro diseño.

Darle una oportunidad a este conjunto de bloques , seguro que os ayuda en vuestros diseños.

 

Caxton – Create Pro page layouts in Gutenberg

Caxton se definen como un creador de paginas de inicio con gutemberb , y sin duda el conjunto de bloques que trae nos ayuda a ese trabajo .

Tiene un bloque de de sistema de grillas muy completo que no recuerda al que traen otros constructores muy famosos como Elementor o Page builder.

Como particular  podemos crear sliders sencillitos en nuestros artículos o paginas con un bloque para este efecto.

También dispone de un bloque de texto muy configurable y widgets de post relacionados.

En conclusión un buen paquete para Gutemberg porque trae elementos que otros no, aunque algunos podrían tener mas configuración de estilo , como colores y demás.

 

Kadence Blocks – Gutenberg Page Builder Toolkit.

Kadence Themes es una empresa que se dedica al desarrollo de temas y complementos para wordpress , entre esto han sacado un paquete gratuito para bloques.

Este solo dispone de de 5 bloques y si no fuera porque hay dos de ellos que me gustan mucho ni mencionaría este complemento en este post.

Uno seria el Row layout es el tipico para distribuir contenido en filas , full width, grillas de distinto tamaño de columna, pero tiene una configuración muy detallada y flexible, que solo por el hace que merezca la pena esta reseña.

El otro bloque interesante es el de Tabs , ninguno de los mencionados dispone de este y me parece una buena opción para distribuir nuestro contenido dentro de un post o pagina.

Puedes probar todas sus características desde una pagina de pruebas. que nos proporcionan.

Stackable blocks es uno de los mejores paquetes de bloques que hay en el repositorio (a mi parecer).

Sus actualizaciones son constantes , una documentación muy buena y nos mantienen muy informados de todos los progresos que hacen previa suscripción.

 

Stackable – Ultimate Gutenberg Blocks

Podemos encontrar 21 elementos para nuestro contenido entre los cuales esta para crear miembros del equipo ,uno muy bueno de grilla de servicios o características ,una lista con iconos , un video popup y mas que puedes ver en su pagina oficial del plugin.

Yo destacaría el “counter up” para anunciar próximos eventos y el “Feature grid” , dos que no se encuentran en los demás plugins y son muy utilizados en nuestras “landing pages”.

 

Atomic Blocks

En esta ocasión tenemos Atomic blocks un conjunto de bloques donde encontramos muchos ya conocidos y usados por otros paquetes con alguna diferencia como un Drop Cap , donde podemos capitalizar de distintas formas un texto o el Sharing Icons Block para una lista de iconos de redes sociales.

En definitiva bloques sencillos sin mucha configuración que no dejan de ser prácticos en según que trabajos.

Dale una oportunidad a Atomic Blocks.

Conclusion.

Con esto ya tenemos un buen conjunto de bloques para Gutemberg el nuevo editor de wordpress.

No dejes de adaptarte a los cambios  desde ya el 19 de Noviembre ,Gutemberg estará ya en el núcleo de wordpress y sera su editor por defecto a pesar de que no todos en la comunidad estén de acuerdo.

Se ha apostado por un editor mas visual donde plugins archi-usados como Elementor o Page builder ya no serán necesarios o por lo menos ese es el camino que se busca con Gutemberg.

¿Y tu que opinas? deja un comentario y comentemos el tema.

Local by Flywheel

Local by Flywheel

A los que desarrollamos en wordpress (o con otras plataformas) sabemos de la importancia de tener un entorno local para probar nuestras webs y por lo tanto yo siempre me he valido de servidores locales como WampServer o XAMPP que se podría decir que son lo mas populares.
Pues bien, hace poco me tope con Local by FlyWheel , una aplicación que en definitiva hace lo mismo (crear servidores locales) pero con muchas mas ventajas que veremos mas adelante , solo decir que yo para mis desarrollos en wordpress ya solo utilizo esta aplicación.

Entremos un poco en el que, donde y porque….

Local By Flywheel pertenece a la empresa de hosting que tiene su mismo nombre y la ofrecen gratuitamente tanto si eres cliente como si no , pero si tienes tu webs alojadas en sus servidores podrás usar una de sus mejores características ,que es el poder subir tu web local ya terminada al servidor directamente o viceversa , bajarla a Local para continuar con su desarrollo.

La aplicación fue adquirida por FlyWheel al comprar otra compañía ( no se su nombre) , continuaron con su desarrollo y la liberalizaron para después añadirla como servicio gratuito a su hosting.
Aunque aun siguen con su desarrollo y según informan en su web están realizando una versión pro con nuevas características aunque aun sigue en beta y no ha salido a la luz.

local_fly_wheel

Su versión libre la podemos descargar de su web y trae funcionalidad muy buena ( no se con que nos sorprenderán en la pro)  como:

– Crear instalaciones wordpress en un click con la ultima versión de este, olvídate de descargar el paquete de instalación de wordpress mover lo al directorio raíz, comenzar a instalar desde el navegador, etc…  Local FlyWheel lo hace todo en un click , puedes hacer las instalaciones que quieres en tu servidor local.

– Local by Flywheel ofrece acceso root simple SSH a sitios individuales.

– Se certificados SSL automáticos para cada sitio si lo necesitamos en nuestro proyecto.

– Si eres cliente del hosting puedes conectar la app con Flywheel y subir tu web local a hosting o viceversa.

– Opciones para cada instalación configurables desde el panel , como cambio de versión de php en vivo sin errores o acceso a base de datos con Adminer y control de trafico de correo de tu web con MailHog.

– Y a mi parecer lo mas cool que trae Local FlyWheel es el LiveLink, con ello generas un enlace desde donde se puede acceder a tu web en local para mostrarla en cualquier parte del mundo, ¿no me digas que no es fantástico? sin duda es lo que mas me enamoro de esta aplicación sin duda.

-También destacar su velocidad de carga , es muy buena en comparación con otras herramientas como las       mencionadas al principio.

Aunque ya hace tiempo que esta disponible, pero si todavía no conocías Local FW , dale una oportunidad, seguro que no te arrepentirás.

Herramientas para desarrolladores de temas (WordPress)

Herramientas para desarrolladores de temas (WordPress)

Si eres desarrollador de temas de wordpress sabrás que es un trabajo  arduo donde hay que tener muchas cosas en cuenta, y para ello no vendrá mal un poco de ayuda .

Existen muchas herramientas que te ayudaran en tu trabajo, yo aquí voy a enumerar las que a día de hoy mas utilizo y de mas ayuda me sirven.

Empezaremos con los Temas en blanco o “starter themes” son temas sin estilo con la estructura de archivos necesaria  y funcionalidad para comenzar a montar un tema desde cero.

Hay muchos en la red pero yo solo he usado dos y creo que son mas que suficientes:

 

2018-06-03_1123

Underscores

De la mano de automatic que forman parte de los  desarrolladores de wordpress nos brindan este tema base.

Para obtenerlo debemos acceder a la plataforma de Underscores  e introducir el nombre que queremos que tenga nuestro tema así la aplicación lo generara con todos los prefijos de funciones y dominios de texto ya con dicho nombre , sin duda un ahorro de tiempo que no ofrecen otros.

Como positivo:

Aparte de lo dicho antes sobre la plataforma también destacaría que si tu intención es compartir tus temas en el repositorio de wordpress ya tienes mucho trabajo echo en lo referente a requerimientos que este nos pide.

Como negativo:

A mi gusto tiene muchos estilos css predefinidos que me sobran , utiliza una fracción de normalize.css y eso esta bien, pero hay mas donde define colores de elementos y demás que yo veo innecesarios y suelo borrar nada mas empezar.

 

2018-06-03_1316

HTML5 Blank

Como segunda opcion se encuentra HTML5 Blank .creado por Tood Moto , un estupendo desarrollador web que ha creado este tema en blanco con muchas características ya definidas en su codigo , sin duda una buenisima segunda opcion para empezar con tu tema,

Como positivo:

Todo el código esta muy bien documentado y comentado, eso es muy importante a la hora de desechar o preservar la funcionalidad que mejor se nos adapta a nuestro proyecto.

Como negativo:

Muchas características que trae ( siempre a mi parecer ) excluyen cosas del core de WP por lo tanto si quieres subir el tema al repositorio de wordpress tendrás que eliminar muchas de sus funciones.

 

2018-06-03_1833

FakerPress

Siguiendo con el desarrollo de temas uno de los plugins que mas he utilizado es FakerPress .

Este plugin es un generador de contenido y otras cosas, con el podemos crear en nuestras bases de datos entradas con sus imágenes , usuarios , comentarios , taxonomías (categorías, etiquetas, custom).

Y todo esto para que? , si no lo has deducido ya cuando creamos temas es muy importante probar todas sus características en escenarios reales o instalaciones de wp con contenido ya y con esta herramienta pasamos de tener una instalación limpia de wp en nuestro servidor local a tener todo el contenido de un blog en pleno funcionamiento y solo con unos “clicks”.

 

2018-06-03_1923

Query Monitor

Query Monitor es una herramienta muy completa que nos proporciona accesos a un panel para administradores o desarroladores donde podemos acceder a toda la información sobre el sitio que tratamos.

Desde el panel de QM podemos ver entra otras informaciones:

  1. Estilos y scripts que se están cargando.
  2. Velocidad y peso de la carga de la pagina actual.
  3. Plantilla y jerarquía de estas que se muestra en ese momento.
  4. Peticiones y consultas a la base de datos.
  5. Peticiones ajax
  6. Errores php que puedan darse.
  7. Solicitudes http.
  8. “Hooks” que estan siendo llamados.

Esto es solo un resumen de todo lo que query Monitor nos muestra , sin duda un plugin muy util para el desarrollo con toda la información que nos brinda.

 

2018-06-03_1939

Otro complemente muy usado es Regenerate Thumbnails , si has creado algún tema te sonara este código en el functions.php

y si no te diré que wordpress por defecto redimensiona las imágenes de tus post a unos tamaños establecidos como son “thumbnail” , “medium”, “large”  y alguno mas para usar en cada tipo de contenido el tamaño de imagen mas acorde, por ejemplo si tu posts tiene una miniatura de 150px x 150px no es nada bueno que la imagen que contenga sea la que tu has subido de 1400px x 700px , esto al final resiente la velocidad de tu sitio.

Pues bien el código mencionado es el utilizado para que el desarrollador cree su propias dimensiones de imágenes  de acuerdo con el tema que tiene entre manos y durante el desarrollo con este plugin redimensionamos las imágenes a los tamaños que vayamos añadiendo, es muy útil.

También lo podemos utilizar al cambiar de tema para que se adapten a las especificaciones de este, pero decir que esto esta bien en una instalación de pruebas donde tenemos pocas imágenes destacadas, ya que en una web con muchas entradas e imágenes el trabajo es arduo y tarda una eternidad.

 

2018-06-04_0942

Theme Check

Theme check es un complemento que se encarga de revisar que tu plantilla cumpla con los estándares de revisión de temas de wordpress.

Cuando subes tu tema al repositorio de wp este te hace una comprobación inicial la cual debe aprobar para después pasara a una revisión manual de parte de los revisores de temas.

Pues bien Theme Check nos sirve para hacer esa revisión inicial desde el “dashboard” de nuestra instalación y ahorrarnos ese paso.

Si quieres compartir tus plantillas en wordpress.org deberías usar este plugin sin duda.

 

Theme Sniffer

Para reforzar el test de posibles errores en nuestro tema , también podemos usar Theme Sniffer , que aunque no es el oficial de wordpress realiza comprobaciones mas exhaustivas que Theme Check no hace.

Puedes descargarlo del repositorio de Github.

 

Espero que sean de utilidad estas referencias en tu desarrollos, seguire añadiendo nuevas herramientas que crea son útiles.

Comenta si tu utilizas otras o simplemente da tu opinión sobre el tema.

 

 

 

 

 

Breadcrumbs en wordpress

Breadcrumbs en wordpress

Por si no lo sabias los breadcrumbs o migas de pan en el idioma de cervantes es un método de navegación usado en muchos sitios y foros web , seguro que te suena esta imagen en tus visitas por Internet:

breadcrumb

 

Si tu sitio en wordpress no dispone de breadcrumbs seria buena idea que te lo plantearas.

Esto ayudaría a que tus visitantes no naveguen a ciegas y se pierdan en un sinfín de paginas y categorías anidadas , lo que muy probablemente lleve al usuario a perderse y abandonar tu sitio .

Tenemos varias opciones para implementar esto en wordpress.

1.Utilizar plugins.

Podemos utilizar varios plugins que hay en el repositorio que nos ayudarían a esta tarea , entre ellos:

Breadcrumb NavXT 

Es uno de los mas populares y usados por los usuarios de wordpress.

Uno de sus defectos es que no usa shortcodes.

Breadcrumb Trail 

Otro plugin que esta muy bien valorado pero necesita de editar insertar condigo en los archivos de la plantilla , por lo que no es apto para usuarios que solo quieran hacer click y instalar y con eso ya este todo echo.

Breadcrumb

Plugin de pago con muchas opciones e integraciones, incluso una lista de temas para hacerlos mas visual.

No voy a dar mas detalles sobre características de ningún plugin porque nadie mejor para hacerlo que sus autores y disponemos de toda la documentación en los enlaces a ellos.

2.Si utilizas Yoast SEO…

Si ya utilizas el famoso plugin para seo en wp Yoast SEO lo tienes mas fácil ya que entre sus características dispone de soporte a bradcrums , solo tenemos que activarlas así:

y después según la documentacion debemos añadir este fragmento de código en los archivos del tema que nos indica.

con esto ya dispones de tu barra de navegacion en tu sitio.

3.Por medio de código y sin plugins.

He dejado para el final la opción que mas me gusta a mi y es que no soy muy asiduo al uso de plugins para cualquier cosa (siempre que pueda evitarlo).

Utilizando esta función que muestro a continuación en nuestro  functions.php y llamándola desde los archivos archive.php, index.php, page.php y single.php también se puede hacer el trabajo.

En este caso seria crear una acción en functions.php:

Hikari es el nombre del tema que yo realize para este trabajo pero le podeis poner el prefijo que vaya mejor.

Después llamáis a la acción desde alguno de los archivos citados anteriormente con la particularidad que siempre se debe hacer antes del loop de wordpress , osea antes del algún código parecido a esto:

Entonces la llamada en mi single.php seria asi:

Una vez implementado solo nos queda darle estilo y que sea acorde al diseño de nuestra web. Podemos utilizar el personalizador de wp donde una sección es CSS Adicional.

 

y hay,  suponiendo que dominamos algo css, darle estilo al breadcrumb que hayamos elegido.

 

 

Conclusión:

Casi todas las opciones nos hacen tener que editar archivos del tema , algo no muy recomendable porque cuando se actualice el tema estos cambios desaparecerán y no servirá de nada.

Por lo tanto también se me ocurre que si no queremos tocar archivos del tema (por las desventajas que comentado antes) podemos utilizar un complemento llamado Code Snippets para incluir nuestra funcione en el functions.php sin riesgo que desaparezca al actualizarse el tema , este si es un plugin de los que no tengo reparos en utilizar por su utilidad.

Al final debemos velar por la comodidad de nuestros usuarios y esto seria una tarea mas para ello, seguro nos lo agradecerán.

Si te ha gustado o no el articulo o quieres compartir algo sobre el tema, deja tus comentarios , un saludo.

 

Widget De ultimas entradas con imágenes en wordpress

Widget De ultimas entradas con imágenes en wordpress

Desde hace algún tiempo me fijaba en los temas de wordpress que se encuentran por la red y me llamaba la atención que muchos usan unos widgets de artículos recientes muy chulos , porque ? por que tenían imágenes y  que sepamos el widget de wordpress por defecto no incluye esta característica.

Así que decidí que mi ultimo tema quería incluir un widgets que tuviera imágenes porque ademas el tema lo requería ya que esta enfocado a la fotografía y que menos que mostrar tu ultimas entradas con su imagen destacada.

No tarde en encontrar plugins que hacían el trabajo ( en wp hay plugins para todo) y el mas destacado es Recent Posts Widget With Thumbnails , buen complemento por si te interesa y con muchas opciones ,aunque yo soy muy escueto en el tema de plugins y intento su uso lo minino posible y ademas en mi tema propio aun me pareció menos apropiado usarlos.

Entonces di con la forma de hacerlo con código, no es mas que crear una clase la cual extiende de WP_Widget_Recent_Posts que es la clase del widget que trae wp ,usar lo que viene y añadir o quitar lo que queremos , como nosotros nos interesa añadirle las thumbnails del los posts usaremos la info que trae y ademas le implementamos las imagenes.

El código para esto seria el siguiente.

Como puedes ver todo es mas o menos como se construye el widget original( con algún div añadido para dar estilo luego ) pero en el loop usamos the_post_thumbnail para usar las imágenes destacadas de cada post , Ok , ya tenemos lo que queremos, nuestra clase modificada , ahora solo nos falta hacer “unregister” de al antigua clase y registrar la nueva que hemos creado.

Pero tenemos que usar una acción con  widget_init para procesar los cambios en el core , entonces envolveremos esta funciones en otra que sera la que pasemos al hook.

Ahora si, cuando activemos el widget de Recent_post ya vendrá con imágenes destacadas, mucho mas visual y descriptivo sin duda.

Asi quedo en mi tema , ¿que te parece? , comenta tu opinión.

 

 

WhatsApp chat