Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » WordPress » Imagenes de Wordpress para que se muestren condicional al click del visitante

WordPress - Imagenes de Wordpress para que se muestren condicional al click del visitante

Volver
Nuevo Tema
<<>>
 
Vista:

Imagenes de Wordpress para que se muestren condicional al click del visitante

Publicado por BloggerPrise (1 intervención) el 05/04/2016 05:02:48
Hola muy buenos días/tardes/noches.

Tengo una consulta, porque he visto que en algunos sitios web lo hacen. El tema es que algunas imágenes del blog que escribo son un tanto fuertes (no son xxx sino que se trata de una pagina de animales y a veces la gente les hace cosas espantosas) entonces quisiera poder saber la forma, si es que existe, dentro de Wordpress para que cuando el visitante abra el artículo, vea las imagenes normales y las que son fuertes o de contenido grafico, que tengan una "tela" encima que solo se quite cuando el visitante le de click encima aceptando que sabe que es una imagen gráfica lo que verá ¿se entiende?
No se si existe algun widget que lo pueda hacer, o algun codigo que se pueda poner y donde para éste fin, pero realmente agradecería mucho si alguien me pudiera contestar al respecto.
Desde ya muchas gracias!
Monica
BP
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

Protección de imágenes gráficas en WordPress

Publicado por Alejandro (169 intervenciones) el 08/04/2024 21:11:17
En WordPress, puedes utilizar plug-ins o código personalizado para proteger las imágenes gráficas y mostrar una "tela" encima de ellas, que solo se quite cuando el visitante acepte ver el contenido gráfico. A continuación, te presento dos opciones que podrías considerar:

1. Utilizar un plug-in: Hay varios plug-ins disponibles en el repositorio de WordPress que te permiten agregar una capa de protección a las imágenes. Algunos ejemplos populares son "Content Protector" y "Image Protector". Estos plug-ins te permiten configurar una capa de protección que se superpone a las imágenes y que solo se quita cuando el visitante interactúa con ella, como hacer clic o deslizar. Puedes buscar estos plug-ins en el repositorio de WordPress e instalar el que mejor se adapte a tus necesidades.

2. Código personalizado: Si prefieres utilizar código personalizado, puedes hacerlo mediante el uso de HTML, CSS y JavaScript. Aquí tienes un ejemplo básico de cómo podrías lograrlo:

- En tu archivo de plantilla de WordPress, envuelve las imágenes que deseas proteger con un contenedor div y agrega una clase a ese contenedor, por ejemplo:

1
2
3
<div class="imagen-protegida">
    <img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">
</div>

- Luego, en tu archivo de estilos CSS, puedes agregar estilos para la capa de protección, por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.imagen-protegida {
    position: relative;
}
 
.imagen-protegida::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color de la capa de protección */
    z-index: 1;
}
 
.imagen-protegida::after {
    content: "Haz clic para ver la imagen"; /* Texto que se muestra en la capa de protección */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; /* Color del texto */
    font-size: 18px; /* Tamaño del texto */
    z-index: 2;
}

- Por último, puedes utilizar JavaScript para quitar la capa de protección cuando el visitante interactúe con ella. Puedes agregar el siguiente código al final de tu archivo de plantilla o en un archivo JavaScript separado:

1
2
3
4
5
6
7
8
9
document.addEventListener("DOMContentLoaded", function() {
    var imagenesProtegidas = document.querySelectorAll(".imagen-protegida");
 
    imagenesProtegidas.forEach(function(imagen) {
        imagen.addEventListener("click", function() {
            this.classList.add("imagen-protegida-activa");
        });
    });
});

Con este código, cuando el visitante haga clic en la imagen protegida, se agregará una clase adicional al contenedor div, lo que permitirá que la capa de protección se oculte mediante estilos CSS.

Recuerda que estas son solo opciones generales y que puedes personalizar el diseño y el comportamiento según tus necesidades específicas. Si no te sientes cómoda modificando el código, te recomendaría buscar la ayuda de un desarrollador de WordPress para que te asesore y te ayude a implementar esta funcionalidad de manera adecuada.

Espero que esta información te sea útil. ¡Buena suerte con tu blog, BloggerPrise!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar