Blog

Cómo configurar WordPress para enviar correos mediante SMTP

En lugar de usar la función php mail para que WordPress envíe correo, podemos usar de forma recomendable el envío por SMTP. Lo puedes hacer fácilmente con un plugin. Hacerlo es muy fácil y ayudará a que tu correo llegue al buzón de entrada en lugar de al buzón de spam.

Lo primero que necesitamos es crear una cuenta de correo en nuestro dominio para enviar los correos. (Si ya tienes una la puedes usar también y saltarte este paso)

Para ello nos vamos a nuestro Plesk y pulsamos en la pestaña Correo, y luego más abajo en Crear dirección de email

SMTP1

 

En la siguiente pantalla Introducimos:
El nombre de la Dirección de email (no es necesario que tenga acceso al panel).
La Contraseña.
El acceso al Buzón sí que es necesario (se dejan los tamaños predeterminados por defecto).
Y se pulsa en Aceptar.

SMTP2

 

Accede a tu escritorio de WordPress para instalar el plugin: WP-Mail-SMTP

 

Accede al panel de WordPress y en el apartado Plugins pulsamos en Añadir nuevo. Y buscamos lo siguiente: WP-Mail-SMTP. Y le damos a instalar el plugin de Callum Mcdonald. Hay muchos plugins para esto, pero este tutorial trata sobre la configuración de este plugin en concreto que es ligero, simple y cumple su cometido.

SMTP3

 

También puede encontrarse para su descarga e instalación manual aquí: https://es.wordpress.org/plugins/wp-mail-smtp/


ACTUALIZACIÓN 06/07/2017:

Recientemente nos hemos encontrado WordPress donde dicho plugin no funciona correctamente con las versiones más recientes de WordPress. En esos casos hemos probado el plugin Postman SMTP y ha funcionado correctamente. La configuración es la misma. Se puede descargar desde WordPress o desde https://wordpress.org/plugins/postman-smtp/


Una vez instalado, en el listado de nuestros plugins, buscamos WP-Mail-SMTP y pulsamos en Settings, o alternativamente nos vamos en el panel de WordPress a Ajustes->Email. En ambos casos llegaremos a la pantalla de configuración del plugin.

En ella:
Dejamos From Email y From Name en blanco.
En Mailer seleccionamos .
Return Path en blanco.
En SMTP Host ponemos localhost.
En SMTP Port ponemos 587.
En Encryption seleccionamos No encryption.
En Autentification seleccionamos Yes: Use SMTP Autentification.
En Username ponemos el nombre del correo que creamos en Plesk seguido de @ y el nombre del dominio (smtp@midominio.es en nuestro ejemplo).
Y en Password la contraseña que elegimos para ese correo en Plesk.
Finalmente pulsamos en Guardar cambios y ya estará todo listo.

SMTP4

Cómo cambiar la imagen no disponible de PrestaShop

Hace tiempo, en versiones anteriores de PrestaShop, si querías cambiar la imagen no disponible de los productos debías preparar todos los tamaños y subirlo por FTP. Ahora, la cosa ha cambiado y para mejor, ya solo tienes que hacer lo siguiente:

  1. Ve a Localización y en pulsa en Modificar en el idioma de la imagen que quieras subir. Como sabrás, podrás tener una imagen de no disponible en cada idioma. Es lógico, por si queremos incluir algún texto.
  2. Haz clic en «Añadir archivo» donde pone «Imagen para mostrar en enlaces rotos» y listo!

U_yzlsk5q5SHV9PQNoHpayrMbQ_2Zh0BCk8uqVopGGA

Cómo crear páginas CMS en PrestaShop

PrestaShop nos da la posibilidad de crear una serie de contenidos que no cambiarán con frecuencia pero que es necesario y bueno tener en nuestra tienda.

No solo nos referimos a los contenidos básicos y estándares de «Condiciones de Compra» o «Políticas de Privacidad», sino también a crear contenidos de ayuda al cliente que quiere conocer los costes previos del transporte, aprender cómo se compra on-line y por supuesto a los contenidos en los que contamos al cliente Quienes Somos, Cómo llegamos hasta aquí, Cuál es la filosofía de nuestra empresa y todos aquellos contenidos informativos que creemos que el cliente puede necesitar para conocernos mejor.

Así que para crear un contenido CMS en PrestaShop, accedemos a nuestro panel de gestión y vamos a:

Preferencias > CMS y hacemos clic.

CMS en Prestashop

Y veremos la pantalla dividida en Categoría y en Contenidos, generalmente no necesitaremos modificar la categoría así que nos iremos a la zona de contenido y haremos clic en el icono de añadir uno nuevo:

Crear Nuevo ContenidoSe nos abre la siguiente pantalla:

Pasos para crear contenido

Y veremos los pasos a seguir:

1 – Introducir el título de la página que verá el cliente.
2 – Si quieres crear una ruta en concreto, tienes que escribir aquí el nombre de la página en minúsculas, sin acentos, sin espacios y con guiones separando las palabras. Sino tomará por defecto el título que pongas. Si no tienes conocimientos avanzados de este tema, te recomiendo que dejes que PrestaShop la ponga por defecto.
Ruta amigable3 – Aquí escribiremos el contenido de nuestra página.
Funciona como cualquier editor de texto, tienes una serie de iconos con las mismas funciones que los de cualquier editor de texto como word. Si pasas el ratón por encima te muestra su función: negrita, cursiva, subrayado, alineación a la izquierda, centrado o derecha, etc.
EditorTextoPara aplicar cualquiera de estos iconos, seleccionamos el texto y pulsamos el icono correspondiente.

También tenemos la posibilidad de poner un enlace:

– Seleccionamos el texto
– hacemos clic sobre el icono enlazar
Poner un link– Y rellenamos el campo de la dirección a donde queremos que vaya:
Campos a rellenar para link

En este ejemplo, en el campo URL, pondríamos la ruta, por ejemplo: http://facebook.com

Otra opción que necesitamos es meter imágenes, el último icono es para ello, así que colocamos el ratón dónde vayamos a querer la imagen y luego hacemos clic en el botón de la imagen:

Incluir una imagen

Y se nos abre esta pantalla:

Buscar imagen

En Descripción de la imagen ponemos la respuesta a ¿qué es la imagen? de manera breve.
Las dimensiones salen por defecto y tienes la posibilidad de editarlo luego de manera visual.

Le damos al icono carpeta para buscar la imagen, mostrará las miniaturas de las imágenes que ya están arriba, en tu alojamiento. La selecciona y automáticamente te la escribirá en el campo URL.
Si no la tienes previamente subida, al darle al icono de la carpeta y ver todas las imágenes ya subidas, tendrás que hacer clic en el icono de subir/añadir archivo y se mostrará la siguiente ventana:

Subir archivo

Arrastra tu archivo hasta esta ventana y pulsa luego el botón regresar a la lista, volverás a la pantalla de las imágenes en miniatura, la seleccionas y PrestaShop anota automáticamente la ruta, le das a Ok y listo, verás la foto en tu contenido.

Si quieres editar el tamaño de la imagen, solo tendrás que hacer clic con el ratón en alguno de los selectores o cuadraditos de la imagen y mantener pulsado mientras arrastras para que se haga más pequeño o más grande.

EditarTamaño

Si quieres alinear la imagen seleccionala con un clic de ratón sobre ella y luego utiliza los mismos botones que para alinear el texto:Alinear Imagen

Ten presente que siempre toma de referencia el lugar dónde inicialmente pusiste el ratón para poner la imagen.

En cualquier caso que haya que editar en modo avanzado se puede ver el código desde el mismo gestor y hacer las correcciones necesarias, pero esto ya es para usurarios avanzados, pues si se edita lo que no hay que editar, puede inutilizar el contenido e incluso dañar la imagen de la web o su funcionalidad.

Una vez que hemos terminado el contenido, nos quedan opciones por ver de:

Pasos para crear contenido

4 – Si tenemos una web multilingüe, escogemos el idioma en el que vamos a poner el contenido.

5 – Si queremos que los motores de búsqueda revisen y anoten éste contenido, lo pondremos en sí. Si no lo dejamos como está.

6 – Lo pondremos en SÍ, para que el contenido quede publicado.

7 – Guardar y previsualizar, no te sacará de la pantalla de edición pero guardará los cambios y te mostrará como queda el contenido. Y Guardar, guardará todo, te sacará de edición. Son botones independientes, puedes darle al que quieras, siempre quedará guardado el contenido.

Para finalizar siempre podrás volver a editar desde Preferencias > CMS y haciendo clic sobre el contenido.

Cualquier duda, ¡consultanos en los comentarios!

Solución a problemas de seguridad en PrestaShop con securitypatch

Recientemente PrestaShop ha anunciado unos problemas de seguridad que son importantes corregir. Para ello se requiere una actualización de seguridad de PrestaShop al menos a la última versión de la rama. Es decir, si tienes un PrestaShop 1.4 debes actualizarlo a la 1.4.11.1, si tienes un PrestaShop 1.5 a la 1.5.6.3. Las versiones 1.6 están todas corregidas desde la versión 1.6.0.14.

Hay otra opción muy simple que es instalar el módulo oficial de PrestaShop securitypatch

Podéis ampliar información en el blog de PrestaShop, en el artículo: Actualización de seguridad por PrestaShop

Cualquier duda por supuesto, puedes preguntar en los comentarios 🙂

PrestaShop 1.6 no muestra los atributos tras actualizar

Si has actualizado PrestaShop a PrestaShop 1.6 y no se muestran los atributos o combinaciones, puede ser por varios motivos. Te enseñamos a solucionar algunos casos.

Si además de no mostrarse los atributos, cuando vas a un producto que tiene atributos, se ven los atributos pero no los valores y al intentar crear un atributo nuevo te da el error «Unknown column ‘position’ in ‘field list«la solución pasa por crear el campo position en ps_attributeps_attribute_group. Puedes hacerlo desde phpmyadmin con:

-- Crear campo position en PrestaShop con MySql
ALTER TABLE `ps_attribute_group` ADD `position` TINYINT(3) NOT NULL DEFAULT '1' ;
ALTER TABLE `ps_attribute` ADD `position` TINYINT(3) NOT NULL DEFAULT '1' ;

Por otro lado, asegúrate que en classes/helper/HelperList.php la siguiente línea usa Tootls::getValue en lugar de getIsset:

//classes/helper/HelperList.php
$position_group_identifier = Tools::getIsset($this->position_group_identifier) ? Tools::getValue($this->position_group_identifier) : $this->position_group_identifier;

Dependiendo de tu versión, puede que ya lo tengas implementado, si no es necesario que lo cambies.

Por último, asegúrate que Configuration::get(‘PS_COMBINATION_FEATURE_ACTIVE‘) devuelve 1 o true. Para ello desde phpmyadmin nuevamente puedes lanzar:

-- Consultar tabla configuration en PrestaShop con MySql
SELECT * FROM `ps_configuration` where name = 'PS_COMBINATION_FEATURE_ACTIVE'

Related Posts by Zemanta, un plugin de posts relacionados en WordPress

zemanta

Hoy os voy a hablar de un plugin llamado Related Posts by Zemanta que me gusta mucho para activar posts relacionados, he probado muchísimos, pero me quedo con este. ¿Y por qué es bueno tener posts relacionados en tus artículos? Porque conseguirás que la experiencia de un usuario no acabe en la lectura del primer post. Colocando posts relacionados en la parte inferior del post, conseguirás que hagan clic en otro post y no salgan de tu blog tan rápido. Además de ser bueno para ti, también lo será para los usuarios ya que les ayudará a encontrar artículos que puedan ser de su interés. Además podrás contabilizar los clics de tus usuarios gracias a las estadísticas integradas:

Estadísticas Zemanta

También puedes personalizar el diseño, además de traer varios temas para elegir, también puedes hacer uso de CSS, sin abrir la hoja de estilos:

CSS

Tienes la posibilidad de cambiar el tamaño de las imágenes y de incluir solo las categorías que te interesen. Y por último, comentar también, que el diseño es responsive y se adaptará perfectamente a cualquier dispositivo móvil:

Responsive Zemanta

 

Cómo añadir CSS en nuestra web

estilos-cssEn nuestro artículo anterior hicimos referencia a qué son y para qué sirven los estilos CSS. Para poder hacer uso de ellos debemos empezar por incluirlos en nuestros archivos HTML. A continuación, veremos tres formas diferentes para incluir CSS en un documento HTML.

1- Incluir CSS en el mismo documento HTML

Esto se hace en el HEAD del documento, es decir, entre las etiquetas <head></head>. Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar una a una todas las páginas que incluyen el estilo que se va a modificar.

En nuestra página html quedarían incluidos así:

 

<!DOCTYPE html >
<html lang="es">
<head>

<title>Estilos CSS - Ejemplo</title>
<style type="text/css">
p { color:green; font-size: 13px }
</style>
</head>
<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

 

2- Inlcuir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS. El cual se enlaza al HTML mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css. Se pueden enlazar a las páginas HTML tantos archivos CSS como sean necesarios.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos:

  1. Crea un archivo de texto con el siguiente contenido: p { color:green; font-size: 13px }
  2. Guarda el archivo de texto con el nombre estilos.css.
  3. En el HTML debes enlazar el archivo CSS mediante la etiqueta <link>:


<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

Cuando el navegador carga la página HTML, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:

rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS.  En este caso es solo para «screen». Pero también se pueden enlazar estilos especificos para imprimir utilizando «print».

Este es el modo más correcto y utilizado de añadir estilos CSS.

El principal motivo es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que nos permite tener  los mismos estilos en todas las páginas que forman un sitio web.

Este método simplifica el mantenimiento de un sitio al máximo, ya que un solo cambio en un solo archivo CSS permite modificar de forma rápida y sencilla los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se muestra a continuación:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS (con la única excepción de la regla @charset).

La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las diferentes formas de incluir la hoja de estilos del ejemplo anterior serían así:


@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");

3- Incluir CSS en los elementos HTML

La tercer forma de incluir estilos CSS en documentos HTML es hacer sobre las etiquetas de html.

Ejemplo:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
</head>

<body>
<p style="color:green; font-size: 13px">Un párrafo de Ejemplo.</p>
</body>
</html>

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto o en los html que se usan en plantillas de e-mails. Resulta un método muy dificultoso para realizar modificaciones en un futuro, ya que se deberían hacer una a una por etiqueta.

Hemos mencionado la técnica que nos parece mejor (caso 2), pero no hay que dejar de lado las demás, ya que cada caso puede ser particular y conocer todas las opciones con las que contamos nos permitirá saber cual se adapta mejor para cada situación. Nosotros utilizamos las tres de forma combinada para obtener el mayor provecho según sea necesario.

Si quieres puedes compartir con nosotros tus experiencias con cada método!

Saludos!

Cómo configurar tu cuenta de correo en Thunderbird

Lo primero que debes hacer para configurar tu cuenta de e-mail en Thunderbird es crear la cuenta en tu panel de control. Para ello, debes seguir las instrucciones del e-mail que te llegó cuando contrataste tu alojamiento. Así que si aún no has dado de alta tu cuenta de correo puedes hacerlo ahora mismo accediendo a tu panel Plesk. Leer más

Estilos CSS, ¿qué son y para qué sirven?

estilos_css Cuando se habla de apariencia estética o cambios visuales de una web siempre se mencionan los estilos CSS. Vamos a explicar un poco qué son y para qué sirven. CSS es el lenguaje para describir la presentación de páginas web, por ejemplo los colores, el diseño y las fuentes. Nos permite adaptar la presentación a las diferentes necesidades y tipos de dispositivos. El CSS es independiente al HTML y se puede utilizar con cualquier lenguaje de marcado basado en XML. Leer más

Búsquedas avanzadas en Gmail

gmail-buscar-200Realizar una búsqueda en Gmail es muy sencillo. Escribiendo en el campo superior de la pantalla la palabra clave que deseas buscar y presionando «Enter» o la lupa de la derecha ya obtienes un resultado. Pero muchas veces necesitamos un resultado un poco más específico a la hora de buscar un correo. Para ello, Google nos ofrece dos opciones para realizar una búsqueda avanzada y así encontrar el correo que necesitamos de manera más rápida, precisa y eficiente.

Opción 1: Pestaña de búsqueda

campo de busqueda

Presionando en la flecha hacia abajo nos despliega una pestaña donde podremos ir detallando datos más específicos sobre lo que estamos buscando. Cada campo nos ayudará a tener conocimiento sobre qué información podemos buscar. A continuación puedes ver una captura:

busqueda-avanzada

Opción 2: Operadores

Gmail nos facilita una serie de comandos denominados «operadores» para usar en el campo de búsqueda. Los «operadores» son palabras o símbolos que realizan acciones especiales en el sistema de búsqueda de Gmail.
campo de busqueda-2

A continuación, te mostramos una lista de los operados más útiles para las búsquedas:

  • from: Especifica remitente. Ejemplo: from:Julio
  • To: Especifica destinatario. Ejemplo: to:Pedro
  •  subjet: Busca palabras incluidas en la línea del asunto. Ej: subjet:reunión
  • – : Excluye palabras de la búsqueda. Ejemplo: subject:reunión -planificación (buscaría todos los mensajes en cuyo asunto aparezca la palabra reunión pero no planificación)
  • label: busca mensajes por etiquetas. Ejemplo: subject:reunión label:trabajo (busca mensajes que tengan un asunto con la palabra reunión y además tengan la etiqueta trabajo asignada)
  • has:attachment: Busca los mensajes que tengan un archivo adjunto. Ejemplo: subject:julio has:attachment (buscaría todos los mensajes en cuyo asunto apareciera julio y que tuviera algún archivo adjunto).
  • list: Busca los mensajes incluidos en listas de distribución. Ejemplo: list:info@ejemplo.com
  • filename: Busca un archivo adjunto por su nombre o por su tipo. Ejemplo: filename:logo.jpg o filename:pdf
  • » » (comillas): Busca una frase exacta, no se distingue entre mayúsculas y minúsculas. Ejemplo: «Pedido número:». También se puede utilizar en el asunto Ejemplo: subject:»confirmación de pedido».
  • ( ) (parentesis): Sirven para agrupar palabras y especificar los términos que no deben excluirse. Ejemplo: subject:(trabajo entrega) Busca mensajes cuyo asunto incluye las palabras «trabajo» y «entrega».
  •  + (símbolo más): Sirve para localizar únicamente las coincidencias exactas con el término buscado. Ejemplo: +juego (buscará los mensajes que contienen la palabra “juego”, pero ni “juegos” ni “juega”).
  • OR: (solo en mayúsculas) Sirve para realizar combinaciones de palabras. Tomando el ejemplo anterior: subject:(trabajo OR entrega) Busca mensajes cuyo asunto incluye la palabra «trabajo» o «entrega».
  • in: Busca mensajes en «lugares» de Gmail. Para ello se deben especificar. Ejemplo: in:inbox (recibidos), in:trash (papelera), in:spam (spam). También existe in:anywhere que nos permite buscar mensajes en cualquier sitio de Gmail. Esta búsqueda, de forma predeterminada, no busca ni en la carpeta Spam ni en la carpeta Papelera.
  • is: Permite buscar mensajes según su «estado». Ejemplo: is:starred, is:unread (no leído) (destacado), is:read (leído). Un operador destacado de is: es is:chat, el cual nos permite buscar mensajes del chat. En este caso también existe is:important que al igual que label:important, sirven para buscar dentro de los mensajes que la bandeja de entrada considerados importantes.
  • cc y bcc: buscar los mensajes enviados con copia cc: a determinados destinatarios. Ejemplo cc:Pedro.

Estos son algunos de los que nosotros usamos y los más sencillos para comenzar. Esperamos que nos cuentes si ya los usas y te han sido de ayuda!

Saludos!