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

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

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 Метки:
5 comments on “«Читать далее» в виде кнопки как на этом сайте
  1. online order cialis overnight delivery
    generic cialis
    cheap soft cialis pills
    cheap cialis

  2. I love your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to
    do it for you? Plz answer back as I’m looking to design my own blog and would like to find out where u
    got this from. thanks a lot

  3. That is a very good tip particularly to those new to the
    blogosphere. Simple but very precise information… Thanks for
    sharing this one. A must read post!

  4. Ahaa, its good dialogue regarding this article here at this
    website, I have read all that, so now me also commenting at this place.

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

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

*

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