bagaimana cara mengantre Anak saya stylesheet / s * setelah * setiap stylesheet / pernyataan Orang Tua?

11

Saya menggunakan tema Oenologi yang ditulis dengan baik oleh Chip Bennett sebagai Tema Orang Tua untuk Anak saya sendiri.

Dalam proses pengembangan saya, saya telah menemukan bahwa ada beberapa tantangan bagi orang-orang yang menulis tema Anak ketika datang ke mengendalikan gaya.

Saya baru saja menemukan bahwa file style.css utama saya dimuat sebelum setiap tautan atau pernyataan stylesheet lainnya di <head>, dan ini menjelaskan mengapa saya mengalami kesulitan menimpa beberapa gaya Induk.

studi lebih lanjut tentang masalah ini menunjukkan bahwa berbagai gaya dan lembar Induk dapat di-antre di <head> di tiga tempat; add_action('wp_print_styles',,, add_action('wp_enqueue_scripts',lalu add_action('wp_head',.

untuk menjaga hal-hal sederhana, saya berencana untuk membuat dua lembar gaya. sheet 'style.css' utama pertama hanya akan mencakup @import url()perintah, yang diperlukan untuk memuat stylesheet utama Oenology.

stylesheet kedua akan berisi aturan Anak saya. untuk memastikan bahwa itu dimuat setelah semua aturan lain, saya akan mengantri menggunakan add_action( 'wp_head',.

apakah ini masuk akal? atau adakah cara yang lebih baik (lebih benar) untuk melakukannya?

btw, apakah ada yang tahu apa artinya '/parent-theme/style.css ? MRPreviewRefresh = 723 ' artinya?

Memperbarui

wp_enqueue_style () tampaknya tidak berfungsi di wp_head ().

bersorak,
Gregory

child-theme css parent-theme Gregory
sumber

Jawaban:

21

Hanya FYI, pertanyaan ini mungkin berbatasan dengan terlalu terlokalisasi , karena khusus untuk Tema Oenologi.

Yang mengatakan, di sinilah saya pikir Anda mengalami masalah: Oenologi enqueues dua style sheet:

  1. style.css, langsung di kepala dokumen (jadi sebelum wp_head() dipecat)

  2. {varietal}.css, di wp_enqueue_scripts, dengan prioritas 11, di functions/dynamic-css.php:

    /**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define varietal stylesheet
global $oenology_options;
$oenology_options = oenology_get_options();
$varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
$varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';

wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

Lembar gaya variasi, yang menerapkan "kulit", enqueues pada prioritas 11, untuk memastikan bahwa lembar dasar gaya style.css, memuat pertama , dan lembar gaya varietas memuat kedua , untuk menyebabkan kaskade yang benar.

Jadi, jika Anda perlu mengganti stylesheet varietal , cukup enqueue stylesheet kedua Anda setelah stylesheet varietal; yaitu dengan prioritas setidaknya 12atau lebih besar.

Edit

Untuk memberikan jawaban yang lebih umum, untuk pertanyaan yang lebih umum:

Untuk mengganti enqueue gaya Parent Theme, Anda perlu mengetahui dua hal:

  1. The tindakan kait di mana stylesheet yang enqueued
  2. The prioritas di mana callback ditambahkan ke hook

Fungsi enqueue ( wp_enqueue_script()/ wp_enqueue_style()) dapat dieksekusi dengan baik di mana saja antara inithook dan wp_print_scripts/ wp_print_styleshooks. ( Kait semantik yang benar untuk menjalankan wp_enqueue_*()fungsi saat ini wp_enqueue_scripts.) Daftar ini mencakup tindakan berikut (antara lain; ini hanya tersangka biasa):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

(Perhatikan bahwa wp_enqueue_scripts, wp_print_styles, dan wp_print_scripts semua api dalam dari wp_head, pada prioritas tertentu .

Jadi, untuk mengganti stylesheet Parent-Theme, Anda perlu melakukan salah satu dari yang berikut:

  • De-enqueue the Parent-Theme stylesheet, viawp_dequeue_style( $handle )
  • Hapus panggilan balik Tema Orang Tua yang menonjolkan gaya, melaluiremove_action( $hook, $callback )

  • Gunakan kaskade CSS untuk mengganti stylesheet Parent-Theme, dengan mengaitkan wp_enqueue_style()panggilan stylesheet Tema-Anak Anda ke hook yang sama dengan prioritas lebih rendah atau ke hook selanjutnya .

    Untuk opsi terakhir ini, jika Tema Induk menggunakan:

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ... maka Tema Anak akan menggunakan:

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
Chip Bennett
sumber
Terima kasih, Chip. Saya memang bisa menggunakan wp_enqueue_scripts dan ordinal tinggi untuk membuat stylesheet Anak saya dimuat terakhir. Namun masih ada 3 pernyataan gaya berbeda setelah pernyataan stylesheet Anak saya. 2 di antaranya adalah output oleh WP itu sendiri !!!, dan 1 adalah output oleh Oenology melalui fungsi add_custom_image_header () wp.
Gregory
pernyataan gaya body.custom-background adalah output oleh WP itu sendiri, tetapi tampaknya saya dapat menentukan warna latar belakang kustom dengan mendefinisikan 'BACKGROUND_COLOR'. aneh bahwa aturan css dasar perlu diatur melalui konstanta WP kustom.
Gregory
1
komentar terakhir Chip. pertanyaan ini tidak terlalu terlokalisasi. banyak tema akan menggunakan semua pengait yang tersedia untuk enqueue atau gaya cetak, dan pengembang tema Anak perlu tahu cara mengganti gaya tersebut tanpa harus menonaktifkannya. Bersulang.
Gregory
Masalah yang saya lihat dengan ini adalah bahwa child_theme_enqueue_style akan memuat gaya anak dengan prioritas yang lebih tinggi, lebih jauh ke bawah wp_head TETAPI itu akan menggandakan stylesheet anak - Wordpress akan secara otomatis memuat stylesheet anak pada prioritas normal dan kemudian, muat lagi, lebih jauh ke bawah dengan prioritas baru. Sementara itu mencapai hasil mengesampingkan semua lembar gaya lainnya, itu menciptakan lembar gaya duplikat di halaman.
php-b-grader
2

satu-satunya cara untuk menjamin bahwa gaya saya memiliki keputusan akhir dalam kaskade adalah memasukkannya di akhir <head> melalui kait wp_head. wp_enqueue tidak berfungsi di dalam wp_head jadi saya harus menggaungkan tautan secara langsung:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

akhirnya, saya dapat mengatur gaya saya dengan relatif mudah, dan tanpa menggunakan tingkat spesifisitas tinggi, atau aturan penting yang seharusnya hanya digunakan sebagai upaya terakhir.

WP membutuhkan sistem enqueuing gaya yang lebih baik. setiap gaya, apakah tautan file atau gaya inline, harus dilewatkan melalui kait yang sama yang memungkinkan Prioritas untuk menentukan pesanan mereka. opsional untuk keperluan debugging, akan berguna jika hook juga menampilkan nilai Prioritas dari setiap gaya mungkin dalam bentuk komentar.

Memperbarui

Saya telah dapat mempertahankan kontrol gaya dalam tema Anak saya sambil mempertahankan kaskade asli tema Orangtua (yang menggunakan lembar gaya utama, sub lembar gaya, dan beberapa pernyataan gaya) dengan membagi lembar gaya saya menjadi dua seperti yang dijelaskan dalam pertanyaan. Saya tidak lagi menggunakan kait wp_head (), sebagai gantinya menggunakan kait wp_enqueue_scripts () yang tepat dan standar dengan ordinal tinggi untuk memastikan bahwa stylesheet saya dimuat terakhir.

stylesheet default tema Anak saya:

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

fungsi untuk mengubah stylesheet utama saya:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

Namun ada beberapa pernyataan gaya yang dihasilkan WP (yaitu, bukan tema induk) yang dinyatakan setelah stylesheet saya, dan saya harus melihat menggunakan aturan css dengan spesifisitas tinggi untuk mengganti aturan yang menjadi perhatian saya, atau mencari kait untuk menonaktifkannya, khususnya aturan body.custom-background.

terima kasih atas komentar anda.

bersorak,
Gregory

Gregory
sumber
1

Anda harus selalu menggunakan wp_enqueue_style()untuk memuat stylesheet Anda dan bahwa fungsi harus dihubungkan ke kait wp_enqueue_scripts dengan run di kepala . Saya menduga Anda tidak mengaitkannya di sana, karena itu masalah Anda. (Pada WP 3.3, jika wp_enqueue_style()terhubung ke hal lain, itu melempar Pemberitahuan dengan WP_Debug dihidupkan).

mrwweb
sumber
@ Jawaban Chip lebih baik daripada jawaban saya dan dia bisa dibilang lebih berkualitas untuk membahas tema Oenologi;) Apakah ini kasus di mana saya harus menghapus jawaban saya walaupun itu benar?
mrwweb
Tidak, saya akan meninggalkan jawaban Anda. Itu benar, dan membahas bagian tertentu dari pertanyaan.
Chip Bennett