Pergunta sobre como corrigir WordPress WordPress: Crie uma lista suspensa em uma página

Um usuário perguntou ?

Olá!

Quero ocultar os arquivos pdf na página e torná-los acessíveis passando o mouse sobre as linhas de texto acima ou clicando no texto. Agradeço antecipadamente qualquer resposta!

(@bcworkz)

1 ano, 1 mês atrás

Estilize os contêineres do visualizador de PDF com display: none; então nenhum é mostrado primeiro. Adicione o código jQuery para alterar o estilo de exibição para block sobre ele click a ocorrência do recurso de texto relacionado. Será mais fácil direcionar o elemento de texto com jQuery se estiver dentro de um contêiner div com um atributo de classe específico.

Tu poderias mouseenter sair em vez disso click mas não acho que seja uma boa experiência de usuário. O evento deve ter um clique entre a tela block e none para que os usuários possam ocultar arquivos PDF novamente.

O módulo jQuery já está carregado em um mega menu em sua página, então você só precisa adicionar um código específico para exibir o PDF.

lançador de tópicos

(@sajtoslecso)

1 ano, 1 mês atrás

No entanto, isso soa muito bem. Você se importaria de me ajudar com Jquery enquanto eu tento descobrir sozinho? Editei o contêiner de incorporação do PDF em CSS, mas até agora o que consegui fazer foi derramar a cor cinza em todo o pdf.

(@bcworkz)

1 ano, 1 mês atrás

Essa é uma maneira de ocultar o conteúdo assumido. Eu assumi que você queria que a tela inicial do PDF fosse suspensa para que todo o texto fosse exibido, já que não havia PDF. Para isso, adicione

.pdfemb-viewer {
    display: none;
}

ao painel Extra CSS do Adaptador. Antes de fazer isso, desenvolva o jQuery associado para pontuar a visibilidade do visualizador dentro e fora. Como mencionei, o bloco de texto precisa ser dobrado em uma div com um atributo de classe específico. No exemplo a seguir, digo que a classe é “toggle-pdf”.

WP roda no modo noConflict, então se você quiser $ atalho para jQuery, seu script deve estar dentro de uma “pasta noConflict”. As notas do usuário com exemplos estão na parte inferior da página de documentos wp_enqueue_script().

Adicione um controlador de ouvinte para cada classe 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
});

Função de fechamento de uso interno this para se referir ao elemento que foi clicado. Deixo-vos encerrado o desenvolvimento da função.

lançador de tópicos

(@sajtoslecso)

1 ano, 1 mês atrás

Ok, não sei exatamente o que estou fazendo, mas acho que fiz algum progresso com a ajuda de seu deus, onde devo colocar o código CSS? No menu adicional do painel CSS? No painel CSS adicional do arquivo de tema (não possui um) ou em um plug-in de PDF incorporado por meio do editor de CSS?

Esta resposta foi modificada 1 ano e 1 mês atrás por.

(@bcworkz)

1 ano, 1 mês atrás

O primeiro grupo que forneci foi um CSS que pode entrar no painel CSS Adicional.

O outro é jQuery/JavaScript que deve entrar em seu próprio arquivo. Este arquivo deve residir em um tema filho ou em seu próprio plugin personalizado. Mais fácil falar do que fazer. Se você precisar de modelos personalizados por outros motivos, deve optar pelo tema filho. Caso contrário, um plugin é um pouco mais fácil de criar.

Para carregar o arquivo JS em uma página, você precisa do código PHP incluído no arquivo de plug-in pai ou nas funções do tema filho. O código PHP deve ligar a ação wp_enqueue_scripts. A função fetch chama wp_enqueue_script() para carregar o arquivo JS em sua página. Para passar o argumento $deps array['jquery'] para garantir que seu código seja carregado após o carregamento do jQuery. Veja, por exemplo, um código nas notas do usuário em cada página de documentos que o ajudará a aprender como fazer tudo isso. Embora você não seja um tutorial sem fotografar, você deve ser capaz de montar algo.

Você nunca deve alterar outros arquivos de código WP porque suas alterações serão perdidas quando esse módulo for atualizado. É por isso que você deve criar seu próprio tema filho ou plugin.

lançador de tópicos

(@sajtoslecso)

1 ano, 1 mês atrás

Muito obrigado pela ajuda prestada! Ao tentar escrever e pesquisar o script, acidentalmente encontrei um plugin que fazia o que eu queria, mas usarei os trechos escritos acima para prática futura.

(@bcworkz)

1 ano, 1 mês atrás

De nada. Fico feliz que tenha encontrado uma solução. Uma boa maneira de melhorar suas habilidades de codificação é examinar os plugins de código-fonte que fazem algo semelhante ao conteúdo com o qual você está lutando.

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *