Demasiados intentos de acceso fallidos a tu WordPress?

H

as recibido por mail el siguiente aviso de WordPress? ‘ Demasiados intentos de acceso fallidos ‘. Si es así tu página puede haber sido objeto de un ataque. Los hackers han intentado acceder a ella.

En el mail que hayas recibido figura la IP desde la que se ha realizado el ataque y la buena noticia es que puedes bloquear el acceso a tu site a esta IP. Puedes hacerlo  desde tu archivo ‘.htaccess’  .

Desde la administración de tu WordPress puedes consultar un registro de las IP bloqueadas en:

-Preferencias del plugin limitador de acceso (Menú/Ajustes de WordPress/Limit Login Attemps).

Este registro puedes eliminarlo una vez hayas incluido estas IP en tu .htaccess

Si te interesa saber como hacerlo  puede ser de tu interés el articulo de Ignacio Santiago que te dejo en este enlaceTrata sobre la seguridad de los sites realizados con WordPress y en particular, habla sobre como cómo configurar el htaccess para evitar ataques de hackers a nuestras webs. Es un post muy recomendable y os animo a que lo leáis.

Si deseeas además obtener información de una IP, la web myip.es puede ayudarte. Existen ademas multitud de listas negras en internet

Especificidad CSS: las claves para resolver los conflictos en tu CSS

P

ara complementar el último post que trataba sobre la sentencia !important trataremos ahora el concepto de especificidad.

La especificidad de un elemento es un valor numérico que utiliza el navegador para ordenar reglas de estilo contradictorias. Su cálculo se define como un número de 4 cifras ‘ABCD’ tal que:

 ‘A’ (millares):  Se le asigna 1 por cada  propiedad que afecte al elemento y que esté integrada en línea en el código HTML con el atributo ‘style’ .

‘B’ (centenas): Se le asigna 1 por cada propiedad que afecte al elemento y que esté definida a través de un identificador (id).

‘C’ (decenas): Se le asigna 1 por cada propiedad que afecte al elemento y que esté definida a través de una clase, pseudo-clase o selector de atributo.

‘D’ (unidades): Se le asigna 1 por cada propiedad que afecte al elemento y que esté definida a través de selector de elemento (p, div, ul, …) o pseudo-elemento.

En caso de igualdad de especificidad la propiedad definida en último lugar será la que muestre el navegador.

Si la propiedad que nos afecta está definida mediante !important, esta propiedad supera la especificidad de cualquier otra y será por tanto la que muestre el navegador en caso de conflicto.

Pero lo mejor será verlo sobre un ejemplo que contiene varias contradicciones en la definición de su estilo:

 

<div>

<!–ESPECIFICIDAD:Ejemplo–>
<div class=”color”>
<p> La especificidad de un elemento es un valor numérico que utiliza el navegador para ordenar reglas de estilo contradictorias.</p>
</div>

</div>

 

Así, con este ejemplo HTML y las siguientes indicaciones de estilo CSS se define la especificidad como sigue:

ELEMENTOS{propiedad afectada}¿ AFECTA A <p>  ?CALCULO ESPECIFICIDADESPECIFICIDAD
body {color: black;}NO1000 (no aplica) —
body div.color p {color: blue;}SI1000+0001+0010+0001=101012
.color {color: red;}NO0010 (no aplica)
div.color {color: green;}NO0001+0010=0011 (no aplica)
div.color p {color: yellow;}SI0001+0010+0001=00120012
div:first-child {color: orange;}SI0001+0010=00110011

La mayor especificidad (1012) determina el estilo que se muestra en el navegador, por tanto, en este caso el texto se mostrará de color azul.

Encontrarás mas información haciendo click aquí.

Declaraciones de CSS contradictorio. Solución: ” ! important “

S

i has trabajado con CSS seguro que te habrás encontrado con que al dar una instrucción CSS ésta parece no responder. Puede ser un problema de prioridades por contradicciones en el código con fácil solución, la declaración:  ‘ !important ‘ .

Al utilizar diferentes hojas de estilo y, incluso con una única hoja, puede suceder que hagamos una declaración CSS sobre un elemento determinado de nuestro HTML, y después la modificamos añadiendo una nueva declaración sobre el mismo elemento.

En principio prevalece aquella instrucción que sea rastreada en último lugar. Pero ésto lo podemos cambiar estableciendo con !important mayor prioridad a la sentencia deseada en caso de contradicción.

Un ejemplo de lo que os explico sucede muy habitualmente trabajando con WordPress, donde hay diferentes hojas de estilo que no hemos creado nosotros y por tanto no conocemos sus contenidos y de este modo cuando personalizamos nuestra web es fácil entrar en contradicciones.

Si deseo cambiar, por ejemplo el color del texto de un botón y averiguo su clase, con Firebug por ejemplo, puedo hacerlo del siguiente modo:

 

css

Esta declaración funcionaria al 100% si fuera definida por primera y única vez. Pero como existe previamente definida en mi tema de WordPress y lo que deseo es modificarlo, o la busco por todas las hojas de estilo para cambiarla, modificando de este modo  el tema, o bien desde mi CSS custom de mi tema child previamente creado, introduzco la sentencia !important del siguiente modo:

 

Os dejo un enlace a un articulo muy interesante relacionado con el tema para profundizar más:  seguir enlace

Renombrar un tema de WordPress

C

uando trabajamos con cualquier tema de WordPress puede que deseemos no mostrar el nombre del tema con el que hemos desarrollado la web.

Pues conseguirlo es muy sencillo, y lo voy a detallar paso a paso:

1º- Copiamos la carpeta del tema en cuestión con el que hemos trabajado y luego la renombramos.

2º- Abrimos el archivo ‘style.css’ que se encuentra en la raíz de la carpeta renombrada y, en la cabecera del documento, donde dice Theme Name ponemos el nuevo nombre que le queremos dar al tema y donde dice Author ponemos también el nombre que queramos. Salvamos los cambios al finalizar.

3º- (Opcional)  Si queremos que en el Menú/Apariencia/Temas de WordPress aparezca tu tema totalmente personalizado sustituye el archivo ‘screenshot.png’ (lo encontrarás en la misma ubicación que el archivo style.css) por la foto que desees asociar al tema renombrado.

4º- Creamos un archivo comprimido .zip de la carpeta en cuestión.

5º- Subimos a WordPress el .zip desde Menú/Apariencia/Temas y lo activamos como cualquier otro tema.

Los puntos 2 y 3 son perfectamente aplicables a los temas child, con la salvedad de que deberemos crear nosotros los archivos ‘style.css’ y ‘screenshot.png’ .

Os dejo un enlace a un post que  complementa muy bien la explicación que os acabo de dar. Hasta pronto!

Temas Child- Personalización de temas de Worpress

C

uando escogemos este o aquel otro tema para desarrollar un web-site es porque se adapta a nuestras necesidades. El tema de la presentación es secundario, la cuestión de la estética no nos preocupa en demasía si tenemos ciertos conocimientos de CSS y PHP. Lo resolvemos creando temas child.

Algunos temas premium permiten una buena personalización sin tocar apenas código. Los temas free requieren mayor esfuerzo y una mayor experiencia en  creación de hojas de estilo. Tanto en un caso como en otro, el tocar código de un tema tiene el riesgo de perderlo al hacer una actualización del mismo, e incluso de WordPress.

Pero tranquilos! no debemos preocuparnos por las actualizaciones si realizamos nuestros propios temas child a partir de un tema padre. Se trata de crear un tema hijo (child) que incluirá nuestras personalizaciones tanto de CSS como de PHP respetando el tema original.

Aquí os dejo un buen post sobre como hacerlo con vídeo explicación incluida . Espero que os sea útil el post.

Reproductor de video personalizado para WORDPRESS y otros CMS

P

ues nada, lo prometido es deuda, y como os avanzaba en el post de presentación del blog, voy a escribir sobre la personalización de los reproductores de vídeo para poner guapas las webs que los contienen.

Con  el plugin de Reembed, del que os voy a hablar, es super sencillo hacerlo.Tendremos que registrarnos en su web para personalizar nuestro reproductor y descargarnos el plugin una vez le hayamos dado estilo.

El plugin es gratuito y permite utilizarlo en diferentes CMS como WORDPRESS, BLOGGER, DRUPAL o JOOMLA, así como con HTML.

En su versión free podemos escoger entre 6 tipos de barra de navegación de la que podremos personalizar el color de la barra, de los botones de navegación, de la barra de avance del vídeo,..  Nos permite también insertar nuestro logo en el vídeo.

Su implementacion es muy sencilla y muy guiada. Básicamente los pasos son los siguientes:

1-Registrarse en   https://www.reembed.com

2-Definir el diseño de nuestro reproductor

3-Escoger la plataforma a la que queremos aplicar el diseño (Worpress, Joomla…)

4-Descargar plugin

5-Instalar plugin

6-Activar plugin

Y ya tenemos nuestro reproductor de video personalizado en funcionamiento. Os dejo el vídeo de REEMBED con la personalización que he realizado para que veáis de lo que estoy hablando.

Actualmente el plugin no está activo en este sitio web.

Presentación del Blog

N

o voy a engañar a nadie. Tampoco creo que lo pudiera conseguir.  Quiero ser sincera y basar nuestra ciber relación en la sinceridad.   :-)

Porque un comienzo no desaparece nunca…, ni siquiera con un final  (Harry Mulisch)

Esta es mi primera experiencia como bloggera. Es para mi una incógnita y un gran reto el alimentar este blog con aquellos conocimientos que alimentan mi día a día y me animan a aprender más y más cosas relacionados con el desarrollo web.

Me motivan actualmente, y hablaré de ello en mis entradas, temas relacionados con WordPress. Dar estilo y personalizar los temas es algo apasionante para mi, mejorar y transformar una cosa en otra.

Os habrá pasado mil veces que dedicáis tiempo a mejorar la estética de una página:  picando código, dando instrucciones, añadiendo o eliminando clases… y, al insertar el video de youtube o el mapa de google o el widget de tal cosa o tal otra… se pierde parte del efecto positivo ganado con tanto esfuerzo.

Esto no tiene por que ser así y es mi objetivo conseguir con este blog evitar estas situaciones que no dejan de ser frustrantes.

Espero que os gusten los temas que voy a ir proponiendo y que contribuyan positivamente en los resultados de vuestros sites.

page  3  of  3