¿Cómo agregar un archivo CSS personalizado en el tema?

Algunos temas le piden que no edite el archivo style.css, sino que use el archivo custom.css. Si escribe código en custom.css, sobrescribirá el mismo estilo de elemento en style.css. Creo que esto se hace para evitar la pérdida de estilos de usuario en la actualización del tema, ¿es así?

¿Cómo funciona esto? ¿Ya incluyen el archivo custom.css en su tema? Pero, ¿cómo se incluye este archivo en el tema para que el tema busque primero el estilo en custom.css? Gracias.

Por lo general, agrego este fragmento de código si quiero agregar otro archivo CSS

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

Creo que los creadores de temas quieren retener tanto como sea posible del diseño del diseño del tema. Por lo tanto, un archivo css personalizado no duele mucho. Creo que es más una pregunta de soporte. Con un archivo css personalizado, los creadores pueden ayudar a aquellos que usan sus temas más fácilmente. Debido a que el style.css original no ha sido modificado, el creador de temas probablemente pueda echar un vistazo en el archivo css personalizado.

Usar @import en WordPress para agregar CSS personalizado ya no es la mejor práctica, pero puedes hacerlo con ese método.

La mejor práctica es usar la función wp_enqueue_style()en functions.php.

Ejemplo :

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'));

Active el tema secundario y agregue el siguiente código de ejemplo en 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());
}

Mi propuesta sería utilizar temas secundarios. Es muy fácil de implementar y todas las modificaciones que realice (incluidos los estilos) están completamente aisladas del tema original.

Para evitar sobrescribir el tema principal CSS u otros archivos, SIEMPRE debe usar un tema secundario en WordPress ... no hacerlo solo le causará grandes dolores de cabeza y problemas en el futuro.

https://codex.wordpress.org/Child_Themes

... y con lo fácil que es configurar un tema secundario, no hay razón para que no debas usar uno.

El uso de un tema secundario le permitirá anular cualquiera de los archivos principales del tema principal que desee, simplemente copiándolo de su elemento principal o creando un nuevo archivo con el mismo nombre.

Con respecto al custom.cssarchivo, hay muchas maneras en que los desarrolladores de temas manejan esto ... muchos de ellos hacen esto simplemente para tratar de evitar que los clientes que no quieren usar un tema secundario, editen el style.cssarchivo principal ...

De cualquier manera, no debería preocuparse por eso, siempre y cuando use un tema secundario, no debería tener que preocuparse por actualizar su tema más adelante y perder sus cambios ... habitúese a usar siempre temas secundarios, usted me lo agradecerá más tarde, lo prometo.

Si quieres dejar tu html junto. puedes agregar esto a tu archivo css. Creo que esto es mejor.

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

También, dependiendo de su tema, funcionará con temas secundarios y primarios.

- tenga en cuenta que css funciona de forma secuencial (cuando se usa el mismo nivel de identificador, ya usado), por lo que lo último en su archivo se sobrescribirá. coloque su importación de estilo personalizado en la parte inferior si desea anular cosas.

La mejor manera es combinar todos los estilos en cola en una sola función y luego llamarlos mediante la wp_enqueue_scriptsacción . Agregue la función definida a las funciones de su tema.php en algún lugar debajo de la configuración inicial.

Bloque 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' );

Tenga en cuenta :

El tercer parámetro es la matriz de dependencia que se refiere a si esta hoja de estilo depende o no de otra hoja de estilo. Entonces, en nuestro código anterior, custom.css depende de style.css

El |
Básico adicional: la
wp_enqueue_style() función puede tener 5 parámetros: de esta manera: wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
En el mundo real de la codificación WP, generalmente también agregamos archivos javascript / bibliotecas jQuery dentro de esa función de esta manera:

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

El quinto parámetro verdadero / falso es opcional (los parámetros segundo, tercero y cuarto también son opcionales), pero muy esencial, nos permite colocar nuestros scripts en el pie de página cuando usamos el parámetro booleano como verdadero.

Vaya a Apariencia> Editar CSS desde su Panel de WordPress.

Aquí está la pantalla con el editor básico de CSS.

Ahora pegue su CSS directamente al texto predeterminado. Puede eliminar el texto predeterminado para que su CSS solo aparezca en el editor. Luego guarde la hoja de estilo y su CSS estará en vivo.

Use un tema infantil. Es tu mejor apuesta. De esta manera, si el tema se actualiza alguna vez, no anulará las hojas de estilo que ha creado.

https://codex.wordpress.org/Child_Themes

Siga esta ruta, se lo agradecerá más tarde.