Почему Wordpress не позволяет браузеру работать с медиазапросами?

Question

[Сергей Золотарёв]

Добрый день!

С позавчерашнего дня сталкиваюсь с проблемой, которую я заметил первый раз при освоении WordPress - минусы поддержки медиазапросов в созданных мной CSS-файлах, если код был написан без ошибок;-)
В файле шаблона темы header.php с помощью тега link подключился к CSS-файлу вот таким образом:

<link rel="stylesheet" href="/wp-content/themes/betheme/css/new-header.css" type="text/css"/>

В этом файле распологаются обычные стили и медиазапросы и он был создан мной.

После подключения к шаблону и перезагрузки страниц сайта браузеры отлично работают только с обычными стилями. А почему WordPress не позволил браузерам работать с медиазапросами в созданных мной CSS-файлах.

Эта способность считается ли багом в WordPress и как такую проблему решить, если медиазапросы написаны правильно(DevTools с компиляторами не ругаются на мой CSS-файлах)?

Заранее спасибо!

Answer 1

[godsplane]

Ну потому что надо так

<link rel="stylesheet" href="<?php bloginfo('template_url')?>/css/new-header.css" type="text/css"/>

А лучше так в func.php

// правильный способ подключить стили и скрипты
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
// add_action('wp_print_styles', 'theme_name_scripts'); // можно использовать этот хук он более поздний
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

Comments

[Сергей Золотарёв]

Огромное заранее спасибо! Воспользовался вашим вариантом. Через некоторое время проверю его в деле

[Сергей Золотарёв]

godsplane , воспользовался вариантом из этого материала и там по сравнению с твоим примером более подробный пример был составлен...

[Сергей Золотарёв]

godsplane , и твой первый вариант из твоих примеров меня устроил но не до конца;-(

[godsplane]

Сергей Золотарёв, ну уж простите что не удовлетворил вашим требованиям

Answer 2

[mletov]

1) Откройте hrml код сгенеренной страницы и убедитесь, что ваш css код действительно подключен, и что он подключен после стилей вордпресса
2) Если код подключен, что тыкайте хромовским инспектором и смотрите, что перебивает ваши стили, возможно, это делают ткакие-то стили из плагинов вордпресса для морды сайта.

Comments

[Сергей Золотарёв]

По сгенерированному коду сам css был действительно подключен. Но DevTools показывает загруженные обычные стили за исключением медиазапросов... В этом и проблема.
В самой проблемы замешаны WP Total Cache+Minify;-(

[Сергей Золотарёв]

mletov, я сперва предпологал, что WP Total Cache+Minify - источники самой проблемы, это правда? Если да, то стоит ли от них отказываться(вчера об этом шла мысль)?

[Kovalsky]

Сергей Золотарёв, смотрите, варианта всего два: либо вы написали неправильные медиа которые не применяются, либо вы как-то неправильно настроили wp total cache, который банально закешировал старую версию стилей. В обоих случаях проблема решается дебагом длительностью максимум в минуту: для первого случая берете и смотрите какой файл получает клиент, проверяете его актуальность и корректность стилей; для второго случая просто сбрасываете кеш

[mletov]

Сергей Золотарёв, попробуйте без DevTools, просто по старинке открыть исходный код страницы и перейти на ваш css файл. Есть в нем media query? Если есть - отлаживате верстку, если нет - попробуйте отключить минификацию или посмотреть ее настройки.

Вот у человека похожая проблема с минификацией
https://wordpress.org/support/topic/css-minificati...
Посмотрите, есть там опция “Aggregate all linked CSS-files” ?

[Сергей Золотарёв]

Kovalsky, я настраивал точно WP Total Cache и браузер загрузил тег с CSS, не работая со своиствами и их значениями(особенно в Media).
Вот так выглядят медиазапросы CSS, где Wordpress не даёт их читать браузерам:

@media all and (min-width: 320px) and (max-width: 1280px){
    .channels{
        float:right;
    }
    .channels > span{
        display:none;
    }
}
@media all and (min-width: 320px) and (min-width: 400px){
    section.right{
        width:106%;
        margin-right:-16%;
    }
    #update-action{
        padding-right:16%;
    }
    section.left{
        margin-left:-7%;
    }
    #Action_bar .wpml-languages{
        margin-left:-3px;
    }
    .channels{
        margin-right:6%;
    }
}
@media all and (min-width: 400px) and (min-width: 480px){
    section.right{
        width:106%;
        margin-right:-35%;
    }
    #update-action{
        padding-right:30%;
    }
    section.left{
        margin-left:-23%;
    }
    #Action_bar  .wpml-languages{
        margin-left:-3px;
    }
    .channels{
        margin-right:29%;
    }
}
@media all and (min-width: 480px) and (min-width: 540px){
    section.right{
        width:106%;
        margin-right:-28%;
    }
    #update-action{
        padding-right:30%;
    }
    section.left{
        margin-left:-15%;
    }
    #Action_bar .wpml-languages{
        margin-left:-3px;
    }
    .channels{
        margin-right:6%;
    }
}
@media all and (min-width: 540px) and (min-width: 720px){
    section.right{
        width:106%;
        margin-right:-26%;
    }
    #update-action{
        padding-right:30%;
    }
    section.left{
        margin-left:-15%;
    }
    #Action_bar .wpml-languages{
        margin-left:-3px;
    }
    .channels{
        margin-right:6%;
    }
}
@media all and (min-width: 720px) and (min-width: 960px){
    section.right{
        width:106%;
        margin-right:-48%;
    }
    #update-action{
        padding-right:45%;
    }
    section.left{
        margin-left:-41%;
    }
    #Action_bar  .wpml-languages{
        margin-left:-3px;
    }
    .channels{
        margin-right:6%;
    }
}
@media all and (min-width: 960px) and (min-width: 1280px){
    section.right{
        width:106%;
        margin-right:-7%;
    }
    #update-action{
        padding-right:45%;
    }
    section.left{
        margin-left:1%;
    }
    #Action_bar .wpml-languages{
        margin-left:-3px;
    }
    .channels{
        margin-right:6%;
    }
}
@media all and (min-width: 320px) and (max-width: 720px){
     .desktop-menu{
        margin-left:0;
        text-align:center;
    }
}
@media all and (min-width: 720px) and (max-width: 960px){
     .desktop-menu{
        margin-left:1%;
        width:100%;
        margin-top:13%;
        text-align:center;
    }
     .information-right{
        width:62%;
        margin-top:2%;
    }
}
@media all and (min-width:960px) and (max-width: 1280px){
     .desktop-menu{
        margin-left:1%;
        width:77%;
        margin-top:8%;
    }
     .information-right{
        width:22%;
        margin-top:2%;
        position:realtive;
        left:5%;
    }
}
@media all and (min-width: 320px) and (max-width: 400px){
     .information-right{
        padding-bottom:10%;
        margin-right:-3%;
        font-size:133%;
    }
     .information-right > form{
        margin-top:5%;
    }
     .information-right > form #findquery{
        font-size:155%;
        background-size:12%;
        text-indent:16%;
    }
}
@media all and (min-width: 400px) and (max-width: 480px){
     .information-right{
        padding-bottom:10%;
        margin-top:5%;
        margin-right:-11%;
        font-size:145%;
    }
     .information-right > .contacts .phone{
        padding-bottom:5%;
    }
     .information-right > form{
        margin-top:5%;
    }
     .information-right > form #findquery{
        font-size:155%;
        background-size:10%;
        text-indent:12%;
    }
}
@media all and (min-width: 480px) and (max-width: 540px){
     .information-right{
        padding-bottom:10%;
        margin-top:5%;
        margin-right:3%;
        font-size:145%;
    }
     .information-right > .contacts .phone{
        padding-bottom:5%;
    }
     .information-right > form{
        margin-top:5%;
    }
     .information-right > form #findquery{
        font-size:155%;
        background-size:7%;
        text-indent:10%;
    }
}
@media all and (min-width: 540px) and (max-width: 720px){
     .information-right{
        padding-bottom:10%;
        margin-top:5%;
        margin-right:-4%;
        font-size:145%;
    }
     .information-right > .contacts .phone{
        padding-bottom:5%;
    }
     .information-right > form{
        margin-top:5%;
    }
     .information-right > form #findquery{
        font-size:155%;
        background-size:7%;
        text-indent:10%;
    }
}
@media all and (min-width: 720px) and (max-width: 960px){
     .information-right{
        padding-bottom:10%;
        margin-top:5%;
        margin-right:-25%;
        font-size:160%;
    }
     .information-right > .contacts .phone{
        padding-bottom:5%;
    }
     .information-right > form{
        margin-top:5%;
    }
     .information-right > form #findquery{
        font-size:155%;
        background-size:7%;
        text-indent:10%;
    }
}
@media all and (min-width: 960px) and (max-width: 1280px){
     .information-right{
        padding-bottom:10%;
        margin-top:5%;
        margin-right:3%;
        font-size:145%;
    }
     .information-right > .contacts .phone{
        padding-bottom:5%;
    }
     .information-right > form{
        margin-top:5%;
    }
     .information-right > form #findquery{
        font-size:155%;
        background-size:7%;
        text-indent:10%;
    }
}
@media all and (min-width: 1280px) and (max-width: 1400px){
     .information-right{
        margin-top:1%;
        margin-right:-8%;
        font-size:130%;
    }
     .information-right > .contacts .phone{
        padding-bottom:5%;
    }
     .information-right > form{
        margin-top:5%;
    }
     .information-right > form #findquery{
        font-size:155%;
        background-size:7%;
        text-indent:10%;
    }
}

[Сергей Золотарёв]

mletov и Kovalsky , ради изучения истории вопроса посмотрите этот сайт с его исходником в браузере, где я сталкиваюсь с решением данной проблемы. CSS был подключен, но сам WordPress не дает CSS-коду поддерживать всё это(особенно медиазапросы)...

[Kovalsky]

Сергей Золотарёв, "Wordpress не даёт их читать браузерам" - как бы вам ни хотелось обвинить в проблеме вордпресс, на самом деле он абсолютно не в состоянии что-то запретить браузеру, просто потому что у него нет никакой технической возможности. Максимум - кеш. Сбросьте весь кеш. Речь не о браузерном кеше,

Не, мне эти стили не нужно показывать. Нужно 1) убедиться что клиент получает именно эти стили, то есть зайти в консоль и увидеть их там либо в правилах, либо в исходниках, 2) убедиться что стили применяются к нужным элементам, это тоже делается в инспекторе

[Kovalsky]

Сергей Золотарёв, сайт посмотрел, но одним глазом, потому что там сатана происходит такая, что о каком-то более менее длительном анализе речи быть не может - половина важных скриптов не грузится, всё завалено вызовами дебаггера, и всё такое. Если речь о стилях в файле fms-bmc.ru/wp-content/themes/betheme/css/new-header.css , то можете перейти по ссылке и убедиться сами - стили в порядке, ваши медиа запросы там есть. Ошибка либо в самих стилях (например в селекторах), либо в условиях медиа. В любом случае, думаю разбираться с проблемой будет гораздо проще если вы устраните остальные ошибки по сайту - незагружающиеся скрипты и вызовы дебаггера например

Answer 3

[shitprog]

Для работы медиа запросов нужен мета тег

<meta name="viewport" content="width=device-width, initial-scale=1">

Comments

[shitprog]

а на счет верного способа подключения стилей/скриптов вам дали ответ выше