17 февраля 2010

Улучшаем more >>

Если взглянуть на код в файле index.php вашей темы, то можно найти  функцию the_content(); с помощью которой отображается либо все содержимое поста либо только та часть, которая находится до тега ‹!— —more— —›. Если the_content() вызывается без параметров или тема вашего блога не русифицирована, то на экране вы увидите примерно как на картинке


где ‘more’ смотрится как-то одиноко.
Давайте сделаем, чтобы ссылка на открытие статьи выглядела более презентабельно.
Сначала открываем файл темы index.php расположенный в /wp-content/themes/наша_тема/.  В редакторе, например Notepad2, Жмем CTRL+F для поиска вхождения ‘more‘ или ‘the_content‘.

...
     <div class="entry">
	<?php the_content('more &raquo;'); ?>
     </div>
...

Заменяем ‘more‘ на ‘Читать полностью‘ или текстом, который Вам нужен. Перед сохранением файла в редакторе Notepad2 не забудьте установить кодировку UTF-8 через меню File -> Encoding


Но нам, конечно, этого мало. Сделаем так, чтобы Читать полностью отображалось справа внизу поста и выглядело более заметно на фоне остального текста. Например вот так:

Для этого открываем главную страницу сайта в любом браузере, нажимаем CTRL+U, чтобы загрузился исходный код. Ищем CTRL+F вхождение строки ‘Читать полностью‘:

<p> <a href="/zachem-nuzhen-akkaunt-na-gugle.html#more-21" class="more-link">Читать полностью &raquo;</a></p>

Видим, что наша надпись принадлежит классу ‘more-link’. Теперь нужно переопределить этот класс задав необходимые нам свойства. Открываем файл wp-content/themes/название_темы/style.css и дописываем в конце код:

.more-link {
	float: right;/*показывать справа поста*/
        border: 1px dotted #000000;/* толщина вид цвет границы*/
        padding-top: 5px;/* отступ текста от границы сверху*/
        padding-right: 10px; /* отступ справа*/
        padding-bottom: 5px;/*отступ снизу*/
        padding-left: 10px;/*отступ слева*/
        background-color: #e2e2e2;/*цвет фона*/

}

Для подбора цвета используйте http://www.antula.ru/colour-name_2.htm или ищите по ключу цветовая палитра или здесь

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

Комментариев: 10

Вы можете следовать любому комментарию через RSS 2.0 feed.

Вы можете оставить комментарий или trackback с вашего сайта.

  1. Привет очень неплохой пост, полезный начинающим, я решил извратится над «Читать далее..» побольше, можешь почитать в посте соответствующем :) http://www.lexxiy.ru/izmenenie-vyvoda-chitat-dalee-v-svoem-bloge-wordpress.html

  2. И еще, подскажи плагин которым ты листинги выводишь, если не секрет конечно :)

  3. Спасибо, использовал информацию в этом посте, чтобы улучшить свой блог http://blogseonews.ru/

  4. Добрый день! Очень полезный сайт. уже поменял 3 тему в прошлой ставил «море», в редакторе все отображалось, а на сайте не убиралось. поменял на другую тему. Пишу статью, вставляю «море». на сайте первая половина видна, нажимаю читать дальше. выскакивает ошибка 404 не найдено. 2.написал статью отметил ссылку куда она должна пойти, а она на главную ушла. 3. если возможно как прилипить статью, чтоб всегда первая была на главной странаце.что делать подскажите.

    • Alex:

      по 3 пункту — в окне редактирования статьи в виджете опубликовать, кликайте видимость изменить-> прилепить на главную страницу
      по 1-2 стучите, координаты /kontakty

Оставьте комментарий

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере