mojwp.ru
Генератор рекламных блоков »
Назад

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

Опубликовано: 15.09.2012
Время на чтение: 5 мин
24
192

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

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

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

Внимание! Снижение цены на тему WP Romb -35%
Идеальная для статейников и блогов. Максимальная оптимизация под SEO.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Послесловие

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

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

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

Оцени статью

Давай, оцени статью!

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Елена Олейникова
    Опубликовано: 17.09.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 17.09.2012 Ответить на сообщение

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

  • Елена Олейникова
    Опубликовано: 17.09.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 17.09.2012 Ответить на сообщение

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

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

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

  • Елена Олейникова
    Опубликовано: 17.09.2012 Ответить на сообщение

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

  • Женя
    Опубликовано: 17.09.2012 Ответить на сообщение

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

  • silver price
    Опубликовано: 18.09.2012 Ответить на сообщение

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

  • Сергей Куприянов
    Опубликовано: 19.09.2012 Ответить на сообщение

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

  • Лысенко Евгений
    Опубликовано: 21.09.2012 Ответить на сообщение

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

  • Лысенко Евгений
    Опубликовано: 21.09.2012 Ответить на сообщение

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

  • Елена
    Опубликовано: 03.11.2012 Ответить на сообщение

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

  • Максим
    Опубликовано: 22.11.2012 Ответить на сообщение

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

  • Дмитрий
    Опубликовано: 07.12.2012 Ответить на сообщение

    спасибо

  • Елена
    Опубликовано: 02.02.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 02.02.2013 Ответить на сообщение

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

  • Паха
    Опубликовано: 17.02.2013 Ответить на сообщение

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

  • Николай
    Опубликовано: 03.01.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 03.01.2014 Ответить на сообщение

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

  • Никита
    Опубликовано: 26.01.2014 Ответить на сообщение

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

  • metr250
    Опубликовано: 28.09.2014 Ответить на сообщение

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

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

  • metr250
    Опубликовано: 28.09.2014 Ответить на сообщение

  • Тимофе
    Опубликовано: 10.04.2016 Ответить на сообщение

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

  • exilon13
    Опубликовано: 25.07.2016 Ответить на сообщение

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

    • Виталий
      Опубликовано: 26.07.2016 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.

X
SEO-тема для WordPress сайта
Все заточено под продвижение. Максимально быстрая. Встроен функционал.