Блог трейдера — От слов к делу!

От слов к делу ! — Бизнес в Интернете !

Делаем красивую кнопку — «ЧИТАТЬ ДАЛЕЕ» в WordPress

Делаем красивую кнопку - "ЧИТАТЬ ДАЛЕЕ" в WordPressСегодня работая над сайтом клиента, возился с тегом море (читать далее) который делает анонсы к записям в блоге. Дабы не вдаваться в подробности про сам тег море перейду сразу к интересному решению которое я реализовал на сайте клиента. Задача была следующая — нужно было как то украсить стандартный линк "ДАЛЕЕ". Решение было найдено и что бы не забыть его для возможных следующих своих проектов опишу в блоге ключевые позиции этого решения…

Делаем красивую кнопку — "ЧИТАТЬ ДАЛЕЕ" в WordPress

Было принято решение вместо сухого линка с текстом "ДАЛЕЕ" сделать красивую интерактивную кнопку которая органично впишится в дизайн сайта. Все изменения нужно будет делать в файле вашей темы styles.css (правда предварительно я еще изменил сам текст линка "ДАЛЕЕ" на "ЧИТАТЬ ТЕКСТ ПОЛНОСТЬЮ"). Находим в файле стилей вашей темы (styles.css) класс «.more-link» и меняем его на один из вариантов привиденных ниже (если такого класса нет, то тупо дописываем в конце файла один из приведенных кодов ниже)

ВАРИАНТ — 1 (кнопка "читать далее" с круглыми углами)

кнопка читать далее
.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 " (кнопка "читать далее" с острыми углами\плоская)

красивая кнопка читать далее в вордпресс
.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 " (кнопка "читать далее" с градиентом\объемная)

ВАРИАНТ - 3 " (кнопка "читать далее" с градиентом\объемная)
.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 */
}

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

Нужно будет и на этом блоге "подшаманить" немного клавишу "Читать далее" да и не только ее… Блог "От слов к делу!" — в первую очередь создавался для записи информации по моим тестам торговли на биржах Бетфаир  и Форекс но сейчас смотрю что начал писать на разные темы… Так что в ближайшем будущем прийдется заняться небольшой реструкторизацией  и дизайном блога и немного перепрофилировать контент. Всем удачи и до новых встреч на блоге "От слов к делу! — Зарабатывайте!"

Хотите получать статьи блога на свой E-Mail

Укажите свой адрес электронной почты, и я буду отправлять Вам все новые статьи в блоге.

  1. У меня такая ситуация, когда на своём блоге ставлю тег далее, нажимаю на далее, а у меня переходит на страницу опять с тегом далее, что делать?

    1. Добрый день. Если я правильно понял то при нажатии на "читать далее" (тег more) у Вас ничего не происходит и Вы остаетесь на тойже страничке где и были?! Попробуйте удалить вставленный ранее тег и вставте в режиме HTML следующий тег вручную <!—more—> именно в то место где должна быть кнопка читать далее… (этот вариант "железный" — 100% будет работать). А если Вы ставили один из вариантов кнопки описанный в посте то нужно смотреть что не так где-то возможно ошиблись. Все три варианта рабочие! Ставил не один раз.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


× восемь = 8

Экспериментальный блог трейдера © 2015 Читай - Зарабатывай