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

Вы когда-нибудь хотели временно отредактировать веб-страницу, чтобы посмотреть, как она будет выглядеть с определенными цветами, шрифтами, стилем и т.д....

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

Что такое Inspect Element или инструменты разработчика?

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

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

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

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

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

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

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

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

Если вам не понравилось видео или нужны дополнительные инструкции, то продолжайте читать дальше.

Запуск Inspect Element и поиск кода

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

Меню инспекции

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

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

Панели HTML и CSS в окне Inspect

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

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

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

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

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

Редактирование HTML-кода в инструменте inspect element

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

Редактирование CSS в инструменте inspect element

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

Изменения CSS в реальном времени на экране браузера

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

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

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

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

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

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

Например, если вы являетесь клиентом OptinMonster и задаетесь вопросом, почему ваш optin не загружается, то вы можете легко найти проблему «your page slug does not match».

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для просмотра видеоуроков по WordPress. Вы также можете найти нас в Twitter и Google+.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий