«Читать далее» в виде кнопки как на этом сайте

Итак, нужно чтобы обыденный шорткат «Читать далее» отображался в виде кнопки, как здесь.
Делаем следующее.

1. В файле functions.php, который, конечно, лежит у нас в child-теме, создаем функцию, которая, собственно и будет преобразовывать ссылку «Читать далее» в кнопку. Функция будет выглядеть так:

function change_more_link() {
$permalink = get_permalink();
global $more_link_text;
$output .= "<div id='read_more_container'><a id='read_more_button' href='$permalink'>$more_link_text</a></div>";
return $output; }

2. Снова в functions.php заменяем стандартную функцию прорисовки «Читать далее» на только что написанную:

add_filter('the_content_more_link','change_more_link');

3. В файле wp-includes/post-template.php находим функцию get_the_content и в ней, в список глобальных переменных добавляем переменную $more_link_text, т.е. получится

function get_the_content( $more_link_text = null, $strip_teaser = false ) {
global $page, $more, $preview, $pages, $multipage, $more_link_text;......

Это делается для того, чтобы в кнопке отображался текст, который вы введете после тега «more». Тут нужно сказать, что в данном случае изменяется post-template.php родительской темы, поэтому, после обновления WordPress, понадобится снова повторить этот шаг, иначе текст в кнопке перестанет отображаться и будет просто пустая кнопка без надписей.

4. В файле style.css child-темы прописываем настройки отображения кнопки (#read_more_button), как нравится. В моем случае они такие:

#read_more_button {
border-radius: 5px;
margin: 0 0 5px;
padding: 0 10px;

background-color: #E5E5E5;
background-image: -moz-linear-gradient(center top , #FBFBFB, #E5E5E5);
border-color: #D8D7D7 #CCCBCB #AEAEAE;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #313131;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: normal;
height: 26px;
line-height: 26px;
padding: 0 9px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
vertical-align: middle;

}

#read_more_button:hover {
background-color: #EEEEEE;
background-image: -moz-linear-gradient(center top , #EEEEEE, #E1E1E1);
}


Не забывайте оставлять комментарии, если пост был вам полезен!
Опубликовано в Wordpress Метки:
4 comments on “«Читать далее» в виде кнопки как на этом сайте
  1. Здравствуйте, а есть какие либо плагины для создания таких кнопок?

  2. poor credit loan
    online loans bad credit
    cash advance pensacola fl

Добавить комментарий

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

*

Заодно посмотрите мои фоты в моем профиле вконтакте. Любые вопросы по существу статей можете задать там же.
Hostenko — лучший WordPress-хостинг