Как настроить CSS темы WordPress в GoogleChrome

Автор:
Nurlan Kemelbekov

У вас есть WordPress блог, вы установили понравившуюся тему, и теперь хотите больше. Вы хотите узнать, как настроить css темы WordPress, чтобы это выглядело в самый раз. С чего начать?

Нужно ли для этого устанавливать все виды современных инструментов кодирования или другие средства разработки? Нет, вы не нуждаетесь в них, чтобы сделать основные css настройки WordPress темы.

Для этого есть волшебный инструмент встроенный прямо в веб-браузер Google Chrome. Этот инструмент на самом деле дает возможность вносить изменения CSS на любом сайте, который вы просматриваете!
В Google Chrome этот замечательный инструмент включен по умолчанию, нужно просто переключить окно. Чтобы открыть окно, можно нажать комбинацию клавиш Ctrl + Shift + I, нажать клавишу F12 или просто щелкнуть правой кнопкой мышки и выбрать “Просмотр кода элемента”.

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

Теперь наведите курсор мыши на цель, элемент которого необходимо изменить и нажмите левую кнопку мышки.
Элемент
Всякий раз, когда вы нажимаете, инспектор «блокирует» этот элемент.
Появится некоторый код слева и некоторый код справа. Тот, что слева — HTML, а справа CSS.
Я приведу пример того, как изменить цвет границы и шрифта и возьму для этого окно с фрагментами кода с тегами.

Инструмент просмотра кода элемента Google Chrome имеет приятный и очень удобный набор для выбора цвета. Нажмите цветной квадрат для границы и выберите новый цвет (В этом примере цвет зеленый).

Обратите внимание, как граница фактически изменяется, в то время как вы выбираете цвет!

Теперь попробуйте изменить цвет шрифта другим цветом.
Изменить цвет текста
Но этот инструмент обеспечивает только предварительный просмотр того, как будет выглядеть тот или иной элемент темы, если внести изменения в настройки темы WordPress и не меняет ничего на сайте. Следующим шагом является принятие изменений и применение их к теме WordPress блога.
Можно было бы, конечно, просто переместить эти изменения путем копирования в CSS файл вручную. Однако, существует способ сохранить измененный файл CSS прямо с веб-инспектора. Чтобы сделать это, просто нажмите на ссылку style CSS в правой части:

После нажатия на ссылку, откроется измененный файл CSS в закладке веб-инспектора Sources:

Щелчок правой кнопкой мыши на открытом файле CSS позволит вам просмотреть изменения, внесенные в файл CSS через инструмент элементов (локальные изменения), а также сохранить измененный файл CSS на компьютер, который потом можно использовать, чтобы заменить старый CSS.

Подводя итоги
Мы, очевидно, совсем немножко коснулись настройки темы WordPress, но, надеюсь, у вас появилось более глубокое понимание того, как настроить css темы WordPress в браузере GoogleChrome и теперь находитесь на верном пути к будущему профессионального настройщика WordPress темы. 🙂
Если есть другие понятия настройки темы WordPress, о которых вы хотели бы узнать, оставьте записку в комментариях.

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



Вам также может понравиться:


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

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

* Copy This Password *

* Type Or Paste Password Here *

восемнадцать − три =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!