Как сделать кнопку-читать далее

Как сделать кнопку-читать далее WordPress ссылка читать далее

Добрый день!

В сегодняшней статье хочу описать все нюансы, касающиеся ссылки “читать далее” и тега more.

Началось все с фриланс биржи, на которой один англичанин создал проект с текстом “объясните мне как изменить ссылку читать далее”. Понятно, что писал он на английском (типа, link read more и т.д.). Я ему написал как это сделать. А потом сам думаю, сапожник-то – без сапог! На своем блоге ссылка “читать далее” в первородном состоянии: никакой уникальности, никакого способствования продвижению и, естественно, с тегом #more в конце урл.

Вообщем, рекомендую почитать статью очень внимательно. Уверен, что каждый найдет в ней что-то новое, чего еще не знал. И в этом месте я ставлю <!—more—>

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

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

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

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

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

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

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

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

 

Как добавить more

Наверняка, вы видели ни один блог, где на главной странице выводятся анонсы статей. Сначала идет текст начала статьи, а за ним ссылка “читать далее” (текст ссылки может быть другой).

ссылка "читать далее" после анонса статьи

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

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

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

Кнопка вставки тега more в визуальном режиме

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

Кнопка вставки тега more в режиме текст

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

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

Если вы просто добавили <!—more—>, то после анонсов у вас будет стандартная запись, типа “читать далее” или какая-то другая (какая в вашем шаблоне прописана). Везде будут ссылка с одинаковым текстом.

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

Например, после вступления к одной статье вместо “Читать далее” у меня идет ссылка “Узнать больше о WordPress помощи…”, у другой статьи в продолжение стоит “Узнать как посмотреть исходный код страницы” и т.д.

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

<!—more Уникальный текст ссылки more –>

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

Дело в том, что у вас в таком случае получается еще одна ссылка на статью, содержащая, ключевые слова. А то все пишут о важности перелинковки, о плагине YARPP и подобных, а посмотришь на главной “читать далее”, “читать дальше”, “читать слишком далеко”…

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

Для особо ленивых можно автоматом к стандартному тексту присоединять текст заголовка статьи. Все же лучше, чем просто “читать далее”. Как это сделать опишу немного ниже.

 

Как изменить текст ссылки “читать далее”

Допустим, вы не хотите заниматься прописыванием уникального текста для каждого more, а просто желаете заменить текст ссылки для всех анонсов на что-то другое, типа “читать еще”, “продолжение” и т.п. Тоже нужное дело, все-таки, какая-никакая, а уникализация – выход из массы шаблонов с текстом “читать далее”.

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

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

Можно даже вставить свой блок с классом, для создания собственного стиля ссылки “читать далее”.

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

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

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

Вписывание текста непосредственно в <!–more Уникальный текст ссылки more –>, конечно же проще и понятней.

 

Добавление заголовка статьи в ссылку “читать далее”

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

 

 

Как убрать #more из ссылки

По-умолчанию, к url адресу ссылки “читать далее” добавляется конструкция #more-123, где 123 – номер поста. Это указание на якорь к которому прокручивается страница после перехода по такой ссылке.

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

Многие изначально просто избавляются от этого функционала.

Чтобы убрать #more из ссылки добавьте в functions.php следующий код:

 

Стилизация ссылки “читать далее”

Напоследок скажу, что для изменения внешнего вида ссылки “читать далее” используйте встроенный класс .more-link (он изначально добавляется ко всем ссылкам more)

 

На этом все. Полагаю, что вы успешно разобрались с тем, как в WordPress преобразовать ссылку “читать далее”.

Пока!

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Как сделать кнопку-читать далее 176
Как сделать кнопку-читать далее 429
Как сделать кнопку-читать далее 743
Как сделать кнопку-читать далее 372
Как сделать кнопку-читать далее 190
Как сделать кнопку-читать далее 245
Как сделать кнопку-читать далее 479
Как сделать кнопку-читать далее 615
Как сделать кнопку-читать далее 164
Как сделать кнопку-читать далее 328
Как сделать кнопку-читать далее 753
Как сделать кнопку-читать далее 553
Как сделать кнопку-читать далее 84
Как сделать кнопку-читать далее 980
Как сделать кнопку-читать далее 773
Как сделать кнопку-читать далее 555
Как сделать кнопку-читать далее 697
Как сделать кнопку-читать далее 451
Как сделать кнопку-читать далее 692

Похожие записи:

  • Бетонный монолитный своими руками
  • Поздравление бабушке с 80 летием трогательные
  • Цветники и клумбы своими руками у дома
  • Чертеж легкового автомобиля своими руками
  • Вышивка бисером паутинка интернет