Если у вас есть блог и вы пишите в нем большие статьи, то вы наверняка использовали тег more.
Возможно вы хотели поменять эту ссылку на красивую кнопку.
В этой статье я расскажу о том как:
- изменить текст ссылки (читать далее или more)
- изменить адрес ссылки, а именно убрать /#more-номер поста
- ссылку переделать в кнопку
Вставить тег more не сложно.
Во время написания поста выбираем место где хотим закончить текст анонса и нажимаем нужную кнопку.
Теперь поговорим как изменить текст ссылки в моем случае изначально он был (Read the rest of this entry »)
Нам понадобятся файлы index.php, page.php , archive.php, single.php
Их можно найти через файловый менеджер /wp-content/themes/(название вашей темы)
Открываем сразу все файлы и ищем в них текст указанный ниже.
Не обязательно во всех файлах он будет! Те файлы в которых его не будет можно закрыть. В большинстве случаев потребуются index.php , archive.php
<?php the_content(''); ?>
Между ковычек пишем текст, который нам нужен. Изначально в разных темах написан тот или иной текст. У меня был Read the rest of this entry
Я поменял на следующее
<?php the_content('Читать полностью »'); ?>
После сохранения у нас должно получиться что-то вроде этого
Мы поменяли текст ссылки, но когда нажимаем на нее в адресной строке в конце приписывается /#more-номер поста, с точки зрения поисковой оптимизации у нас получается отдельная страница. Поэтому предлагаю избавиться от этой приставки.
Для этого нам понадобиться сделать некоторые правки в файле post-template.php
Он находится в каталоге /wp-includes
Находим следующую строчку:
$output .= apply_filters( 'the_content_more_link', '<a href="' . get_permalink() . "#more-{$post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );
Заменяем на:
$output .= apply_filters( 'the_content_more_link', '<div class="buttons"> <a href="' . get_permalink() . "\" class=\"more-link\">$more_link_text</a> </div>", $more_link_text );
Или просто убираем
#more-{$post->ID}
Мы заменили текст, ссылки (читать далее), поменяли адрес, смотреться не плохо, но как сделать ссылку (читать далее) в виде кнопки, чтобы она вписывалась в дизайн сайта?
Для этого нам в эту строчку надо добавить несколько тегов, а так же прописать стили в css. Приступим.
Заменяем строчку которую правили ранее на ту что ниже:
$output .= apply_filters( 'the_content_more_link', '<span class="buttons"> <a href="' . get_permalink() . "\" class=\"more-link\">$more_link_text</a> </span>", $more_link_text );
Теперь наша ссылка находится в блоке с классом buttons, а класс самой ссылки more-link
Остается прописать стили в style.css который лежит либо в отдельной папке, либо в корне темы.
/wp-content/themes/название темы/css
Копируем, вставляем код и сохраняем
.buttons a.more-link { font-size: 12px; padding: 0px 10px; background-color: #eee !important; color: #282828 !important; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; text-shadow: 0 1px 0px rgba(255,255,255,0.8); -webkit-box-shadow: inset 0 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; background-image: -ms-linear-gradient(top, #eee, #e1e1e1); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#e1e1e1)); background-image: -webkit-linear-gradient(top, #eee, #e1e1e1); background-image: -o-linear-gradient(top, #eee, #e1e1e1); background-image: linear-gradient(top, #eee, #e1e1e1); background-image: -moz-linear-gradient(top, #eee, #e1e1e1); background-repeat: repeat-x; border: 1px solid #d9d8d8; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-color: #d9d8d8 #cccbcb #aeaeae; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#eeeeee', endColorstr='#e1e1e1', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; font-family: arial,sans-serif; font-weight: normal; text-decoration: none; height: 26px; line-height: 26px; display: inline-block; vertical-align: middle; margin: 0; float: right; } #content .buttons { padding-top: 20px; padding-bottom: 10px; float: right; } .buttons a:hover, .buttons a.more-link:hover, .buttons input:hover { background-color: #fcfcfc !important; background-image: -ms-linear-gradient(top, #fcfcfc, #e8e8e8); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#e8e8e8)); background-image: -webkit-linear-gradient(top, #fcfcfc, #e8e8e8); background-image: -o-linear-gradient(top, #fcfcfc, #e8e8e8); background-image: linear-gradient(top, #fcfcfc, #e8e8e8); background-image: -moz-linear-gradient(top, #fcfcfc, #e8e8e8); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#e8e8e8', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); text-decoration: none; float: right; }
Кратко поясню
.buttons a.more-link Преобразует нашу ссылку в кнопку
#content .buttons Задает отступы сверху и снизу.
buttons a:hover, .buttons a.more-link:hover, .buttons input:hover
Изменяет цвет кнопки при наводе на нее
На этом пост заканчиваю, красивых вам кнопок! =)
Прекрасная статья! Все получилось так как хотел! Спасибо.
Спасибо, с кодами разобрался, респект автору. 8)
Да, особенно мне понравилось, что ссылка стала без добавки нехорошей и не красивой. 😀
Адрес ссылки не поменяли. Убрали только обязательное перенаправление на номер поста. Или я не прав? А где расставить свои ссылки в теме на свои страницы или места на страницах. Думаю, надо установить якоря и потом их прописать как ссылки, но где? У меня ссылки, которые надо заменить в хедере.
Спасибо тебе =) у меня немножко шаблон по другому пришлось повозиться за то больше понял ))) Без этой статьи я бы и не начал первую свою верстку в шаблоне