За идею поста спасибо читателю блога Вебсовет Михаилу. Тема на самом деле довольно интересная. Когда-то я тоже застрял на этом моменте и долго искал внятный способ решения. Речь идет о визуальном оформлении ссылки типа “читать далее…” в блоге на движке 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.
Все просто! Если у вас есть другие варианты решения данной проблемы, буду рад услышать.
Лавочка сувениров — только и всего…
Вопрос плиз
Указанный код “continue” прописывается непосредственно в теле поста?
Ответить
Михаил, не в теле поста, а в шаблоне. А еще точнее в файле index.php шаблона
Ответить
Господа!
После проверки предложенного кода выяснилось, что блок “Далее” выводится после каждого поста, независимо от того, есть ли в нем тег “More…”. Чего же в супе не хватает?
После некоторых экспериментов у меня получился такой код:
index.php (для простоты я привожу весь код вывода тела поста)
<a href=”#more-”>Читать подробно »
style.php
.continue {
margin:15px 0;
padding: 5px;
background: #E6E6E6;
width:135px;
}
.continue a {
color:#FF7956;
text-decoration:none;
}
.continue a:hover{
color:#00F;
text-decoration:underline;
}
В результате получается полноценный DIV, который выводится только если в посте есть тег “More…”
Может быть решение и сложновато, но наши “корифеи” на почту не отвечают - приходится действовать методом втыка.
Результат работы модифицированного index.php - на сайте http://www.helppsianna.ru/
С уважением к коллегам, материалы которых использованы при доработке
Михаил
Ответить
Господа!
Прошу прощения, в предыдущем комменте почему-то потерялся код в index.pxp повторю его
<a href=”#more-”>Читать подробно »
Ответить
Здравствуйте, Михаил!
Вы правы, тэг выводится после каждой статьи. Применять подобную конструкцию имеет смысл в тех блогах, где все статьи выходят в виде анонсов. Если же нужна универсальная конструкция, то код будет более сложным. Возможно я еще вернусь к этой теме позже.
Ответить
Здравствуйте. спасибо за статью. Возник небольшой вопрос, а как сделать так, чтобы гиперссылка “Читать далее” выводилась сразу за оборвавшимся предложением, а не на следующей строке?
Сейчас посты формируются так:
Текст текст текст. Бла-бла бла бла
Читать далее…
А нужно:
Текст текст текст. Бла-бла бла бла Читать далее…
Заранее спасибо за комментарий к моему вопросу.
Ответить
Стас, для этого просто вставляйте тэг more не вначале следующего абзаца, а в конце текущего.
Ответить
А как пристыковать картинку к левому краю? Align’ом не получается
Ответить
Егор, а у вас она где находится?
Ответить
Отступ небольшой от левого края был. Решил вставлять кнопку как класс, т.е. без картинки, но ее подчеркивает как ссылку. Вот что в коде получается:
<a href=”#more-”><input class=”art-button” type=”submit” name=”more” value=”" />
Может можно как-то убрать подчеркивание конкретной ссылки, не затрагивая при этом остальные?
Спасибо
Ответить
Вот исходный код, может туда можно кнопку вставить?
<?php if (is_search()) the_excerpt(); else the_content(__(’Дальше ⇒‘, ‘kubrick’)); ?>
Код кнопки:
<input class=”art-button” type=”submit” name=”more” value=”" />
Ответить
Сообщение одно пропало.
Пытаюсь вместо картинки вставить кнопку, как класс, но ее выделяет как ссылку, и, соответственно, подчеркивает. Можно ли убрать подчеркивание одной ссылки, не затрагивая остальные, или вставить кнопку в исходный код, опубликованный выше.
Большое спасибо
Ответить
Половина сообщений не отправилась)
Ответить
Егор, увы не получится. Хоть картинка, хоть кнопка, все равно они обрамлены тэгом <a href=”"></a> и будут работать как ссылка.
Ответить
Большое спасибо, Игорь
Ответить
Тогда может возможно добавить один , чтобы был отступ от нижнего колонтитула статьи (категории, комментарии и т.п)?
Ответить
один “брейк”
Ответить
Можно и так :)
Ответить
Переделал default тему в свою, на главной надпись “Читать далее” изменил без труда, но в архивах и рубках она появляется в виде (далее…) и вот с ней ничего не получается, перерыл весь движок, она меняется в wp-includes/post-template.php, но при ее изменении, перестает работать например rss лента и многие статичные страницы. Пробовал менять в переводе (ru_RO.po) безрезультатно.
Какой то просто бред, у кого нито было такое? Если интересно посмотрите на сайте.
Ответить
Nazz, нужно сделать то же, что и в index.php, в файлах single.php и archive.php
Ответить
Здравствуйте.
Не подскажете, почему в rss не отображаются картинки? Где-то набрел на тему, что возможно это из-за того, что картинка перед тегом , но что нужно сделать, чтобы исправить не было сказано.
Ответить
Не понятно, о какой картинке идет речь: картинка, заменяющая текст “Читать далее” или картинки из поста? В любом случае, если что-то не отображается в rss-ленте, то нужно искать причину в настройках самой ленты.
Ответить
Спасибо за ответ.
Именно о картинке в посте. А где можно еще найти настройки rss-ленты, кроме как в меню wordpress “Параметры–>Чтение”?
Ответить
Dobrejshij, это смотря чей фид используете. Если только самого Wordpress-а, то только в указанном вами разделе, а если фид идет через feedburner, то, соответствено, там. Про настройку фида через feedburner в сети очень много статей есть.
Ответить
Feedburner же все равно берет вордпрессовскую ленту, а она как раз без картинок и урезанная, соответственно и в нем такая же. Если изначально их нет, фидбернер их тоже туда засунуть не сможет.
Ответить
Если лента изначально без картинок, то проблема в движке. Я не знаю, как обстоит дело с версией 3.0. В старых версиях такой проблемы не наблюдалось. Во всяком случае, у меня.
Ответить
Спасибо, обновлюсь до 3.01 посмотрю что получится. Если не поможет буду копать дальше.
Ответить
я так и не понял решили вы проблему с тем что выводится (далее..) но я её вовсе отключаю и если не поставить more самому то пост будет полный, но и (далее…) не высвечивается даже если поставить more
Ответить
У меня была проблема с выводом ( Далее…) На loclhoste я поменял на “Читать полностью”. После того, как перекинул блог на хост, опять стало (далее…). Просмотрел файлы и в archive.php почемут-то: оказалось пусто. Вставил запись и всё Ок!
Ответить
Можно ли сделать так, чтобы под кат прятался не весь текст до конца, а выбранная часть - в середине записи, например?
Если можно, то как?
Ответить
Игорь Квентор 17.02.2011
@Semitone, любопытный вопрос. Хотя и не понятно, зачем это делать.
Ответить
Semitone 18.02.2011
@Игорь Квентор, применений очень много. Например, текст со множеством технических материалов или примечаний, которыми не хочтеся портить стройное повествование, но дать возможность открыть интересующимся. Спойлеры, опять же в отзывах о произведениях разных… Да много всего, если представить.
Очень надеюсь, что ответ найдется. )) Я знаю, что в ЖЖ и Ли такая возможность уже существует. Значит, где-то она должна “порыться” и в других блоговых движках.
Ответить
Игорь Квентор 20.02.2011
@Semitone, так это уже не тэг more, а специальные слайдеры на jquery, имхо. Наверняка для ВП уже есть подходящие плагины. Попробуйте поискать.
Ответить
я решил проблему с цветом просто написав стиль непосредственно перед кнопкой:
else
{ ?>
.more-link{
color:#C3481E;
text-decoration:none;
font-weight:700;
}
и все отлично работает =)
Ответить
Очень хорошо объяснил. сейчас попробую реализовать. спасибо
Ответить