HostGator Promoção (728x60)

Forma Correta de Carregar Estilos Personalizados no WordPress

forma correta de carregar estilos personalizados wordpress

Vejo muitos artigos na internet ensinando a carregar estilos CSS ou arquivos JavaScripts, porém, a maioria não faz conforme a maneira recomendada pelo próprio WordPress. Não é necessário editar o arquivo header.php do template para carregar esses estilos. O correto é que eles sejam carregados no arquivo functions.php, para evitar problemas futuros com possíveis atualizações do tema. Apenda neste artigo como carregar estilos e javascript de maneira correta.

O próprio WordPress possuí uma função nativa que faz isso. Não precisar ficar colocando código html com IFs no header.php do template. Além de ser mais fácil usar a função do WordPress, ela deixa o código mais "elegante" o código.

Forma NÃO recomendada de fazer (no arquivo header.php):

1
2
3
<?php if (is_single( ) ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/extras.css" type="text/css" media="screen" />
<?php } ?>
<?php if (is_single( ) ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/extras.css" type="text/css" media="screen" />
<?php } ?>

Forma CORRETA de fazer (no arquivo functions.php):

1
2
3
4
5
6
7
8
add_action( 'wp_enqueue_scripts', 'wp_action_enqueue_scripts' );
 
function wp_action_enqueue_scripts() {
 
if (is_home()) {
wp_enqueue_style('extras', get_template_directory_uri().'/extras.css');
}
}
add_action( 'wp_enqueue_scripts', 'wp_action_enqueue_scripts' );

function wp_action_enqueue_scripts() {

if (is_home()) {
wp_enqueue_style('extras', get_template_directory_uri().'/extras.css');
}
}

Explicação

$handle (string) Nome identificador do script. Os nomes devem ser únicos, caso contrário, não funcionará corretamente (obrigatório).
$src (string) Caminho (URL) do script armazenado no servidor (opcional).
$deps (array) Estilos dependentes. Folhas de estilos que serão carregados antes deste. False não há dependências (opcional).
$ver (string) Número da versão deste estilo (opcional).
$media (string) Especifica a mídia onde esse estilo deve ser carregado. 'Exemplos:  'all', 'screen', 'handheld', 'print'. (opcional).

Documentação oficial da função wp_enqueue_style().

Viu como ficou mais elegante? Se a função do WordPress atende nossas necessidades nós devemos usá-la...

Um comentário para “Forma Correta de Carregar Estilos Personalizados no WordPress

Deixe um comentário

(required)
(required)