Украшаем ссылку Читать далее на WordPress

wordpress читать далееВ данной статье описан способ, как можно украсить стандартную ссылку "Читать далее" на WordPress при помощи вставки небольшого кода и небольших правок файла стилей CSS (это уже индивидуально для каждого сайта, в зависимости от дизайна).

В свою очередь я расскажу что да как делать, чтобы добиться желаемого результата на своем сайте.

Чтобы визуально увидеть то, о чем речь в статье, можете зайти на главную страницу моего сайта.

Статья делится на 2 части: вначале удалим автоматическое отображение ссылки "Читать далее", а во второй части сделаем эту ссылку под дизайн сайта, что должно понравится вашим читателям, которые заходят в статью с главной страницы, либо из рубрик (с тех мест, где отображается данная ссылка).

По теме могу посоветовать статью Как убрать лишние символы в ссылке Читать далее, которую я написал ранее.

Как удалить ссылку "Читать далее" на WordPress

Чтобы удалить "Читать далее" - необходимо воспользоваться хаком WordPress, который я нашел на одном из сайтов. Первоисточник, к сожалению, не знаю. Если Вы автор хака, то я с удовольствием сделаю отсыл на ваш сайт в данной статье. Пишите на почту.

Чтобы вставить нужный нам код, необходимо открыть файл functions.php, который можно найти на ftp вашего хостинга по адресу:
/wp-content/themes/название_шаблона

Для редактирования файлов движка или шаблона НАСТОЯТЕЛЬНО рекомендую пользоваться программой Notepad++ (или аналогом), а так же не забывать делать резервные копии файлов, в код которых вы будете вносить правки (на всякий случай)

Совет

Пока вы не закроете файл, который редактируете в Notepad++ - всегда можно "откатить" изменения назад, вплоть до исходного состояния. Для этого пользуйтесь сочетанием клавиш CTRL+Z сколько потребуется раз. Так же сверху увидите стрелочку "Назад", которая выполняет аналогичные функции.

В файл functions.php необходимо поместить следующий код прямо ПЕРЕД символами ?> (находится в самом конце файла):

function remove_more_link() { return ''; }
add_filter('the_content_more_link', 'remove_more_link');

После этого сохраняем файл и закачиваем на хостинг. Теперь у Вас на сайте нет ссылки "Читать далее".

Делаем свой дизайн ссылки "Читать далее"

Теперь работать будем с файлами, которые отвечали за отображение данной ссылки. Для главной это может быть index.php или home.php (в зависимости от шаблона). Для рубрик - archive.php или category.php.

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

<?php } the_content(__('Подробнее &raquo;')); ?>

и второй шаблон

<?php the_content(" "); ?>

Поясню. Нам нужно найти то место в файле index.php (или других из перечисленных выше), которое отвечает за вывод контента на сайте. В конструкции может присутствовать как слово "Подробнее", таг и more (Читать далее). Все зависит от шаблона.

Но нам уже не важно, что есть слова "Читать далее" или "Подробнее" (аналоги). Мы на первом шаге при помощи хака сделали так, что они уже не работают на сайте.

Теперь необходимо после оператора content вставить нужный нам код, который сделает красивым ссылку "Читать далее". Под оператором content я имею ввиду всю конструкцию, которая заканчивается закрывающей скобкой >, как в представленных примерах.

Вот после этой скобки мы вставляем следующее:

<a href="<?php the_permalink() ?>">
<img src="/wp-content/themes/mojwpthemes/images/more.gif"></a>

Здесь я сделал просто вставку картинки с ссылкой на статью. Картинка лежит у меня на хостинге. Вы можете прописать вставить как картинку, так и любую кнопку на CSS, либо текст с нужным оформлением.

А теперь покажу, ка будут выглядеть код для примеров, которые я показал выше:

<?php } the_content(__('Подробнее &raquo;')); ?>
<a href="<?php the_permalink() ?>">
<img src="/wp-content/themes/mojwpthemes/images/more.gif"></a>

и второй шаблон

<?php the_content(" "); ?>
<a href="<?php the_permalink() ?>">
<img src="/wp-content/themes/mojwpthemes/images/more.gif"></a>

Вставив подобное вы не добьетесь нужного визуального результата, т.к. ссылка "Читать далее" или кнопка, будет расположена слева и прижата к краю. Необходимо немного "пошаманить" с CSS.

Для этого можно создать новый класс для блока ссылки "Читать далее", либо "жестко" ему прописать необходимые параметры прямо в файле index.php (и сопутствующих). В помощь дополнение к FireFox и Chrome под названием FireBug.

Относительно CSS. Чуть ранее я написал статью Описание некоторых стилевых свойств CSS на примере. Так же в помощь самоучитель со справочником http://htmlbook.ru/css

Если отойти немного от темы статьи, то советую узнать побольше об e-mail рассылке и что полезного она может принести для владельца блога, а так же манимейкера.

Послесловие

На первый взгляд может показаться, что все довольно сложно. Но могу вас уверить, что это займет даже у новичка минут 5 (сюда не входит время, которое может понадобится для настройки внешнего вида новой ссылки).

В свою очередь готов помочь с настройкой внешнего вида ссылки 3 первым обратившимся через комментарии.

С вопросами обращайтесь так же через комментарии, чтобы другие читатели блога могли найти свои проблемы в ответах на ваши вопросы.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 24 комментария
  1. Елена Олейникова (4 комм.):
    http://school-meteor.ru

    А я проще поступаю. В статье вставляю тег more, сразу после него пишу "Читать далее", или в другом случае "Приступить к выполнению упражнений", или какой-то другой текст, который подходит по смыслу конкретной статьи. Выделяю всю конструкцию тегом strong и все нормально смотрится. Как вам такой вариант?
    Кстати, а как вы сделали в комментариях кнопку предосмотра?
    Мне такая фишка очень нравится 🙂

    • Виталий (1674 комм.):

      Кнопка предспросмотра для комментариев - плагин AJAX Comment Preview

  2. Елена Олейникова (4 комм.):
    http://school-meteor.ru

    Спасибо, но в моей теме этот плагин не хочет работать 🙁
    У вас так все славненько смотрится. Наверно, этот плагин как-то настраивать нужно, но там все по-английски, а я в нем ни бум-бум, увы...

    • Виталий (1674 комм.):

      кнопка должна появиться у вас рядом с "Отправить"
      быть может кеш браузера нужно почистить.

      Все настройки - это внешний вид отображения текста предпросмотра (из админки) и название кнопки (так же в админке).

      все, что я делал по настройке самого плагина в шаблоне - это расположение кнопки правее "Отправить", чтобы смотрелось красиво. Однако подобное в каждом случае индивидуально

  3. Елена Олейникова (4 комм.):
    http://school-meteor.ru

    Я в двух блогах пыталась установить этот плагин, кнопка появляется, но когда по ней кликаешь, ничего не происходит, нет предосмотра 🙁

  4. Женя (58 комм.):
    http://tut-blog.ru

    Я когда верстал дизайн в августе на ВП,то уже имел практику с этим. Но все равно статья пригодится.

  5. silver price (1 комм.):
    http://www.anglofareast.com/research/silver-price/

    Если вы пару раз заходили в мой блог до вчерашнего вечера, то наверняка заметили, что тексты постов отображались полностью. Но я решил сократить их с помощью ссылки читать далее или тега wordpress more. Это помогло сэкономить немного места и теперь на странице выводится сразу 5 статей одновременно. В принципе, я оставляю достаточно текста чтобы читатель по первым двум абзацам сразу мог понять нужна ему статья или нет. Вообще это, конечно, дело вкуса, хотя иногда приходится так делать из-за дизайна блога – как, например, шаблоны wordpress в журнальном (magazine) стиле.

  6. Сергей Куприянов (1 комм.):
    http://berimaksimum.ru

    О кнопке "читать далее" 😉
    Когда автор блога публикует на главной странице не анонсы, а полные тексты свежих записей, это не только считается небрежностью (мягко выражаясь), но и генерирует большой размер главной в килобайтах (а это поисковики не уважают).
    Раскрашивать петушком фразу "читать далее" красиво!
    Но польза больше отрицательная потому, что однотипное "читать далее" менее предпочтительное для индексации, чем применение в теге More
    оригинального авторского анкора, например, как в последней моей публикации:
    Узнать свой гороскоп 2012 для сайта...

  7. Лысенко Евгений (5 комм.):
    http://webpathblog.ru

    В данный тэг more вместо "Читать далее" можно вставить собственный текст. Причем абсолютно любой, на ваше усмотрение. Для этого нужно перейти в html-редактор и в код . Где "Мой произвольный текст" - как раз заменит стандартные "Читать далее". Только обязательно без пробелов, а то не сработает. Хорошо вставлять в данный тэг ключевики.

  8. Лысенко Евгений (5 комм.):
    http://webpathblog.ru

    Что-то код не отразился в предыдущем комменте.
    В html-редакторе код выглядит так (вместо кавычек должны быть )
    "!--moreМой произвольный текст--"

  9. Елена (1 комм.):
    http://wseznay.ru/

    У меня так и не удалось удалить ссылку "Читать далее" описанным выше способом. Видно шаблон не позволяет. Жаль.

  10. Максим (2 комм.):
    http://blagoproga.ru/

    У меня на сайте стандартный тег more.Со стилями для него ведь нет никаких проблем,посмотреть в FireBug какой класс присваивается и все.

  11. Дмитрий (1 комм.):
    http://www.golosscience.com/

    спасибо

  12. Елена (1 комм.):
    http://delo-elenki.ru

    К сожалению эксперимент не удался. Пробовала по разному. Но не получилось. Конечно обычные ссылки Читать далее легко удалились. Но вот вставить в нужное место картинку с ссылкой не вышло. Вы пишите что для главной index.php или home.php после нужно вставлять ссылку с картинкой так как вы написали. Но у меня в этих файлах отсутствует даже приблизительное что-то похожее на <?php the_content. Единственно в home.php когда я в конце вставила то внизу было. А вообще, еще решила попробовать и вроде и убирала все обратно, но сайт перестал в итоге работать. И даже удаление темы не помогло. Так что пошла писать в службу поддержки хостинга. А Вы пишите поподробнее и попонятнее. Чтобы сразу было ясно куда что вставлять. Все надо учитывать.

    • Виталий (1674 комм.):

      1. все учесть не возможно. Шаблоны разные и верстают их по-разному.
      2. если бы вы внимательно читали статью, то увидели текст, в котором говорится о резервной копии файлов. Так же я настоятельно рекомендовал работать с программой Notepad++, которая позволяет окатить изменения.

  13. Паха (1 комм.):

    Это единственный сайт где я нашёл как убрать ссылку "Читать далее". Выражаю огромную благодарность автору статьи. Огроменное тебе спасибо чувак))

  14. Николай (1 комм.):
    http://investorov.ru

    Здравствуйте. Подскажите как украсить обычные ссылки? Например как у вас на странице если навести на ссылку или кнопку, она становится голубая

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Добрый.
      Я об этом писал. Полистайте блог за 2013 год

  15. Никита (1 комм.):
    http://www.barcelona-mania.ru

    Все отлично,спасибо!Все делается буквально за 2 минуты.Пошел доделывать кнопку.

  16. metr250 (2 комм.):

    Здравствуйте, у меня в шаблоне index.php такого вида:

    Куда вставить код? Спасибо.

  17. metr250 (2 комм.):

  18. Тимофе (1 комм.):

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

  19. exilon13 (1 комм.):

    а если мне нужно сделать это не для записи а для страници? (в страницах тег «more» не работает)? Заранее спасибо за ответ.

    • Виталий (1674 комм.):
      http://mojWP.ru/

      При помощи CSS или моего плагина External Links Tune'r

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.46MB | MySQL:85 | 0,646sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html