Если у вас есть свой сайт WordPress, на котором записи выдаются в виде цитат, то, скорее всего, вместе с текстом контента у вас выводится и ссылка с текстом Read More.
Цель вывода такой ссылки: предоставить пользователю краткую цитату записи, чтобы он мог быстро просмотреть все свежие записи вашего блога. Это позволяет добиться большей свободы выбора для пользователей, а также позволяет реализовать более продвинутый опыт взаимодействия.
Сегодня я расскажу вам про тег «Read More» в WordPress, а также обучу вас тому, как его изменить в соответствии с вашими пожеланиями.
Основы
Чаще всего тег Read More используется в связке с функцией вывода цитат в WordPress, которая отображает заданное вами количество символов/слов. По умолчанию, WordPress лимитирует цитату определенным количеством слов, однако я покажу вам в дальнейшем, как изменить этот параметр.
Тег цитаты в WordPress – это короткая строка PHP-кода, которая имеет следующий вид:
Она может быть заменена на тег шаблона the_content(), где это будет целесообразно. Как правило, у вас будет индексная страница блога, на которой выводятся ваши свежие записи. Эти записи можно сделать цитатами, просто применив несколько параметров или заменив тег шаблона the_content() на the_excerpt().
Текст – это небольшая цитата с закрывающим многоточием, следом за которым идет кнопка с названием View Full Post.
Изменение тега Read More
Для начала вам нужно убедиться в том, что цитаты включены в вашей панели администратора в WordPress.
Войдите в консоль, перейдите к разделу Параметры – Чтение.
Вы увидите список настроек, однако нас интересует только параметр: «For each article in a feed, show». Вы также можете задать количество записей, выводимых в ленте блога.
Давайте выберем Summary вместо full text. После этого щелкаем по кнопке Save Changes.
По умолчанию, некоторые темы уже оптимизированы для вывода цитат вместо полного текста, как это отмечено в панели настроек. Наша тема Divi 2.0 – прекрасный пример такого подхода.
Ниже приведен пример установленной темы Divi. Я сгенерировал некоторый тестовый контент, чтобы показать, как будет выглядеть активный блог в этой теме. Ваш блог может несколько отличаться, особенно если вы используете другую тему.
Мне нравится то, как выглядят записи, однако, как мне кажется, в конец каждой записи нужно добавить кнопку, которая позволила бы прочесть весь контент целиком.
Чтобы сделать это, нам нужно углубиться в код нашего сайта. Открываем активную тему в редакторе кода. Я использую sublime text 2 в теме Divi , как показано ниже:
У меня открыт файл index.php. В нем есть некоторый код, который выводится то, что вы видите на странице блога. В теме Divi этот код был несколько усовершенствован, но его основы по-прежнему остались. Наше внимание должен привлечь следующий раздел:
Если вы никогда не работали с кодом Divi, то в таком случае вы можете воспользоваться нумерацией строк – этот код будет стоять в строках 50-57 (это верно только для темы Divi!)
Давайте изменим код, убрав произвольную функцию и поставив вместо the_content() вывод the_excerpt().
Вот как будет выглядеть обновленный блок кода. Чтобы все упростить и сделать более наглядным, я решил закомментировать код, который был ранее.
Если вы сохраните изменения и вернетесь на сайт, то вы, скорее всего, не увидите ничего нового. Нас по-прежнему надо переопределить стандарты WordPress с помощью произвольной функции.
/* Modify the read more link on the_excerpt() */ function et_excerpt_length($length) { return 220; } add_filter("excerpt_length", "et_excerpt_length"); /* Add a link to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/ function et_excerpt_more($more) { global $post; return "
Первые 4 строки задают произвольную функцию, которая управляет количеством слов, выводимых в цитате каждой записи блога. Затем добавляется фильтр, позволяющий выполнить функцию. Сцепляемся мы с функцией excerpt_length, чтобы установить ограничение в 220 символов.
Вторая функция изменяет ссылку Read More, переписывая стандартные значения WordPress. В данном примере я добавил ссылку, обернутую в div, чтобы я мог впоследствии стилизовать ее. Стилизацию я рассмотрю чуть позднее; сейчас вы можете перейти на сайт, где вы увидите следующее:
Стандартная CSS стилизация ссылок и записей используется автоматически в теме Divi 2.0; нам осталось лишь провести некоторую работу, связанную с тем, чтобы сделать ссылку кнопкой.
Мы присвоили анкору ссылки в файле functions.php класс view-full-post-btn. С его помощью я добавлю к ссылке некоторый CSS-код. Поместите CSS-код, представленный ниже, в свой файл style.css, чтобы настроить нашу ссылку. Не важно, где именно вы добавите код – важно, чтобы вы запомнили область его расположения, пригодится на будущее.
View-full-post-btn{ display:inline-block; /*border-radius*/ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:8px 16px; margin-top:10px; color:#454545; border:1px solid #d8dcdc; font-family:Georgia,serif; font-style:italic; font-size:16px; } .view-full-post-btn:hover{ background:#454545; /*transition*/ -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; border:1px solid #000000; color:#FFFFFF; }
После добавления стилей у меня есть красивая кнопка, которая отличается красивым эффектом при наведении курсора мыши.
Вместо того, чтобы выравнивать нашу кнопку по левому краю, давайте сделаем еще одно действие: присвоим float: right, чтобы ссылка была выровнена по правому краю контейнера, в котором она в данный момент находится. Также нам нужно настроить края для каждой нашей записи. Добавим следующий код в файл style.css:
Et_pb_post { margin-bottom: 100px; border-top: 1px solid #e1e1e1; } .et_pb_post:first-of-type { border-top: none; } .view-full-post { float: right; }
Теперь, когда мы поместили все необходимые стили, мы можем увидеть конечный результат. Каждая кнопка будет вести к вашей записи, что позволит пользователям просмотреть запись целиком.
Примечание: учтите, что стили не являются адаптивными.
Заключение
Добавление улучшений, таких как тег Read More, поможет вашим пользователям легче и быстрее работать с блогом. Организованная и структурированная информация позволит сделать ваш блог более понятным. С помощью функциональности цитат, встроенной в WordPress, вы можете сделать ваш контент более привлекательным, причем сделать это за короткое время.
Здравствуйте друзья! В статье рассмотрена оптимизация сайта WordPress для изменения надписей в шаблонах.
Оптимизация сайта WordPress поможет в продвижении блога
Одним из самых распространённых движков для создания собственных сайтов является движок WordPress. Не удивительно, что большинство сайтов (блогов) создано именно на нём. Благодаря наличию в Интернете большого количества различных шаблонов, сделать любой сайт (блог) может каждый новичок за пару часов, а то и быстрее. Оптимизация сайта WordPress — это необходимое мероприятие.
Конечно, шаблоны бывают разные — хорошие и не очень, но понимать, это мы начинаем тогда, когда прошло время, когда мы уже чему-то научились. Так было и со мной, год назад выбрал шаблон, сделал на нём сайт, а оказалось, шаблон «тяжеловат» и имеет ряд недостатков.
Можно конечно поменять шаблон, а можно просто доработать — провести оптимизацию WordPress. Решение принимается блоггером в зависимости от степени несоответствия шаблона определённым требованиям.
Бывает так, что именно из-за шаблона Яндекс не любит Ваш сайт.
С точки зрения дизайна, шаблон моего сайта меня вполне устраивал, но он имел много ошибок, которые были заложены в самом шаблоне. Пришлось часть ошибок исправлять.
Одним из недостатков моего шаблона были надписи на английском языке, что доставляло неудобство читателю. Это не ошибка, а просто неудобство, которое я решил тоже устранить. В данной статье мы рассмотрим оптимизацию WordPress, как изменить надпись?
Если бы мне сказали, что надо заменить английский текст на русский, год назад, я бы ни за что не взялся за эту работу сам – страшновато было лезть в коды, в которых ничего не понимаешь.
Итак, для замены английских слов на русские (на странице блога), необходимо зайти в админпанель нашего сайта. В левой колонке выбрать «Внешний вид», «Редактор». Справа открывается колонка «Шаблоны» в ней выбираем запись «Основной шаблон» (index php) и нажимаем на неё.
Открывается новое окно с кодом этой страницы. Для начала необходимо скопировать код и положить его папку на жесткий диск. Это надо для того, чтобы всегда можно было вернуть старый код на место, если произойдёт ошибка.
Желательно коды страниц всегда хранить у себя на компьютере, ситуации разные бывают. Например, сохранить можно следующим образом: ставим курсор в поле открывшегося окна, нажимаем Ctrl+A (выделение), далее Ctrl+С (сохранение). Теперь открываем Word или блокнот, сохраняем туда нажатием Ctrl+V и отправляем в нужную Вам папку.
После сохранения кода приступаем к поиску нужного нам английского текста (можно любой текст поменять). Для этого ставим курсор в поле кода, нажимаем Ctrl+F, в нижнем поле (смотрите скрин) записываем слово, которое нам надо найти. 
Как видим зелёным цветом выделено наше «Older Entries». Теперь мы его аккуратно выделяем (не нарушая пробелы) и удаляем, вместо него записываем «Старые записи».
Как видим на скрине, чуть ниже находится запись «Recent Entries», которую нам тоже надо заменить. Мы её также аккуратно выделяем, удаляем и меняем на нужный нам текст. После этого нажимаем «Обновить файл». Теперь идём на главную страницу сайта, обновляем страницу и видим наш результат, всё получилось.
После завершения этой работы проверяем записи в рубриках. У меня на страницах рубрик записи так и остались на английском языке. Значит надо найти код, где прописаны нужные слова для замены. Но если знаний о структуре сайта мало или их нет, то можно поступить просто.
Для поиска мы последовательно открываем коды всех шаблонов и через Ctrl+F проверяем нужные нам слова и фразы в кодах страниц. Находим нужные слова и меняем их на русские, делаем так же, как описано выше. Не забываем копировать и сохранять код перед началом работ. Таким способом Вы всегда найдёте страницы, где прописан нужный Вам код.
На моём шаблоне такие изменения пришлось делать на следующих страницах кодов:
- «Шаблон автора» (author.php);
- «Результат поиска» (search.php);
- «Архивы» (archive.php).
Шаблоны WordPress сильно отличаются друг от друга, поэтому у каждого могут быть свои особенности. Надо проверять, но принцип один и тот же.
После проведенных изменений все записи на сайте отображаются нормально. Оптимизация сайта WordPress частично выполнена. Итак, мы провели оптимизацию WordPress, разобрали вопрос, как изменить надписи в шаблоне. Как видите, ничего сложного нет, сделать такую работу может любой новичок.
Если после изменения записи появились проблемы, ничего страшного нет. Надо удалить изменённый код в окне выбранного шаблона и заменить его на оригинальный, который ранее мы сохранили на компьютере. После обновления корректная работа сайта восстановится.
Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"
Главная страница WordPress (статическая или анонсы)
Для начала хочу заметить, что содержание главной страницы в WordPress можно настроить через админку. Возможны два варианта главной:
- Последние записи
- Любая, выбранная вами страница
Настраивается это в разделе «Параметры
» -> «Чтение
»:
Здесь же можно указать максимальное число анонсов на главной странице: “На страницах блога отображать не более”.
Тег more WordPress
Эта кнопка добавит в код статьи тег . Весь текст, который находится до этого тега станет аннотацией. Проверяйте, что все теги аннотации закрыты, иначе могут появиться ошибки при выводе анонса в RSS ленту.
Уникальный тег more в Вордпресс
Будет здорово прописывать уникальный тег more для каждого поста. Ведь тогда после анонса будет отображаться ссылка с нужным вам анкором, например, с прямым вхождением ключевика. А это полезно для продвижения.
В зависимости от установленной темы, данный код может находиться и в других файлах, тогда поищите его во всех остальных php-файлах темы.
Как всегда приведу несколько примеров с комментариями к коду
1. Кнопка как у меня
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .more-link { background : none repeat scroll 0 0 #00B37C ; /*цвет фона */ border : 1px solid #62901E ; /*толщина и цвет границ */ border-radius : 5px ; /*закругленные края */ color : #FFFFFF ; /*цвет шрифта */ display : block ; font-family : verdana; font-size : 12px ; line-height : 12px ; padding : 8px 14px ; text-decoration : none ; text-transform : uppercase ; /*текст в верхнем регистре */ } |
More-link { background: none repeat scroll 0 0 #00B37C; /*цвет фона */ border: 1px solid #62901E; /*толщина и цвет границ */ border-radius: 5px; /*закругленные края */ color: #FFFFFF; /*цвет шрифта */ display: block; font-family: verdana; font-size: 12px; line-height: 12px; padding: 8px 14px; text-decoration: none; text-transform: uppercase; /*текст в верхнем регистре */ }
2. Плоская кнопка
| 1 2 3 4 5 6 7 8 9 10 11 | .more-link { background : none repeat scroll 0 0 #E81D1D ; color : #FFFFFF ; display : block ; font-family : verdana; font-size : 12px ; /*размер шрифта */ font-weight : bold ; /*жирный шрифт */ line-height : 12px ; padding : 8px 14px ; /*внутренние отступы */ text-decoration : none ; } |
More-link { background: none repeat scroll 0 0 #E81D1D; color: #FFFFFF; display: block; font-family: verdana; font-size: 12px; /*размер шрифта */ font-weight: bold; /*жирный шрифт */ line-height: 12px; padding: 8px 14px; /*внутренние отступы */ text-decoration: none; }
3. Кнопка с тенью и градиентом
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .more-link { background : linear-gradient(#DD1D1D , #A61518 ) repeat scroll 0 0 rgba (0 , 0 , 0 , 0 ) ; /*градиент */ border-radius : 4px ; box-shadow : 0 1px 2px 0 rgba (0 , 0 , 0 , 0.7 ) ; /*тень */ color : #FFFFFF ; font-size : 16px ; font-weight : bold ; height : 40px ; line-height : 40px ; text-align : center ; /*выравнивание по центру */ width : 155px ; /*ширина кнопки */ /* кроссбраузерность: */ background : -ms-linear-gradient(#DD1D1D , #A61518 ) ; /* IE10 */ background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #DD1D1D ) , color-stop(100% , #A61518 ) ) ; /* Safari 4+, Chrome 2+ */ background : -webkit-linear-gradient(#DD1D1D , #A61518 ) ; /* Safari 5.1+, Chrome 10+ */ background : -o-linear-gradient(#DD1D1D , #A61518 ) ; /* Opera 11.10 */ filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#DD1D1D" , endColorstr= "#A61518" ) ; /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#DD1D1D", endColorstr="#A61518")" ; /* IE8+ */ -moz-border-radius: 4px ; /* Firefox */ -webkit-border-radius: 4px ; /* Safari, Chrome */ -khtml-border-radius: 4px ; /* KHTML */ } |
More-link { background: linear-gradient(#DD1D1D, #A61518) repeat scroll 0 0 rgba(0, 0, 0, 0); /*градиент */ border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.7); /*тень */ color: #FFFFFF; font-size: 16px; font-weight: bold; height: 40px; line-height: 40px; text-align: center; /*выравнивание по центру */ width: 155px; /*ширина кнопки */ /* кроссбраузерность: */ background: -ms-linear-gradient(#DD1D1D, #A61518); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #DD1D1D), color-stop(100%, #A61518)); /* Safari 4+, Chrome 2+ */ background: -webkit-linear-gradient(#DD1D1D, #A61518); /* Safari 5.1+, Chrome 10+ */ background: -o-linear-gradient(#DD1D1D, #A61518); /* Opera 11.10 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#DD1D1D", endColorstr="#A61518"); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#DD1D1D", endColorstr="#A61518")"; /* IE8+ */ -moz-border-radius: 4px; /* Firefox */ -webkit-border-radius: 4px; /* Safari, Chrome */ -khtml-border-radius: 4px; /* KHTML */ }
Стандартные анонсы записей WordPress (самообрезающиеся)
WordPress может создавать анонсы автоматически, без использования тега more. В этом случае статья просто обрезается после определенного числа слов (55 по умолчанию). Такой вариант может показаться удобным тем, что все делается автоматически и не нужно задуматься о теге more. Однако, такие анонсы выглядят не красиво и я не советую их использовать. Гораздо удобнее самому решать после какой фразы обрубать анонс.
Отвечает за такие анонсы строчка в коде.
Как убрать стандартные анонсы записей WordPress
Если вы установили тему, в которой по умолчанию используются стандартные анонсы и хотите от них избавиться:
Речь пойдет не о тех цитатах, которые используются в тексте для цитирования чужих мыслей — об этом .
Сразу скажу, что данной функцией я не пользуюсь и считаю, что это полная ерунда. Однако, некоторые сеошники считаю т, что анонсы на главной странице блога обязаны быть уникальными. Иначе контент на главной странице будет дублироваться с началом каждой статьи. Поэтому каждый анонс нужно писать отдельно, описывая в нем краткое содержание статьи.
Если и вы так считаете и вам не лень каждый раз писать уникальные анонсы, читайте как это реализовать.
Добрый день!
Начнем с самого начала на тот случай, если кто-то вообще ничего не знает о more.
Я не был на море.
– Ладно, не заливай, ни разу не был на море!
– Не довелось, не был…
– Уже постучались на небеса, накачались текиллой, буквально проводили себя в последний путь, а ты на море-то не побывал?!
– Не успел, не вышло…
– Не знал, что на небесах никуда без этого?
к/ф “Достучаться до небес”
Как добавить more
Так вот, какой фрагмент текста отображать в анонсе задается с помощью тега more . Этот тег разделяет статью на две части: вступительную (анонс) и продолжение.
В редакторе WordPress тег more можно вставить с помощью кнопки в панели инструментов.
1. Визуальный режим редактора:
2. Текстовый режим редактора:
В текстовом режиме, так же можно вручную разделить запись: просто напишите
А теперь важная информация, которую знают далеко не все!
Так вот, есть элементарный способ задавать каждой ссылке после анонса свой уникальный текст!
Сделать это можно, просто написав, нужный текст внутри конструкции с more. Вот так:
Спросите а зачем так делать? Еще прописывать каждый раз текст.
Честно говоря, сам такой =) Уже 84 статьи опубликовал, и только “расчехлился” по этому поводу.
Как изменить текст?
1. Первый – самый простой способ – это добавить ваш текст (обычно в index.php) в функцию the_content
2. Второй способ с использованием хука the_content_more_link . Просто добавьте следующий код в и задайте желаемый текст ссылки.
function my_more_link($more_link, $more_link_text) { return str_replace($more_link_text, "Продолжить чтение...", $more_link); } add_filter("the_content_more_link", "my_more_link", 10, 2);
Этот способ удобен тем, что вам не нужно искать по файлам шаблона, где именно у вас используется the_content (это не обязательно в index.php, может быть и content.php и что угодно.) Здесь вы работаете только в файле functions.php.
3. В третьем пункте просто сохраню для истории способ с использованием произвольного поля WordPress.
ID, "custom_more_text", true); if(!$custom_more) { $custom_more = "Продолжить чтение статьи »"; } the_content($custom_more); ?>
Вписывание текста непосредственно в , конечно же проще и понятней.
Здесь просто откорректируйте вызов функции the_content одним из двух способов.
Как убрать #more из ссылки
В коде этот якорь устанавливается таким вот способом:
Loading...