Все, кто использует WordPress конечно знакомы с тэгом <!–more–>. Когда Вы пишете пост, вставка тэга <!–more–> в текст поста, позволит сделать выдержку из текста, предшествующему этому тэгу. Пост будет обрезан этим отрывком и в конце будет добавлена ссылка “more…”, которая по клику позволит открыть весь текст поста. При использования тэга <!–more–> отрывок поста будет отображаться на всех страницах, кроме страницы самого поста, таких как категории, тэги и архивы. Весь текст поста будет отображаться только на странице самого поста (single-post view). Посмотрим на пример…
Простой пример использования тэга more
Рассмотрим для примера, следующий тест:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
<!-more->
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor,
commodo a semper suscipit, sodales sit amet, nisi adipiscing.
На всех страницах, кроме страницы самого поста, таких как категории, тэги и архивы текст будет выглядеть так :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
“more…”
А на странице самого поста текст будет выглядеть полностью но уже без тега more :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor,
commodo a semper suscipit, sodales sit amet, nisi adipiscing.
В текста поста тэг more уже не отображается.
Почему мы используем тэг more?
По большому счету потому, что использование отрывков это круто, и можно использовать множество таких отрывков на главной странице не загромождая ее текстом, давая посетителям видеть весь контент кратко без скроллинга страницы. Если один из отрывков притянет внимание читателей, вероятнее всего они захотят прочитать весь пост целиком, и сделают это как раз кликая на тэг more. Чтобы поддерживать такое поведение, есть несколько способов кустомизировать текст ссылки more, в зависимости от Ваших дизайнерских желаний.
Установка тескта ссылки тэга more в каждом посте
Есть несколько хороших способов настройки отображаемого формата текста ссылки тэга more. До сих пор, самым простым способом является простое включение нужного текста прямо в тэг more в тексте поста. Например, если Ва хотите поменять стандартный текст тэга на “Продолжить читать этот пост”, Вы должны просто заменить обычный тэг <!–more–> на такой:
<!–more Продолжить читать этот пост –>
Таким образом, WordPress делает очень легким изменение текста ссылки тэга more для каждого поста на нужный автору текст. Это один из тех простых секретов WordPress, о котором не многие пользователи знают, о чем свидетельствует популярный альтернативный метод для настройки текста тега more для каждого отдельного поста:
<?php $custom_more = get_post_meta($post->ID, “custom_more_text”, true);
if(!$custom_more) { $custom_more = “Продолжить читать этот пост »”; }
the_content($custom_more); ?>
Этот код ищет пользовательское поле “custom_more_text” и отображает его значение как пользовательский текст.
Установка текста ссылки тэга more для всего сайта
Вместо того, что бы изменять текст тэга индивидуально для каждого поста, мы можем установить текст тэга единожды для всех постов на всём сайте. Первый и простейший способ изменить текст тега по умолчанию, это добавление пользовательского текста в вызов функции the_content() в Вашей теме:
<?php the_content(‘Продолжить читать этот пост’); ?>
Вы даже можете добавить разметки, чтобы применить формат и стиль в соответствии с вашими потребностями:
<?php the_content(“<span class=”custom-more”>Продолжить читать этот пост</span>”); ?>
Большинство из тех, кто использует WordPress знакомы с этим методом и часто применяют его на практике. Но есть также и более новый метод выполняющий тоже самое из файла functions.php. Начиная с WordPress 2.8, мы теперь можем применять фильтр на изменение текста тэга more для всего сайта используя 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);
Этот код нужно добавить в файл functions.php, который находиться в папке с Вашей темой. Это хороший способ изменения текста ссылок тэга more бег изменения других шаблонов темы — отлично для изменения через дочерние темы!.
Автоматическое отображение заголовка поста в ссылке more
Другой хороший more-тэг трюк это включение заголовка поста в тексте ссылки more. Например так:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
“Продолжить читать “Lorem Ipsum Strikes Back””
А вот как Кодекс предлагает делать это:
<?php the_content(“… продолжить читать статью с названием ” . get_the_title(”, ”, false)); ?>
Это также будет работать, но мы немного изменим код:
<?php the_content(the_title(‘Продолжить читать “’,’”’,false)); ?>
Как остановить переход по ссылке тэга more в середину станицы
По умолчанию, кликая по ссылке more, откроется отдельная страница, где весь пост будет виден целиком. Но броузер перейдёт к тому месту в тексте, где заканчивается тэг more, и страница будет перемотана до этого места. Так, если Вы используете функционал по умолчанию, посетители начнут читать Ваш пост с середины страницы. Поэтому, корошей идеей может оказаться изменеие такого поведения и открытие страницы целиком без скроллинга до метки с этим тэгом.
Чтобы открывать страницу с постом с самого начала, нужно просто добавить следующий код в файл functions.php из папки Вашей темы:
function remove_more_jump_link($link) {
$offset = strpos($link, ‘#more-‘);
if ($offset) {
$end = strpos($link, ‘”‘,$offset);
}
if ($end) {
$link = substr_replace($link, ”, $offset, $end-$offset);
}
return $link;
}
add_filter(‘the_content_more_link’, ‘remove_more_jump_link’);
Это отменить возможность перехода по ссылке с прокруткой страницы и не будет вводить в заблужение читателей. Правда это работает только для версий начиная с WordPress 2.8 и выше. Для остальных же нужно будет проводить изменения о которых можно почитать в Кодексе.
Указание пользовательских страниц для тэга more.
Обычно тэг more используется для открытия отдельной страницы с полным тестом сопутствующиего поста. Открывается именно тот пост в тексте которого и был помещён тэг more. Это можно легко изменить, если Вам понадобиться когда либо использовать другую вэб страницу. Что бы понять это немного лучше, рассмотрим параметры, используемые дял шаблонного тэга the_content():
<?php the_content($more_link_text, $strip_teaser, $more_file); ?>
Здесь, параметр $more_link_text определяет текст, который будет использоваться для ссылки more. Параметр $strip_teaser определяет логическое значение, указывающее на то – отображать или не отображать ссылку more. Третий параметр это то что нам нужно. Параметр $more_file определяет URL на который ссылка more должны ссылаться. По умолчанию, этот URL указывает на тот же пост, и здесь мы можем лекго переопределить его:
<?php the_content(‘Order Now!’, FALSE, ‘http://amazing-product.com/order-page.html’); ?>
Вот и все. Очевидно, что применение этого метода ограничено, но им можно воспользоваться если когда-нибудь будет нужно.
Назначение стиля для ссылки more
Самый лёгкий способ стилизовать ссылку, это воспользоваться преимуществом атрибута встроенного класса. По умолчанию, этот класс автоматически включён в WordPress. Таким образом, применять стили напрямую, например:
.more-link {
border: thin solid black;
letter-spacing: 1px;
background: yellow;
font-size: 24px;
color: red;
}
Если нужен отдельный стиль для ссылки, укажите напрямую, включив это в тэг the_content():
<?php the_content(“<span class=”custom-more”>Продолжить чтение <em>этого</em> поста</span>”); ?>
Теперь можно применить следующий CSS:
.custom-more {
font-weight: bolder;
}
.custom-more em {
font-weight: normal;
font-style: italic;
}
Этот простой пример поможет понять сам метод.
Добавление графики в ссылку more
И последнее, но не менее важное, давайте завершим статью ещё двумя способами для добавления картинок в ссылки. Первый способ, просто включите графический элемент прямо в тэг the_content():
view source
print?
1 <?php the_content(‘<img src=”http://domain.tld/read-more.png” alt=”Arrow” title=”Читать далее” />’); ?>
Теперь этот код будет выдавать графику вместо текста. Также Вы можете стилизовать картинку используя CSS:
.more-link img {
background:url(http://domain.tld/read-more.png) no-repeat left center;
padding: 10px;
height: 100px;
width: 300px;
}
Все эти примеры лишь демонстрирует как всё это работает. Применение же может быть неограничено
Автор Николай
mainview.ru
If you found an error, highlight it and press Shift + Enter or click here to inform us.
Загрузка ...