Как сделать кнопку read more
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Свойство text-overflow: ellipsis не поддерживает многострочность. Но я вспомнил о свойстве line-clamp , которое позволяет обрезать многострочный текст.
Я разместил чекбокс прямо перед абзацем, поэтому можно использовать псевдокласс :checked для активации усечения текста:
Но как насчет доступности?
Хак с чекбоксом не только семантически неправильный, но и ограничивает возможности доступа к функционалу для людей с плохим зрением. При этом присваивается для чекбокса свойство display: none. Из-за этого нарушается навигация с помощью клавиатуры. Нельзя использовать скрытый чек-бокс , а использование метки не помогает. Событие нажатия клавиши пробела/ввода не перенаправляют событие в чекбокс.
Чтобы решить эту проблему, я сделал чекбокс фокусируемым, хоть и все еще невидимым.
Теперь чекбокс можно выделить, но без скринридера нельзя узнать, установлен он или нет, так как невидим. Чтобы решить эту проблему, я заставил label наследовать стиль фокуса браузера по умолчанию, когда чекбокс выделен:
Ниже приведена комбинированная демо-версия. Попробуйте нажать на кнопку с помощью мышки, а затем используя клавишу пробела.
Как отображать кнопку динамически?
Но как динамически отображать кнопку, когда текст в абзаце слишком длинный, чтобы поместиться в контейнер. Это единственная функция, которую я не смог реализовать с помощью CSS. Потому что она требует применения селектора :truncated :
Поэтому реализовать это можно только с помощью JavaScript. Например:
А вот расширенная демо-версия:
Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!
Пожалуйста, опубликуйте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!
Кнопка “Далее” заменяет ссылку на полную запись блога. Это достаточно удобно для читателя, когда на главной странице блога отображены лишь начало поста, отображающие основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Называется это явление коротким словом – кат.
Blogger по умолчанию возможность пользоваться катом. Для того, чтобы скрыть длинную запись вам достаточно лишь нажать на значок в простом режиме создания записи или добавить тег в режиме html, который разделит вводную и основную часть текста.
Как создать кнопку read more
Просмотрите блог после изменений, если у вас получилась кнопка Далее такого вида , то все сделано правильно, и вы можете сохранять шаблон.
Эта кнопка может не подходить под дизайн вашего блога. В этом случае, вы можете найти другую кнопку в интернете или нарисовать простую кнопку в любом редакторе. Далее берем ссылку на изображение и заменяем код, выделенный желтым. Еще одно изменение, которое вы должны будете обязательно провести, чтобы кнопка отображалась корректно – это проставить значение ширины кнопки в пикселях (выделено оранжевым). Цвет ссылки на кнопке выделен зеленым, его вы тоже можете изменить, выравнивание кнопки – float (right – справа, left – слева), font-size – размер текста ссылки, padding-left – отступ ссылки от левого края кнопки и другие настройки. Спрашивайте, если нужно будет подстроить кнопку под ваш дизайн.
По умолчанию, статью делит ссылка: Читать Далее (Read More). Но ведь наш проект должен быть уникальным и не похожим на другие, поэтому данное положение вещей, нам не подходит. Итак, давайте разберем, как все это работает?
Для чего нужен тег more на wordpress?
Если написать статью не используя more, то статья в полном объеме попадет на главную страницу wordpress. И, по-моему, выглядеть это будет, как минимум, не очень.
А вот так будет выглядеть пост разделенный на анонс и основную часть. То есть на главной странице, будет выводиться только анонс поста.
Как изменить текст тега more на сайте wordpress?
Чтобы отредактировать текст. Нужно открыть, используя текстовый редактор, файл index.php, и найти следующий код.
Он может выглядеть и вот так:
То есть выглядеть он может по разному, но результат его отображения в статье может быть один.
После этого ссылка на полную запись будет выглядеть следующим образом:
Также в этот код можно добавить тайтл статьи:
После всех изменений, тег more wordpress, стал читаться так:
Итак, текст ссылки мы изменили — это основные и самые используемые способы. Но он все еще находится не там, где хотелось бы. Поэтому нужно заняться его внешним видом…
Как изменить внешний вид тега more?
Для изменения, нужно найти в файле style.css, следующий класс:
С помощью данного класса можно изменить расположение кнопки относительно анонса поста, изменить размер цвет ссылки, добавить фон, или вообще заменить текст картинкой. Например так:
В итоге, я получил такой внешний вид, который меня устраивает на данном этапе.
Уникальный тег more, для каждой статьи wordpress
Все способы описанные выше, являются способами для ленивых. Но тег можно редактировать и непосредственно при написании статьи. При этом, его можно сделать уникальным, для каждого отдельного поста. Проще всего, это можно сделать так:
Сам код разделяющий текст поста, в режиме html, выглядит так:
А для создания уникального текста, нужно при написании статьи на wordpress, включить html-режим. И в нужное место вставить следующий код:
И выглядеть уже будет так:
Ну вот и все на сегодня. Теперь зная все это, Вы сможете сделать, что угодно с тегом more. При этом, от Вас не потребуется никаких особых усилий. До новых встреч!
Что такое wiki и как включить разметку в группе Вконтакте?
Итоги конкурсов в которых принимал участие мой блог
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом
Комментарии
Нет и такой строки вот полный код index.php куда нужно вставить ту строчку.
@ Александр:
Здравствуйте. Сложно сказать не видя кода. Но попробую предположить, что у Вас анонс выводится, используя, так называемую, цитату. Проверьте в файле index.php, строка:
А чтобы все стало работать так, как нужно Вам, и ссылка появилась под текстом. Эту строку, если она есть, необходимо заменить на следующий код:
Если же нет, то без кода не могу подсказать.
Здравствуйте у меня такая проблема, в записи вставляю тег море., публикую, на главной странице публикуется анонс, но в конце нет никаких ссылок. пробовал вставлять строку в файл index.php, ссылка появляется то перед заголовком то в другом посте, помогите в какое место вставить эту строчку, или может есть какие то другие советы для того что бы появлялась хоть какая нибудь ссылка хоть даже more
@ Iskra: Да, не за что. Как хотите. Если что, обращайтесь.
@ Михаил Веб:
Спасибо))) Пока так поковыряюсь, если будет слишком сложно опять буду искать секретные строчки))))
@ Iskra: Написал вам на почту. Не понял, при чем здесь the_excerpt и the_content?
Не вставляются строки про the_excerpt и the_content. Вы про них выше писали в комментариях. Их искала тоже.
Здравствуйте! Моя тема WP выводит весь контент поста на страницу, а мне необходим только анонс. Тема стандартная twentysixteen. Как это сделать?
Оценить 3 комментария
так какая страница вас интересует? "страница с записями" как в прошлом вопросе или сама страница одиночной записи?
Не понятно, что значит "Моя тема WP". Если вы ее скачали или купили, то ответ выше, что бы не лезть в код темы. Если вы являетесь автором темы, то при выводе поста в цикле вместо the_content() пишете the_excerpt() . Этот код будет выводить анонс поста, если он явно указан, либо первые сколько-то слов поста (по умолчанию вроде бы 55). Что бы вывести ссылку на полную версию поста, например на главной странице сайта, то после the_excerpt() можете вставить и через CSS стилизовать это все как хотите, например под кнопку.
Читайте также: