Кнопка в wordpress читать далее без плагина
Добрый день, уважаемые читатели моего блога
Очень рад Вас видеть снова! Этой статьёй я продолжу тему Блогостроения.
Не так давно немного пошаманил над своим Интернет-ресурсом.
Давно хотел установить себе кнопку в wordpress Читать далее вместо обычной ссылки на главной странице.
Функция кнопки в вордпресс Читать далее
Для тех, кто не знает, что это за кнопка в Вордпресс читать далее и зачем она нужна, перейдите на главную страницу моего блога и нажмите на нее. Правда, я назвал ее по-другому: «Читать статью».
Кликните на неё, и вы сразу поймете её главную функцию. Неправда ли, такая красивая кнопка смотрится гораздо лучше, чем стандартная ссылка шаблона
Для того чтобы осуществить задуманное, я начал искать в поисковике информацию о том, как создать кнопку в WordPress Читать далее. Посмотрел несколько блогов.
Большинство авторов предлагали сделать кнопку при помощи плагина. Это мне сразу не подходило.
Я не люблю плагины, потому как они излишне перегружают ресурс, а также некоторые из них не часто обновляются.
На одном из блогов мне понравилась статья на тему создания кнопки. Однако, применив информацию на практике, я был неприятно удивлен тем, что эта кнопка просто напросто не отображается.
Мне пришлось еще немного попотеть, чтобы найти ошибку в коде. По этой причине я решил написать статью о том, как создать кнопку читать далее для блога, работающего на системе WordPress.
Прочитав ее, Вы сможете быстро создать на своем Интернет-ресурсе такую же.
Кнопка читать далее в WordPress. Как её создать?
Внимание! Советую Вам прочитать мою предыдущую статью о резервном копировании блога, перед тем как приступать к действиям.
Итак, начнем. Кнопка читать далее в wordpress. Как же её создать? Сначала необходимо отключить функцию read.more в файле functions.php, которая выводит стандартную ссылку «читать далее».
Для этого зайдите в административную панель своего ресурса и перейдите по вкладкам Внешний вид—>Редактор. Из предложенных с правой стороны файлов шаблона для редактирования выберите 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; /* Смещение вверх */ }
Предоставленный мною код Вы можете отредактировать, для того чтобы Ваша кнопка в wordpress Читать далее подходила по внешнему виду к дизайну Вашего блога.
После всех изменений файла не забудьте нажать кнопку «Обновить» для сохранения изменений.
Потом переходим к следующему этапу. Теперь нам нужно ввести специальный код, который будет отображать Вашу кнопку на главной странице блога.
Для этого там же в Редакторе своей темы нажимаем на файл index.php, чтобы его открыть. В нем нужно найти подобную строчку:
<?php the_content('Читать далее »'); ?>Сразу после этой строчки кода необходимо добавить код для вывода самой кнопки:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <div class="read_more"> <div>Читать статью</div></a> </div>
Не забываем обновить файл для вступления изменений в силу.
Теперь можно обновить главную страницу своего блога и посмотреть на улучшения.
Как я уже говорил, Вам придется немного поработать с файлом style.css, для того, чтобы подогнать внешний вид кнопки Читать далее к дизайну своего блога.
Ну, вот и всё. Результат, как видите, налицо.
Если у Вас возникли трудности, тогда задавайте мне вопросы в комментариях. И не забудьте подписаться на обновления моего блога, чтобы получать свежие статьи на свою почту.
До новых встреч, друзья! Надеюсь, был Вам полезен. Пока.
Успехов Вам и Удачи С Уважением,
Комментариев к статье: 88
Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.
Спасибо автору за полезную информацию для меня. Есть на примете одна тема, которую планирую установить себе на блог, но там эта кнопка WordPress Читать далее мне совсем не нравится. Теперь попробую ее сделать сама.
Ответить
Всегда пожалуйста, Татьяна!
Думаю эта кнопка Вам понравится
Ответить
Интересный способ Сергей! Попробую сделать такую кнопку. Рад, что мы с тобой в одной группе блогомарафона!
Ответить
Привет, Евгений
Рад знакомству!
Поздравляю с началом блогомарафона!
Ответить
Способ хороший, но нужно смотреть как выводятся анонсы на главной — текст или цитата. Тут для каждой темы нужен индивидуальный подход к осуществлению задуманного.
Ответить
Ну если что-то не пойдёт, можно и тему в funchions.php немного поправить
Ответить
Думаю, что эта инструкция по созданию кнопки читать далее будет полезна пользователям WP. В движке, который я использую, даже такого плагина нет, но прописать можно самостоятельно, правда пока не знаю как — буду решать, после чего опубликую на своём блоге. Аж самому интересно стало.
Ответить
Денис, а какой Вы движок используете?
Ответить
Maxsite CMS. Как по мне, всем хорош, кроме формы комментирования и недостатка шаблонов, плагинов.
Ответить
Может стоит перейти обратно на WP?
Ответить
Нет уж!
Лучше недостатки в преимущества превращу, добившись их исправлеения.
На возился я с оптимизацией скорости загрузки и заменой плагинов на код…
Может какой другой движок, но не Вордпресс.
К тому-же, я оочень привык к компонентам шапки и подвала, к структуре файлов и папок, к виду содержимого этих файлов, к виду админки.
Ответить
Да комментирование точно неудобное у тебя Денис.
Ответить
И не в обиду Денису Скрипнику продолжу мысль другого Дениса
Форма комментирования неудобная……а посетитель любит и ценит удобство
Нужны срочные перемены!
Ответить
За то спам не так проходит в комментах в отличии вордпресс.А неудобство связано с тем что все привыли к форме комментирования на вордпресс блогах, и любая другая форма приводит нас в ступор
Ответить
Денис на максайте есть bbcod [cut] который отрезает анонс для главной. Если его оформить в стилях то получится кнопка.
Ответить
Согласен. Так можно сделать, но данный вариант подходит тем, кто дружит с css, поэтому я поищу другой вариант, но опишу оба в одной из своих статей.
Ответить
Придётся подружиться с CSS
Ответить
Я вот не могу найти ни где эту строчку , помогите пожалуйста, что делать?
Ответить
Не найду стройчку где «Читать далее» написано.
Ответить
Роман, попробуй воспользоваться поиском: Ctrl+F
Ответить
серьезно))) по три раза всё проверил до того как написать сюда)), я просто уже в панике, где то эта строчка должна быть. Пожалуйста зайдите на мой сайт и увидите какая у меня проблем, если можно то помогите пожалуйста. kitchen-best точка com.
Ответить
Роман, вы точно ищите код, выводящий кнопку «Читать далее» в файле index.php?
Этот код просто не может там не присутствовать, так как на вашем блоге она выводится. А файл index.php отвечает за вывод главной страницы блога!
Поищите получше!
Ответить
Подскажите, пожалуйста, как сделать так, чтобы тег more вел на страницу а не якорь! Стандартно в моей теме, он ведет на якорь, и ссылка не красивая получается!
Ответить
Не совсем вас понял, Максим. Объясните подробнее что происходит после нажатия на кнопку «Читать далее». И в каком смысле «не красивая ссылка»?
Ответить
Столько много примочек узнаёшь об оформлении сайта. И кнопки и подписи и выделение кода и многое другое. Очень познавательно читать.
Ответить
Да, функционал богат и разнообразен. В WordPress можно многое сделать и это радует!
Ответить
Реально очень полезная статья. Огромное такое человеское спасибо
Мне в блоге как раз такой кнопочки и не хватает, я даже решился убрать весь текст описания, поскольку без этой кнопочки описание как-то неполноценно смотрится. Надо будет на выходном вернуть и добавить кнопку. еще раз спасибо за статью
Ответить
Пожалуйста, Виталий! Рад, что Вы нашли решение своей проблемы на моём блоге.
Ответить
Здравствуйте, спасибо за статью, но есть какой либо плагин для создания такой кнопки и как называется подскажите, пожалуйста, (насчёт того, что блог не нужно загружать лишними плагинами знаю)
Ответить
Приветствую, Антон!
Попробуйте плагин WordPress для создания кнопки «Читать далее», который называется Auto More Tag.
Ответить
Кнопка получилась красивая, но вставить в нужное место у меня не получилось. Она почему-то стала показываться только для одной статье, которая вообще не должна там была быть. В общем, проблема пока не решена.
Ответить
Людмила, проверьте ещё раз правильность своих действий. У меня как видите всё работает на блоге
Ответить
я думаю, что тут многое еще зависит от шаблона сайта, как вы знаете — все они разные.
например, у меня в шаблоне изначально не предусмотрена данная кнопка.
я потратила 2,5 часа сегодня на ее установку по данным инструкциям. тренировалась на тестовом сайте. Вот всё что пока смогла сделать: llao.che-organiz.ru
Ответить
Если не предусмотрена кнопка в шаблоне, тогда понятно. Нужно разбираться тщательнее. Действительно, иногда не всё так просто как кажется на первый взгляд
Ответить
Шаблон зависит от версии ВП. В каждой версии добавлены свои функции, которые шаблоном могут не поддерживаться.
Ответить
если спросите почему так долго — я подставляла все указанные строчки в нужный указанный файл, так как я не сильна в кодах, то подставляла через каждую строчку и смотрела результаты. проштудировала од верха до низа — результат нулевой. Это чтоб потом нельзя было сказать, что я что-то делаю не так.
Ответить
Людмина, у вас своеобразный шаблон, уникальный, поэтому возможно мой спопоб вам и подойдёт, но с некоторыми доработками в коде самого шаблона
Ответить
Спасибо за ответ. Да я вот подумываю теперь, насколько эта кнопка мне вообще нужна…
В моем шаблоне даже тег «далее» автоматически работает, без моего усилия.
Ответить
А я во парюсь с выводом аноносов на главной странице, в моей теме не предусмотрена такая функция. может кто в курсе как это сделать?!
Ответить
Кнопка установилась, но эффекта нажатия нет! Подскажите пожалуйста, в чем дело?
Ответить
Сергей, а что вы имеете ввиду под эффектом нажатия? Не нажимается?
Ответить
А я другим способом кнопку «Читать далее» установил.
Надо тоже статейку набросать.
Ответить
Сергей, спасибо за статью, а как сделать подсветку кнопки «Читать далее» при наведении мышкой?
P.s: Смайлики у тебя забавные
Можно себе возьму?
Ответить
Рад был помочь, Виктор
Подсветку кнопки сделал с помощью добавления фукции hover с параметрами в стилях CSS.
Да, смайлы сам «выпиливал». Да мне не жалко, бери, если сможешь такие же «прикрутить» себе
Ответить
Смайлы сам рисовал? У тебя огромный талант!
Ответить
Нет, не сам рисовал, скопировал где-то
Но копировал их кучей, поэтому потом пришлось каждый смайл «выпиливать» и устанавливать сюда 
Ответить
Сергей, может быть знаете как заменить стандартные аватарки MonsterID, так же на свои. Я вот под свой сайт задумался стандартные аватарки заменить на тематические
Ответить
Виктор, если у Вас WordPress, то перейдите в панели администрирования по вкладкам Настройки—Обсуждение. А потом внизу найдите Аватарки по умолчанию
Ответить
Это то я знаю, вот как их заменить пока не знаю
Ответить
Понятно. Тогда нужно прописать специальный код в файле functions.php, потом прописать в нём ссылку на своё изображение и присвоить ему имя. Зетем выбрать его в настройках, которые я прописал выше в предыдущем комменте
Ответить
На своём блоге я уже поменял стандартный граватар. Скоро напишу об этом статейку и видосик сниму
Ответить
Ок. Спасибо, подожду наверное выхода статьи. Пока буду рисовать аватарки
Ответить
Ну да, стоит подождать
Ответить
Будем ждать видео и статью.Очень интересно.
Ответить
ЗДравствуйте! все сделала как написано, но кнопка не появилась даже. странно…
Ответить
Здравствуйте, Марина!
А Вы точно все действия сделали точно так, как описано в статье?
Дело в том, что всё что написано здесь применено мной на практике на этом блоге. И кнопка как видите у меня прекрасно работает
Ответить
Сергей я сначала вставила ваш код в файл function.php, затем я зашла в style.css, но я там не нашла такого:/* CONTENT */ у меня есть только
content:»;
content:none;
}
после них я вставила код (большой)
Затем я зашла в файл content.php (мне нужно ведь разместить кнопку в разделе блоога)
и после функции
<?php the_content( '’ . __( ‘Читать далее »’, APP_TD ) . » ); ?>
вставила
<a href="» title=»»>
Читать статью
Скажите все ли верно я сделала?
после того, как я все сделала у меня не было ни кнопки, ни фразы «читать далее». подскажите пож-та что сделала не так.
Ответить
Марина, этой информации недостаточно. Нужно разбираться более детально в этой проблеме. Нужно смотреть код.
Иногда бывает так, что вроде всё сделаешь правильно, но всё-равно не работает…
Это происходит в основном из-за того, что шаблон начинает конфликтовать с установленным в него кодом…
Ответить
Скажите а как мне тогда установить? если честно я в кодах еще плохо ориентируюсь. У меня стоит тема Clipper
Ответить
Марина, самый лучший вариант это попросить специалиста сделать это платно, если Вы в этом плохо разбираетесь.
Ответить
Сергей у меня есть такая строка в файле content.php
<?php the_content( '’ . __( ‘Читать далее »’, APP_TD ) . » ); ?>
Там нужно вставлять
<a href="» title=»»>
Читать статью
вот я ввела это, у меня кнопка не отобразилась
Ответить
Марина, нужно видеть весь код. Я Вам, к сожалению, не могу так ничего посоветовать
Ответить
Все сделала кнопку))) Только вот почему то не получается стили мне сделать. То есть фраза Читать далее есть, но вокруг нее не получается создать стиль(
Ответить
Отлично! Рад, что Вы разобрались!
Стили Вы создаёте в style.css?
Ответить
Все сделала! Сергей спасибо огромное за статью))) Очень красивое оформление кнопки!!
Ответить
Отлчино! Всегда пожалуйста, Марина!
В чём была проблема? Ошиблись, наверно?
Ответить
Сергей проблема была в том, что не в тот файл вставила один код. У меня тема Clipper и стоит дочерняя тема Coups. Я вставляла код в файл первой темы, а надо было во вторую)))
Ответить
Понятно. Знчит не зря я у Вас сразу спросил о том, что правильно ли Вы проделали все действия.
Просто у меня сейчас этот код стоит на блоге и всё окей!
Ответить
Спасибо! Всё получилось, я всё проделал как у вас написано. Респект автору!
Ответить
Пожалуйста, Роман! Рад, что всё смогли осуществить
Ответить
А где пример кнопки посмотреть можно?
Ответить
Анна, прямо здесь. На моём блоге. Всё проверено на практике
Ответить
Норм, спасибо.
Ответить
Рад, что помог, Данила
Ответить
вроде бы все сделала, но нижняя линия рамки кнопки обрезается . Пробовала менять значение margin-top: -15px; — но не помогает — то нижняя обрезается, то верхняя — помогите поправить
Ответить
Анна, скорее всего, присутствует ещё один стиль, который вносит свои коррективы в расположение кнопки. Нужно найти этот стиль
Ответить
разобралась — в родительский div добавила padding — теперь все хорошо
Ответить
Отлично! Приятно видеть умных девушек!
Ответить
Что здесь на писано у меня нет ни одного кода!
Как мне быть тему менять?
Ответить
Виктор, а у Вас предусмотрена в шаблоне ссылка «читать далее»? Думаю, должна быть
Ответить
Здравствуйте! У меня в файле функции темы нет закрывающегося тега ?> Если просто ставлю указанный код в конце файла и загружаю его , то сайт перестает отображаться.
Ответить
Здравствуйте, Вера!
В файле functions.php темы WordPress достаточно большое многообразие различных функций, реализованных для отображения тех или иных элементов блога.
Каждая функция заканчивается тегом ?> или знаком } .По-другому быть не как не может. Поищите их там много.
Здесь важно установить код именно между этими функциями, а не в само тело какой-либо функции!!!
Ответить
Большое спасибо за Статью! Нигде не могла найти информацию, как добавить кнопку «читать далее»… везде описываются случаи, когда кнопка выводится вместе со статьёй… а я просто скачала тему Вордпресс Enliven… так там просто нет кнопки «читать далее». И вот — о Чудо! — я натыкаюсь на ваш сайт
БлагоДарю!
Ответить
Татьяна, рад был Вам помочь!
Очень приятно слышать!
Ответить
Сергей, а можно сделать, что бы в админке сайта на WP по созданию и редактированию поста внедрить форму для ввода ссылки на другую Страницу. Что бы при сохранении ее, в посте выводилась бы кнопка типа «Читать далее» на которой отображалось бы «Читать + название этой Страницы»?
Ответить
Валерий, да, это возможно сделать при помощи обычного php кода и стилей. Всё это я прописал в этой статье. Вам просто нужно будет встроить код не в файл темы, а непосредственно в редактор поста во вкладке «HTML». Ну и название кнопки сменить. Вот и всё
Ответить
А как сделать градиент кнопки? При наведении мыши. Я так делал в хтмл-странице. Но в шаблоне не выходит. Тот же код ставлю.
Ответить
Я просто немного добавил к своим стилям вот такие блоки(не отразил это в статье):
.read_more:hover {
font-weight: normal;
text-decoration: none;
box-shadow: 0px 0px 15px #007dab;
}
.read_more a:hover {
color: #1e90ff;
}
Ответить