Тег more — как редактировать ссылку читать далее на wordpress

Приветствую вас, друзья, на блоге — SdelaemBlog.ru. Сегодня поговорим о теге more (Читать Далее), который делит статью на анонс и основной текст. И как вы уже могли догадаться, он используется на бесплатном движке Wordpess. Сегодня попробуем разобраться,  как использовать эту возможность у себя на сайте и как изменить внешний вид и описание ссылки.

По умолчанию, статью делит ссылка: Читать Далее (Read More). Но ведь наш проект должен быть уникальным и не похожим на другие, поэтому данное положение вещей, нам не подходит. Итак, давайте разберем, как все это работает?

Для чего нужен тег more на wordpress?

Если написать статью не используя more, то статья в полном объеме попадет на главную страницу wordpress. И, по-моему, выглядеть это будет, как минимум, не очень.

А вот так будет выглядеть пост разделенный на анонс и основную часть. То есть на главной странице, будет выводиться только анонс поста.

Выглядит гораздо аккуратней. Но сама ссылка «далее», выглядит довольно убого. Да и находится не там, где я хотел бы ее видеть. Что мы можем с этим сделать?

Как изменить текст тега more на сайте wordpress?

Чтобы отредактировать текст. Нужно открыть, используя текстовый редактор, файл index.php, и найти следующий код.

<?php the_content(); ?>

Он  может выглядеть и вот так:

<?php the_content( $more_link_text, $stripteaser ); ?>

То есть выглядеть он может по разному, но результат его отображения в статье может быть один.

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

<?php the_content('Читать статью:'); ?>

После этого ссылка на полную запись будет выглядеть следующим образом:

Также в этот код можно добавить тайтл статьи:

<?php the_content("Читать статью:" . the_title('', '', false)); ?>

После всех изменений, тег more wordpress, стал читаться так:

Итак, текст ссылки мы изменили — это основные и самые используемые способы. Но он все еще находится не там, где хотелось бы. Поэтому нужно заняться его внешним видом…

Как изменить внешний вид тега more?

Для изменения, нужно найти в файле style.css, следующий класс:

.more-link

С помощью данного класса можно изменить расположение кнопки относительно анонса поста, изменить размер цвет ссылки, добавить фон, или вообще заменить текст картинкой. Например так:

.more-link{
background: #FFFFFF;
float: right;
margin: 30px 10px 10px 10px;
border: 1px solid #C3B17F;
border-radius: 4px;
box-shadow: 0px 5px 5px #C3B17F;
padding: 5px;
}

В итоге, я получил такой внешний вид, который меня устраивает на данном этапе.

Уникальный тег more, для каждой статьи wordpress

Все способы описанные выше, являются способами для ленивых. Но тег можно редактировать и непосредственно при написании статьи. При этом, его можно сделать уникальным, для каждого отдельного поста. Проще всего, это можно сделать так:

Сам код разделяющий текст поста, в режиме html, выглядит так:

<!--more-->

А для создания уникального текста, нужно при написании статьи на wordpress, включить html-режим. И в нужное место вставить следующий код:

<!--more Уникальная ...-->

Вместо «уникальная …» — впишите любой текст, который в итоге станет ссылкой на полную запись.

И выглядеть уже будет так:

Ну вот и все на сегодня. Теперь зная все это, Вы сможете сделать, что угодно с тегом more. При этом, от Вас не потребуется никаких особых усилий. До новых встреч!