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

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

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 Метки:
3 comments on “«Читать далее» в виде кнопки как на этом сайте
  1. Wonderful beat ! I wish to apprentice whilst you amend
    your website, how could i subscribe for a weblog site?

    The account helped me a appropriate deal. I have been tiny bit familiar of this your broadcast provided shiny
    transparent idea

  2. Sling tv coupons and promo codes for november
    2018
    I’d like to find out more? I’d care to find out some additional information.
    Sling tv coupons and promo codes for november 2018

  3. where to buy sildenafil in dhaka sildenafil viagra for honeymoon.

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

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

*

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