Пропустить

Основы в настройке сайта WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

Проверка элементов WordPress

Что такое инструмент проверки предметов?

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

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

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

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

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

Мы лишь поверхностно относимся к вариантам использования, потому что инструмент " Осмотрите элемент Это действительно мощный.

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Запуск инструмента «Осмотреть элемент» и локализация кода.

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

inpection из blogpascher коды

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

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

инспектирование HTML-CSS код

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

Правила CSS для элемента HTML

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Разработчик кода и отладчик разработчика

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

Редактирование исходного кода HTML

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

добавить новое правило CSS

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

изменения кода жить

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

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

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

Как найти ошибки на WordPress

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

консоль JavaScript

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

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

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля
чирикать
Регистрация2