Могу ли я загрузить другой шаблон с помощью медиа-запроса?
У меня есть сайт WordPress, и я настраиваю CSS для отзывчивости на разных размерах экрана. Я изменил шаблон, который шел с моей темой для постов определенного типа. Я хотел бы использовать оригинальный шаблон на экранах меньшего размера. Любые предложения о том, как я мог бы пойти по этому поводу? Спасибо!
Решение
Медиа-запросы вычисляются браузером, а шаблоны — сервером, поэтому прямого способа сделать это нет.
Тем не менее, общий способ заключается в том, чтобы включать различные шаблоны на стороне сервера и использовать медиазапросы, чтобы отображать только тот, который вы хотите.
Вы бы смотрели на что-то вроде этого:
<div class="mobile">
<?php get_template_part("content", "mobile"); ?>
</div>
<div class="desktop">
<?php get_template_part("content", "desktop"); ?>
</div>
И тогда в вашем CSS:
.desktop { display: none; }
@media (min-width: 800px) {
.mobile { display: none; }
.desktop { display: block; }
}
Это скроет ваш шаблон рабочего стола на мобильном телефоне, и наоборот. Он загрузит ваш шаблон рабочего стола из content-desktop.php и ваш мобильный от content-mobile.php,
Стоит отметить, что, хотя это быстро и легко, обычно это не лучший способ сделать адаптивный веб-сайт, потому что вы будете загружать свой контент дважды, и вам будет немного сложнее поддерживать его в дальнейшем. Тем не менее, это, безусловно, хороший способ начать делать вещи отзывчивыми.
Другие решения
Других решений пока нет …