Пропустить

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

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

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

Более Загрузка 600.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