Suporte » Temas » Inserir CSS e Javascript sem registrar

  • Resolvido brunoribeirovl

    (@brunoribeirovl)


    Olá amigos

    Estou desenvolvendo um tema e para inserir meus CSS’s resolvi não usar o caminho de registrar. Fiz assim:

    HEADER.PHP

    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.viajantelivre.com.br/wp-content/themes/vlivre/scripts.js"></script>
    
    <?php wp_head(); ?>
    
    <link rel="stylesheet" href="http://viajantelivre.com.br/wp-content/themes/vlivre/archives.css" type="text/css">
    <link rel="stylesheet" href="http://viajantelivre.com.br/wp-content/themes/vlivre/comments.css" type="text/css">
    <link rel="stylesheet" href="http://viajantelivre.com.br/wp-content/themes/vlivre/header.css" type="text/css">
    <link rel="stylesheet" href="http://viajantelivre.com.br/wp-content/themes/vlivre/sidebar.css" type="text/css">
    <link rel="stylesheet" href="http://viajantelivre.com.br/wp-content/themes/vlivre/singular.css" type="text/css">
    </head>

    Porém alguns começaram a apresentar um problema: nem todas as propriedades estavam sendo carregadas.

    Então tirei do header.php, registrei no functions.php e se resolveu.
    Mas o meu propósito é usar o máximo possível de conteúdo estático.

    Reuni então tudo em um único arquivo:
    <link rel=”stylesheet” href=”http://viajantelivre.com.br/wp-content/themes/vlivre/style.css&#8221; type=”text/css”>
    E aparentemente tudo funciona até o momento.

    Mas estou inseguro quanto a isso porque não sei porque anteriormente isso estava acontecendo.

    DÚVIDA
    Alguém sabe porque isso acontece? Por que não carregava todas as propriedades (verifiquei com o Firebug)?
    Convém eu manter a declaração estática? Tenho receio de dar o mesmo problema mais adiante…

    QUANTO AO JAVASCRIPT…
    …tive que declarar antes do wp_head(). Só assim funcionou.
    Porém, tenho receio de não ser totalmente carregado como os CSS’s.
    Então testei registrando…

    FUNCTIONS.PHP

    function vlivre_registrar_scripts() {
    	
            $vlivre_src = 'http://www.viajantelivre.com.br/wp-content/themes/vlivre';
    
    	wp_enqueue_style( 'vlivre-style', $vlivre_src . '/style.css' );
            wp_enqueue_style( 'vlivre-comments', $vlivre_src . '/comments.css' );
    	wp_enqueue_style( 'vlivre-responsive', $vlivre_src . '/responsive.css' );
    
            wp_enqueue_script( 'jquery' );
            wp_enqueue_script( 'comment-reply' );
            wp_enqueue_script( 'vlivre-scripts', $vlivre_src . '/scripts.js', array('jquery') );
    
    }
    add_action( 'wp_enqueue_scripts', 'vlivre_registrar_scripts' );

    …mas não funcionou. Tem algo errado no código?

    RESUMINDO…
    Estou tendo que lidar com erros inserindo:
    – estaticamente direto no header
    – por meio de registro no WordPress

Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • Moderador Felipe Elia

    (@felipeelia)

    Oi @brunoribeirovl,

    São dúvidas bem interessantes! Vou tentar respondê-las da melhor forma que eu puder, de repente algum outro colega aqui do fórum pode contribuir com mais coisa depois.

    Sobre “usar o máximo possível de conteúdo estático”
    Imagino e entendo que você deva estar preocupado em deixar o site o mais rápido possível, mas a diferença entre colocar esses endereços de forma estática ou dinâmica vão pesar muito pouco no volume de processamento do site. Vale mais a pena pensar em facilitar a manutenção do que em velocidade de entrega, nesse caso.

    Reuni então tudo em um único arquivo
    Essa é uma abordagem excelente! Diminui o número de requisições ao servidor e, pelo visto, resolveu o seu problema.

    Sobre porque aconteceu e se vale a pena manter
    Difícil saber sem olhar mais profundamente. A ordem dos arquivos é bem importante, talvez por isso não tenha funcionado. E se manter em um arquivo só é uma opção faça isso com certeza. Se você achar necessário aumentar o número de arquivos CSS para organizar ainda há a possibilidade de usar um plugin de cache, como o WP Super Cache, que junta esses arquivos em um só antes de exibir a tag <link>, mas para isso é preciso que os seus arquivos estão sendo incluídos através da função wp_enqueue_style.

    Javascript: tive que declarar antes do wp_head
    Você está usando uma versão meio antiga do jQuery, pode ser que seja isso. Dá uma olhada no console do Google Chrome (Menu -> Mais ferramentas -> Ferramentas do desenvolvedor -> Aba console) ou no console da extensão Firebug do firefox se há alguma mensagem de erro, pode dar alguma dica.

    Outros pontos:
    Tanto optando por chamadas direto no header quanto através da action wp_enqueue_scripts o melhor caminho é usar a função get_stylesheet_directory_uri, assim o caminho para o seu tema fica dinâmico e pode facilitar bastante futuras manutenções.

    O terceiro parâmetro da função wp_enqueue_script é um array onde você pode passar as dependências do seu javascript, ou seja, se seu script depende do jQuery para funcionar não é preciso chamar wp_enqueue_script( 'jquery' ); se você já está passando array('jquery') como terceiro argumento de wp_enqueue_script. Se o seu scripts.js também depende de comment-reply você pode chamar

    wp_enqueue_script( 'vlivre-scripts', $vlivre_src . '/scripts.js', array('jquery', 'comment-reply') );

    E retirar wp_enqueue_script( 'comment-reply' ); dali de cima.

    Resumindo
    Acho que o CSS já está resolvido né? Quanto ao js é preciso ver então se aparece alguma coisa no console (e, é claro, ver no código-fonte se seu js está sendo chamado corretamente).

    Espero ter ajudado!

    • Esta resposta foi modificada 4 anos, 1 mês atrás por Felipe Elia.

    Oi Felipe

    Obrigado pela resposta. E surpreso porque não estava conseguindo visualizar esse tópico, então achei que não tinha dado problema no envio, hehe.

    Sobre o CSS…
    Sobre o CSS, no caso da declaração estática, descobri que o problema era o cache. Ao deletar o cache, ele carregou o CSS por inteiro.

    Já o javascript…
    …carregado pelo Function.php não estava funcionando. Então, por hora, eu desabilitei o cache, e inseri tudo direto pelo Header.php

    Vou testar retirando a chamada wp_enqueue_script( 'jquery' ); e deixando apenas wp_enqueue_script( 'vlivre-scripts', $vlivre_src . '/scripts.js', array('jquery') );.
    Se der certo, aviso aqui e fecho o tópico.

    Vou verificar o caso da versão do Jquery também.

    Obrigado mais uma vez.

    Pois é…

    Esse é meu script

    SCRIPT

    $(document).ready(function(){
    
        //MENU NAV-MOBILE
        $("#menu-mobile-button").click(function(event) {
            $("#nav-mobile .menu-item-has-children > .sub-menu-mobile-button").addClass("genericon genericon-downarrow");
            $("#nav-mobile").slideToggle();
        });
    
        $(".sub-menu-mobile-button").click(function(event) {
            $(this).siblings(".sub-menu").slideToggle();
            $(this).siblings("p").children("a").toggleClass("menu-selected");
            $(this).toggleClass("genericon-downarrow");
            $(this).toggleClass("genericon-uparrow");
        });
    
    });

    Se carregado assim, funciona
    HEADER.PHP

    <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script type="text/javascript" src="http://viajantelivre.com.br/wp-content/themes/vlivre/scripts/functions.js"></script>
            <?php wp_head(); ?>
    </head>

    Assim, não tá funcionando não
    FUNCTIONS.PHP

    function vlivre_registrar_scripts() {
    	
            $vlivre_src = 'http://viajantelivre.com.br/wp-content/themes/vlivre';
    
    	wp_enqueue_style( 'vlivre-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Arimo:400,700' );
    	wp_enqueue_style( 'vlivre-genericons', $vlivre_src . '/images/genericons/genericons.css' );
    	wp_enqueue_style( 'vlivre-style', $vlivre_src . '/style.css' );
            wp_enqueue_style( 'vlivre-comments', $vlivre_src . '/scripts/comments.css' );
            wp_enqueue_style( 'vlivre-responsive', $vlivre_src . '/scripts/responsive.css' );
    
            //wp_enqueue_script( 'vlivre-script', $vlivre_src . '/scripts/teste.js' );
    
            //wp_enqueue_script( 'vlivre-jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' );
            //wp_enqueue_script( 'vlivre-script', $vlivre_src . '/scripts/functions.js', array('vlivre-jquery') );
    
            //wp_enqueue_script( 'jquery' );
            wp_enqueue_script( 'vlivre-script', $vlivre_src . '/scripts/functions.js', array('jquery') );
    
            //wp_enqueue_script( 'comment-reply' );
    
    }
    add_action( 'wp_enqueue_scripts', 'vlivre_registrar_scripts' );

    O script é carregado, mas não funciona.
    Scripts em javascript funcionam. Só esse que depende de Jquery que não.
    Os CSS’s estão funcionando também.

    Bom, para encerrar este tópico, voltemos às minhas dúvidas iniciais:

    O QUE EU QUERIA?
    Eu queria inserir Script e CSS direto pelo HEADER.PHP, sem utilizar o FUNCTIONS.PHP

    QUAL ERA O PROBLEMA?
    Por conta do cache, as modificações que eu fazia não eram carregadas.

    ENTÃO MUDEI PARA O HEADER.PHP
    Porém, o cache continuou atrapalhando, e mesmo depois de deletá-lo e desabilitá-lo, o cache do navegador continuou dando problema.

    A SOLUÇÃO NO FUNCTIONS
    A solução foi registrar da seguinte maneira:

    wp_enqueue_style( 'theme-styles', get_stylesheet_directory_uri() . '/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
    
    wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), filemtime( get_stylesheet_directory() . '/js/scripts.js' ) );

    E NO HEADER.PHP
    <link
    rel=”stylesheet”
    href=”<?php echo get_stylesheet_directory_uri() . ‘/style.css?’ . filemtime( get_stylesheet_directory() . ‘/style.css’);?>”
    type=”text/css”
    media=”screen”
    />

    <script
    type=”text/javascript”
    src=”<?php echo get_stylesheet_directory_uri() . ‘/js/script.js?’ . filemtime( get_stylesheet_directory() . ‘/js/script.js’);?>” >
    </script>`

    O QUE ESSE CÓDIGO FAZ
    Ele adiciona uma versão para seu arquivo, e quando você alterá-lo, a mudança será automática, mesmo para o usuário.
    Fonte: https://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/

    MINHA JQUERY
    Meu código JQuery continua não sendo carregado no functions.php, mas cansei de lutar contra isso, hehe.
    Mantive no header.php, que apesar de não ter sido recomendado, está funcionando.

Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • O tópico ‘Inserir CSS e Javascript sem registrar’ está fechado para novas respostas.