Ваш промокод mojWPAds на плагин рекламы для WordPress >>

Украшаем ссылку Читать далее на 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/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


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

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

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

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

    • Виталий says:

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

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

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

    • Виталий says:

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

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

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

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

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

  4. Женя says:
    http://tut-blog.ru

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

  5. silver price says:
    http://www.anglofareast.com/research/silver-price/

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

  6. Сергей Куприянов says:
    http://berimaksimum.ru

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

  7. Лысенко Евгений says:
    http://webpathblog.ru

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

  8. Лысенко Евгений says:
    http://webpathblog.ru

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

  9. Елена says:
    http://wseznay.ru/

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

  10. Максим says:
    http://blagoproga.ru/

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

  11. Дмитрий says:
    http://www.golosscience.com/

    спасибо

  12. Елена says:
    http://delo-elenki.ru

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

    • Виталий says:

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

  13. Паха says:

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

  14. Николай says:
    http://investorov.ru

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

    • Виталий says:
      http://mojWP.ru/

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

  15. Никита says:
    http://www.barcelona-mania.ru

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

  16. metr250 says:

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

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

  17. metr250 says:

  18. Тимофе says:

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

  19. exilon13 says:

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

    • Виталий says:
      http://mojWP.ru/

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

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

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

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.03MB | MySQL:136 | 0,338sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!