Pergunta sobre como desenvolver com WordPress a partir do WordPress: codepen html js css no wordpress – Fácil

Um usuário perguntou ?

Olá

Estou tentando replicar um site para minha empresa usando wp e estou tendo alguns problemas. Eu vi alguns menus de tela cheia interessantes quando mudei o cursor da tela de seta para ponto. Tentei integrar os códigos do codepen, mas estou com problemas.

Eu li o tutorial enqueue aqui no wordpress

mas ainda tenho problemas porque não funciona. Eu não sou da indústria de TI ou programação, então meu conhecimento é muito básico. Eu pesquisei, mas nada funciona. Tenho certeza de que, devido à minha falta de conhecimento básico de programação, estou fazendo algo errado.

Meu processo foi: a) Criei um tema filho em Wp, ainda na minha casa local, usando wamp b) Encontrei código em codepen com código html, css e js. Baixei esses arquivos. c) Copiei o código html e o inseri no arquivo de tema header.php do meu tema d) No meu computador, em C/wamp64/www/wordpress/wp-content/theme/my-theme-child/Create tenho dois arquivos , um é hard js e o outro css; e) Do arquivo codepen baixado, onde eu tinha dois mapas dist e src, copiei dois arquivos dist map, um chamado script e outro estilo chamado CSS; f) Colei o arquivo js para meu child-theme/js e o arquivo CSS em meu child-theme/css g) Fui ao meu tema Child-functions.php e adicionei este código:

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Agora quando eu visualizo minha página no meu navegador na parte superior da página, o menu não está como deveria ser (apenas Home, app, texto de contato à esquerda com fundo branco, sem botão de hambúrguer…) .

Eu sei que fiz algo errado, mas não consigo descobrir o que é.

Ficaria muito feliz em receber ajuda para resolver este problema.

Obrigado e tudo de bom, BR

Este tópico foi modificado 10 meses, 2 semanas atrás por.

(@ alegremente)

10 meses, 2 semanas atrás

Pode ser útil vinculá-lo ao Codepen. Provavelmente o HTML não deveria fazer parte do cabeçalho. Você precisará adaptar o script e o CSS para trabalhar com o menu da forma como ele é gerado de acordo com o seu tema. Fazer add_theme_scripts a função tem alguns problemas. Para wp_enqueue_style, o primeiro parâmetro é o identificador. Adicione algo único ao estilo do seu filho e, em seguida, use a alça certa para o estilo temático do seu pai. Não pode ser o mesmo identificador para ambos e deve ser compatível com o pai ou com carregamento duplo. (o mesmo para wp_enqueue_script.)

(@managerslo)

10 meses, 2 semanas atrás

Obrigado pela sua resposta Joy (@joyously)

MMM…

Eu vi este código no codepen:

e eu queria usá-lo no meu tema filho em sydney no meu novo site wp (ainda na minha casa local), e não tenho ideia de como integrar esse código no meu wp.

Também vi este código:

e eles também não têm ideia de como integrá-lo.

Eu sei que deveria ler alguns livros e outras coisas sobre programação, mas achei que tem um tutorial fácil para embutir esse código no wp (depois coloque os arquivos html, css e js lá etc), mas pelo que vejo provavelmente estou otimista.

Obrigado pela ajuda BR.

(@ alegremente)

10 meses, 2 semanas atrás

Portanto, seu tema (pelo menos em dispositivos pequenos) provavelmente já possui um botão de menu em seu tema. Então você teria que modificar isso para estar sempre lá. Aqui está a parte HTML que você mencionou. O resto do HTML é o menu de exibição, que você não deve inserir em seu cabeçalho. É apenas para exibição, embora a parte do botão compacto seja necessária. Você precisará trabalhar com as diferentes partes do menu HTML do seu tema.

O CSS usa a fonte do Google, que você não precisará, pois usaria qualquer fonte que seu tema usasse. Também se refere a classes em HTML, que você precisa alterar para corresponder às classes do seu tema (a maioria dos temas analógicos padrão usa classes com WordPress para menus, mas alguns temas mudam tudo). Existem estilos para o corpo e. hero e h1 você provavelmente não quer. Então, apenas reduza os itens do menu e renomeie as coisas para corresponder ao seu tema.

O JS é apenas para active e o botão, portanto, certifique-se de que os nomes correspondam ao que o seu CSS termina.

O segundo Codepen usa uma biblioteca, que você também deve incluir para que funcione. Na página Codepen, clique em Configurações e selecione JS à esquerda para descobrir qual biblioteca está carregada.

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 *