Куда добавлять пользовательский код в Divi (CSS, Javascript и PHP)

В этом удобном руководстве вы узнаете, куда именно добавлять пользовательский код, такой как CSS, JavaScript, jQuery и PHP, в вашу тему Divi. Полная версия статьи в блоге: https://bit.ly/DiviCode Вас интересует, куда вставлять эти замечательные фрагменты кода в Divi? Во многих моих уроках бесплатно предоставляются фрагменты CSS, JavaScript, jQuery или PHP. Мне приходилось неоднократно объяснять, куда вставлять каждый фрагмент, поэтому я подумал, что было бы неплохо иметь одну централизованную статью для справки. Это руководство поможет вам узнать, куда добавлять пользовательский код в Divi, а также покажет вам иерархию CSS. Иерархия CSS (специфичность) в Divi Прежде чем мы начнем, давайте быстро поговорим об иерархии CSS, иначе говоря, о специфичности. В основном, если вы накладываете CSS на какой-либо элемент, и где-то на веб-сайте есть два или более конфликтующих правила CSS, указывающих на один и тот же элемент, то CSS в определенных местах будет переопределять другие. Чем выше уровень специфичности, тем больше его возможностей. В противном случае браузер запутается и будет вынужден следовать определенным правилам, чтобы определить, какой из них наиболее специфичен и, следовательно, какой имеет приоритет. Уровень специфичности зависит от того, где размещен код в Divi. Показывать вам, куда добавлять пользовательский код в Divi, без объяснения причин было бы не очень полезно. Вот список уровней иерархии CSS в Divi, где 1 имеет наибольшую мощность, а 8 — наименьшую: 1. Встроенные стили 2. Вкладка «Расширенные настройки» 3. Модуль кода 4. Настройки страницы 5. Параметры темы 6. Дочерняя тема 7. Настройка темы 8. Родительская тема Divi Если у вас голова кружится от путаницы, не волнуйтесь. По мере продвижения и приобретения практического опыта все станет понятнее, и вы скоро четко поймете, что означает каждый из этих уровней и когда их использовать. #1. Встроенные стили Языки программирования: CSS, HTML Встроенные стили — это стили, которые пишутся непосредственно в HTML-структуре страницы или записи. Встроенные стили наиболее важны в коде. Однако, несмотря на их наибольшую эффективность, их следует использовать только для небольших, простых изменений. #2. Вкладка «Расширенные настройки» Языки программирования: CSS Другая форма встроенных стилей, хотя и не такая очевидная, как «встроенные», находится на вкладке «Расширенные настройки» любого раздела, строки, столбца или модуля. В каждой из них есть разные блоки, а в некоторых их довольно много, что очень полезно. #3. Модуль кода Языки программирования: CSS, HTML, JavaScript Еще один вариант добавления CSS и JavaScript — это модуль кода Divi, который идеально подходит для интеграции кода, такого как iframe, коды встраивания, шорткоды и многое другое. #4. Настройки страницы Пользовательский CSS Языки программирования: CSS Мое любимое место для добавления временного пользовательского кода — это область «Пользовательский CSS» на вкладке «Расширенные настройки» страницы. Это создаёт «живое отображение» кода во время работы и редактирования. Просто помните, что это временно, и после завершения работы вам следует скопировать и вставить этот код в таблицу стилей дочерней темы или в поле пользовательского CSS в параметрах темы. #5. Параметры темы Языки кода: CSS, JavaScript Следующее место для добавления пользовательского кода, который влияет на весь сайт сразу, — это параметры темы Divi. Здесь есть несколько мест для добавления кода в разных разделах. Пользовательский CSS Вы, вероятно, уже заметили, что почти в каждом моём руководстве я упоминал добавление фрагментов кода в поле пользовательского CSS в параметрах темы Divi. Я говорю это потому, что это самое простое и практичное место для добавления пользовательского CSS, особенно для начинающих, у которых может не быть дочерней темы Divi. JavaScript (и jQuery) В параметрах темы также есть удобное место для других типов кода — это вкладка «Интеграции». Здесь вы можете добавить код, который влияет на заголовок или тело сайта, аналогично дочерней или родительской теме. Первый блок идеально подходит для добавления всех фрагментов кода JavaScript и jQuery, которые мы предоставляем. #6. Дочерняя тема Языки программирования: CSS, JavaScript, PHP Если у вас установлена ​​и активна дочерняя тема, я рекомендую разместить код именно там. Это лучшее место для добавления любого пользовательского кода в Divi. Пользовательский CSS Я рекомендую переместить весь ваш пользовательский CSS в файл style.css дочерней темы Divi, когда ваш сайт будет готов и вы сможете запустить его. Пользовательский PHP Любые пользовательские фрагменты кода PHP следует размещать в файле functions.php дочерней темы Divi. В некоторых наших руководствах есть фрагменты кода PHP, и именно сюда их следует поместить. #7. Настройки темы Языки программирования: CSS Вы также можете добавить пользовательский CSS в Настройки темы. Вы можете получить к ним доступ либо через раздел «Внешний вид» в административной панели, либо наведя курсор на назв...