среда, 4 июля 2018 г.

Добавление кнопки "Читать далее"


При написании постов обычно основную часть текста убирают "под кат" для того, чтобы страницы быстрее грузились. Для этого в окне редактора предусмотрена кнопка "Вставить ссылку "Дальше"".

Сама надпись выглядит достаточно невзрачно. Чтобы как-то разнообразить свой блог, ее можно заменить яркой кнопкой.

Для этого мы воспользуемся услугами сайта https://dabuttonfactory.com, где можно соорудить собственноручно кнопку по своему вкусу. Интерфейс сайта английский, но интуитивно понятный. Методом проб и ошибок можно выбрать наиболее подходящий дизайн.
После того, как кнопка будет создана, ее надо скачать, нажав на кнопку Download. По умолчанию она сохраняется в папке Загрузки.

Теперь нам нужно получить адрес изображения. Для этого создадим пустое сообщение и вставим в него нашу кнопку. Затем, заведя на нее курсор, нажмем правую кнопку мыши и выберем "копировать адрес изображения".



Создаем текстовый файл и вставляем туда адрес.

Далее открываем шаблон блога. Для этого идем в настройки - Тема - Изменить HTML.
Ставим курсор в окно шаблона и нажимаем Ctrl+F. Откроется окно поиска.
Нам нужно найти часть кода: <data:post.jumpText/>, которую мы удаляем и заменяем следующим:

<img src="адрес изображения" alt="Читать далее >>>" title="читать статью полностью"/>

(Вместо "адрес изображения" поставляем свой адрес изображения).

Немного выше мы находим <div class='jump-link'>  и меняем его на <div class='jump-link'  style='text-align:left;' >

На этом все. Стоит только сохранить все изменения и наслаждаться новой кнопкой.



Комментариев нет:

Отправить комментарий