В Wordpress, Получение URL-адреса сайта внутри таблицы стилей

Я делаю отзывчивую тему для сайта. Мне нужно изменить фоновое изображение div, когда размер окна меньше 420 пикселей.В Wordpress, Получение URL-адреса сайта внутри таблицы стилей

мне нужно, чтобы иметь возможность ссылаться на сайт URL, чтобы установить фоновое изображение в первую очередь, поэтому изначально я использовал PHP тег и встроенный стиль, как это:

<div style="background-image: url('<?php echo bloginfo('template_url') . '/images/home.jpg'; ?>');"></div>

Но мне нужно измените это фоновое изображение, когда окно станет меньше.

Все другие отзывчивым CSS происходит в этом медиа-запрос, внутри style.css:

@media (max-width: 420px){ 
    div { 

    } 
}

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

<style> 
    @media (max-width: 420px){ 
    .home-background { 
     background-image: url('<?php echo bloginfo('template_url') . '/images/home_page/bg-mobile.jpg'; ?>'); 
    } 
    } 
</style>

Или я мог бы использовать JavaScript, но я хочу, чтобы попытаться избежать этого, как это кажется Hacky мне ...

Как я могу ссылаться на URL сайта в моем style.css так что я могу изменить фоновое изображение на лету

источник

2013-09-08 Joshua Soileau

Вы можете просто скопировать URL, что это выход на PHP и вставить его в файл CSS? – thgaskell

Не можете ли вы использовать относительные пути для своих URL-адресов? с/в качестве корневого пути – simdrouin

вы можете использовать wp_head в ction hook для эха вашего стиля в теге <head>. Вы должны установить правило !important, потому что вам нужно переопределить значение по умолчанию. Используя этот грант крюка вы условно установить, если ваше правило будет или не печатаетесь в теге

В вашем functions.php

add_action('wp_head', 'so18685496_print_my_style'); 
function so18685496_print_my_style(){ 
    //we are on homepage? this is an example you can strip the if statement 
    if(is_home()){ ?> 
    <style> 
     @media (max-width: 420px){ 
      .home-background { 
      background-image: url("<?php echo get_stylesheet_directory_uri(); ?>/images/home_page/bg-mobile.jpg")!important; 
      } 
     } 
    </style> 

    <?php } 
}

Надеется, что это помогает!

источник

2013-09-08 16:00:41 iEmanuele

вы пробовали удаление слэш перед

<style> 
    @media (max-width: 420px){ 
    .home-background { 
     background-image: url('images/home_page/bg-mobile.jpg'); 
    } 
    } 
</style>

источник

2013-09-08 15:48:23

Вы можете добавить это также в значение по умолчанию style.css. Это будет работать.

@media (max-width: 420px){ 
.home-background { 
     background-image: url('images/home_page/bg-mobile.jpg'); 
    } 
}

Если это не добавляет !important

источник

2013-09-08 16:42:53

В Wordpress, Получение URL-адреса сайта внутри таблицы стилей

ответ

Смежные вопросы