WordPress: Переключатель размера шрифта в постах
Опубликовано: 01.09.2018
Вы никогда не задумывались о том, насколько удовлетворительный на вашем сайте размер шрифта для чтения. Тем более, когда посещаемая аудитория может имеет возраст от 40 и более. Ведь в таких годах чаще встречаются люди с плохим зрением. И однозначно это отразится на неудобстве комфортного чтения материала, если шрифт будет слишком мал. Но, с другой стороны, если сразу установить большой размер шрифта, то, возможно, не всем подойдет такой вариант.
Шорткод-Toggle(переключатель).mp4
Поэтому мы пойдем на компромисс и решим это разногласие путем создания обычного переключателя размера шрифта. Таким образом, каждый сможет выбрать для себя тот размер, который больше подходит. Нам не понадобится установка плагинов, большие скрипты, а лишь малая часть и минимум действий.
Переключатель будет расположен внутри поста как раз там, где ему и место. Первым делом откройте файл single.php и найдите в нем функцию отвечающею за вывод контента. Выглядит она так:
Теперь необходимо ее обернуть в div блок:
<div id="zoomfont"><?php the_content(); ?></div>Дальше нужно определиться с местом где будут находиться три кнопки, которые отвечают за переключение шрифта (маленький, средний, большой). Для примера поместим сразу перед выше указанной функцией.
<ul id="switchfont"> <li><a href="javascript:doZoom(12)" title="Маленький">-А</a></li> <li><a href="javascript:doZoom(15)" title="Средний">А</a></li> <li><a href="javascript:doZoom(19)" title="Большой">А+</a></li> </ul>Числа – это размер шрифта в пикселях. Можете свободно менять на свой.
Следующим шагом идет оформление внешнего вида. Откройте файл style.css и прописываем стили:
#switchfont { display: table; font: 12px arial; list-style: outside none none; } #switchfont li { float: left; margin-right: 5px; } #switchfont li a { background: #e2485d; border-radius: 2px; color: #fff; display: block; min-width: 18px; padding: 2px; text-align: center; text-decoration: none; line-height: 18px; transition: all 0.5s ease 0s; border: 1px solid transparent; } #switchfont li a:hover, #switchfont li a:focus, #switchfont li a:active { background: #fff; color: #be2439; border: 1px solid #e2485d ; }Остался последний шаг – это подключение небольшого скрипта.
<script type="text/javascript"> function doZoom(size) { var zoom = document.all ? document.all['zoomfont'] : document.getElementById('zoomfont'); zoom.style.fontSize = size + 'px'; } </script>Посмотреть Demo
Этот вариант переключателя размера шрифта будет работать на любом сайте даже, если это не WordPress.