Как изменить цвет ссылки в шаблоне 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. Я делаю проще. Оставляю редактор открытым. На второй вкладке браузера меняю код в редакторе, сохраняю, обновляюсь, и если меня что-то напрягает, перехожу на прежнюю вкладку, где код висит в неизменном виде и снова сохраняю и обновляюсь, но этот способ чреват риском: может сорваться интернет-соединение, либо возникнет ошибка в браузере или вовсе отключат электричество, а у вас нет бесперебойника. Поэтому первый способ — безопаснее.
Как изменить цвет ссылки на WordPress? Как поменять цвет ссылок на сайте или сделать их без цвета?
⚙️ Тема видео: Как изменить цвет ссылки на WordPress? Как поменять цвет ссылок на сайте или сделать их без цвета? ?️ WordPress Insights — это канал для тех, кто начинает знакомство или работу с CMS WordPress. Обзор и работа с системой, основные моменты и базовые настройки Вордпресс в простых видео-уроках и мануалах. Особенности работы с некоторыми компонентами платформы, примеры решения типичных вопросов и проблем на WordPress. Коротко и понятно, на практике, как решать возникающие вопросы, находить и искать плагины и шаблоны Врдпрес, настраивать внешний вид сайта, расширять функциональность. ? уроки WordPress для начинающих ? настройка Вордпресс ? темы (шаблоны) WordPress ? плагины (расширения, модули) для WordPress ? фишки Вордпресс ? создание сайтов на CMS WordPress
Показать больше
Войдите , чтобы оставлять комментарии
Where to change the link color in the text? / Где изменить цвет ссылки в тексте?
Good afternoon!
Where in the admin panel to change the color of the links in the text? http://joxi.ru/52avBNkhE3aWZA Добрый день!
Где в админ панели изменить цвет ссылки в тексте?
http://joxi.ru/52avBNkhE3aWZA
May 24, 2020 at 1:11 pm #197483
Hello, You can set the link colors in the Theme settings > Styles and colors or change it with the custom CSS. Best Regards
May 24, 2020 at 1:49 pm #197491
Participant
Thank. for the answer but your answer does not solve my problem …
I have 2 places where I can write CSS code Which one do I need? Please write what kind of code you need to insert to change the color of the links? Спасибо. за ответ но ваш ответ не решает мою задачу…
У меня есть 2 места куда я могу писать CSS код Какой именно мне нужен? Напишите пожалуйста какой именно код нужно вставить чтобы поменять цвет ссылок?
May 24, 2020 at 8:13 pm #197550
Hello, Yes, you need to switch to the text mode, wrap the text with then assign a class and add a custom stile, if you need help, let me know I will provide the custom CSS. Best Regards
May 29, 2020 at 2:25 pm #198987
Participant
Thank! I want to change the color of links in the text throughout the site
Please provide me a custom CSS Спасибо! Я хочу изменить цвет ссылок в тексте на всем сайте
Предоставьте мне пожалуйста пользовательский ЦСС
May 30, 2020 at 9:12 am #199154
Hello, Set the text mode in the text https://prnt.sc/sqjlz9 Then insert span with the custom class: https://prnt.sc/sqjn2n Then you can use this class as the custom selector in the Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography. Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/ Best Regards
June 2, 2020 at 9:51 am #199918
Participant
Thanks for the detailed description!
But I only need to change this color http://joxi.ru/gmvbl6qSqbPwbm
for all links in the text on my site
Maybe this changes in style.css? Спасибо за детальное описание!
Но мне нужно только изменить этот цвет http://joxi.ru/gmvbl6qSqbPwbm
для всех ссылок в тексте на моем сайте
Может это меняется в style.css
June 2, 2020 at 10:04 am #199927
Hello, If you wrap this piece of the text in a link tag like this your text all the text would take the style, which is set for links in your theme. Best Regards