Как изменить ссылку читать далее (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

<?php the_content('');  ?>

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

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

<?php the_content('Читать полностью &raquo;');  ?>

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

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

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

$output .= apply_filters( 'the_content_more_link', '<a href="' . get_permalink() . "#more-{$post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Заменяем на:

$output .= apply_filters( 'the_content_more_link', '<div class="buttons"> <a href="' . get_permalink() . "\" class=\"more-link\">$more_link_text</a> </div>", $more_link_text );

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

#more-{$post->ID}

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

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

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

$output .= apply_filters( 'the_content_more_link', '<span class="buttons"> <a href="' . get_permalink() . "\" class=\"more-link\">$more_link_text</a> </span>", $more_link_text );

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

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

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

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

.buttons a.more-link {
font-size: 12px;
padding: 0px 10px;
background-color: #eee !important;
color: #282828 !important;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-shadow: 0 1px 0px rgba(255,255,255,0.8);
-webkit-box-shadow: inset 0 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
background-image: -ms-linear-gradient(top, #eee, #e1e1e1);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#e1e1e1));
background-image: -webkit-linear-gradient(top, #eee, #e1e1e1);
background-image: -o-linear-gradient(top, #eee, #e1e1e1);
background-image: linear-gradient(top, #eee, #e1e1e1);
background-image: -moz-linear-gradient(top, #eee, #e1e1e1);
background-repeat: repeat-x;
border: 1px solid #d9d8d8;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-color: #d9d8d8 #cccbcb #aeaeae;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#eeeeee', endColorstr='#e1e1e1', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
font-family: arial,sans-serif;
font-weight: normal;
text-decoration: none;
height: 26px;
line-height: 26px;
display: inline-block;
vertical-align: middle;
margin: 0;
float: right;
}

#content .buttons {
padding-top: 20px;
padding-bottom: 10px;
float: right;
}

.buttons a:hover, .buttons a.more-link:hover, .buttons input:hover {
background-color: #fcfcfc !important;
background-image: -ms-linear-gradient(top, #fcfcfc, #e8e8e8);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#e8e8e8));
background-image: -webkit-linear-gradient(top, #fcfcfc, #e8e8e8);
background-image: -o-linear-gradient(top, #fcfcfc, #e8e8e8);
background-image: linear-gradient(top, #fcfcfc, #e8e8e8);
background-image: -moz-linear-gradient(top, #fcfcfc, #e8e8e8);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#e8e8e8', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
text-decoration: none;
float: right;
}

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

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

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

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

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