WordPress: Переключатель размера шрифта в постах

Без плагина WordSmall

Вы никогда не задумывались о том, насколько удовлетворительный на вашем сайте размер шрифта для чтения. Тем более, когда посещаемая аудитория может имеет возраст от 40 и более. Ведь в таких годах чаще встречаются люди с плохим зрением. И однозначно это отразится на неудобстве комфортного чтения материала, если шрифт будет слишком мал. Но, с другой стороны, если сразу установить большой размер шрифта, то, возможно, не всем подойдет такой вариант.

Поэтому мы пойдем на компромисс и решим это разногласие путем создания обычного переключателя размера шрифта. Таким образом, каждый сможет выбрать для себя тот размер, который больше подходит. Нам не понадобится установка плагинов, большие скрипты, а лишь малая часть и минимум действий.

Переключатель будет расположен внутри поста как раз там, где ему и место. Первым делом откройте файл single.php и найдите в нем функцию отвечающею за вывод контента. Выглядит она так:

<?php the_content(); ?>

Теперь необходимо ее обернуть в 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.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code