Como adicionar um arquivo CSS personalizado no tema?

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

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 primeiro o estilo no custom.css? Obrigado.

Normalmente, adiciono esse código se quiser adicionar outro arquivo css

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

Acredito que os criadores de temas desejam reter o máximo possível do design do layout do tema. Portanto, um arquivo CSS personalizado não dói muito. Eu acho que é mais uma pergunta de suporte. Com um arquivo css personalizado, os fabricantes podem ajudar aqueles 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.

Usar o @import no WordPress para adicionar CSS personalizado não é mais a melhor prática, mas você pode fazê-lo 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'));

Ative o tema filho e adicione o seguinte código de exemplo no 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());
}

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

Para evitar a substituição do CSS do tema principal ou de outros arquivos, você SEMPRE deve usar um tema filho no WordPress ... caso contrário, isso só causará grandes dores de cabeça e problemas no caminho.

https://codex.wordpress.org/Child_Themes

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

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

Em relação ao custom.cssarquivo, existem inúmeras maneiras pelas quais os desenvolvedores de temas lidam com isso ... muitos deles fazem isso simplesmente para tentar impedir que clientes que não desejam usar um tema filho, editem o style.cssarquivo principal ....

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

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 os temas filho e pai.

- lembre-se, o css funciona sequencialmente (ao usar o mesmo nível de identificador, já usado), portanto, o que for último no seu arquivo será substituído. então, coloque sua importação de estilo personalizado na parte inferior, se desejar substituir as coisas.

A melhor maneira é combinar todos os estilos enfileirados em uma única função e chamá-los usando a wp_enqueue_scriptsação . Adicione a função definida às funções do seu tema.php 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' );

Observe :

O terceiro parâmetro é a matriz de dependência que se refere a se essa folha de estilo depende ou não de outra folha de estilo. Portanto, em nosso código acima, custom.css depende de style.css

|
Adicional Basic:
wp_enqueue_style() function pode ter 5 parâmetros: assim - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
No mundo real da codificação WP, geralmente também adicionamos bibliotecas de arquivos javascript / jQuery dentro dessa função da seguinte maneira:

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

O quinto parâmetro true / false é opcional (o segundo, o terceiro e o quarto parâmetros também são opcionais.) Mas muito essencial, permite colocar nossos scripts no rodapé quando usamos o parâmetro booleano como true.

Vá para Aparência> Editar CSS no seu Painel do WordPress.

Aqui está a tela com o editor CSS básico.

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

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

https://codex.wordpress.org/Child_Themes

Siga esta rota, agradecerá a si mesmo mais tarde.