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

Как изменить цвет ссылки в шаблоне 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» , не забудьте сохранить сделанные вами изменения. Сделать это можно в редакторе при помощи кнопки «Обновить файл» . Ну вот и все. Теперь вы можете задать своим ссылкам в статьях любой цвет. Если что-то непонятно, спрашивайте в комментариях, по возможности постараюсь вам ответить.

Как изменить url, адрес, цвет, вид, постоянные ссылки в wordpress

Как изменить url , адрес, цвет, вид, Постоянные ссылки в wordpress — важный фактор ранжирования сайта. Привести их к ЧПУ-виду, на веб-страницах сделать анкорными (релевантными). Уметь закрывать от индексации, чтобы не передавать вес внешним ресурсам. Чем правильнее они прописаны, тем больше шансов продвинуться в Поисковой Системе (ПС).

Виды ссылок, адресов и URL:
расшифровка понятий

Постоянные ссылки — это уникальные адреса: домен + заголовок страницы или записи на сайте. Формат задается, как постоянный. Вид урла может быть разным. Настраивается в админке wordpress .

URL (англ. Uniform Resource Locator) — Единый (уникальный) Локатор Ресурса, или Универсальный показатель адресов сайта (веб-документа) в интернете. Поэтому одинаковых урлов с разным контентом быть не должно.

Анкор ( anchor) — привязка ключевого слова или фразы к определенному адресу. Когда линк обычного вида заменяют на простой, релевантный запросу, текст.

ЧПУ (Человеко-Понятный Урл) — ссылка, приведенная к удобному для чтения ботами и людьми формату. Представляет собой понятный и информативный вид записи. Желательно, чтобы текст был на латинице (хотя, не исключается кириллица). Если админка WordPress на русском, для изменения URL требуется плагин транслитерации.

Открытые и закрытые ссылки: первые — индексируемые, передающие вес странице-перенаправления. Вторые — закрытые от индексации, не передают ссылочный вес постороннему ресурсу.

Измените параметры в консоли WordPress до того, как начнете публиковать статьи. Смотрите пошаговое описание: Базовые настройки админки . Это первое, что должен сделать вебмастер после создания сайта. Тогда избежите ошибок, связанных с URL (-ами). Когда страницы проиндексированы, после изменения старого адреса делают редирект 301 на новый.

Как изменить Постоянные ссылки

Прежде чем публиковать статьи на сайте, настраивают формат Permalinks. Когда статьи со старыми адресами уже проиндексированы, показываются в поиске, делать это нежелательно. Изменив вид линков, если отсутствует 301 редирект, получите 404 ошибку.

Предостережение не касается локальных сайтов. На них вы только тестируете настройки. Также ничего страшного не случится с молодым проектом, когда мало статей, нет трафика. Смотрите пошаговое руководство об изменении URL, исправлении ошибок, 301 редиректе .

Какой вид Постоянной ссылки выбрать

В админке WordPress предлагает 6 распространенных видов Url. Чтобы выбрать, перейдите в консоль: Настройки — Постоянные ссылки . Чаще всего используют «Название записи» или «Произвольно». В последнем случае вид permalinks формируете сами. Но есть несколько нюансов, которые следует учитывать.

Рекомендации: Выбор
Постоянных ссылок в wordpress

Хочется выбрать короткий, красивый, информативный и самый оптимальный для конкретного ресурса формат permalinks (URL -адреса) . Поэтому нужно учитывать, что:

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

• Указывать дату полезно не всегда. Если текст опубликован давно, материал могут счесть устаревшим. Теряется трафик. Чтобы этого не было, обновляйте старые тексты, чтобы цифры говорили о свежем контенте.

• Когда дата необходима, ее формат подбирают в зависимости от скорости выхода новых публикаций. При размещении нескольких статей в день, цифры должны включать минуты. Если дата (номер) — основной ориентир сравнения линков, она должна иметь различия.

• Простой вид URL , имеющий вместо заголовка страницы (записи) порядковый номер, малоинформативен для пользователя , бесполезен для CEO . Хотя для поисковых роботов — самый оптимальный. Адрес быстро находится в массе запрещенных к индексации документов (дубликатов).

• Включая % category% в формат Постоянных ссылок, учитывайте, что рубрики имеют подрубрики. Одинаковый текст может отображаться в каждой из них. По запросу покажут url, который выше по алфавиту.

• Если формируете permalinks сами (последний вариант), следите, чтобы не было пробелов, иначе адреса будут нерабочими. Определившись с выбором, не забудьте Сохранить изменения .

• Иногда в конец url подставляют атрибут HTML . Тогда link имеет вид: http:// домен/%postname%/html. В какой-то степени, это способствует идентификации, но насколько верно подобное утверждение, сказать трудно. В последнее время такой «хвост» встречается редко.

• Дополнительные атрибуты — префиксы — используйте на свой вкус, но не злоупотребляйте количеством информации в адресе. Слишком длинные ссылки тормозят отображение страницы, обрезаются в сниппете, не рекомендуются оптимизаторами CEO .

Совет: Выбирая формат Постоянных ссылок, ориентируйтесь на конкурентов: какой вид урлов у них, такой подбирайте для своего ресурса. Они уже в топе, значит их тип URL — самый оптимальный.

Как изменить URL : транслитерация

При отсутствии модуля транслитерации, URL Постоянной ссылки будет частично отображаться на латинице (домен), а частично на кириллице (заголовок h1 ). При копировании и в html- коде адрес выглядит некорректно: длинный «хвост» с непонятными знаками. Что они означают понять невозможно. Роботу все равно, но читателя это может напугать, а не вирус ли на сайте?

Чтобы привести url к нормальному удобо-читаемому виду (ЧПУ) используют плагин автоматической транслитерации, например, Cyr to Lat . Настраивать не требуется: установили, активировали и все.

Рекомендую это расширение, потому что похожие, например, Rus To Lat , не имеют функции изменения кириллических адресов старых публикаций. Поэтому при обновлении контента в редакторе wordpress придется изменять ссылки вручную. Cyr to Lat автоматически преобразует ярлык URL в латиницу.

Примечание: Говорить о транслитерации ссылок, как о преобразовании их в ЧПУ, не совсем верно. Это лишь один параметр улучшения вида Постоянной ссылки. Важны так же другие:

• формат написания;
• содержание;
• вложенность;
• нижний регистр;
• тире, а не подчеркивание;
• релевантность;
• количество символов и пр.

Опция транслитерации url есть в модуле оптимизаторе Clearfy . Если используете ее, плагин Cyr to Lat не нужен. Оба расширения автоматически меняют описание изображений с кириллицы на латиницу. Дублировать эти функции не следует, оставьте что-то одно.

Вид ссылки страницы (ярлык) можно изменить вручную

Ручная правка URL
страницы или записи

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

1. Скопируйте русскую часть URL статьи.
2. Выберите в левом Меню: для Яндекса и Google .
3. Вставьте в поле Текст.
4. Нажмите кнопку Транслит.
5. Загрузите измененный заголовок в буфер обмена.
6. В редакторе вставьте в ссылку транслитерированный вариант.

Теперь url полностью на латинице, то есть, приведен к виду ЧПУ (Человеко-Понятный Урл). Ничего сложного в этом нет, править ссылку руками приходится не так часто. В редакторе Gutenberg это делается немного иначе. Чтобы увидеть ссылку статьи, сохраните документ (кнопка вверху). В открывшемся окне (правая колонка) — Вкладка Документ — Постоянная ссылка — ярлык url . Открыв, увидите кириллическую часть, которую можно изменить вручную:

• транслитерировать;
• сократить,
• добавить ключевую фразу и пр.

Как изменить цвет ссылки (текст)
в редакторе WordPress вручную

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

Создание анкорной ссылки с выбором цвета в редакторе WP

Чтобы этого не делать постоянно, вносят правки в код файла style.css . Для этого на сайте (в тексте) выделите правой кнопкой мыши ссылку. Перейдите в Просмотр кода (опция контекстного меню).

Переход на страницу разработчика: Визуальное изменение параметров (цвета) ссылки (иного контента)

На странице разработчика найдите код, отвечающий за цвет link (color ). Поэкспериментируйте, внося изменения. Это визуальная демонстрация правок. На сайте ничего не меняется. Поэтому не бойтесь, что сделаете что-то не так. Как только переключитесь на другую страницу, цвет ссылки вернется к прежнему виду.

Чтобы внести изменения, которые сохранятся на сайте, необходимо переписать код в файле стилей. Подобрав цвет, скопируйте кодировку вида: #12a45b и запомните номер строки, где править параметр.

Предварительная корректировка файла style.css

Перейдите в админку: Внешний вид — Редактор тем :

• Откройте файл (обычно это style.css) ;
• найдите нужную строчку color ;
• удалите старый код, не трогая кавычек;
• измените исходную кодировку цвета # хххххх на выбранную вами;
• сохраните изменения.

Правка файла стиля: Админка — Внешний вид — Редактор Тем

Аналогично меняются другие параметры: заголовки, фон, шрифт, жирность, кегль и пр. Препятствие одно: не в каждой Теме внешние настройки элементов находятся в файле стилей. Иногда придется искать в других, многое зависит от шаблона.

Примечание: После обновления Темы, настройки, сделанные таким образом вернутся к прежнему виду. Чтобы этого не случилось, используют дочернюю Тему. Или изменяют стиль в окне кастомных настроек. Где указывают наименование элемента и параметры, которые хотите исправить. 100% гарантии, что прописанный таким образом код стиля ( css) сработает, нет.

Как сделать анкорную ссылку
в WordPress

Анкор — это слово или фраза, заменяющая url перенаправления вида: https://ru.wordpress.org/themes / на фразу из контента. Желательно прописать ключ (слово, релевантное запросу в поиске), а не тут, здесь . Чтобы понять, как это сделать в wordpress , посмотрите 2 -х минутное видео.

Как в WordPress закрыть ссылку
от индексации

Установите плагин Скрытие ссылок из репозитория WordPress

Чтобы публикуемые внешние links не передавали вес страницы левым ресурсам, их принято закрывать от индексации. Для этого используют шорт-коды — функция плагина. Теги можно прописать вручную, но без скрипта они не работают. Поэтому установите расширение из репозитория WordPress : консоль — плагины — добавить новый . В строке поиска можно прописать по-русски: Скрытие ссылок . Ничего настраивать не надо.

• Установите и активируйте модуль.
• В визуальном редакторе появится маленькая кнопочка : стрелка в чекбоксе.

• В любом месте кликните по выделенной фразе (слову), которую надо закрыть — иконка активируется. При этом появляется поле Добавление ссылки .
• После нажатия на значок, линк автоматически обрамляется тегами: [Iink] ссылка — анкор [/Iink] .

Это один из самых удобных способов скрытия внешних links от индексации, чтобы сохранить вес страницы. Теги noindex и nofollow могут скрыть текст, но не факт. Для поисковых ботов Google и Yandex — это не запрет, а рекомендация, которую выполнять необязательно.

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

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

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

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

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

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

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

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

Как изменить цвет ссылки на блоге wprdpress, я расскажу в этой статье. Вы узнаете, как изменить цвет активной ссылки в статьях, посещённой и не посещённой. После этого, Вы сможете отредактировать этот параметр так, как Вам нужно.

А пока не перешли к основному тексту поста, советую узнать, как обновить wordpress правильно и без ошибок и статью о том, как изменить шрифт в wordpress, в которой, Вы узнаете, как сменить стиль и размер шрифта в контенте.

Что касается ответа на вопрос: «Зачем менять стиль ссылок», то тут у каждого владельца сайта есть свои собственные причины, углубляться в которые нет надобности.

Итак, чтобы отредактировать цвет ссылок и их другие параметры, нам нужно зайти на вкладку админ панели блога «Внешний вид» и нажать на пункт «Редактор». А дальше, выбрать файл Таблицы стилей style. css, так как именно в нём. находится кусочек кода, который отвечает за тем, как будут выглядеть ссылки на блоге.

Зайдя в этот файл необходимо найти кусочек кода, который отвечает за редактирование ссылок. Для этого нажмите кнопки Ctrl+F, чтобы вызвать форму поиска по странице, после появления которой, введите в неё атрибут a:link.

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

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

И сейчас я расскажу значения некоторых пунктов, которые отвечают за те или иные изменения:

a:link – тут можно задать стиль для непосещёной ссылки (то, как она выглядит в документе).
a:active – тут меняется стиль активной ссылки.
a:visited – здесь можно изменить стиль просмотренных ссылок.
a:hover – меняется стиль, как будет выглядеть ссылка при наведении на нее курсора.

text-decoration:none убирает нижнее подчеркивание у ссылок. По умолчанию оно установлено.

Но и это ещё не всё. Теперь, чтобы сделать изменения, нужно знать параметры основных атрибутов (команд).

И вот их список:

• Blink- позволяет установить мигающий цвет.
• Line-through — помогает сделать зачеркнутый текст.
• Underline- подчеркивание.
• None- вариант, который установлен по умолчанию и отменяет все предыдущие настройки;

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

На этом всё, что я хотел сказать про то, как менять цвет и стили ссылок на Вашем блоге. Удачи!

А если Вам необходимо изменить стиль заголовков, то в статье редактируем шрифт заголовков, найдёте то, что ищите.