Можно создать тег стиля в PHP? (WordPress)
Я хочу добавить CSS, который зависит от некоторых переменных PHP в коде, который генерируется до цикла WP_Query. В основном я хочу использовать uniqid и применить идентификатор к некоторым элементам, а затем добавить некоторые правила медиа-запросов для этих элементов, возможно, как <style> теги. Я пробовал следующее, но я не уверен, если теги стиля, которые помещены в <body> игнорируются или нет, так как это не работает.
$id = uniqid();
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
Тег помещается в DOM, но он игнорируется. Так что я либо ищу способ поместить CSS, который генерируется в шаблоне, в <head>, Или любой другой метод добавления CSS, кроме встроенного в сам элемент, поскольку я не могу использовать медиазапросы таким образом. Просто чтобы быть понятным, приведенный выше код помещается в цикл, так как мне нужны мета-значения из поста для генерации CSS.
Или это просто глупо?
Решение
размещение <style> теги в пределах <body> вашего документа является технически недействительным, но на практике будет работать практически везде.
Я подозреваю, что проблема, с которой вы столкнулись: возвращаемое значение uniqid() может начинаться с цифры и CSS идентификаторов не может начинаться с цифр. Итак, если вы сгенерируете идентификатор типа «4b3403665fea6», ваш CSS может смотреть хорошо, но это будет проигнорировано.
Вы можете исправить это, передав префикс к вашему звонку uniqid(), вот так:
$id = uniqid('id-');
…чтобы $id будет значение типа «id-4b3403665fea6».
Образец, демонстрирующий в теле <style>
<head>
<style>
#id-4b3403665fea6 {
background: blue;
}
</style>
</head>
<body>
<h1>Test</h1>
<div id='id-4b3403665fea6'>Style me!</div>
<style>
#id-4b3403665fea6 {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
</body>Другие решения
Надеюсь, что это поможет вам.
<?php
$id = uniqid('cnt-');
?>
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
<div id="<?php echo $id; ?>">Test Content</div>
detector