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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь работать будем с файлами, которые отвечали за отображение данной ссылки. Для главной это может быть 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 первым обратившимся через комментарии.

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