Проверенные советы о том, как редактировать тему WordPress

1. Что такое инструменты разработчика браузера?
2. Активация инструментов разработчика в вашем любимом браузере
3. Воплощение этих изменений
4. Заключение

Наша взаимовыгодная связь https://banwar.org/

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

Template Express уже присматривает за менее техническими пользователями тем (мы знаем, что у вас есть более важные вещи, о которых нужно беспокоиться!), Делая наши настройки настройщика тем максимально интуитивно понятными во всех наши темы ,

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

Пользовательский редактор CSS

Пользовательский редактор CSS и дочерние темы становятся отличными инструментами, только если у вас есть знания CSS.

Вот где появляются инструменты для разработки браузеров:

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

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

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

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

Последние версии всех основные браузеры (Internet Explorer, Firefox, Chrome, Safari, Opera) имеют возможности веб-разработчика как встроенные функции или расширения.

Эти инструменты позволяют разработчику работать с различными веб-технологиями, включая CSS, HTML и JavaScript. Хотя вы не можете вносить прямые изменения в свой код, инструмент разработчика позволяет вам тестировать любой веб-элемент, редактируя его и мгновенно просматривая изменения в браузере. Как только вы будете довольны изменениями, вы можете переместить этот код на свой действующий веб-сайт (подробнее об этом позже).

Активация инструментов разработчика в вашем любимом браузере

Для этого примера мы будем использовать инструмент разработчика Chrome. Чтобы получить доступ к Chrome DevTools (это то, что они называют!), Откройте веб-страницу в Google Chrome, выберите меню Chrome в правом верхнем углу браузера, а затем выберите «Инструменты»> «Инструменты разработчика». В качестве альтернативы вы можете просто щелкнуть правой кнопкой мыши по любому элементу на вашей веб-странице и выбрать Inspect Element. Оба эти метода откроют окно Devtools в нижней части вашего браузера.

Chrome Developer Tool

В верхней части области инструментов разработчика вы увидите панель с различными вкладками, такими как «Элементы», «Ресурсы», «Сети», «Источники», «Временная шкала» и т. Д. Все они предлагают очень полезную информацию о веб-сайте, который вы используете, но мы собираемся сосредоточиться на элементах. вкладка, чтобы помочь нам изменить некоторые элементы дизайна, поэтому убедитесь, что выбран «Элементы».

Воплощение этих изменений

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

Конечно, вам не нужно использовать пользовательский редактор CSS, чтобы эти изменения вступили в силу. Вы можете внести изменения непосредственно в ваш файл style.css. Однако это приведет к проблемам при обновлении до новой версии темы. Все ваши изменения будут перезаписаны. Здесь вступают детские темы.

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

Чтобы создать дочернюю тему, все, что вам нужно сделать, это создать новую папку темы (например, «discovery-child») в папке «wp-content / themes». Затем создайте новый файл CSS в папке дочерней темы и назовите его style.css. Добавьте следующий код в этот файл style.css:

/ *
Название темы: Discovery Child Theme
URI темы: http://www.templateexpress.com/discovery/
Описание: Discovery Child Theme
Автор: Шаблон Экспресс
URI автора: http://www.templateexpress.com
Шаблон: Открытие
Версия: 1.0
* /

@import url («../ Discovery / style.css»);

/ * = Настройка темы начинается здесь
——————————————————- * /

В вашей админке WordPress вам нужно будет активировать дочернюю тему в разделе Внешний вид> Темы.

Теперь добавьте несколько стилей в свой файл theme.css дочерней темы.

Заключение

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