Menggunakan wp_add_inline_style tanpa stylesheet


18

Saya perlu menambahkan gaya inline khusus ke tajuk tema khusus yang saya buat. Saya telah menemukan wp_add_inline_style()fungsi, yang bekerja tetapi tidak benar-benar cocok untuk saya karena itu tergantung pada stylesheet tertentu. Saya perlu menambahkan gaya inline di akhir tag kepala tanpa ketergantungan stylesheet.

Saya sudah mencoba untuk mengatur stylesheet tema atau yang tidak ada. Dalam kedua kasus, ini berfungsi tetapi ini sedikit hack IMO kotor (baik memuat stylesheet tema dua kali atau merujuk ke file hantu ...). Apakah ada cara yang tepat untuk menambahkan style inline di kepala tanpa bergantung pada stylesheet?

Tentu saja, saya bisa menambahkannya langsung di file header.php tetapi saya ingin menghindari ini.

Jawaban:


24

Anda hanya perlu menambahkan gaya langsung ke kepala halaman. Cara terbaik untuk melakukannya adalah dengan menggunakan kait tindakan 'wp_head', dengan asumsi Anda menggunakan tema yang memiliki kait. Seperti itu:

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

Periksa kodeks WP untuk mempelajari lebih lanjut tentang kait tindakan.


Tidak masalah! Senang saya bisa membantu.
SkyShab

Jika (seperti saya) Anda ingin menambahkan CSS inline khusus ke halaman dasbor, Anda dapat menggunakan admin_headtindakan.
Orang Brasil itu

16

Anda bisa menggunakan pegangan "dummy":

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

Saya sangat menyukai solusi ini karena gaya saya memiliki pegangan dan enqueued seolah-olah itu termasuk dari file .css.
dev_masta

Menggunakan false sebagai sumber wp_register_style juga tidak diizinkan per dokumentasi codex.wordpress.org/Function_Reference/…
16patsle

3

Tema Anda pasti memiliki stylesheet default (jika tidak, tema ini tidak akan dimuat sebagai tema). Cukup gunakan lembar ini sebagai penangan untuk inline CSS Anda. Contohnya dapat ditemukan di functions.php dari tema TwentyFifteen (kode dilewati untuk singkatnya):

function twentyfifteen_scripts() {
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}

1
OP secara khusus meminta metode selain menggunakan wp_add_inline_style (). Kedua metode ini berfungsi, dan saya belum menemukan alasan kuat untuk menggunakan wp_add_inline_style (). Jika Anda mengetahui alasannya, saya ingin mengetahuinya.
SkyShab

Solusi Anda berfungsi, tetapi masih "retas" menurut sesuatu yang pernah saya dengar dari seseorang dari tim WP (jika saya tidak salah); bukan pendapat saya . Saya pikir OP berpikir tidak ada cara untuk melakukan ini tanpa memuat style sheet dua kali atau menggunakan hook hantu. Lagi pula, jika mereka tidak membuat plugin, selalu ada style sheet tema untuk diikuti. Saya juga mengedit jawaban saya karena solusi Anda didokumentasikan dalam Codex. :)
Casper

Saya bermain-main dengan wp_add_inline_style (), dan inilah yang saya temukan. Manfaat melampirkan gaya ke lembar gaya adalah bahwa jika mendapat dequeued, gaya tidak akan dicetak. Tetapi metode mana pun mencetaknya di kepala. Jadi katakanlah Anda adalah pengembang plugin, dan gaya Anda dicetak di kepala. Ini tidak ada hubungannya dengan gaya tema, dan jadi jika tema anak mengeluarkan gaya tema utama untuk digunakan sendiri, sekarang gaya plugin Anda tidak menjadi output. Jadi, OP mungkin telah menentukan bagian permintaan itu untuk alasan ini.
SkyShab
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.