Тег далее в wordpress. Красивая кнопка читать далее для WordPress без плагина

03.07.2020

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

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

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

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

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

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

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

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

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

Для изменения, нужно найти в файле 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, выглядит так:

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

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

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

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

Результат сегодняшней статьи вы можете посмотреть на главной странице.

float: right; /* Отвечает за выравнивание кнопки право или лево */

width: 180px; /* Ширина кнопки */

height: 25px; /* Высота кнопки */

border: 2px solid #fff; /* Толщина обводки */

border-radius: 7px; /* Радиус */

box-shadow: 0px 0px 5px #007dab; /* Отвечает за тень кнопки */

background: #007dab; /* Цвет Фона кнопки */

font: normal 12px/25px Arial, sans-serif; /* Настойки шрифта, размер, стиль */

text-align: center; /* Выравнивание текста */

margin-right: 160px; /* Смещение вправо */

margin-bottom: 25px; /* Смещение вниз */

margin-top: -15px; /* Смещение вверх */
}
Это стиль моей кнопки, вы можете его редактировать как вам нужно, Но если вы мало понимаете в CSS то советую поменять только цвета и расположение кнопки относительно контенту! Сохраняем и переходим к следующему шагу.

И завершающий этап вывод самой кнопки в анонсах наших статей, открываем тут же в консоли в редакторе файл index. php находим такой код:


У вас он возможно немного отличается но думаю понятно, если что спрашивайте в комментариях я помогу разобраться.

И добавляем после него наш код с выводом красивой кнопки:
” title=””>

Рекомендую использовать для редактирования файлов блокнот Notepad++ , редактор для wordpress. Потому что можно вернуть сделанные изменения в отличии от стандартного редактора. Я не стал рекомендовать это в начале статьи потому что мы только добавляли код а не редактировали существующий, поэтому необходимость возврата изменений не так велика.

Добавляем Тег «Далее» в WordPress

Вы заметите, что появилась линия с ‘More’ по центру в теле записи. Вы можете вставить тег «Далее» в любом месте строки, как в середине предложения, так и в середине абзаца, или же сразу после первого.

Если вы используете текстовый редактор, то в нем также можно использовать кнопку «Далее» с панели инструментов или же вручную указать его следующим образом:

Преимущества использования Тега «Далее» против Цитат

Вы можете добавить цитату для любой записи, используя при этом соответствующую форму на странице редактор записей. Если же вам не видно этого блока, то кликните на «Настройки экрана» в правом верхнем углу и отметьте нужную галочку.

Появится мета блок цитаты под вашим редактором записей.

Возможно, цитаты кажутся более простыми в использовании, но есть пару недостатков при их использовании.

Первый заключается в том, что цитаты полностью зависят от темы. Если ваша тема не поддерживает тег the_excerpt , то вне зависимости от того, что вы напишите в блоке цитаты, ваша тема отобразит полный контент статьи на главной странице и страницы архива.

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

В это же время, Тег «Далее» полностью независим от темы, что означает что он будет работать на всех грамотно написанных темах WordPressю. Также, он позволяет вам выводить изображения и все опции форматирования вроде ссылок, жирный текст, текст курсивом и т.д.

Недостатки использования тега «Далее»

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

WordPress позволяет и указывать собственные выдержки (цитаты) в соответствующем блоке, и умеет автоматически генерировать ее в зависимости от указанного количества символов.

Нужно смотреть на свои задачи, потому как это может являться минусом в использовании.

Еще одним недостатком использования тега «Далее» есть то, что если вы используете тему, которая использует цитаты, то она «перезапишет» тег «Далее» и выведет цитату длиной, которая определяется вашей темой.

Вне зависимости от того, используете ли вы тег «Далее» или же цитаты, важно, чтобы отображалась только выдержка статьи на главной странице и архивах, а не полный материал.

Возможные проблемы с тегом «Далее»

Самой большой проблемой, о которой мы слышали в разрезе использования тега «Далее» являлось то, что он не срабатывает для страниц.

По-умолчанию, вы не можете использовать тег «Далее» на страницах WordPress, однако, это легко исправить, просто добавив следующий код внутри цикла:

Другой проблемой использования тега является то, что он не срабатывает на главной странице. Если вы используете статическую страницу в качестве произвольной главной, то код выше должен помочь решить вашу проблему.

Мы надеемся, что эта статья помогла вам научиться правильно использовать тег «Далее» в WordPress.

Если вы только начинаете разбираться с WordPress, то не забудьте посетить нашу рубрику , где мы публикуем материалы специально для новых пользователей WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Очень рад Вас видеть снова! Этой статьёй я продолжу тему .

Не так давно немного пошаманил над своим Интернет-ресурсом.

Кликните на неё, и вы сразу поймете её главную функцию. Неправда ли, такая красивая кнопка смотрится гораздо лучше, чем стандартная ссылка

Я не люблю плагины, потому как они излишне , а также некоторые из них не часто обновляются.

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

Прочитав ее, Вы сможете быстро создать на своем Интернет-ресурсе такую же.

Для этого зайдите в административную панель своего ресурса и перейдите по вкладкам Внешний вид—>Редактор. Из предложенных с правой стороны файлов шаблона для редактирования выберите functions.php. Теперь скопируйте вот этот код:

Function remove_more_link() { return ""; } add_filter("the_content_more_link", "remove_more_link");

Вставьте этот код в самый конец файла functions.php перед закрывающим тегом ?>

Затем нажимаем внизу кнопку «Обновить” для сохранения кода в файле.

После этого нужно добавить специальный код, который будет отображать внешний вид самой кнопки. Для этого в том же редакторе файлов шаблона нажимаем на другой файл — style.css.

После его открытия добавляем код, который я пропишу ниже в то место, где выводятся стили для контента. То есть после вот такой надписи в файле:

/* CONTENT */

У Вас он может называться несколько иначе, но суть одна и та же. А вот и сам код:

.read_more { float: right; /* Отвечает за выравнивание кнопки право или лево */ width: 130px; /* Ширина кнопки */ height: 25px; /* Высота кнопки */ border: 2px solid #fff; /* Толщина обводки */ border-radius: 7px; /* Радиус */ box-shadow: 0px 0px 15px #007dab; /* Отвечает за тень кнопки */ background: #FFFFFF; /* Цвет Фона кнопки */ font: normal 16px/25px Arial, sans-serif; /* Настойки шрифта, размер, стиль */ text-align: center; /* Выравнивание текста */ color: #ffffff; margin-right: 10px; /* Смещение вправо */ margin-bottom: 25px; /* Смещение вниз */ margin-top: -15px; /* Смещение вверх */ }

После всех изменений файла не забудьте нажать кнопку «Обновить» для сохранения изменений.

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

Для этого там же в Редакторе своей темы нажимаем на файл index.php, чтобы его открыть. В нем нужно найти подобную строчку:

Сразу после этой строчки кода необходимо добавить код для вывода самой кнопки:

" title="">
Читать статью

Не забываем обновить файл для вступления изменений в силу.

Теперь можно обновить главную страницу своего блога и посмотреть на улучшения.

Ну, вот и всё. Результат, как видите, налицо.

Если у Вас возникли трудности, тогда задавайте мне вопросы в комментариях. И не забудьте подписаться на обновления моего блога, чтобы получать свежие статьи на свою почту.

До новых встреч, друзья! Надеюсь, был Вам полезен. Пока.

Успехов Вам и Удачи
С Уважением,