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

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.

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

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