Оформление тэга more в Wordpress

Дата: 17.11.2009 | Автор: Игорь Квентор | Рубрика: WordPress |

Тэги: css, WordPress, тэг more

За идею поста спасибо читателю блога Вебсовет Михаилу. Тема на самом деле довольно интересная. Когда-то я тоже застрял на этом моменте и долго искал внятный способ решения. Речь идет о визуальном оформлении ссылки типа “читать далее…” в блоге на движке Wordpress. Данная ссылка появляется внизу анонса поста, если автор решил убрать под кат основное содержимое статьи.

Зачастую эта самая ссылка не слишком заметна. Специально ее искать будет лишь тот, кто сообразит, что статья не закончилась на втором-третьем абзаце, и есть там что-то еще. Чтобы как-то выделить данную ссыль, нужно ее соответствующим образом оформить. Но как это грамотно сделать? Ведь если заглянуть в код большинства шаблонов Wordpress, то можно обнаружить, что текст данной ссылки как бы “зашит” в php-код вывода статьи. Вот в таком, например, виде:

<?php the_content('Читать далее... »'); ?>

Здесь the_content выводит непосредственно само содержимое статьи, внешний вид которой (в том числе и вид ссылок) уже предопределен в файле css в каком-нибудь наборе правил для класса entry или ему подобным. Как выцарапать отсюда ссылку “читать далее”, чтобы придать ей более яркий вид?

Во-первых, у движка Wordpress уже есть на сей счет заготовка в виде класса more-link. То есть, как бы вы не извращались с шаблоном, но сам движок в любом случае подставит к данной ссылке class=”more-link”. И это очень полезная штуковина. Она говорит о том, что мы преспокойно можем использовать данный класс, просто добавив для него некоторый набор правил в лист стилей css нашей темы. По сути, нам остается лишь дописать в файле style.css шаблона что-то вроде:

.more-link {
background: #ffc;
}

Тем самым мы ссылке “Читать далее” зададим фон цвета ffc. Уже хоть что-то. Но! Здесь есть небольшая засада. Дело в том, что слишком вольно с данной ссылкой мы обращаться не можем по одной простой причине: ссылка эта наследует все те правила, которые уже предопределены для ссылок в посте. Фон изменить можно, размер шрифта тоже можно. Но цвет ссылок уже не поменяешь. Кроме того, заменить текстовую ссылку картинкой — тоже задачка не из простых. Поэтому читаем другой способ.

Другой способ. Можно данную ссылку вынести вообще в отдельный блок, которому задать какие угодно правила отображения. Как это сделать? Лиххко и непринужденно! Для начала в коде страницы (к примеру, файл 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.

Все просто! Если у вас есть другие варианты решения данной проблемы, буду рад услышать.

Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Если вам понравилась эта статья и вы хотите перечитать ее более подробно позже, то просто добавьте закладку в ваш любимый сервис:

Мой Twitter

Если вас заинтересовал данный блог, то вы можете подписаться на RSS

Еще связочки

Мои книги

Избранное

• Добавление twitter-ленты на блог
• Wordpress und Sape — проблема с кодировкой
• Как восстановить базу данных
• Как установить сервер и Вордпресс на своем компьютере
• Настройка плагинов Вордпресс
• Firefox — убираем пунктир у ссылок
• 7 наиболее распространенных ошибок верстки
• Как прижать подвал к низу экрана
• Меню раздвижные двери или sliding door
• Меняющаяся картинка в шапке сайта
• Простая фотогалерея на CSS
• Простой ролловер
• Шпаргалка По CSS
• Простое горизонтальное субменю на CSS
• Тени для заголовков средствами CSS

Циклы статей

• Блочная верстка
• Создание 2-х колоночного шаблона для Вордпресс
• jQuery для чайников
• Проект Ипонамат. Зарабатываем денешки

Свежие записи

• jQuery для чайников | Всплывающая подсказка | Плагин Tooltip
• jQuery для чайников | Эффект линзы | плагин JQzoom
• Проблема с подпиской на email рассылку от Feedburner
• jQuery для чайников | Начальные сведения | Простой слайдер
• Создание стильной разделительной линии средствами CSS
• Ролловер на 4 состояния из одной горизонтальной картинки
• jQuery для чайников | Введение
• PDA версия сайта
• Несколько соображений по теме использования Twitter
• Уплывающий фон поисковой формы в шаблоне Wordpress

Свежие комментарии

• rust: Когда ждать пост ;)
• Луи Ползав: Ничего себе, об id никогда бы не подумал. Сам...
• Николай: Спасибо за разъяснения про сапу
• rust: Игорь, а не хотите написать пост о том, как зарабатывать...
• happybolt: Здравствуйте. Я с некоторым успехом воспользовался вашей...

Блогролл

• Creative design
• DesigNonstop
• Dizweb
• HDR Picture
• loovee
• Mannodesign
• NiceDom
• Photohike
• WebDevNews
• Баечка
• Моя Гитарная Школа

Пузомерки