Тег MORE (читать далее) — улучшение и задание нужного стиля

Сегодня статья о таком тэге, как тэг «More» или «Читать далее», «Читать полностью» — в разных темах он имеет разную русскую надпись.

Для чего этот тег?

Допустим, вы написали запись в одной из рубрик на своём сайте. Запись получилась большая и на главной странице она занимает очень много места, а нам хотелось, предположим, чтобы на главной было видно лишь некоторую часть от этой записи. Реализовать это как раз таки может наш тег «More».

Использовать его очень просто — при написании статьи, если вы писали её в визуальном редакторе (визуально), следует перейти в режим HTML и в нужное место вставить тег «more», который находится на верхней панели html-редактора.

Сохраняем запись, переходим на главную страницу сайта и любуемся компактностью и функциональностью главной страницы.

Не русифицированный шаблон?

Что делать, если тема сайта на вордпресс, которую вы используете, не русифицирована и тэг «more» так и выводиться, а нам хотелось бы, чтобы вместо этой надписи было что-то вроде «Читать далее», или «Читать полностью» или любой другой вариант?

Делать нужно вот что:

1) Зайти в консоль управления вашим сайтом;

2) Открыть редактор: «внешний вид» — «редактор»;

3) Найти справа файл index.php и щёлкнуть на него, тем самым открыв на редактирование код данного файла;

4) Найти  коде файла следующие строки:

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

Тем самым мы нашли тэг «More»;

5) Теперь пишем вместо текста More свой. К примеру, «Читать далее». Должно получиться так:

<div class="entry">
					<?php the_content('Читать далее &raquo;'); ?>
				</div>

Обновляем файл index.php (основной шаблон) нажатием кнопки «Обновить файл» и любуемся результатом.

Определяем класс надписи «Читать полностью»

Чтобы продолжить улучшать тэг «More» нам нужно узнать класс самой надписи. Для этого открываем наш сайт и смотрим на исходный код. В браузере Opera, исходный код можно посмотреть, нажав на страницу правой кнопкой мыши и выбрав «Исходный код». Открывать нужно главную страницу сайта, там где есть уже использованный тег «More».

Ищем в коде примерно следующее:

<p> <a href="http://gannforex.ru/o-teorii-ganna.html#more-21" class="more-link">Читать полностью &raquo;</a></p>

Видим, что используется класс «more-link». Отлично! Теперь осталось только его улучшить, задав нужный стиль этому классу.

Задаём стиль для «More»

Чтобы задать стиль для найденного класса, нам нужно опять зайти в редактор кода и открыть на редактирование файл «Таблица стилей». Открываем и прописываем в конец кода этого файла примерно следующее:

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

}

Нажимаем обновить файл и любуемся улучшенной ссылкой «Читать далее»!

1 Комментарий

  1. Матвей:

    Вот спасибо вам- всё просто и понятно! Я стили немного другие прописал, а так — отличная, полезная информация! Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *