Diseño Web

Compartir, Diseño Web, Gestores de contenidos, Redes Sociales

Activar los artículos instantáneos de Facebook en WordPress

/

Hace un tiempo escribimos un artículo introductorio sobre lo que eran los Instant Articles. Recordad que sobre todo son un formato de Html5 específico de Facebook y pensado para móviles, para que los artículos de tu web se carguen de manera más rápida y estética. Hoy os contamos cómo configurarlos y activarlos en un WordPress. Se puede hacer a mano (puedes ir a tu página de FB, pestaña Herramientas de Publicación, apartado Artículos instantáneos para ver los pasos), pero recomiendo usar un plugin porque el plugin se mantiene al día de los cambios en formato, novedades y demás. Además te guía durante todo el proceso. Podéis usar Instant Articles for WP. Una vez activado el plugin, espera unos días porque tienes que escribir algunos artículos que luego te pedirá revisar. Así que escribe por lo menos 5. Luego puedes ir al apartado Instant Articles del Backend. Ahí empezará el asistente: Primero te llevará a crear una APP para Facebook en https://developers.facebook.com/apps/. Te hará elegir la página donde se van a publicar y podrás obtener ID y la clave secreta. Con eso abrirá sesión. También habrá elegido tu página de Facebook donde publicar. Después tienes que elegir la plantilla que quieres para tus artículos. Te llevará a la página de Facebook para personalizar tu plantilla. Puedes dejar el nombre por defecto o cambiarlo, y te permite cambiar muchísimas opciones del diseño de tus artículos. Una vez creada la plantilla te pedirá que envíes 5 artículos para revisión.  Si detecta algún error te pedirá arreglarlo en cada artículo. Recomiendo, sobre todo si has cambiado el nombre de la plantilla, pinchar en Open Advanced Settings Now y modificar ahí los parámetros que necesites. Errores. A nosotros nos dio 2: No rules defined for <img class=……> in the context of Anchor La solución la encontramos aquí. Tienes que irte al asistente y en Advanced Settings marcar la casilla: Enable custom transformer rules. Después en el cuadrado de reglas pegar: { “rules”: [ { “class”: “PassThroughRule”, “selector”: “//a[descendant::img]” } ] } Nos dio un error parecido: No rules defined for <img class=……> in the context of Bold Pero era porque la imagen venía marcada como negrita. Con pinchar en la imagen y desactivar el botón, solucionado. Una vez arreglado los errores pinchas en enviar. A nosotros, desde el plugin, nos dió Permission Error. Pero puedes ir a tu página de Facebook, pestaña Herramientas de Publicación > Artículos Instantáneos> Configuración, y en el Paso 2 pinchar en Envía la solicitud de Revisión. Desde ahí deja, y luego , al refrescar la página en el plugin de WordPress aparece como enviado. Ahora a esperar dos días, y se publicarán. ¡Ya os diremos que tal!  

Diseño Web, e-Learning, Gestores de contenidos

Traducir el foro Site News en la portada de Moodle

/

Cuando estamos gestionando un Moodle y queremos poner noticias en la página de inicio, un buen método es el foro. Pero cuando lo haces por defecto ves que pone el título Site News. Y puede que no te guste o quieras traducirlo. Ya puedes buscar en la opción de traducciones de Moodle (muchas webs en Internet dicen que está ahí). Al buscar Site News aparece un término pero veréis que está bien traducido. Lo podéis cambiar a lo que queráis que seguirá diciendo Site News. Ni caso a lo que pongas. Aquí os decimos cómo cambiarlo: Supongo que has publicad algo en el foro, si no es así hazlo para ver Site News. Activa la Edición de la página principal en Administración > Ajustes de la página principal > Activar Edición. En el foro Site News pincha en publicar un tema o hacer un comentario en este tema. Ahora, una vez dentro del foro, en el menú veréis un Administración del  foro > Editar Ajustes. Pinchad en eso. Ahí veréis que aparece el nombre del foro y lo podéis cambiar. Recuerda desactivar la edición cuando acabes. Está escondido…pero una vez lo sabes, cambiarlo es muy rápido.    

Diseño Web, Gestores de contenidos

Plugin Regenerate Thumbnails en WordPress

/

Otro plugin que viene muy bien para los que diseñamos páginas web: Regenerate Thumbnails. Si has cambiado de tema, y el nuevo tiene diferente tamaño de imágenes (destacadas, miniaturas …), o si has decidido cambiar tu el tamaño de las mismas en tu tema, este plugin te permite regenerar todas. Esta funcionalidad viene ya por defecto en otros gestores como Prestashop. WordPress no lo tiene, quizás porque la mayoría de los usuarios no tienen por qué usarlo. Pero para diseñadores es útil para que las miniaturas encajen con el tema. El plugin revisa y ajusta todas las imágenes que ya tienes subidas al nuevo tamaño, regenera las miniaturas a los nuevos tamaños. Tarda, no te preocupes si cuando lo ejecutas se queda un rato pensando. Pero te ahorra mucho trabajo. Y poco más…es simple pero efectivo.

Diseño Web, Gestores de contenidos, Trucos

Crea Child Themes ( plantillas hijas) de tu tema de WordPress si quieres personalizarlos

/

Cuando vas a diseñar una página web, y has elegido tu tema, lo más seguro es que necesites modificar al menos el CSS (colores etc). Ya os indicamos hace tiempo cómo hacerlo correctamente y existen muchos plugins para modificar el css. Pero mencionamos al final del artículo que la manera más correcta de hacerlo es con lo que se llama un Child Theme, un tema hijo. Un tema hijo es un tema que “cuelga del tema principal”, que comparte todas sus características, pero al que si hacemos alguna modificación estas se usarán en vez del principal. Realmente el tema hijo es otro tema para WordPress, pero usa los ficheros del principal. En la carpeta del hijo sólo están los ficheros que se modifican. ¿Qué ventajas tiene? Varias. La principal es que puedes actualizar el tema padre sin problemas. Cuando modificabas un tema tenías siempre el miedo que una actualización te borrara los cambios. O que lo hiciera el cliente. En esta configuración, el tema padre se actualiza y lo tienes siempre al día. Y el hijo también porque sólo se cargan las modificaciones. También te permite añadir funciones en el fichero funtions.php sin temor. Con esto puedes realizar muchas funcionalidades extra. Por ejemplo el truco de usar Shortcodes Ultimate con Contact Form 7 que os dejamos hace unos días. Desde el punto de vista de código, limpieza y velocidad es más correcto. Un plugin de CSS carga el CSS del padre, y luego el CSS modificado por tí en el plugin. Un tema hijo carga el CSS del padre, y las modificaciones del hijo…pero no ambas para una misma etiqueta. Mucho más limpio, sencillo y rápido. No es difícil crear un tema hijo manualmente. Podéis seguir los pasos en este manual de Child Theme de WordPress. Realmente sólo es crear una carpeta con la etiqueta child y mover ahí el functions.php y la hoja de estilos que quieres modificar. Sin embargo, para que todo funcione correctamente, y no perder tiempo, os aconsejo un plugin como Child Theme Configurator, que, de manera muy sencilla, te permite crear y configurar tu tema personalizado rápidamente. Instálalo, activalo y ve a Herramientas> Child Theme Configurator. Una vez creado, si no queréis tener demasiados plugins activos, podéis desactivar este. Sólo es para la configuración. Nosotros, desde hace un tiempo, siempre que modificamos un tema lo hacemos así. Os lo aconsejamos.  

Diseño Web, Gestores de contenidos, Webs

Cómo mostrar posts en una página de WordPress sin código

/

Hace tiempo explicamos cómo crear una plantilla usando el loop para mostrar posts en una página. Pero implicaba modificación de ficheros por FTP y cambio de código. Ese artículo sigue vigente, pero dependiendo de tu plantilla, el loop será diferente y  también el código a poner. Así que fácil no es. Como es una pregunta recurrente en el blog, hoy os dejamos una solución más sencilla usando un plugin: Content Views. Con más de 40.000 descargas, y 4.8 de 5 de puntuación, se puede ver que es algo que los usuarios requieren. Content Views te permite crear diferentes Loops o Vistas personalidas. Tras instalar el plugin, te crea un menú en el backend desde donde poder gestionar los Views. Estos views son loops personalizados donde puedes elegir desde las categorías a mostrar, si quieres posts o páginas, el número de posts a incluir, si excluir alguno, si mostrar autor, fecha o no… También tienes una segunda pestaña donde definir el estilo del View y ahí puedes elegir el número de columnas, si es en Grid o lista, si mostrar imagen destacada, si quieres una paginación por Ajax (muy útil en ciertas plantillas)…y mucho más. Una vez creado tu View te da un código que puedes copiar y pegar en una página para mostrar el contenido, así de fácil.  Y luego puedes crear más, por ejemplo una página con noticias, otra de Blog, otra de proyectos de clientes…. Un plugin muy simple, con muchas opciones, potente en su versión gratuita (cómo debe ser la pro). Recomendado.  

Diseño Web, e-Learning, Gestores de contenidos, Trucos

Poner la Alerta de Cookies en un Moodle

/

La alerta sobre el uso de cookies en una web es una directiva europea, y como tal todas las webs deben tenerla. Pero Moodle no tiene esta opción ni hay plugins para activarla (que hayamos encontrado). Aún así, se puede activar de manera sencilla con un poco de código. Para el código usaremos una página web que ya nos lo proporciona y nos deja personalizarlo un poco:  https://silktide.com/tools/cookie-consent/download/ Sigue los pasos de la web, personaliza tu aviso y copia el código que te dan. Ve a Moodle como administrador y ve a Administración del Sitio > Aparinecia >  HTML Adicional Donde pone Dentro del encabezado copia el código del aviso de cookies. Pincha en Aceptar. Ahora la primera vez que entres en tu página de Moodle deberás aceptar el aviso. Las siguientes veces no aparecerá el aviso, pero siempre podrás comprobarlo desde modo incógnito. Y ya tenemos a Moodle cumpliendo la normativa.

Diseño Web, Gestores de contenidos, Prestashop

Cómo activar el modo debug (developer mode) en Prestashop

/

Ayer un colaborador tenía un problema con un Prestashop y le indicamos que el modo debug, llamado Developer Mode. Cuando preguntó como le dijimos que estaba en el blog…pero no. Lo teníamos para Moodle y para WordPress, pero no para Prestashop. Así que aquí os dejamos cómo activar el modo debug, Developer Mode, en Prestashop para ver errores en pantalla.  Obviamente, no es bueno activarlo en producción a menos que sea imprescindible. Por FTP abre el fichero:  /config/defines.inc.php Busca la línea que pone define(‘_PS_MODE_DEV_’, false); Cambia la línea a define(‘_PS_MODE_DEV_’, true); Guarda los cambios y recarga la página que daba errores. Con esto  ya deberías ver los problemas. Recuerda hacer el proceso inverso para desactivar el modo de desarrollador. Más información aquí.

Diseño Web, Gestores de contenidos

Mi WordPress no manda emails: ¿que puedo hacer?

/

Una pregunta que nos ha llegado varias veces. Tu página web en WordPress deja (o lo hace desde el principio) de enviar e-mails. ¿Es importante? Bueno, si porque WordPress usa el email para notificar a los usuarios sus contraseñas, sus cambio de contraseña, los formularios de contacto, al administrador avisos etc. Podemos perder una gran cantidad de información. Además, si los formularios no funcionan…¿cómo me contactan los clientes? ¿Qué puede estar pasando? Hay que averiguar: si tu servidor ha dejado de enviar correos. Por un cambio de configuración, políticas de seguridad más restrictivas o error puntual. La manera más rápida es ir a http://tudominio/wp-login.php y darle a recordar contraseña. Mira si llega ese correo. Si llega ese y no los de contacto, mira el paso siguiente. Si no llega, salta al final del artículo. O si los correos están llegando a spam. ¿Has mirado tu bandeja de spam? Puede que estén llegando los correos ahí. Si tus correos están llegando a spam, tienes que solucionar eso. Lo primero sería ver si tu dominio está en alguna lista negra. Si no, hay varias cosas que deberías comprobar reducir la puntuación de spam: Los correos debería enviarse desde una cuenta del dominio de la web. Si tu web está en midominio1.es no lo mandes, por ejemplo, desde info@midominio2.com  porque tendrás problemas. El servidor que reciba el correo verá una discrepancia (un email desde un dominio que no corresponde) y no le gustará. Si quieres hacerlo, tienes que usar el método el final del artículo (usar smtp o variante). Por lo mismo, en tus formularios de contacto no pongas ya (antes se hacía) en el campo “De” la dirección del que responde al formulario. Esto era muy cómodo, porque al recibir el correo sólo tenías que contestarlo. PERO, ahora el servidor que recibe el correo comprueba que viene del servidor en midominio1.es y el “De” pone, por ejemplo, @gmail.com. No le va a gustar. Puedes solucionarlo poniendo un “Reply To” o un enlace mailto con la dirección en el cuerpo del cliente. Merece la pena el trabajo de copiar y pegar la dirección desde el cuerpo del mensaje para asegurarse que llegan. Puedes añadir un registro SPF en tus DNS (los del dominio) para autorizar al servidor de la web para que mande correos desde el dominio. Hablaremos de los SPF otro día. Método alternativo: Si aún así no funcionan, lo mejor es usar un plugin para que los correos se envíen por SMTP (servidor de envío de correos) en vez de la función mail() de PHP. Esto quiere decir que los correos saldrán por el servidor que configuremos en vez de nuestro servidor web. Hay dos buenos plugins para WordPress. WP Mail SMTP: Ya hablamos de él. Te permite configurar el servidor de SMTP de la mayoría de las cuentas. Como configurarías un correo en un ordenador o móvil. Así lo manda desde otro servidor, autenticado con usuario y cuenta. ¿Problema? En ciertas cuentas la autentificación por usuario y contraseña no es suficiente (ver siguiente plugin). Además, se guarda la contraseña en el WordPress en texto plano…y si alguien entra en tu WordPress tendría también acceso a tu correo. Fallo de seguridad. Postman SMTP Mailer: Es un plugin que te permite hacer lo anterior  pero añade autentificaciones más modernas que pueden ser requeridas por cuentas como Gmail.  Por ejemplo autentificación, SASL, Plain/Login/CRAM-MD5/XOAUTH2  o seguridad como  SMTPS y STARTTLS (SSL/TLS). Con OAuth 2.0 y el web service por https consigue cubrir la mayoría de sistemas que requieren seguridad extra.      

Diseño Web, Gestores de contenidos, Trucos

Como añadir códigos de Shortcodes Ultimate en Contact Form 7

/

Hace unos días un cliente me comentó que necesitaba algo más en en formulario de contacto. Quería usar “acordeones”, “pestañas” etc para que el formulario tuviera más funcionalidades. Mirando cómo hacerlo descubrimos que podemos usar las códigos de Shortcodes Ultimate en Contact Form7, dos de los plugins más usados para cada una de esas funciones. Hay dos maneras de poner los códigos: La más recomendada. Podemos modificar el fichero functions.php de nuestra plantilla para poner este código: add_filter( ‘wpcf7_form_elements’, ‘mycustom_wpcf7_form_elements’ ); function mycustom_wpcf7_form_elements( $form ) { $form = do_shortcode( $form ); return $form; } Obviamente el gran problema de esto es que cada actualización de la plantilla hará que perdamos los cambios. Pero esto se puede arreglar haciendo una plantilla hija (de lo cual hablaremos mañana). Con este método podemos usar los códigos de Shortcodes Ultimate sin problemas en el formulario igual que en el resto de la web. La más laboriosa. Podemos usar (no lo hemos probado) los códigos html en el formulario. Podéis ver el ejemplo aquí (respuesta 14). Esta manera es muy laboriosa porque requiere poner etiquetas de div y css casi en cada línea. Pero no se cambiará al actualizar la plantilla. Eso si, vuelve el formulario un texto enorme lleno de código. Buen truco si queréis llevar los formularios al siguiente nivel.  

Scroll al inicio