Изменить содержимое страницы медиа-запросами (WordPress)

Question

У меня есть сайт wordpress с информацией на правой боковой панели, и эта информация отличается на каждой странице. В основном содержании у меня есть информационный блок, который говорит; «Для получения дополнительной информации смотрите направо», эта информация на каждой странице отличается друг от друга. Я хочу, чтобы этот информационный блок изменился с помощью @media в CSS, поэтому, когда вы находитесь на мобильном телефоне, он скажет: «Посмотри вниз», а не «Посмотри правду».

Я пытался сделать это с помощью плагина wordpress (свистки) и коротких кодов в основном контенте. Но проблема в том, что .. Это не я, кто собирается поддерживать сайт, и мне нужно, чтобы это было легко использовать!

Я думал об использовании «p class =« mobile »и« p class = «desktop» в редакторе страниц, но я сомневаюсь, что человек, который будет отвечать за сайт, не хотел бы и не понимал он (тот, кто будет отвечать за сайт, может быть новым для Wordpress и, вероятно, не имеет опыта программирования).

Кто-нибудь знает о плагине для wordpress для этого? или простой способ сделать это без кодирования?

Пожалуйста, помогите! У меня около 100 страниц, и я не хочу, чтобы 200 Whistles сделали эту работу !!!

Answer 1

Вы можете достичь этого с помощью медиа-запросов, которые изменяют свойство css content на теге span. Вы просто устанавливаете точку останова медиа-запроса на ширину экрана, перемещая боковую панель. Возможно, вы даже сможете работать с этим плагином (я не эксперт по WordPress).

.side-bar-position:after { 
 
    content: "on the right"; 
 
} 
 
@media (max-width: 400px) { 
 
    .side-bar-position:after { 
 
    content: "below"; 
 
    } 
 
}

<p> 
 
    See block <span class="side-bar-position"></span>. 
 
</p>

JSFiddle Demo