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

9

Algunos temas le piden que no edite el archivo style.css, en su lugar, 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 el estilo en custom.css primero? Gracias.

    
pregunta jay 13.07.2012 - 10:14

9 respuestas

-2

Normalmente 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 conservar todo lo posible del diseño del diseño del tema. Así que un archivo css personalizado no duele mucho. Creo que es más una pregunta de apoyo. Con un archivo css personalizado, los fabricantes pueden ayudar a aquellos que usan sus temas más fácilmente. Debido a que el style.css original no se altera, por lo que el creador del tema probablemente pueda ver el archivo css personalizado.

    
respondido por el Wai Wong 13.07.2012 - 10:18
18

Usar @import en WordPress para agregar css personalizados 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'));
    
respondido por el Fil Joseph 15.03.2016 - 07:22
2

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

    
respondido por el p.a. 13.07.2012 - 10:57
2

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());
}
    
respondido por el Abhishek K R 02.11.2017 - 08:43
0

Para evitar que se sobrescriba el tema principal de 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.

enlace

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

El uso de un tema secundario le permitirá anular cualquiera de los archivos de temas principales que desee, simplemente copiando de los padres a su hijo o creando un nuevo archivo con el mismo nombre.

En cuanto al archivo custom.css , hay muchas maneras en que los desarrolladores de temas manejan esto ... muchos de ellos lo hacen simplemente para intentar evitar que los clientes que no quieren usar un tema secundario, editen el principal style.css archivo ....

De cualquier manera, no debería preocuparse por eso, siempre que use un tema infantil no debería preocuparse por actualizar su tema más adelante y perder sus cambios ... adquiera el hábito de usar siempre Temas, me lo agradecerán más tarde, lo prometo.

    
respondido por el sMyles 15.03.2016 - 17:12
0

Si quieres dejar tu html a lo largo. Usted puede agregar esto a su archivo css. Creo que esto es mejor.

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

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

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

    
respondido por el woony 13.07.2012 - 10:41
0

La mejor manera es combinar todos los estilos en cola en una sola función y luego llamarlos usando wp_enqueue_scripts action . 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' );

Por favor, 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. Por lo tanto, en nuestro código anterior, custom.css depende de style.css

|
Additional Basic:
La función wp_enqueue_style() 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, por lo general, 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 es muy importante, nos permite colocar nuestros scripts en pie de página cuando usamos el parámetro booleano como verdadero.

    
respondido por el perfectionist1 21.06.2017 - 10:47
0

Ir a Apariencia > Editar CSS desde su WordPress Dashboard.

AquíestálapantallaconeleditordeCSSbásico.

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

    
respondido por el suthanalley 29.07.2017 - 07:00
-2

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

enlace

Sigue esta ruta, te lo agradecerás más tarde.

    
respondido por el thisisbolo 15.03.2016 - 17:00

Lea otras preguntas en las etiquetas