Inserir CSS e Javascript sem registrar

Resolvido

(@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” 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)

8 anos, 3 meses atrás
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 8 anos, 3 meses atrás por Felipe Elia.
Criador do tópico brunoribeirovl
(@brunoribeirovl)

8 anos, 3 meses atrás

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.
Criador do tópico brunoribeirovl
(@brunoribeirovl)

8 anos, 3 meses atrás
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.
Criador do tópico brunoribeirovl
(@brunoribeirovl)

8 anos, 2 meses atrás
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.

Inserir CSS e Javascript sem registrar

Tags

Tópicos

Tópicos mais populares

Tópicos sem respostas

Tópicos não relacionados a suporte

Tópicos resolvidos

Tópicos não resolvidos

Todos os tópicos