Como adicionar arquivo css personalizado no tema?

9

Alguns temas solicitam que você não edite o arquivo style.css, em vez disso, use o arquivo custom.css. Se você escrever código em custom.css, ele substituirá o mesmo estilo de elemento em style.css. Eu acho que isso é feito para evitar a perda de estilos de usuário na atualização do tema, é assim?

Como isso funciona? Eles já incluem o arquivo custom.css em seu tema? Mas como esse arquivo é incluído no tema para que ele procure estilo em custom.css primeiro? Obrigado.

    
por jay 13.07.2012 / 10:14

9 respostas

-2

Eu costumo adicionar este pedaço de código se eu quiser adicionar outro arquivo css

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

Eu acredito que os criadores do tema querem manter o máximo possível do design do layout do tema. Então, um arquivo css personalizado não faz mal. Eu acho que é mais uma questão de apoio. Com o arquivo css personalizado, os criadores podem ajudar os que usam seus temas mais facilmente. Como o style.css original é inalterado, o criador de temas provavelmente pode dar uma olhada no arquivo css personalizado.

    
por Wai Wong 13.07.2012 / 10:18
18

Usar @import no WordPress para adicionar CSS personalizado não é mais a melhor prática, mas você pode fazer isso com esse método.

a melhor prática é usar a função wp_enqueue_style() em functions.php.

Exemplo :

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));
    
por Fil Joseph 15.03.2016 / 07:22
2

Minha proposta seria usar temas infantis. É muito fácil de implementar e todas as modificações que você faz (incluindo estilos) são completamente isoladas do tema original.

    
por p.a. 13.07.2012 / 10:57
2

Ative o tema filho e adicione o seguinte código de exemplo em function.php

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}
    
por Abhishek K R 02.11.2017 / 08:43
0

Para evitar sobrescrever o CSS do tema principal ou outros arquivos, você deve SEMPRE usar um tema filho no WordPress ... não fazer isso causará grandes problemas e dificuldades.

enlace

... e com a facilidade de configurar um tema filho, não há motivo para você não usar um.

O uso de um tema filho permitirá que você substitua qualquer um dos arquivos de tema pais principais que desejar, simplesmente copiando do pai para o seu filho ou criando um novo arquivo com o mesmo nome.

Em relação ao arquivo custom.css , há vários modos de os desenvolvedores de temas lidarem com isso ... muitos deles fazem isso simplesmente para tentar impedir que os clientes que não querem usar um tema filho editem os principais style.css arquivo ....

De qualquer forma você não deve se preocupar com isso, desde que você use um tema filho, você não deve se preocupar em atualizar o seu tema mais tarde e perder as suas alterações ... adquira o hábito de sempre usar o filho temas, você vai me agradecer mais tarde, eu prometo.

    
por sMyles 15.03.2016 / 17:12
0

Se você quiser deixar o seu html junto. você pode adicionar isso ao seu arquivo css. Eu acho que isso é melhor.

@import url("../mycustomstyle.css");

também dependendo do seu tema, ele funcionará com temas para crianças e pais.

- lembre-se, o css funciona sequencialmente (ao usar o mesmo nível de identificador, já usado), então o que é o último no seu arquivo será sobrescrito. Então, coloque sua importação customstyle na parte inferior, se você quiser substituir o material.

    
por woony 13.07.2012 / 10:41
0

A melhor maneira é combinar todos os estilos de enfileiramento em uma única função e, em seguida, chamá-los usando wp_enqueue_scripts action . Adicione a função definida ao functions.php do seu tema em algum lugar abaixo da configuração inicial.

Bloco de código:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Por favor, note:

O terceiro parâmetro é o array de dependências que se refere a se esta folha de estilo é ou não dependente de outra folha de estilo. Então, em nosso código acima custom.css é dependente de style.css



Basic adicional:
wp_enqueue_style() function pode ter 5 parâmetros: assim desse jeito wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
No mundo real do WP Coding, normalmente também adicionamos arquivos javascript / bibliotecas jQuery dentro dessa função da seguinte forma:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

O 5º parâmetro verdadeiro / falso é opcional (2ª, 3ª e 4ª params também são opt.) mas muito essencial, nos permite colocar nossos scripts no rodapé quando usamos o parâmetro booleano como verdadeiro.

    
por perfectionist1 21.06.2017 / 10:47
0

Vá para Aparência > Edite CSS do seu painel do WordPress.

AquiestáatelacomoeditorCSSbásico.

Agora cole seu CSS diretamente no texto padrão. Você pode excluir o texto padrão para que seu CSS apareça somente no editor. Em seguida, salve a folha de estilo e seu CSS estará ativo.

    
por suthanalley 29.07.2017 / 07:00
-2

Use um tema filho. É sua melhor aposta. Dessa forma, se o tema for atualizado, você não substituirá as folhas de estilo que criou.

enlace

Siga este caminho, você se agradecerá depois.

    
por thisisbolo 15.03.2016 / 17:00