Основы Inspect Element: настройка WordPress для пользователей DIY

/

Вы когда-нибудь хотели временно отредактировать веб-страницу, чтобы посмотреть, как она будет выглядеть с определенными цветами, шрифтами, стилями и т. Д. Это возможно с помощью инструмента Inspect Element, который уже существует в вашем браузере. Это мечта всех пользователей DIY, когда они узнают об этом. В этой статье мы покажем вам основы проверки элемента и то, как его использовать на вашем сайте WordPress.

Руководство WordPress для новичков по использованию инструмента Inspect в Google Chrome

Что такое Inspect Element или Developer Tools?

Современные веб-браузеры, такие как Google Chrome и Mozilla Firefox, имеют встроенные инструменты, которые позволяют веб-разработчикам отлаживать ошибки. Эти инструменты показывают код HTML, CSS и JavaScript для страницы и то, как браузер выполняет этот код.

Используя инструмент Inspect Element, вы можете редактировать код HTML, CSS или JavaSCript для любой веб-страницы и видеть свои изменения в реальном времени (только на вашем компьютере).

Для владельца веб-сайта DIY эти инструменты могут помочь вам предварительно просмотреть, как будет выглядеть дизайн сайта, без внесения изменений для всех.

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

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

Мы лишь поверхностно касаемся вариантов использования. Элемент Inspect действительно мощный.

В этой статье мы сосредоточимся на Inspect Element в Google Chrome, потому что это наш любимый браузер. Firefox имеет собственные инструменты разработчика, которые также можно вызвать, выбрав элемент проверки в меню браузера.

Готовы? Давайте начнем.

Запуск элемента Inspect Element и поиск кода

Вы можете запустить инструмент проверки элемента, нажав клавиши CTRL + Shift + I на клавиатуре. Или же вы можете щелкнуть в любом месте веб-страницы и выбрать элемент проверки в меню браузера.

Проверить меню

Окно вашего браузера разделится на две части, а в нижнем окне будет показан исходный код веб-страницы.

Окно инструмента разработчика разделено на два окна. Слева вы увидите HTML-код страницы. На правой панели вы увидите правила CSS.

Панели HTML и CSS в окне проверки

Когда вы наводите указатель мыши на источник HTML, вы увидите, что затронутая область выделена на веб-странице. Вы также заметите изменение правил CSS для отображения CSS для просматриваемого элемента.

Редактирование определенного HTML-элемента

Вы также можете подвести указатель мыши к элементу на веб-странице, щелкнуть правой кнопкой мыши и выбрать элемент проверки. Элемент, на который вы указали, будет выделен в исходном коде.

Редактирование и отладка кода в элементе Inspect Element

И HTML, и CSS в окне проверки элемента доступны для редактирования. Вы можете дважды щелкнуть в любом месте исходного кода HTML и отредактировать код по своему усмотрению.

Редактирование HTML-кода в инструменте проверки элементов

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

Редактирование CSS в инструменте проверки элемента

Когда вы вносите изменения в CSS или HTML, эти изменения мгновенно отражаются в браузере.

Живые изменения CSS на экране браузера

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

Чтобы действительно внести изменения, вам нужно будет отредактировать таблицу стилей вашей темы WordPress или соответствующий шаблон, чтобы добавить изменения, которые вы хотите сохранить.

Прежде чем вы начнете редактировать существующую тему WordPress с помощью инструмента Inspect Element, убедитесь, что вы сохранили все свои изменения, создав дочернюю тему.

Легко находите ошибки на своем сайте

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

Ошибка консоли браузера

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

Если ваш sharebar не работает должным образом, вы можете увидеть, что произошла ошибка JavaScript.

Такие инструменты, как Inspect Element Console и SupportAlly, помогут вам улучшить поддержку клиентов, потому что группа технической поддержки любит клиентов, которые проявляют инициативу в предоставлении подробных отзывов о проблеме.

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как добавить кнопку Skype Share в WordPress

Знаете ли вы, что в Skype есть кнопка «Поделиться»? Мы не делали этого до тех пор, пока один из читателей не попросил у нас руководство о том, как добавить

Как отслеживать вовлеченность пользователей в WordPress с помощью Google Analytics

Правильно ли вы отслеживаете взаимодействие пользователей на своем сайте WordPress? Вовлеченность пользователей - один из самых важных показателей,

Как исправить ошибку при установлении соединения с базой данных в WordPress

Вы видите на своем веб-сайте WordPress сообщение «Ошибка при установлении соединения с базой данных»? Это фатальная ошибка, которая делает ваш сайт

Руководство для начинающих: как добавить карточки Twitter в WordPress

Вы хотите добавить Twitter Cards на свой сайт WordPress? Twitter Cards позволяет прикреплять мультимедийные материалы к твитам, которые ссылаются на ваш контент.