Pregunta sobre Arreglando WordPress de Wordpress:

Crea una lista desplegable en una página

Un usuario preguntó 👇

¡Hola!

Quiero ocultar los archivos pdf en la página y hacerlos accesibles colocando el cursor sobre las líneas de texto de arriba o haciendo clic en el texto. ¡Gracias de antemano por cualquier respuesta!

(@bcworkz)

Hace 1 año, 1 mes

Estilo de los contenedores del visor de PDF con display: none; por lo que no se muestra ninguno primero. Agregue código jQuery para cambiar el estilo de visualización a block sobre el click la ocurrencia de la característica de texto relacionada. Será más fácil apuntar al elemento de texto con jQuery si está dentro de un contenedor div con un atributo de clase específico.

Tú podrías mouseenter salida en su lugar click pero no creo que sea una buena experiencia de usuario. El evento debe tener un clic entre la pantalla block y none para que los usuarios puedan volver a ocultar los archivos PDF.

El módulo jQuery ya está cargado en un mega menú en su página, por lo que solo necesita agregar el código que es específico para la visualización del PDF.

Lanzador de hilos

(@sajtoslecso)

Hace 1 año, 1 mes

Sin embargo, eso suena genial. ¿Te importaría ayudarme con Jquery mientras trato de resolverlo yo mismo? Edité el contenedor de incrustación de PDF en CSS, pero hasta ahora lo que he logrado es verter color gris sobre todo el pdf.

(@bcworkz)

Hace 1 año, 1 mes

Esa es una forma de ocultar el contenido assumed Asumí que querías que la pantalla inicial del PDF se cayera para que se muestre todo el texto, ya que no había ningún PDF. Para hacer eso, agregue

.pdfemb-viewer {
    display: none;
}

al panel CSS Extra del Adaptador. Antes de hacer eso, desarrolle el jQuery asociado para puntuar la visibilidad del espectador dentro y fuera. Como mencioné, el bloque de texto debe doblarse en un div con un atributo de clase específico. En el siguiente ejemplo, digo que la clase es «toggle-pdf».

WP se ejecuta en modo noConflict, por lo que si desea $ atajo para jQuery, su secuencia de comandos debe estar dentro de una «carpeta noConflict». Las notas de usuario con ejemplos se encuentran cerca de la parte inferior de la página de documentos de wp_enqueue_script ().

Agregue un controlador de escucha para cada clase toggle-pdf:

$(".toggle-pdf").on("click", function(){
  //code here to get the viewer element occurring after the clicked element
  //determine the current style.display property of the viewer
  //toggle the style.display property accordingly
});

Dentro de la función de cierre de uso this para hacer referencia al elemento en el que se hizo clic. Os dejo cerrado el desarrollo de la función.

Lanzador de hilos

(@sajtoslecso)

Hace 1 año, 1 mes

De acuerdo, no estoy seguro exactamente de lo que estoy haciendo, pero creo que logré algún progreso con la ayuda de tu dios, ¿dónde debería poner el código CSS? ¿En el menú adicional del panel CSS? ¿En el panel CSS adicional del archivo de tema (no tiene uno) o en un plugin PDF incrustado a través del editor CSS?

Esta respuesta fue modificada hace 1 año, 1 mes por.

(@bcworkz)

Hace 1 año, 1 mes

El primer grupo que proporcioné fue un CSS que puede ir al panel de CSS adicional.

El otro es jQuery / JavaScript, que debería ir a su propio archivo. Este archivo debe residir en un tema secundario o en su propio plugin personalizado. Es más fácil decirlo que hacerlo. Si necesita plantillas personalizadas por otras razones, debe optar por el tema infantil. De lo contrario, un plugin es un poco más fácil de crear.

Para cargar el archivo JS en una página, necesita el código PHP que se incluye en el archivo del plugin principal o en las funciones del tema secundario. El código PHP debe colgar la acción wp_enqueue_scripts. La función de recuperación llama a wp_enqueue_script () para cargar el archivo JS en su página. Para pasar el argumento $ deps array['jquery'] para asegurarse de que su código se cargue después de cargar jQuery. Vea, por ejemplo, un código en las notas de usuario de cada página de documentos que le ayudará a aprender cómo hacer todo esto. Si bien no eres un tutorial sin disparos, deberías poder armar algo.

Nunca debe cambiar otros archivos de código WP porque sus cambios se perderán cuando se actualice ese módulo. Es por eso que debe crear su propio tema o plugin hijo.

Lanzador de hilos

(@sajtoslecso)

Hace 1 año, 1 mes

¡Muchas gracias por la ayuda brindada! Mientras intentaba escribir e investigar el script, encontré accidentalmente un plugin que hizo lo que quería, pero usaré los fragmentos escritos anteriormente para practicar en el futuro.

(@bcworkz)

Hace 1 año, 1 mes

De nada. Me alegra que hayas encontrado una solución. Una buena manera de mejorar sus habilidades de codificación es examinar los plugins de código fuente que hacen algo similar al contenido con el que ha estado luchando.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.