Стилизация нескольких ссылок в php

Question

У меня есть php, который работает на моем сайте для стилизации ссылки. Однако, когда я пытаюсь использовать тот же код для стилизации других ссылок, это нарушает мой сайт.

Например, у меня есть:

add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.events-dashboard1 {background-color: green;}
</style>';
}

Это работает, но когда я пытаюсь продублировать примерно так:

add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.post-job1.post-event1 {background-color: #e5f25c; color: white
!important;}
</style>';
}

Сайт ломается. Я исследовал и обнаружил, что использование нескольких таких классов не работает. Но если я репостирую тот же самый php-код только с 1 классом, он ломается. Попробовал изменить формат - ничего.

Html:

<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp- 
menu-open menu-top menu-top-first menu-icon-dashboard menu-top. 
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item 
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu- 
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu- 
arrow"><div></div>
</div><div class='wp-menu-image dashicons-before 
dashicons-dashboard'><br /></div>
<div class='wp-menu- 
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria- 
hidden='true'>Dashboard</li>
            <li class="wp-first-item current">.
                <a href='index.php' class="wp-first-item current" 
aria- current="page">Home</a></li>
            <li><a href='update-core.php'>Updates 
<span class='update-plugins count-37'><span class='update. 
count'>37</span></span></a></li>
            <li class="jobs-dashboard1"><a 
href='https://adsler.co.uk/jobs-dashboard/' class="jobs. 
dashboard1">Jobs</a></li>
            <li class="post-job1"><a 
href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A 
Job</a></li>
            <li class="events-dashboard1"><a 
 href='https://adsler.co.uk/your-events-dashboard/' class="events. 
 dashboard1">Events</a></li>
            <li class="post-event1"><a 
href='https://adsler.co.uk/post-an-event/' class="post-event1">Post 
An Event</a></li>
        </ul>
    </li>

Так что теперь у меня есть четыре ссылки, две из которых я не могу стилизовать, две другие - стили, описанные выше и следующим кодом. По одному на каждого:

function custom_admin_css() { echo ' <style> .jobs- 
dashboard1 { background-color: green; } </style>'; } 
add_action('admin_head', 'custom_admin_css');

Answer 1

Просто поместите все ваши стили под одним тегом. Похоже, вы пытаетесь использовать одну и ту же функцию дважды, чего вы не можете сделать.

add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.events-dashboard1 {background-color: green;}
.post-job1, .post-event1 {background-color: #e5f25c; color: white
!important;}

/* Any other CSS you have put here */

</style>';
}

В конечном итоге вам нужно создать файл CSS. Поместите свой CSS в это. Тогда поставьте в очередь. Как это.

админ-styles.css

.events-dashboard1 {background-color: green;}
.post-job1, .post-event1 {background-color: #e5f25c; color: white
!important;}

/* the rest of your CSS */

поставить файл в очередь

add_action('admin_head', 'my_custom_css');
function my_custom_css() {
  wp_enqueue_style('admin-css', '/path/to/file/admin-styles.css');
}