Оформление тэга more в WordPress
За идею поста спасибо одному из читателей блога Вебсовет. Тема на самом деле довольно интересная. Когда-то я тоже застрял на этом моменте и долго искал внятный способ решения. Речь идет о визуальном оформлении ссылки типа «читать далее…» в блоге на движке WordPress. Она автоматически появляется внизу анонса поста, если автор решил убрать под кат основное содержимое статьи.
Зачастую эта ссылка не слишком заметна. Специально ее искать будет лишь тот, кто сообразит, что статья не закончилась на втором-третьем абзаце, и есть там что-то еще. Чтобы как-то выделить данную ссыль, нужно ее соответствующим образом оформить. Но как это грамотно сделать? Ведь если заглянуть в код большинства шаблонов WordPress, то можно обнаружить, что текст данной ссылки как бы «зашит» в php-код вывода статьи. Вот в таком, например, виде:
<?php the_content('Читать далее... »'); ?>
Здесь the_content выводит непосредственно само содержимое статьи, внешний вид которой (в том числе и вид ссылок) уже предопределен в файле css в каком-нибудь наборе правил для класса entry или ему подобным. Как выцарапать отсюда ссылку «читать далее», чтобы придать ей более яркий вид?
Оформление тэга more в WordPress. Способ 1
Во-первых, у движка WordPress уже есть на сей счет заготовка в виде класса more-link. То есть, как бы вы не извращались с шаблоном, но сам движок в любом случае подставит к данной ссылке class="more-link". И это очень полезная штуковина. Она говорит о том, что мы преспокойно можем использовать данный класс, просто добавив для него некоторый набор правил в лист стилей css нашей темы. По сути, нам остается лишь дописать в файле style.css шаблона что-то вроде:
.more-link {
background: #ffc;
}
Тем самым мы ссылке «Читать далее» зададим фон цвета #ffc;. Уже хоть что-то.
Но! Здесь есть небольшая засада. Дело в том, что слишком вольно с данной ссылкой мы обращаться не можем по одной простой причине: ссылка эта наследует все те правила, которые уже предопределены для ссылок в посте. Фон изменить можно, размер шрифта тоже можно. Но цвет ссылок уже не поменяешь. Кроме того, заменить текстовую ссылку картинкой — тоже задачка не из простых. Поэтому читаем другой способ.
Оформление тэга more в WordPress. Способ 2
Во-вторых, можно эту ссылку вынести вообще в отдельный блок, которому задать какие угодно правила отображения. Как это сделать? Леххко и непринужденно! Для начала в файле index.php немного исправим то место, где говорится о выводе содержимого статьи. Это все та же часть:
<?php the_content('Читать далее... »'); ?>
Здесь мы просто удалим все, что находится между одинарными кавычками и оставим вот такую запись:
<?php the_content(' '); ?>
Если за вывод текста отвечал какой-либо класс типа entry, то самое время здесь закрыть данный блок (ставим </div> и идем пить чай). Это освободит нас от наследуемости стилей. Далее, мы добавим в код страницы следующую запись:
<div class="continue">
<a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>">Читать далее...</a>
</div>
Теперь у нас есть для ссылки «Читать далее…» специально выделенный блок по имени continue. Вот ему-то как раз и можно задать какое угодно отображение в файле style.css. Или вообще вместо текста «Читать далее» можно разместить картинку:
<div class="continue">
<a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>"><img width="180px" height="30px" src="<?php bloginfo('template_directory'); ?>/images/bg-more.gif" alt="Читать далее" /></a>
</div>
Понятно, что картинка уже должна лежать в папке images вашего шаблона и иметь заданные размеры и название bg-more.gif.
Все просто! Если у вас есть другие варианты решения данной проблемы, буду рад услышать.
