Здавствуйте!Мне нужно изменить плагин Xmas Lights для Wordpress,так чтобы при разрешении экрана меньше 480px элемент(герлянда) не показывалась на экране.Составил функцию,не знаю правильно или нет.Теперь не знаю куда её вставлять.У меня адаптивный дизайн сайта и при просмотре на телефоне сайт выглядит плохо.Помогите пожалуста.Заранее спасибо
Сам плагин:
function xmas_lights() {
?>
<!-- xmas_lights [ start ] -->
<script type="text/javascript">
document.write("<div id='lights' style='position:absolute;width:956px;height:180px; top:-20px;background:url(<?php echo plugins_url() . '/xmas-lights/'; ?>light.png) no-repeat;left:50%;margin-left:-478px'></div>")
setInterval( "xmasLights();", 1000 );
var lights = "active";
function xmasLights(){
var img = document.getElementById('lights');
if(lights == "active"){
img.style.backgroundPosition = "0 -180px";
lights = "inactive";
}else{
img.style.backgroundPosition = "";
lights = "active";
}
}
</script>
<!-- xmas_lights [ end ] -->
<?php
}
//////////////////
/////////////////
add_action('wp_footer','xmas_lights');
?>
То что я хочу вставить:
function showHide('lights')
var <?php echo plugins_url() . '/xmas-lights/'; ?>light.png = document.getElementById('lights');
var mql = window.matchMedia('all and (max-width: 480px)');
if (mql.matches) {
<?php echo plugins_url() . '/xmas-lights/'; ?>light.png.style.display = "none";// размер окна 480px или меньше
} else {
<?php echo plugins_url() . '/xmas-lights/'; ?>light.png.style.display = "block";// нет, размер окна более 480px
}