Кнопка в wordpress Читать далее без плагина | Заметки вебмастера






Кнопка в 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('Читать далее &raquo;'); ?>

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

 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <div class="read_more"> 
 <div>Читать статью</div></a>
 </div>

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

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

Как я уже говорил, Вам придется немного поработать с  файлом style.css, для того, чтобы подогнать внешний вид кнопки Читать далее к дизайну своего блога.

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

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

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

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


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 86

  1. Татьяна:

    Спасибо автору за полезную информацию для меня. Есть на примете одна тема, которую планирую установить себе на блог, но там эта кнопка WordPress Читать далее мне совсем не нравится. Теперь попробую ее сделать сама.

    Ответить

    • Сергей:

      Всегда пожалуйста, Татьяна!http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
      Думаю эта кнопка Вам понравится http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      Ответить

  2. Евгений:

    Интересный способ Сергей! Попробую сделать такую кнопку. Рад, что мы с тобой в одной группе блогомарафона!http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif

    Ответить

    • Сергей:

      Привет, Евгений http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif Рад знакомству!
      Поздравляю с началом блогомарафона! http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      Ответить

  3. Denis:

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

    Ответить

    • Сергей:

      Ну если что-то не пойдёт, можно и тему в funchions.php немного поправить http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  4. Денис Скрипник:

    Думаю, что эта инструкция по созданию кнопки читать далее будет полезна пользователям WP. В движке, который я использую, даже такого плагина нет, но прописать можно самостоятельно, правда пока не знаю как — буду решать, после чего опубликую на своём блоге. Аж самому интересно стало. :-)

    Ответить

    • Сергей:

      Денис, а какой Вы движок используете?

      Ответить

      • Денис Скрипник:

        Maxsite CMS. Как по мне, всем хорош, кроме формы комментирования и недостатка шаблонов, плагинов.

        Ответить

        • Сергей:

          Может стоит перейти обратно на WP? http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

          Ответить

          • Денис Скрипник:

            Нет уж! :-) Лучше недостатки в преимущества превращу, добившись их исправлеения.
            На возился я с оптимизацией скорости загрузки и заменой плагинов на код…
            Может какой другой движок, но не Вордпресс.
            К тому-же, я оочень привык к компонентам шапки и подвала, к структуре файлов и папок, к виду содержимого этих файлов, к виду админки.

            Ответить

        • Denis:

          Да комментирование точно неудобное у тебя Денис.

          Ответить

          • Сергей:

            И не в обиду Денису Скрипнику продолжу мысль другого Дениса http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
            Форма комментирования неудобная……а посетитель любит и ценит удобство http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif
            Нужны срочные перемены!

            Ответить

          • Denis:

            За то спам не так проходит в комментах в отличии вордпресс.А неудобство связано с тем что все привыли к форме комментирования на вордпресс блогах, и любая другая форма приводит нас в ступор

            Ответить

    • Denis:

      Денис на максайте есть bbcod [cut] который отрезает анонс для главной. Если его оформить в стилях то получится кнопка.

      Ответить

      • Денис Скрипник:

        Согласен. Так можно сделать, но данный вариант подходит тем, кто дружит с css, поэтому я поищу другой вариант, но опишу оба в одной из своих статей.

        Ответить

        • Сергей:

          Придётся подружиться с CSS http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

          Ответить

  5. Роман:

    Я вот не могу найти ни где эту строчку , помогите пожалуйста, что делать?

    Ответить

    • Роман:

      Не найду стройчку где «Читать далее» написано.

      Ответить

      • Сергей:

        Роман, попробуй воспользоваться поиском: Ctrl+F

        Ответить

        • Роман:

          серьезно))) по три раза всё проверил до того как написать сюда)), я просто уже в панике, где то эта строчка должна быть. Пожалуйста зайдите на мой сайт и увидите какая у меня проблем, если можно то помогите пожалуйста. kitchen-best точка com.

          Ответить

          • Сергей:

            Роман, вы точно ищите код, выводящий кнопку «Читать далее» в файле index.php?
            Этот код просто не может там не присутствовать, так как на вашем блоге она выводится. А файл index.php отвечает за вывод главной страницы блога!
            Поищите получше!

            Ответить

  6. максим:

    Подскажите, пожалуйста, как сделать так, чтобы тег more вел на страницу а не якорь! Стандартно в моей теме, он ведет на якорь, и ссылка не красивая получается!

    Ответить

    • Сергей Саранчин:

      Не совсем вас понял, Максим. Объясните подробнее что происходит после нажатия на кнопку «Читать далее». И в каком смысле «не красивая ссылка»?

      Ответить

  7. Alexandr:

    Столько много примочек узнаёшь об оформлении сайта. И кнопки и подписи и выделение кода и многое другое. Очень познавательно читать.

    Ответить

    • Сергей Саранчин:

      Да, функционал богат и разнообразен. В WordPress можно многое сделать и это радует! :arrow:

      Ответить

  8. Виталий Охрименко:

    Реально очень полезная статья. Огромное такое человеское спасибо :smile:
    Мне в блоге как раз такой кнопочки и не хватает, я даже решился убрать весь текст описания, поскольку без этой кнопочки описание как-то неполноценно смотрится. Надо будет на выходном вернуть и добавить кнопку. еще раз спасибо за статью

    Ответить

    • Сергей Саранчин:

      Пожалуйста, Виталий! Рад, что Вы нашли решение своей проблемы на моём блоге. :smile:

      Ответить

  9. Антон:

    Здравствуйте, спасибо за статью, но есть какой либо плагин для создания такой кнопки и как называется подскажите, пожалуйста, (насчёт того, что блог не нужно загружать лишними плагинами знаю)

    Ответить

    • Сергей Саранчин:

      Приветствую, Антон!
      Попробуйте плагин WordPress для создания кнопки «Читать далее», который называется Auto More Tag.

      Ответить

  10. Людмила Лао:

    Кнопка получилась красивая, но вставить в нужное место у меня не получилось. Она почему-то стала показываться только для одной статье, которая вообще не должна там была быть. В общем, проблема пока не решена.

    Ответить

    • Сергей Саранчин:

      Людмила, проверьте ещё раз правильность своих действий. У меня как видите всё работает на блоге :oops:

      Ответить

      • Людмила Лао:

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

        я потратила 2,5 часа сегодня на ее установку по данным инструкциям. тренировалась на тестовом сайте. Вот всё что пока смогла сделать: llao.che-organiz.ru

        Ответить

        • Сергей Саранчин:

          Если не предусмотрена кнопка в шаблоне, тогда понятно. Нужно разбираться тщательнее. Действительно, иногда не всё так просто как кажется на первый взгляд :smile:

          Ответить

        • Alexandr:

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

          Ответить

  11. Людмила Лао:

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

    Ответить

    • Сергей Саранчин:

      Людмина, у вас своеобразный шаблон, уникальный, поэтому возможно мой спопоб вам и подойдёт, но с некоторыми доработками в коде самого шаблона :oops:

      Ответить

      • Людмила Лао:

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

        Ответить

  12. Данила:

    А я во парюсь с выводом аноносов на главной странице, в моей теме не предусмотрена такая функция. может кто в курсе как это сделать?!

    Ответить

  13. Сергей:

    Кнопка установилась, но эффекта нажатия нет! Подскажите пожалуйста, в чем дело?

    Ответить

    • Сергей Саранчин:

      Сергей, а что вы имеете ввиду под эффектом нажатия? Не нажимается? :smile:

      Ответить

  14. Игорь:

    А я другим способом кнопку «Читать далее» установил.
    Надо тоже статейку набросать.

    Ответить

  15. Виктор:

    Сергей, спасибо за статью, а как сделать подсветку кнопки «Читать далее» при наведении мышкой?

    P.s: Смайлики у тебя забавные :smile: Можно себе возьму?

    Ответить

    • Сергей Саранчин:

      Рад был помочь, Виктор :smile:
      Подсветку кнопки сделал с помощью добавления фукции hover с параметрами в стилях CSS.
      Да, смайлы сам «выпиливал». Да мне не жалко, бери, если сможешь такие же «прикрутить» себе :cry:

      Ответить

      • Виктор:

        Смайлы сам рисовал? У тебя огромный талант! :oops:

        Ответить

        • Сергей Саранчин:

          Нет, не сам рисовал, скопировал где-то :cry: Но копировал их кучей, поэтому потом пришлось каждый смайл «выпиливать» и устанавливать сюда :grin:

          Ответить

          • Виктор:

            Сергей, может быть знаете как заменить стандартные аватарки MonsterID, так же на свои. Я вот под свой сайт задумался стандартные аватарки заменить на тематические :smile:

            Ответить

          • Сергей Саранчин:

            Виктор, если у Вас WordPress, то перейдите в панели администрирования по вкладкам Настройки—Обсуждение. А потом внизу найдите Аватарки по умолчанию :oops:

            Ответить

          • Виктор:

            Это то я знаю, вот как их заменить пока не знаю :shock:

            Ответить

          • Сергей Саранчин:

            Понятно. Тогда нужно прописать специальный код в файле functions.php, потом прописать в нём ссылку на своё изображение и присвоить ему имя. Зетем выбрать его в настройках, которые я прописал выше в предыдущем комменте :smile:

            Ответить

  16. Сергей Саранчин:

    На своём блоге я уже поменял стандартный граватар. Скоро напишу об этом статейку и видосик сниму :grin:

    Ответить

    • Виктор:

      Ок. Спасибо, подожду наверное выхода статьи. Пока буду рисовать аватарки :smile:

      Ответить

      • Сергей Саранчин:

        Ну да, стоит подождать :cry:

        Ответить

    • Игорь:

      Будем ждать видео и статью.Очень интересно.

      Ответить

  17. Марина:

    ЗДравствуйте! все сделала как написано, но кнопка не появилась даже. странно…

    Ответить

    • Сергей Саранчин:

      Здравствуйте, Марина!
      А Вы точно все действия сделали точно так, как описано в статье?
      Дело в том, что всё что написано здесь применено мной на практике на этом блоге. И кнопка как видите у меня прекрасно работает :oops:

      Ответить

  18. Марина:

    Сергей я сначала вставила ваш код в файл function.php, затем я зашла в style.css, но я там не нашла такого:/* CONTENT */ у меня есть только
    content:»;
    content:none;
    }
    после них я вставила код (большой)

    Затем я зашла в файл content.php (мне нужно ведь разместить кнопку в разделе блоога)
    и после функции
    <?php the_content( '’ . __( ‘Читать далее »’, APP_TD ) . » ); ?>
    вставила
    <a href="» title=»»>

    Читать статью

    Скажите все ли верно я сделала?
    после того, как я все сделала у меня не было ни кнопки, ни фразы «читать далее». подскажите пож-та что сделала не так.

    Ответить

    • Сергей Саранчин:

      Марина, этой информации недостаточно. Нужно разбираться более детально в этой проблеме. Нужно смотреть код.
      Иногда бывает так, что вроде всё сделаешь правильно, но всё-равно не работает…
      Это происходит в основном из-за того, что шаблон начинает конфликтовать с установленным в него кодом…

      Ответить

  19. Марина:

    Скажите а как мне тогда установить? если честно я в кодах еще плохо ориентируюсь. У меня стоит тема Clipper

    Ответить

    • Сергей Саранчин:

      Марина, самый лучший вариант это попросить специалиста сделать это платно, если Вы в этом плохо разбираетесь. :oops:

      Ответить

  20. Марина:

    Сергей у меня есть такая строка в файле content.php
    <?php the_content( '’ . __( ‘Читать далее »’, APP_TD ) . » ); ?>

    Там нужно вставлять
    <a href="» title=»»>

    Читать статью

    вот я ввела это, у меня кнопка не отобразилась

    Ответить

    • Сергей Саранчин:

      Марина, нужно видеть весь код. Я Вам, к сожалению, не могу так ничего посоветовать

      Ответить

  21. Марина:

    Все сделала кнопку))) Только вот почему то не получается стили мне сделать. То есть фраза Читать далее есть, но вокруг нее не получается создать стиль(

    Ответить

    • Сергей Саранчин:

      Отлично! Рад, что Вы разобрались!
      Стили Вы создаёте в style.css?

      Ответить

  22. Марина:

    Все сделала! Сергей спасибо огромное за статью))) Очень красивое оформление кнопки!!

    Ответить

    • Сергей Саранчин:

      Отлчино! Всегда пожалуйста, Марина!
      В чём была проблема? Ошиблись, наверно?

      Ответить

  23. Марина:

    Сергей проблема была в том, что не в тот файл вставила один код. У меня тема Clipper и стоит дочерняя тема Coups. Я вставляла код в файл первой темы, а надо было во вторую)))

    Ответить

    • Сергей Саранчин:

      Понятно. Знчит не зря я у Вас сразу спросил о том, что правильно ли Вы проделали все действия.
      Просто у меня сейчас этот код стоит на блоге и всё окей! :smile:

      Ответить

  24. Роман:

    Спасибо! Всё получилось, я всё проделал как у вас написано. Респект автору! :lol:

    Ответить

    • Сергей Саранчин:

      Пожалуйста, Роман! Рад, что всё смогли осуществить :cry:

      Ответить

  25. Анна:

    А где пример кнопки посмотреть можно?

    Ответить

    • Сергей Саранчин:

      Анна, прямо здесь. На моём блоге. Всё проверено на практике :oops:

      Ответить

  26. Данила:

    Норм, спасибо.

    Ответить

    • Сергей Саранчин:

      Рад, что помог, Данила

      Ответить

  27. Анна:

    вроде бы все сделала, но нижняя линия рамки кнопки обрезается . Пробовала менять значение margin-top: -15px; — но не помогает — то нижняя обрезается, то верхняя — помогите поправить

    Ответить

    • Сергей Саранчин:

      Анна, скорее всего, присутствует ещё один стиль, который вносит свои коррективы в расположение кнопки. Нужно найти этот стиль

      Ответить

  28. Анна:

    разобралась — в родительский div добавила padding — теперь все хорошо

    Ответить

    • Сергей Саранчин:

      Отлично! Приятно видеть умных девушек! :oops:

      Ответить

  29. Виктор:

    Что здесь на писано у меня нет ни одного кода!
    Как мне быть тему менять?

    Ответить

    • Сергей Саранчин:

      Виктор, а у Вас предусмотрена в шаблоне ссылка «читать далее»? Думаю, должна быть

      Ответить

  30. Вера:

    Здравствуйте! У меня в файле функции темы нет закрывающегося тега ?> Если просто ставлю указанный код в конце файла и загружаю его , то сайт перестает отображаться.

    Ответить

    • Сергей Саранчин:

      Здравствуйте, Вера!
      В файле functions.php темы WordPress достаточно большое многообразие различных функций, реализованных для отображения тех или иных элементов блога.
      Каждая функция заканчивается тегом ?> или знаком } .По-другому быть не как не может. Поищите их там много.
      Здесь важно установить код именно между этими функциями, а не в само тело какой-либо функции!!!

      Ответить

  31. Татьяна:

    Большое спасибо за Статью! Нигде не могла найти информацию, как добавить кнопку «читать далее»… везде описываются случаи, когда кнопка выводится вместе со статьёй… а я просто скачала тему Вордпресс Enliven… так там просто нет кнопки «читать далее». И вот — о Чудо! — я натыкаюсь на ваш сайт :) БлагоДарю!

    Ответить

    • Сергей Саранчин:

      Татьяна, рад был Вам помочь!
      Очень приятно слышать! :grin:

      Ответить

  32. Валерий:

    Сергей, а можно сделать, что бы в админке сайта на WP по созданию и редактированию поста внедрить форму для ввода ссылки на другую Страницу. Что бы при сохранении ее, в посте выводилась бы кнопка типа «Читать далее» на которой отображалось бы «Читать + название этой Страницы»?

    Ответить

    • Сергей Саранчин:

      Валерий, да, это возможно сделать при помощи обычного php кода и стилей. Всё это я прописал в этой статье. Вам просто нужно будет встроить код не в файл темы, а непосредственно в редактор поста во вкладке «HTML». Ну и название кнопки сменить. Вот и всё :grin:

      Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: