Самая популярная CMS в мире - это самая большая головная боль.

Это должен делать каждый разработчик. Мы все должны создать один сайт с wordpress, потому что это то, чего хочет клиент, и, честно говоря, это может быть полезно для портфолио, потому что разработчик, который может превзойти разумный веб-сайт из бесконечно рекурсивного птичьего гнезда, которое является 18-летним блоггером cms, вероятно, сможет найти свои ноги в любой ситуации, и это следует из моих многочисленных сизифов опытов попыток квадратного круга и создания адаптивного, современного веб-сайта из веток и кусочков проволоки.

Если вы не строите весь сайт на его основе, вы разбиваете свою страницу на компоненты, и некоторые из них будут основаны на JavaScript. Js теперь модульный, управляемый пакетами, асинхронный, сотовый, модульный, интерактивно-модульный.

Тем не менее, Wordpress при этом откладывал. Вы не интегрируете javascript в Wordpress, вы как бы ... приклеиваете его на бок и надеетесь, что он не соскользнет.

Javascript? Разве это не то, что они используют для окон предупреждений?

Если вы посмотрите на наклонную и монументальную индустрию плагинов, которая цепляется за нижнюю часть wordpress, как своего рода открытый исходный код, но не совсем remra fish, слово javascript взаимозаменяемо с jQuery. Я имею в виду, зачем тебе что-нибудь еще, верно?

jQuery, который все еще прекрасно сидит на таком древнем программном обеспечении, кажется странно подходящим, но с прагматической точки зрения это плохо.

Он жирный, медленный и все прочее плохое, что вы слышали о jQuery. Убери это от меня.

Итак, приступим к использованию современных пакетов. Давайте добавим несколько хороших библиотек. Как эээ ... Как вы это делаете? Это просто! Wordpress использует систему хуков. Для этого процесса я интегрирую восхитительно легкую и удобную для мобильных устройств карусельную систему под названием flickety, которую я не хочу принижать, ставя ее рядом с wordpress. Это хороший фрагмент кода, и мне он нравится.

В порядке. Итак, мы должны зарегистрировать сценарий, затем поставить его в очередь в стек загрузки, и все это будет помещено в большой беспорядочный файл для всего на сайте под названием functions.php, который неизбежно превратится в огромного многострочного голиафа. полный клейкой ленты и патч-кода. Горе всем, кому нужно работать с functions.php старого сайта.

function flickity_load(){
wp_register_script('flickity', get_template_directory_uri() . '/src/flickity/flickity.min.js', [], false, true);  wp_register_style('flickity_styling', get_template_directory_uri() . '/src/flickity/flickity.css')
}

Итак, зарегистрировано, что дальше. Хорошо, теперь я ставлю его в очередь.

function flickity_load(){
  wp_register_script('flickity', get_template_directory_uri() . '/src/flickity/flickity.min.js', [], false, true);
  wp_register_style('flickity_styling', get_template_directory_uri() . '/src/flickity/flickity.css');
  wp_enqueue_script('flickity');
  wp_enqueue_style('flickity_styling')
}

Это определенно код. С красивыми пустыми параметрами и прочей хренью. Но все равно ничего делать не буду. Это не крючки, как ... крючки для крючков. Мы доберемся туда.

Примечание. Последнее верно для размещения тега скрипта в нижнем колонтитуле. По умолчанию - false. Почему?

Хорошо, теперь мне нужно создать экземпляр библиотеки. Я собираюсь создать экземпляр библиотеки из нескольких компонентов, но, короче говоря, мне понадобится что-то вроде этого:

<script type="text/javascript">
const carousel = new Flickity('my-carousel', {...options...})
</script>

Просто красивый простой экземпляр, мы даем ему класс элемента для запроса и объект параметров. Но я хочу иметь возможность определять, на какой элемент он накладывается, я хочу установить, что он вызывает переменную, если у меня более одной карусели на одной странице, и я хочу иметь возможность устанавливать параметры. Это означает передачу переменных из уровня темы на стороне сервера в JS-движок на стороне браузера. Это означает встроенный JS, что означает…

Встроенный JS Hell Level 2

Каждый раз, когда я загружаю компонент, которому требуется Flickity. Думаю, я добавлю код для его запуска. Что означает действия. Действия - это то, как крючки попадают ... на крючок? Итак, я создаю компонент шаблона, и первая его строка

do_action("component_has_carousel");

А теперь мы добавляем ловушку в файл функций.

function component_has_carousel($args) {
  flickity_load();
}
add_action('component_has_carousel', 'component_has_carousel');

В порядке. Поэтому я загружаю библиотеку всякий раз, когда присутствует компонент. Это правильно?

Правильно?!

Нет. Теперь мне нужно передать параметры этому постоянно растущему фрагменту кода, разбросанному по файловой базе. Я могу передать переменную аргумента с помощью do_action();, поэтому, думаю, мне нужно поместить все это в массив и надеяться на лучшее.

do_action("component_has_carousel", 
  array(
    'element' => 'my-carousel',
    'name' => 'myCarousel',
    'options' => '
      wrapAround: true,
      setGallerySize: false,
      pageDots: false,'
    )
);

Фу. Хорошо, теперь мы должны взять эти аргументы и поместить их в javascript. Подождать встроенный javascript? Как мы это делаем? О, ты не можешь. Во-первых, мы регистрируем новый фрагмент javascript, потому что встроенный javascript ДОЛЖЕН быть прикреплен к зарегистрированному фрагменту javascript. Итак, мы возвращаемся к нашему старому другу functions.php, чтобы поставить в очередь фиктивный скрипт, чтобы мы могли прикрепить к нему встроенный код.

function component_has_carousel($args) {
  flickity_load();
  wp_register_script($args['name'],'',);
  wp_enqueue_script($args['name'], '',[], false, true);
}

И теперь больше нечего откладывать. Мы должны совершить богохульство над кодом. Мы должны написать js, вставленный в php. Это ужасно. Это нечитабельно. Это чертовски взломано.

Это Wordpress

function component_has_carousel($args) {
  flickity_load();
  wp_register_script($args['name'],'',);
  wp_enqueue_script($args['name'], '',[], false, true);
  wp_add_inline_script($args['name'], 
    'const '. $args['name'] .' = new Flickity(".' . $args['element'] 
    . '", {'.   $args['options'] .'});'
  );
}

И тем из вас, кто все еще читает. Что мы можем показать своими усилиями?

<script type="text/javascript" src="/wp-content/themes/theme/src/flickity/flickity.min.js?ver=5.8" id="flickity-js"></script>
<script type="text/javascript" id="my-carousel">
  const myCarousel = new Flickity( ".my-carousel", {
    wrapAround: true,
    setGallerySize: false,
    pageDots: false,
    }
  );
</script>

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