Форум Сайтостроение Веб-строительство

Заменить в WP "читать далее" на картинку+ссылка

Evgeniy T.
На сайте с 29.04.2007
Offline
101
Evgeniy T.
2525

Никак не получается в шаблоне Вордпресс заменить "читать далее" на картинку со ссылкой. В шаблоне это предусмотрено, но не работает. Пытался погуглить на эту тему, но не помогло )).

В шаблоне для этого прописан код:

<div class="content">
<?php the_content('читать далее'); ?>
</div>
<div class="more"></div>

Стили упомянутые выше и связанные с ними:

.content {
margin-top:15px;
padding-left:10px;
}
.content a {
color:#36bbdc;
text-decoration:underline;
}
.content a:hover {
color:#36bbdc;
text-decoration:none;
}
.more {
background:url(../images/more.jpg) left center no-repeat;
margin-left:12px;
padding-left:18px;
}
.more a {
color:#aaa5a3;
font:13px Tahoma;
text-decoration:underline;
}
.more a:hover {
text-decoration:none;
}

Выглядит на данный момент так:

[ATTACH]30881[/ATTACH]

А планировалось вот так:

[ATTACH]30882[/ATTACH]

jpg kartinka1.jpg
jpg kartinka2.jpg
[Удален]
#1

Попробуйте так:

<div class="content">
<?php the_content('<img src='адрес изображения' width='' height='' border='0' alt='читать далее' />'); ?>
</div>
<div class="more"></div>
Evgeniy T.
На сайте с 29.04.2007
Offline
101
Evgeniy T.
#2

Если таким способом, то выходит:

[ATTACH]30883[/ATTACH]

Если после тега картинки еще вписать "Читать далее", то выходит:

[ATTACH]30884[/ATTACH]

А это отличается, от того чего нужно добиться. Может есть еще способы ?

jpg kartinka3.jpg
jpg kartinka4.jpg
!
На сайте с 29.11.2007
Offline
109
!bogus
#3

Mr.Sm!th, если сработает Ваш вариант, то можно убрать лишнее и добавить еще текст и класс для картинки ;)

<div class="content">
<?php the_content('<img src='адрес изображения' class='morepic' /> читать далее'); ?>
</div>
<div class="more"></div>
.
Evgeniy T.
На сайте с 29.04.2007
Offline
101
Evgeniy T.
#4
!bogus:
Mr.Sm!th, если сработает Ваш вариант, то можно убрать лишнее и добавить еще текст и класс для картинки ;)

В принципе на иллюстрациях так и сделано, как вы сейчас дополнили, но не помогло

!
На сайте с 29.11.2007
Offline
109
!bogus
#5

Добавьте в ваш style.css этот код

.more-link {

padding-left: 9px;

background: url(images/bullet.gif) no-repeat 0 4px;

}

Папка должна быть в папке с темой.

Проверил на одном из сайтов, появилась стрелка, без подчеркивания.

Класс также взял тот, что используется на моем сайте.

Правда такое же название класса было и у других сайтов на WP :)

up

Также раздел на сайте codex.wordpress.org/Customizing_the_Read_More#Adding_An_Image

Там предлагают два варианта, но первый уже предложил Mr.Sm!th

А второй как раз с CSS

Evgeniy T.
На сайте с 29.04.2007
Offline
101
Evgeniy T.
#6

:)

Добавьте в ваш style.css этот код
.more-link {
padding-left: 9px;
background: url(images/bullet.gif) no-repeat 0 4px;
}
Папка должна быть в папке с темой.
Проверил на одном из сайтов, появилась стрелка, без подчеркивания.

Класс также взял тот, что используется на моем сайте.
Правда такое же название класса было и у других сайтов на WP

up
Также раздел на сайте codex.wordpress.org/Customizing_the_Read_More#Adding_An_Image
Там предлагают два варианта, но первый уже предложил Mr.Sm!th
А второй как раз с CSS

Вот что удалось сделать:

[ATTACH]30890[/ATTACH]

Подчеркивание теперь только под ссылкой, что не может не радовать :) (спасибо !bogus)

Осталось разобраться как сделать переход на следующую строку с отступом от верхнего края в 15 px

Путем добавления строчки margin-top:15 px; в файле css к классу .more-link - не помогло.

jpg kartinka5.jpg
[Удален]
#7
Evgeniy T.:
:)

Осталось разобраться как сделать переход на следующую строку с отступом от верхнего края в 15 px
Путем добавления строчки margin-top:15 px; в файле css к классу .more-link - не помогло.

margin устанавливает величину отступа от каждого края элемента, но не переход на следующую строку.

в том варианте, что я писал перед <img добавьте <br /> или заключите все содержимое в <p></p>.

[Удален]
#8

Evgeniy T. делай так

<div class="content">
<?php the_content('<div style='clear: both;'>&nbsp;</div><div style='float: left; padding: 10px 0px;'><img src='адрес изображения' class='morepic' /> читать далее</div>'); ?>
</div>
<div class="more"></div>
Evgeniy T.
На сайте с 29.04.2007
Offline
101
Evgeniy T.
#9
KosoyRoman:
Evgeniy T. делай так

Выходит в таком случае такое:

Parse error: syntax error, unexpected T_STRING in путь_к_шаблону/index.php on line 20

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий