Cпойлер в WordPress на CSS

В этой записи я расскажу как сделать спойлер в WordPress на чистом HTML и CSS. Предпосылкой для написания этой статьи стало желание полностью отказаться от использования библиотеки jQuery, которая по умолчанию используется в стандартной теме WordPress Twenty Fifteen.

Стандартная тема WordPress Twenty Fifteen использует библиотеку jQuery для отображения блока сайдбара в мобильной версии сайта. Функционал не настолько сложный, чтобы ради него подключать jQuery. Поэтому, было принято решение полностью выпилить jQuery из содержимого шаблона.

Начать я решил с самого простого. Ранее спойлер на моем блоге работал на JavaScript, который требовал для своей работы наличие подключенной библиотеки jQuery. Представляю вашему вниманию небольшую функцию, которая добавляет возможность использовать спойлер в WordPress.

Текст спойлера

Для установки откройте файл functions.php вашей темы и добавьте в него следующий код:

function showhide_shortcode ($atts, $content = null) {
    $attributes = shortcode_atts (array('text' => 'Спойлер'), $atts );

    $output = '<span class="spoiler"> 
        <label for="spoiler">' . $attributes['text'] . '</label>
        <input type="checkbox" id="spoiler">';
    $output .= '<div class="spoiler_text">'. do_shortcode( $content ) .'</div>
        </span>';

return $output;
}
add_shortcode ('spoiler', 'showhide_shortcode');

Чтобы добавить спойлер в WordPress используйте шорткод [spоiler] для области, которую хотите скрыть. Через параметр text можно изменить текст, который будет отображаться в заголовке спойлера.

[spоiler text="Заголовок спойлера"]Текст[/spоiler]

За отображение данных под спойлером добавьте в файле style.css:

.spoiler label {
    color: #0060a0;
    border-bottom: 1px dashed rgba(0,96,160,.2);
    cursor:pointer;
}
.spoiler input {
    display: none;
}
.spoiler_text {
    display: none;
}
.spoiler input[type=checkbox]:checked + .spoiler_text {
    display: block;
}

Теперь, вам остается только подправить стили под дизайн вашего сайта.

Определить код символа

В данной записи я расскажу как определить код символа с помощью обычного текстового редактора Microsoft Word. Получить код символа может понадобится в процессе работы с CSS, для того чтобы указать свойство content. В качестве значения данного свойства используются коды символов Unicode.

Определить код символа в Word

Для примера попробуем найти код символа код символа точка. Сначала откроем чистый документ Word и добавим в него символ точки ., теперь чтобы получить код символа Unicode необходимо выделить один символ и затем нажать сочетание клавиш Alt+X.

Для примера определим код символа точка. Для начала откроем чистый документ Word и добавим в него символ точки ., теперь чтобы получить код символа Unicode необходимо выделить один символ и затем нажать сочетание клавиш Alt+X.

Код символа точка в формате Unicode 002E. Чтобы указать свойство content в CSS, необходимо просто добавить обратный слэш:

.dropdown-toggle:after {
	content: "\002E";
}

Таблица кодов символов

Как вариант можно определить код символа с помощью таблицы кодов символов. Таблица содержит все коды символов Unicode и HTML-код. Потребуется много времени чтобы найти код символа в таблице, но зато таблица кодов символов хорошо подходит если вы еще не определились какой именно символ вам нужен.

Иконки CSS

Дата: 18.11.2015Метки:

Я испытываю слабость ко всем нестандартным штукам. Поэтому, в этом посте хочу рассказать о понравившейся мне библиотеке CSS-иконок — Fort Awesome Icons. Библиотека иконок реализована на чистом CSS. Кроме статических вариантов в сборке представлены анимированные CSS-иконки. С полным набором CSS-иконок можно ознакомится на этой странице. Чтобы использовать CSS-иконки на своем сайте, необходимо добавить в одержимое HTML-документа код из примера ниже.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

В зависимости от требуемого размера элемента, необходимо указать атрибут class. С полной информацией по использованию иконок можно ознакомится на странице GitHub.

Еще хороший ресурс с большим количеством иконок на различные темы icons8.

Использование веб-шрифтов внутри CSS

Дата: 10.08.2015Метки:

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

Основная мысль статьи заключается в том, что за счет хранения шрифтов в CSS файле мы можем ускорить загрузку сайта и уменьшить количество запросов к серверу. С технической стороны метод выглядит следующим образом. Используя Base64-представление, мы переводим бинарные данные шрифта в ASCII-текст, после чего записываем его в CSS-файл.

Несмотря на очевидные преимущества, у данного метода есть свои недостатки. Если Google Fonts автоматически отдает шрифты в понятном для браузера формате, то в нашем случае придется использовать специальный скрипт. Я же склоняюсь к более простому варианту — просто пожертвовать совместимостью со старыми версиями браузеров.

Шрифты WOFF на текущий момент являются наиболее предпочтительными для использования. Если верить статистике сaniuse.com, этот формат поддерживают более 88% используемых браузеров в мире.

В качестве источника шрифтов лучше всего использовать Goole Fonts. Просто загружаем WOFF-файлы по ссылкам из CSS. По умолчанию в Chrome загружаются шрифты в формате WOFF2, поэтому для загрузки WOFF необходимо использовать браузер Internet Explorer.

Как запасной вариант — можно выполнить конвертирование из формата TTF в WOFF. Для этих целей в интернете есть множество онлайн-сервисов. Следует отметить, что после такой конвертации отрисовка шрифта может незначительно отличаться.

В целом я могу порекомендовать для этих целей Webfont Generator. Кроме функции конвертирования, он еще умеет оптимизировать шрифты и отдавать их в закодированном Base64 виде.

Еще можно использовать ttf to woff converter. Что бы перевести шрифты в Base64-представление используем утилиту Base64 Encode/Decode:

b64 -e input.woff output.txt

Поле того чего копируем шрифты в CSS:

@font-face {
 font-family: 'Noto Sans';
 font-style: normal;
 font-weight: 400;
 src: url(data:application/font-woff;charset=utf-8;base64,
d09GRgABAAAAAGfQABEAAAAAoxQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAA
AEQAAABeBXMEg0dQT1MAAAHEAAAF4wAADKz1RCPkR1NVQgAAB6gAAAAMAAAADAAVAApPUy8y
AAAHtAAAAGAAAABgd9GZHGNtYXAAAAgUAAABFQAAAYz5wR+KY3Z0IAAACSwAAACWAAAA/hmv
GsVmcGdtAAAJxAAABHkAAAe0NgsWDGdhc3AAAA5AAAAAEAAAABAAFgAjZ2x5ZgAADlAAAFDx
...
) format('woff');
}

Файл со шрифтами подключают как обычные CSS или загружают специальным скриптом: