Как изменить ссылку читать далее (read more) wordpress?

Если у вас есть блог и вы пишите в нем большие статьи, то вы наверняка использовали тег more.

Возможно вы хотели поменять эту ссылку на красивую кнопку.

В этой статье я расскажу о том как:

  • изменить текст ссылки (читать далее или more)
  • изменить адрес ссылки, а именно  убрать /#more-номер поста
  • ссылку переделать в кнопку

Вставить  тег more  не сложно.

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

Теперь поговорим как изменить текст ссылки в моем случае изначально он был  (Read the rest of this entry »)

Нам понадобятся файлы index.php, page.php , archive.php, single.php

Их можно найти через файловый менеджер /wp-content/themes/(название вашей темы)

Открываем сразу все файлы и ищем в них текст указанный ниже.

Не обязательно во всех файлах он будет! Те файлы в которых его не будет можно закрыть. В большинстве случаев потребуются index.php , archive.php

Между ковычек пишем текст, который нам нужен. Изначально в разных темах написан тот или иной текст. У меня был Read the rest of this entry

Я поменял на следующее

После сохранения у нас должно получиться что-то вроде этого

more2

Мы поменяли текст ссылки, но когда нажимаем на нее в адресной строке в конце приписывается /#more-номер поста, с точки зрения поисковой оптимизации у нас получается отдельная страница. Поэтому предлагаю избавиться от этой приставки.

Для этого нам понадобиться сделать некоторые правки в файле post-template.php
Он находится в каталоге /wp-includes
Находим следующую строчку:

Заменяем на:

Или просто убираем

Мы заменили текст, ссылки (читать далее), поменяли адрес,  смотреться не плохо, но как сделать  ссылку (читать далее)  в виде кнопки, чтобы она вписывалась в дизайн сайта?

Для этого нам в эту  строчку надо добавить несколько тегов, а так же прописать стили в css. Приступим.

Заменяем строчку которую правили ранее на ту что ниже:

Теперь наша ссылка находится в блоке с классом buttons, а класс самой ссылки more-link

Остается прописать стили в style.css который лежит либо в отдельной папке, либо в корне темы.

/wp-content/themes/название темы/css

Копируем, вставляем код  и сохраняем

Кратко поясню

.buttons a.more-link Преобразует нашу ссылку в кнопку

#content .buttons   Задает отступы сверху и снизу.

buttons a:hover, .buttons a.more-link:hover, .buttons input:hover
Изменяет цвет кнопки при наводе на нее

На этом пост заканчиваю, красивых вам кнопок! =)

5 комментариев

  1. vvr 29.08.2015
  2. Роман 03.11.2015
  3. Екатерина 03.11.2015
  4. Игорь 20.11.2015
  5. Константин 03.01.2016