Задача достаточно стандартная, однако поиск подходящего jquery-плагина не увенчался успехом, поскольку во всех плагинах, которые удалось найти, ограничения задаются не количеством символов, а высотой блока. То есть указывается высота контейнера, и плагин обрезает текст, выходящий за его пределы. В интернете можно найти весьма удобные варианты таких плагинов, например, Readmore.js и dotdotdot . Причем последний даже может отслеживать изменение размера окна и автоматически обновлять результат.

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

Можно выделить несколько преимуществ данного подхода.

При реализации также необходимо было учесть две вещи, влияющих на красоту результата. Во-первых, нужно чтобы текст обрезался по целому слову. Во-вторых, избежать ситуации «раскрывать слишком мало» – может произойти в случае, когда общее количество символов в блоке чуть больше заданного значения, по которому следует производить обрезку, например, на 50-100 символов. Если параметры не будет указаны, то модуль будет использовать дефолтные значения.

Итак, алгоритм задачи достаточно прост:

Самая трудоемкая часть реализации скрипта html-спойлера – получение анонса из полного текста блока, поскольку в блоке может быть не просто текст, а отформатированная с помощью html-тегов разметка.

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

// формирование анонса person.cutBrief = function() { var tmp, i = 0, // счетчик циклов j = 0, // счетчик циклов html = data.html, // html блока htmlLength = html.length, // количество символов html блока count = 0, // счетчик текстовых символов countFlag = true, // текущий символ не является html-разметкой endCharsLen = ENDCHARS.length, // размер массива символов, указывающих на окончание слова end = htmlLength, // позиция конца анонса при поиске resultLimit = data.limit.total - data.limit.delta, // требуемое количество символов tagName, // название тега tagStack = ; // стек тегов, которые необходимо закрыть в конце анонса if (data.count > data.limit.total) { // формируем анонс for (; i < htmlLength; i++) { // если открывается тег if (html[i] === "", i+1); if (tmp > 0) { // верный формат закрытия тега tagName = html.substr(i+2, tmp-i-2); // обнаруженный тег должен иметь закрывающую часть? if ($.inArray(tagName, TAGDIC) >= 0) { tagStack.pop(); } } } else { // тег является открывающим // следующий символ - любая латинская буква? if (/\w/gi.test(html)) { // получение имени тега и опредение его на необходимость закрытия tmp = html.indexOf(">", i+1); if (tmp > 0) { tagName = html.substr(i+1, tmp-i-1); // тег должен иметь закрывающую часть if ($.inArray(tagName, TAGDIC) >= 0) { tagStack.push(tagName); } } else { // не является тегом countFlag = true; } } else { // не является тегом countFlag = true; } } } } // инкрементим счетчик текстовых символов if (countFlag) { count++; } // если закрывается тег if (html[i] === ">") { countFlag = true; } // дошли до конца требуемого размера анонса if (count >= resultLimit) { // текущий символ не является концом слова if ($.inArray(html[i], ENDCHARS) < 0) { // символ не последний if (i < htmlLength - 1) { // следующий символ тоже не конец слова if ($.inArray(html, ENDCHARS) < 0) { // ищем первое вхождение каждого символа из набора и выбираем ближайший for (; j < endCharsLen; j++) { tmp = html.indexOf(ENDCHARS[j], i+1); if ((tmp > 0) && (tmp < end)) { end = tmp; } }; i = end; } } } else { // слово закончилось целиком count--; } break; } }; // вырезаем кусок html data.brief = html.substr(0, i); // добавляем точки data.brief += opt.ellipsis; // закрываем открытые теги for (i = tagStack.length - 1; i >= 0; i--) { data.brief += ""; }; } else { // не обрезаем data.brief = html; } };

Применяется плагин стандартно:

$(".b-block--first").readmore();

В плагине предусмотрены следующие параметры:

• ellipsis {string} – символы, которые будут выводиться в конце анонса;
• textOpen {string} – текст ссылки в свернутом состоянии;
• textClose {string} – текст ссылки в развернутом состоянии;
• callback {function} – функция, исполняющаяся после раскрытия/закрытия блока;
• brief {integer} – максимальное количество символов анонса, уменьшенное на величину addition;
• addition {integer} – минимальное количество символов раскрываемой части текста;
• smoothly {integer} – время плавного раскрытия/закрытия блока в миллисекундах.

Следует заметить, что callback-функция срабатывает только после окончания анимации текста, которая выполняется на jquery с помощью метода animate, и принимает два входных параметра: ссылку блок и текущее состояние.

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

$(".b-block--second").readmore({ ellipsis: "[...]", textOpen: "Открыть", textClose: "Закрыть", callback: function(self, state) { state ? self.css("background", "#e74c3c") : self.css("background", "#3498db"); }, brief: 500, addition: 100 });

CSS в примере по минимуму, можно и вовсе без него обойтись (код приведен на SCSS):

B-readmore { padding: 15px 0 0 0; &__link { color: #000; text-decoration: underline; &:hover, &:focus, &:active { color: #000; text-decoration: none; } } &__open { display: inline-block; } &__close { display: none; } &--opened & { &__open { display: none; } &__close { display: inline-block; } } }

Оцениваем и комментируем, как лучше сделать спойлер для сайта по задаваемому количеству символов.

Добрый день!

Начнем с самого начала на тот случай, если кто-то вообще ничего не знает о more.

Я не был на море.

– Ладно, не заливай, ни разу не был на море!

– Не довелось, не был…

– Уже постучались на небеса, накачались текиллой, буквально проводили себя в последний путь, а ты на море-то не побывал?!

– Не успел, не вышло…

– Не знал, что на небесах никуда без этого?

к/ф “Достучаться до небес”

Так вот, какой фрагмент текста отображать в анонсе задается с помощью тега more . Этот тег разделяет статью на две части: вступительную (анонс) и продолжение.

В редакторе WordPress тег more можно вставить с помощью кнопки в панели инструментов.

1. Визуальный режим редактора:

2. Текстовый режим редактора:

В текстовом режиме, так же можно вручную разделить запись: просто напишите

А теперь важная информация, которую знают далеко не все!

Так вот, есть элементарный способ задавать каждой ссылке после анонса свой уникальный текст!

Сделать это можно, просто написав, нужный текст внутри конструкции с more. Вот так:

Спросите а зачем так делать? Еще прописывать каждый раз текст.

Честно говоря, сам такой =) Уже 84 статьи опубликовал, и только “расчехлился” по этому поводу.

Как изменить текст?

1. Первый – самый простой способ – это добавить ваш текст (обычно в index.php) в функцию the_content

2. Второй способ с использованием хука the_content_more_link . Просто добавьте следующий код в и задайте желаемый текст ссылки.

function my_more_link($more_link, $more_link_text) { return str_replace($more_link_text, "Продолжить чтение...", $more_link); } add_filter("the_content_more_link", "my_more_link", 10, 2);

Этот способ удобен тем, что вам не нужно искать по файлам шаблона, где именно у вас используется the_content (это не обязательно в index.php, может быть и content.php и что угодно.) Здесь вы работаете только в файле functions.php.

3. В третьем пункте просто сохраню для истории способ с использованием произвольного поля WordPress.

Вписывание текста непосредственно в , конечно же проще и понятней.

Здесь просто откорректируйте вызов функции the_content одним из двух способов.

В коде этот якорь устанавливается таким вот способом: