Как изменить цвет гиперссылки в wordpress

Поменять цвет ссылки ? Легко !

Здравствуйте, сегодня мы поговорим о том как поменять цвет ссылки на сайтах под управлением движков с открытым для редактирования кодом. К таким CMS относится и WordPress.

Так-же, заодно, мы поменяем цвет ссылки при наведении на нее курсора мыши.

Хотя Вордпресс, да и не только он, предоставляет нам уже практически готовые бесплатные темы, не нуждающиеся в каких-то крупных доработках но, эти темы рассчитаны на массового пользователя. Всегда хочется что-нибудь настроить под свой дизайн, изменить что-то. Что-то добавить, или наоборот убрать. Хотите поменять цвет ссылки? Легко!

Для того, чтобы редактировать стиль ссылки нам нужно из админ-панели сайта зайти в редактор кода. Путь к редактору, если кто не знает такой: Консоль>Внешний вид>Редактор>Таблица стилей (style.css). Для редактирования цвета ссылки нам нужно в таблице стиля (style.css) найти такой участок кода, как показано на скриншоте.

Заходим в таблицу стиля и на клавиатуре набираем команду Сtrl+F и в появившееся в левом углу монитора набираем слово a:hover .
Вот участок кода:

Этот участок кода отвечает за цвет ссылки, цвет ссылки при наведении курсора мыши, подчеркивание ссылки. Где underline отвечает за подчеркивание ссылки, если убрать это слово, то подчеркивание ссылки при наведении курсора мыши исчезнет. А если мы удалим в коде none; и взамен напишем underline, то ссылка станет подчеркнутой всегда.

В a:hover поменять цвет ссылки при наведении курсора можно просто изменив цветовой номер color: #ff0012 ,на нужный нам.

a:hover < text-decoration: underline; /* подчеркивание ссылки при наведении курсора */ color: #ff0012; /* Цвет ссылки */

Поменять цвет ссылки вообще, можно изменив цвет в

Ну а если мы хотим установить цвет посещенной ссылки, то можно в этот отрывок кода добавить к селектору А добавить псевдокласс :visited , как показано ниже:

a:visited < color: #808000; /* Цвет посещенной ссылки */

В итоге должно получится как-то так:

a < text-decoration: none; color: #004b91; /* цвет ссылки */ >a:hover < text-decoration: underline; /* подчеркивание ссылки при наведении курсора */ color: #ff0012; /* Цвет ссылки при наведении курсора */ >a:visited < color: #808000; /* Цвет посещенной ссылки */ >

Но устанавливать цвет посещенной ссылки я у себя на сайте не стал.

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

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

Если вам понравилась эта статья, делитесь ей в соц.сетях. На этом все,до скорых встреч!

Лучший способ отблагодарить автора

2 thoughts on “ Поменять цвет ссылки ? Легко ! ”

Виктор26.09.2014 at 11:38 пп Попробовал.Ввел a:hover выдало 68 вариантов в таблице стилей и не оджного правильного.Порылся в коде и нашел в файле funktions.php запрет на изменения цвета ссылок.Тема у меня какая то злая.Но в целом большинству думаю подойдет!Респектуха!
1. Егор Автор записи 03.10.2014 at 6:31 пп Спасибо!
Разделы сайта
- HTML СSS в примерах
- Безопасность WordPress
- Внешний вид и Функционал WP
- Выбираем домен и хостинг
- Оптимизация и продвижение
- Перенос сайта из HTML в WordPress
- Плагины WordPress
- Сборник интересных скриптов
- Сервисы и программы
- Шаблоны WordPress
- Юзаем Bootstrap
Как изменить цвет ссылки в шаблоне WordPress

Поиск темы (шаблона) для своего блога на WordPress может отнять немало времени. Но это того стоит. Ведь то, как выглядит ваш блог, удобная ли у него навигация по страницам и разделам, может сказаться на его посещаемости.

Я шаблон для этого моего блога менял раз 10, если не больше и только теперь у меня на блоге стоит тот шаблон, который полностью меня устраивает. Но на его поиски ушло несколько дней. После того, как я установил шаблон к себе на блог, оказалось, что у него очень блеклый цвет ссылки в статьях.

Меня это не устраивало и я решил в обязательном порядке сменить цвет ссылки у шаблона. Для этого мне понадобилось совсем немножко знаний. Внутренние ссылки в статьях особенно важны для меня, для внутренней перелинковки блога, которую я проставляю вручную и не доверяю эту работу никаким плагинам. Если у вас есть начальные знания HTML, то изменить цвет ссылки для вас будет проще простого. Для того, чтобы изменить цвет ссылки в статьях, в шаблоне WordPress, вам нужно в панели управления WordPress пройти в раздел Внешний вид - Редактор . Так вы попадаете в раздел редактирования вашего шаблона.

У ссылки есть свой HTML код. Шаблон WordPress написан при помощи кода PHP и CSS. Для того, чтобы изменить цвет ссылки в статьях шаблона, нам придется редактировать файл стилей CSS под названием Style.css . Откройте этот файл в Редакторе , щелкнув по нему левой кнопкой мышки. У ссылок в CSS есть свои псевдоклассы. Каждый псевдокласс предназначен для описания действия, которое производится над ссылкой. Находится ли ссылка в состоянии покоя, навели ли на нее стрелку мышки и так далее. В файле Style.css нам нужно будет найти кусочек кода, который отвечает за ссылки. Ниже на картинке вы можете увидеть этот кусочек кода.

Надпись Links означает, что этот кусочек кода отвечает за ссылки. Псевдокласс "a" отвечает за ссылку, которая находится в спокойном состоянии. Вот это нам, собственно и нужно.У псевдокласса "a" есть свойство "color" , которое отвечает за цвет ссылки. Нужный вам HTML код цвета ссылки вы можете найти в Интернете в таблицах цветов. Для того, чтобы изменить цвет ссылки в статьях, вам нужно изменить значение (код) свойства "color" . Для примера, синий HTML код ссылки будет выглядеть так: #0000ff . Псевдокласс "a:hover" отвечает за ссылку, на которую навели стрелку мышки. После того, как вы подберете нужные вам цвета для свойства "color" , не забудьте сохранить сделанные вами изменения. Сделать это можно в редакторе при помощи кнопки "Обновить файл" . Ну вот и все. Теперь вы можете задать своим ссылкам в статьях любой цвет. Если что-то непонятно, спрашивайте в комментариях, по возможности постараюсь вам ответить.

Как изменить цвет ссылок в WordPress. Как добавить подчеркивание.

Как изменить цвет ссылок в WordPress. В некоторых темах WordPress менять цвет ссылок можно, не напрягаясь, в настройках темы из консоли. Когда делаешь первые шаги в изучении и строении сайта(пусть и на базе конструктора, как сейчас, или на голом html, как раньше, до эры простых в использовании конструкторов), очень увлекает процесс внешнего вида сайта и кажется значимым. Создатель сайта тщательно переберет с десяток тем, меняя до одури цвет, шрифт, виджеты, навешивая десятки плагинов для представления аватарки зарегистрированных пользователей и проч., проч, проч. Когда сайт создан и не один, то все это перестает быть важным. Ставишь тему, подгоняешь небольшие моменты, которые не устраивают, и, как говорится, наплевать. Сайт - для контента, а не для его безвкусного оформления. Не все мы прирожденные дизайнеры и эстеты, поэтому старайтесь придерживаться разумного минимализма. Птица красива полетом, а не оперением. Поверьте, что это не нужно. Ни вам, ни пользователям(если они вообще придут на ваш сайт), гораздо лучше, если гости заявятся неожиданно, а стол не накрыт, чем за обставленным столом остаться одному.

Итак, если в адаптивных настройках темы нет возможности поменять цвет ссылок, то на помощь придет всемогущий редактор. Во-первых, посмотрим, где находится файл класса ссылок - css. Для этого нужна борода Старик-Хоттабыча и заклинание(если браузер не дает такой функции в меню), а именно одновременное нажатие кнопок (горячих клавиш) ctrl+shirt+C или ctrl+shift+I или ctrl+U или F12 - я жму последовательно, удерживая по порядку. И первые два варианта мне нравятся больше, поскольку подсвечивают блоки, что визуально удобнее.

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

Но, будем менять через редактор файлов в панели управления сайтом. В Консоли - Внешний вид - Редактор - файл Таблица стилей

Обратите внимание на верхнюю подсказку WordPress. Но во встроенном редакторе не было функции замены цвета ссылок.

Далее я нахожу код нужного мне цвета в яндексе - #191970 - название понравилось - MidnightBlue. Теперь - ручная работа, тут будьте внимательны:

меняю найденный код в строчках 144 и 145

то есть, меняю цвет и добавляю подчеркивание (underline) к ссылке, потому что оно задано не было. Сохраняю изменения и обновляюсь. Ничего не происходит, странно. Я открываю другой браузер, захожу на сайт. Ссылки поменяли цвет, как мне требовалось. Значит тот браузер притормозил, что нередко происходит с людьми. Скорее всего ему нужно прочистить мозги, то есть очистить кэш.

Важно: если вы опасаетесь менять код, то можете делать так.

1. Скопируйте весь код в файл и сохраните на компьютере. Затем в редакторе меняйте код, обновляйте, проверяйте, и если что-то не устроит, вносите старый код обратно, и снова сохраняйте. чтобы вернуться.

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

Как изменить цвет ссылок на сайте

Сегодня мы с вами подробно рассмотрим способ смены цвета ссылок на сайте, а в финале дам ещё более симпатичное решения этого вопроса.
Сама задача замены оформления ссылок, как ведущих на собственные страницы, так и исходящих, весьма актуальна! И я на стороне тех людей, которые заботятся о естественной красоте своего детища-сайта и его удобстве для гостей-посетителей.

Меняем цвет ссылок на сайте и делаем их более красивыми и понятными

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

Тема: Меняем штатный цвет ссылок на сайте

Нам потребуется как минимум сайт. Ну и ваше решение, где и как вы будете выполнять редактирование кода. Можно использовать Нотепад ++ или работать прямо в живую на хостинге.
Я буду править код в ONLINE. Для начала предложу классический пример CSS , который вы сможете поменять на своё усмотрение… А сейчас просто копируйте у меня и прописывайте к себе в файл стилей style.css , куда-нить в самый его конец — основной ФАЙЛ СТИЛЕЙ находится в корневой папке вашей темы.
…поехали — сегодня мы рассмотрим пример ссылки « читать далее ».
```
.readmore a < padding: 10px; margin-bottom: 15px; float: right; font-style: italic; /*color: #000;*/ >
```
Поясню:
1 строка: уникальный id класс. Задавая который, можно поменять цвет любой ссылки, как на страницах сайта так и в сайдбаре, например. Стоит обратить внимание: видите буковку «а» — это определение, которое обращается непосредственно к ссылке этого id класса. 2 и 3 : отступы (расположение ссылки относительно соседних элементов сайта) 4: расположение ссылки на листе сайта – лево/право… 5: стиль текста ссылки (здесь свойство italic – курсив) 6: ну и наша сегодняшняя цель – ЦВЕТ ссылки. У меня этот элемент закомментирован. То есть при этом цвет нужной нам ссылки останется цветом /по умолчанию/ темы. И как понимаете, если его «открыть», цвет изменится на нужный нам. Итак: если вам всего-то нужно поменять цвет всех ссылок вашего блога, то это запросто.
Наводите курсор на ссылку; щёлкаете правой клавишей… в выпадающим подменю кликаете «просмотреть код элемента». Это штатное средство любого браузера: но есть и неплохое расширение Фаербаг … Я пользуюсь им. …смотрите: (я не буду здесь подробно пояснять фотографии, ибо на это есть видео: ссыль в финале статьи) на фото нужно кликать… …а если что-то непонятно, то посмотрите видео или пишите в комментариях – разберёмся. Итак: Посмотрите внимательно на то, что подчёркнуто зелёным. Всё достаточно удобно: справа – нумерация строк элементов (будет просто отыскать в скрипте style css нужные примеры). Внимание: если у вас цель сменить цвет всех ссылок сайта скопом, просто заменяйте свойства селектора «а» на свои… color: ***** (подчёркнуто в самом низу справа) Чуть выше – наш пример стилей ССЫЛКИ. Ну и в левом окне (то, что побольше) я обозначил сам уникальный класс, которым и определяется данная ссылка, кстати те классы, которые вам могут в последствии понадобиться, отыскиваются (или задаются) именно в левом окошке. У меня, как видите, .readmore — у вас может быть присвоен другой id класс. А поэтому, вам останется только скопировать его (прямо из этого окошка: кликаете на него два раза; копируете и прописываете за место моего в своём файле стилей CSS). Как отыскать уникальный id-класс? …проведите осторожненько курсором сверху вниз по всем прописанным скриптам в левом окошке «инструмента разработчика» и как только в основном окне браузера (на вашем сайте) нужная вам ссылка подсветится синеньким цветом — место расположения курсора и будет на ИМЕНИ id-класса. Обращаю внимание: в вашей теме уже может быть присвоен уникальный класс ссылке «читать далее» так что вам только останется (если необходимо) заменить свойства стилистики цвета #000000 того селектора, который показан инструментом браузера. Тем же, у кого эта ссылка имеет свойства «по умолчанию» то есть в файле стилей она регулируется как любая другая селектором «а» (этот пример обычно находится вверху документа стили css) но вам хочется задать ей более симпатичный и индивидуальный цвет, — тогда следует отыскать или присвоить свой уникальный id класс выбранной вами ссылке и прописать его на место показанного мною выше.Как это сделать: Если у вас ссылка «Читать далее» была не «завёрнута» в div-класс (не имела уникального имени /селектора CSS, скажем так/), тогда её нужно «обернуть» и присвоить уникальное имя. Например, открываете файл post.php , отыскиваете саму ссылку …#more- … и заворачиваете её в ДИВ класс

Точку перед уникальным классом, добавите только в стилях css. О многом другом и интересном в следующих статьях… Ну а теперь, как и говорил выше, предложу ещё один способ обозначения ваших сайтовых ссылок: Видите справа ссылки иконку. Почти как в Википедии… И если хотите сделать себе так же, читайте мою статью Оформление внешних и внутренних ссылок CSS и визуальными иконками или смотрите видео… ссыль в статье. Всё! …а вы тестируйте свою работу.
Online консультация по настройкам и созданию сайтов на WordPress

. вопросы в комментариях - помогу, в чём дюжу.
mihalica.ru !

Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно.

. веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети. - заказы, вопросы. разработка.