Tema anak Masalah prioritas CSS tanpa menggunakan! Penting

Saya mengubah situs WordPress saya untuk menggunakan tema anak, tetapi gaya tema induk memiliki prioritas di atas setiap perubahan yang saya buat pada tema CSS anak. Saya dapat mengatasinya menggunakan !important, namun ini adalah solusi yang tidak merata dan tema anak harus berfungsi sebagai sumber daya pertama situs.

Misalnya, di situs saya , perbatasan yang menyertakan .wp-captionwarna sama dengan latar belakang menggunakan !importanttag, tetapi tidak akan berfungsi tanpanya.

Apakah ini ada hubungannya dengan file functions.php?

Ini adalah isi file PHP saya:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

css child-theme

— Dharkov
sumber

bagaimana Anda menambahkan style.css tema anak Anda?

— Milo

Saya menggunakan sistem yang direkomendasikan WordPress dalam posting ini: codex.wordpress.org/Child_Themes

— Dharkov

sepertinya stylesheet tema anak Anda dimuat sangat awal, apakah Anda membagikannya atau menambahkan tag tautan langsung ke header? itu harus enqueued untuk muncul setelah stylesheet induk, sehingga Anda dapat menggunakan penyeleksi CSS yang sama untuk menimpa orangtua tanpa! Penting atau spesifisitas lebih tinggi. lihat jawaban rambillo di bawah ini.

— Milo

Jawaban:

Coba enqueuing CSS tema anak Anda seperti:

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Perhatikan beberapa hal:

1) PHP_INT_MAX sebagai prioritas sehingga ini berjalan

2 terakhir ) get_stylesheet_directory_uri () vs. get_template_directory_uri () yang akan menunjuk ke folder template tema anak alih-alih orang tua.

Saya menambahkan subfolder di sana, juga /styles/karena saya menyimpan CSS dalam subfolder tema saya secara normal.

3) diikuti array( 'parent-style' )untuk membuat CSS anak memiliki CSS induk sebagai dependensi, yang memiliki efek menempatkan tema orangtua terlebih dahulu di kepala dan CSS tema anak mengikutinya. Karena itu, apa pun yang juga muncul di tema anak yang sudah ada di tema induk akan menimpa versi tema induk.

— rambillo
sumber

Terima kasih banyak, array baru berfungsi dengan baik dan juga lebih bersih dan lebih jelas.

— Dharkov

masih belum berfungsi .. aneh sekali. 40 menit dan 20 tutorial setidaknya pada tema dua puluh enam. Tidak bisa mendapatkan gaya untuk diganti. body, select { color: red !important; font-size:200% !important; }

— roberthuttinger

Silakan dan kirim codepen, dan kami akan memeriksanya.

— rambillo

PHP_INT_MAX menyelesaikannya dalam kasus saya. Ini memaksa css anak untuk dimuat setelah orang tua.

— mefiX

roberthuttinger apakah Anda pernah memecahkan masalah ini?

— gjnave

Jawaban TLDR: parameter pertama dari masing-masing wp_enqueue_style()tidak boleh dibiarkan sebagai 'gaya orangtua' dan 'gaya anak'. Mereka harus diganti namanya agar sesuai dengan nama tema induk dan anaknya.

Masalah

Jika Anda tidak mengganti nama parameter, Anda akan mendapatkan tema anak enqueued untuk kedua kalinya dapat menghasilkan aturan yang muncul dua kali di Firebug dan mengubah nilai-nilai pada yang salah tidak memiliki efek yang jelas, yang mungkin membuat Anda berpikir bahwa aturan anak Anda tidak t menimpa induk.

Harapannya

The Codex halaman di Themes anak benar mengatakan bahwa jika Anda melakukan apa-apa, CSS anak terkait secara otomatis. Memang, tapi hanya itu. Alur kerja CSS sedikit berbeda: Anda ingin mengganti, bukan mengganti. Ini logis (berfungsi seperti file tema lainnya) tetapi mereka dapat memiliki catatan.

Larutan

Ganti nama parameternya. Saya melakukannya seperti di bawah ini untuk mendapatkan (sedikit) kontrol lebih, perhatikan bahwa Anda harus mengganti dua puluhsixteen dan dua puluhsixteen-anak dengan nama-nama tema dan tema anak Anda:

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(Perhatikan juga bahwa Anda tidak bisa mengontrol urutan tautan dari beberapa (semua?) Plugin WP dalam tindakan ini. Mereka akan ditautkan setelah itu.)

Selamat berburu pemilih;)

— Henrik Erlandsson
sumber

Menurut saya ini adalah jawaban yang benar karena menggunakan kerangka kerja Wordpress dengan benar tanpa memaksakan apapun.

— kuasi

Anda dapat menggunakan pemilih yang lebih spesifik di CSS tema anak Anda sehingga lebih diutamakan.

Jadi alih-alih:

.wp-caption {
     latar belakang: # 2d2d2d! important;
}

Menggunakan:

.daftar .wp-caption {
     latar belakang: # 2d2d2d;
}

Anda juga harus memastikan untuk mengaktifkan lembar gaya tema anak Anda di file functions.php Anda jika Anda belum melakukannya.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

— Twodogstar
sumber