Вопрос или проблема
Я не уверен, как лучше всего подойти к этой проблеме:
У меня есть меню, которое я видел и которое мне нравится, и я хочу использовать его как основу для своего. У меня есть CSS для него. На странице, откуда оно пришло, все обозначено иначе, чем в моем собственном меню на моем собственном индивидуальном сайте WordPress.
Должен ли я использовать functions.php, чтобы вызвать новые CSS div в место моих собственных, или есть более подходящий способ сделать это? Я не очень хорошо разбираюсь в кодировании, но готов попробовать все =)
Классы и ID Div, которые я хочу использовать вместо своих:
</head>
<body class="contact page" data-class="contact">
<header id="pageHeader" data-title="/ Вверх страницы">
<div class="top-wrapper">
<div class="top">
Это существующий код в headerstyle3.php, который я хочу заменить:
</div>
<div class="absolute">
<div class="wrapper menu-bg custom-menu-bg border-bottom-black-tr">
<div class="container">
Я почти уверен, что элемент навигации для обоих – “pageHeader” для нового и “container” для старого.
Буду признателен за любую помощь! =)
Я определенно бы посоветовал вам переписать вашу тему.
Поправьте меня, если я ошибаюсь, но темы WordPress созданы так, чтобы вы могли с ними манипулировать. (если захотите)
Еще одна вещь, которую стоит учесть, предположив по вашему имени файла headerstyle3, вы, вероятно, имеете тему, содержащую больше таких страниц, различающихся по числовому индексу (headerstyle1, headerstyle2), с другим дизайном, так что не забудьте также иметь дело с ними.
Пожалуйста, имейте в виду, что я не могу сказать вам, как заменить ваш код. Для этого вам нужно предоставить нам немного больше информации, (например, хотите ли вы, чтобы мы помогли вам заменить его), т.е. весь исходный код вашего желаемого меню, текущее содержимое файла headerstyle3…
.
Ответ или решение
Чтобы заменить элементы <div> в вашей теме WordPress, вы можете использовать файл functions.php, однако задача может быть выполнена более эффективно, редактируя сам файлы шаблонов темы. Ваша ситуация предполагает замену существующего HTML-кода для навигации с вашим новым.
Шаг 1: Резервное копирование текущих файлов темы
Перед внесением любых изменений, обязательно создайте резервную копию текущих файлов вашей темы, чтобы избежать потери данных.
Шаг 2: Изучение структуры вашей темы
Посмотрите, где расположен файл headerstyle3.php, который вы хотите изменить. Обычно такие файлы находятся в папке вашей активной темы, в подпапках, таких как template-parts или partials.
Шаг 3: Замена HTML-кода
-
Откройте файл
headerstyle3.phpв текстовом редакторе. -
Найдите код, который вы хотите заменить. В вашем случае это:
<div class="absolute"> <div class="wrapper menu-bg custom-menu-bg border-bottom-black-tr"> <div class="container"> -
Замените этот код на новый, который вы хотите использовать. Например, ваш новый код может выглядеть следующим образом:
<header id="pageHeader" data-title="/ Top of page"> <div class="top-wrapper"> <div class="top"> -
Закройте теги после вставки нового кода. Не забудьте, что важно поддерживать правильную иерархию HTML.
Шаг 4: Обновление CSS
Ваш новый код может нуждаться в настройке CSS, чтобы его стиль был правильным. Убедитесь, что CSS-файлы загружаются корректно:
- Если вы ранее использовали определенные классы и ID в вашем CSS, вам необходимо адаптировать их под новые названия, чтобы стили применялись правильно.
Шаг 5: Тестирование изменений
После того как вы внесли изменения, сохраните файл и обновите вашу страницу в браузере:
-
Проверьте навигацию на сайте: Убедитесь, что все элементы отображаются корректно.
-
Проверьте, что все ссылки работают и ведут на нужные страницы.
-
Посмотрите сайт на разных устройствах: Убедитесь, что дизайн адаптивный и выглядит хорошо как на десктопах, так и на мобильных устройствах.
Примечание о functions.php
Хотя файл functions.php в WordPress можно использовать для изменения поведения темы (например, добавление новых скриптов или стилей, создание пользовательских функций и т.д.), в данном случае вам не обязательно использовать его для замены HTML-кода.
Заключение
Процесс замены <div> довольно прост, но требует внимательности. Не забывайте всегда проверять на наличие ошибок и следить за тем, чтобы изменения не нарушали работоспособность других частей вашего сайта. Если вы будете осторожны и детально следовать шагам, ваше новое меню будет выглядеть так, как вы задумали.