Я хочу добавить 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>Обратите внимание, что <div> имеет красный фон, а не синий, как указано в стиле <head>.
Ну конечно! Надо было подумать об этом. Спасибо! Я попробую и посмотрю, работает ли.
Надеюсь, что это поможет вам.
<?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>
Идентификаторы CSS не могут начинаться с цифр ... w3.org/TR/CSS21/syndata.html#value-def-identifier