Skinner

https://github.com/fast-average-color/fast-average...

thymeleaf ни причем.
1) используйте какую-нибудь библиотеку для аякс пагинации (будь-то infinite scroll или load more и др.).
Например, https://infinite-scroll.com/
https://www.sitepoint.com/jquery-infinite-scrollin...
https://github.com/brianmario/jquery-infinite-scroll
2) далее реализуйте RestController, который выдает контент в json. Задействуйте Pageable для реализации пагинации
3) По достижению области видимости контента отправляйте аякс запрос и инкрементируйте pageable чтобы получить следующую страницу.

Никак. Thymeleaf - это бэкенд, а infinite scroll делается на фронте. Копать в JavaScript'е и AJAX'е.

Здравствуйте!

но столкнулся с тем, что оно мне лупит все 500 записей

Вы либо реализуйте пагинацию и соответственно, кол-во выводимых записей укажите там
https://www.baeldung.com/spring-data-jpa-paginatio...
Либо заранее получите в контроллере нужное количество List<News>.
Имеется ввиде, что на уровне репозитория можете сделать limit - https://www.baeldung.com/jpa-limit-query-results

Более того создает каждый блок снова и снова, вместо того, чтобы заполнить выведенные ему места. кидаю код

Это потому, что вы одну и ту же новость выводите каждый раз в блоках.
Вот, ваш цикл:
th:each="news : ${newses}"
И каждый раз вы выводите одну и ту же новость в одной итерации
th:href="${news.getLink()}"
А чтобы вывести подобный блок с учетом дизайна можно сделать следующее...
Для каждой n-й записи применяем CSS стиль или добавляем нужный html, чтобы вывести ее слева с картинкой.
Чтобы получить индекс записи используйте итератор
th:each="news, iter : ${newses}"

В данном конкретном случае код вывода корзины, у вас выглядит примерно так:

<ul class="site-header-cart menu">
			<li class="<?php echo esc_attr( $class ); ?>">
				<!-- код вывода подробностей о текущем состоянии корзины -->
			</li>
			<li>
                                 <!-- выпадающий блок корзины-->
				<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
			</li>
		</ul>

Надо заменить на такое

<ul class="site-header-cart menu">
			<li class="<?php echo esc_attr( $class ); ?>">
				<?php a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>"><!-- код вывода подробностей о текущем состоянии корзины --></a>
			</li>
		</ul>

Ну и возможно отключить js которое показывает выпадающую корзину по наведению

админка -> woocommerce -> товары -> отображение -> Добавить в поведение корзины
Ставим галку Перенаправить в корзину после успешного добавления

Попробывать:

@media only screen and (orientation: portrait) {
  background: XXXX;
}
@media only screen and (orientation: landscape) {
  background: XXXX;
}

Вот часть кода которая выводит эту информацию joxi.ru/vAWRwgySnDOd2W
Найдите в шаблоне тест <!-- Post Meta --> Начните с файла single.php

А еще лучше, научитесь пользоваться IDE Netbeans. Загрузите тему, и воспользуйтесь поиском по проекту
joxi.ru/VrwW01MfQzoxrX - Правой клавишей - Поиск
Пишите нужное слово/функцию/класс... и оно покажет вам все вхождения в выбранном каталоге joxi.ru/Vm65Wpdi9kKDrZ
Для начинающих, мое личное мнение, нужно работать только в IDE, на то много причин но самые важные:
- автокомплит, очень помагает.
- анализ кода, если очепятка или ошибка в коде, вам идешка сразу покажет
- ну и поиск по проекту

Оформите, пожалуйста, свой код по-человечески. Там только объявление двух функций и ни одного их вызова. Но вообще примерно такая строка Вам поможет.

file_put_contents('/path/to/my.json', json_encode($data));

file_put_contents