Как организовать код для WordPress?

Question

[starostyants]

Занимаюсь разработкой сайтов на WordPress, проекты средней сложности. Сводит с ума сумбурность кода. Что JS (один файл main.js с обработчиками событий, вызовом модалок, инициализацией слайдеров, запросов к wp-ajax и т.д.), что CSS (файл стилей темы с организацией "как придется"). Как всё это можно организовать, чтобы было не так стыдно (хотя бы перед собой)? За ответы большое спасибо и плюсик в карму :-)

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Я например, если это необходимо, общие стили и скрипты добавляю в main.js & style.css соответственно. А все остальное (например, карусель или слайдер, который выводится на определенном типе страниц... например, в записях) использую условные теги для их подключения.
https://codex.wordpress.org/Conditional_Tags

Comments

[starostyants]

Вы используется инлайновый JS, генерируемый на стороне сервера? Это не очень хорошая практика. Такой код довольно сложно отлаживать. В итоге, получается страница с разрозненными скриптами. Мне же, наоборот, нужна систематизация и приведение в порядок того, что имеется.

[Орхан Гасанлы]

starostyants, нет, не инлайновый js...
я подключаю отдельные файлы css & js через functions на нужных страницах используя условные теги.
Пример кода:

function register_styles_scripts() {
	//стили
	wp_register_style('style', get_template_directory_uri() .
		'/style.css');
	wp_enqueue_style('style');
	
	//скрипты
	wp_register_script('mainJS', get_template_directory_uri() .
		'/js/main.js');
	wp_enqueue_script('mainJS');

        if(is_page(12)) {
              wp_register_script('pageJS', get_template_directory_uri() .
		'/js/page.js');
	     wp_enqueue_script('pageJS');
        }
}
add_action('wp_enqueue_scripts', 'register_styles_scripts');

и т.д.

Answer 2

[Вова Дружаев]

Ставишь терминал, node.js, npm, webpack - на своем сайте я писал про подключение этого хозяйства, когда я делал плагин к гутенбергу.

Каждый компонент - отдельный js и css
Потом все пакуешь в отдельный бандл (например просто по сохранению файла). На выходе получается 1 js и 1 css файл. Причем уже минимизированные и сжатые. Т.к. все висит на сохранении файла - результат видно сразу в браузере. Ничего дополнительно делать не надо - автоматом пакуется.

Можно css через автопрефиксер натравить - тогда будут добавляться вендорные префиксы -moz- -webkit- - как настроишь по правилам. Например поддержка только 2х последних версий.

Но лучше конфиг собирать по логике - core.js, non-logged.js, logged.js, single-page.js - т.е. не сразу паковать всё в один, а соблюдая логику - в кор - то что нужно всем и везде. Ну и т.д.

По поводу css - посмотри BEM - очень здорово помогает на сложном проекте не повторяться.
js - тоже надо дублирующие сущности в отдельные функции вынести.

Еще - важно осознавать где и когда файл нужен. Например css, не критичный для первого экрана - нет смысла грузить в шапке - его смело грузи в подвале.
По возможности отказаться от инлайн стилей и скриптов. В скрипты можно с помощью php получать динамические данные, настройки и выводить в js объект инлайном. А из объекта уже в js файле брать то что надо.

Потому как статика - она кешируется, а то что у вас простынёй в html - нет. И каждый раз передается по сети.