Леонид Шишкин

https://medium.com/bucharestjs/upgrading-a-create-...

вот статья на тему, где все обьяснено.

class App extends React.Component {
  state = {
    items: Array.from({ length: 10 }, (n, i) => ({
      id: i + 1,
      value: String.fromCharCode(97 + i).repeat(5),
    })),
    active: [],
  }

  toggleActive = e => {
    const id = +e.target.dataset.id;

    this.setState(({ active }) => ({
      active: active.includes(id)
        ? active.filter(n => n !== id)
        : [ ...active, id ],
    }));
  }

  render() {
    const { items, active } = this.state;

    return (
      <ul>
        {items.map(n => (
          <li
            key={n.id}
            data-id={n.id}
            onClick={this.toggleActive}
            className={active.includes(n.id) ? 'active' : ''}
          >
            {n.value}
          </li>
        ))}
      </ul>
    );
  }
}

Вам приходит response opaque (т.е. по сути reject).
А данные у Вас не получится обработать .json() потому, что они xml.
Цитата с хабра

Что касается «opaque» — то он приходит в случаях, когда выполняется CORS запрос, но удаленный ресурс не возвращает CORS заголовки. Данный тип запроса не предоставляет доступ данным или заголовку статуса, поэтому мы не имеем возможности судить о результате выполнения запроса. В рамках текущей имплементации fetch() не представляется возможности выполнять CORS запросы из скоупа window, и вот здесь написано почему. Эта функциональность должна быть добавлена, как только Cache API станет доступным из объекта window.

Источник
Как вариант, если очень нужно получать эти данные с клиента, можно использовать ServiceWorkers.

Вы не правильный хук используете в add_action.

Вот правильный:

add_action( 'wp_enqueue_scripts', 'register_styles' );

Учитывать обновление. Не хотите, чтобы все поломалось после обновления - все правки вносите в дочернюю тему. Гуглите wordpress child theme

Решение тут css.yoksel.ru/flexbox

Я сделал и у меня решилась подобная проблема.
Для этого я в css создал класс row-flex

.row-flex {
    display: flex;
    flex-flow: row wrap;
}

и в html применил класс row-flex

<div class="container-fluid">
    <div class="row row-flex">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            ... содержимое блока ...
        </div>
    </div>
</div>

всё работает!

Смотрите. Есть такая простая иерархия классов:

class A
{
    public static $text = 'class A';

    public function selfTest()
    {
        echo self::$text;
    }

    public function staticTest()
    {
        echo static::$text;
    }
}

class B extends A
{
    public static $text = 'class B';
}

Мы создаем экземпляк субкласа и вызываем методы, определенные в предке.

$obj = new B();
$obj->selfTest(); // выведет "class A"
$obj->staticTest(); // выведет "class B"

self всегда указывает на тот класс, в котором он написал. Здесь метод описан в классе A, и self указывает на класс A, хоть и вызывается из класса B.
Значение static вычисляется при вызове. И static указывает на класс объекта в котором произошел вызов. В нашем случае он указывает на B, хотя сам код описан в классе A.

Зачем это надо? Для того, что бы можно было переопределять статичные члены вашего класса в наследниках и вы могли обращаться к новым значениям из методов, описанных в предке.

С обычными не статичными членами это и так работает, потому что они собираются, когда вы создаете объект класса. Что бы это работало для статичных методов, надо использовать static