Про непонятные места в коде
По большей части, вам нужно понять 4 момента, чтобы самому править вёрстку.
Начнём с переменных. Всё, что начинается с $ - это переменная. По сути, это просто хранилище информации. В ней может быть число, текст или список чего-либо. Для всех важных переменных я добавил описание того, что в них лежит.
То есть, переменная $serialYear - это просто число 2025, а $vkLink - https://vk.com/kratseria и т.д.
Ещё мы можем встретить конструкцию вида <?= ?>, внутри которой лежит переменная. Грубо говоря, это указание для php: "Выведи всё, что внутри этой конструкции". То есть, если мы поместим переменную внутрь этой конструкции, то php просто сделает так, чтобы браузер увидел эту переменную.
Возвращаясь к скриншоту выше. Код
<a href="<?= $vkLink ?>" target="_blank"> <img src="<?= $vkLogoImgSrc ?>" alt="Логотип Вконтакте"> </a>
сделает так, чтобы наши переменные $vkLink и $vkLogoImgSrc увидел браузер. А мы уже помним, что мы в эти переменные положили
Таким образом, браузер в итоге увидит такой код
<a href="https://vk.com/kratserial" target="_blank"> <img src="./img/svg/vk.svg" alt="Вконтакте"/> </a>
в котором переменные будут заменены на реальные данные - ссылку на группу ВК и адрес картинки
Дальше немного посложнее - конструкция foreach
Если в переменной список, то удобнее всего пройтись по этому списку с помощью конструкции foreach. Внутри этой конструкции мы можем взаимодействовать с каждым элементом списка
<?php foreach(...) ?> Сюда попадёт каждый элемент из списка <?php endforeach ?>
То есть, если у нас есть список покупок:
и если мы обработаем этот список через foreach, то мы по очереди получим сначала хлеб, потом молоко, потом яблоки.
Получается, что мы сможем брать по очереди каждый элемент списка и что-то с ним делать. Как это применимо в вёрстке? Мы может значительно сократить код. Если раньше нужно было расписывать каждый элемент:
<section class="kadri-section"> <div class="kadri-item" style="background-image: url(1.jpg)"></div> <div class="kadri-item" style="background-image: url(2.jpg)"></div> <div class="kadri-item" style="background-image: url(3.jpg)"></div> ... <div class="kadri-item" style="background-image: url(n.jpg)"></div> </section>
то теперь достаточно просто 1 раз получить переменную и выводить её в цикле:
<section class="kadri-section">
<?php foreach($КАРТИНКИ as $КАРТИНКА): ?>
<div class="kadri-item" style="background-image: url($КАРТИНКА)"></div>
<?php endforeach ?>
</section>Так в несколько строчек кода с использованием цикла, можно заменить куда более объёмный вывод значений вручную.
Также в цикле foreach мы можем получить порядковый номер того элемента, с которым мы сейчас работаем. Но с номерами есть нюанс - они начинаются не с 1, а с нуля. Но это уже детали, можете просто пока пропустить этот момент.
Все циклы я постарался ёмко описать, чтобы было сразу понятно, что мы делаем.
И последнее - условие. Конструкция типа if (...) означает указание для php - если какое-то условие правдиво, то делай что-то. Пример из жизни: если в холодильнике есть яйца, то сделай яишницу.
Что мы можем с ним сделать? У нас от сериала к сериалу могут быть разные данные. В том числе, для каких-то сериалов мы добавили кадры, а для каких-то - нет. Или где-то смогли подобрать похожие, а где-то пока не нашли подходящие.
В таком случае, зачем нам, например, выводить заголовок секции, например, "Кадры из сериала", если никаких кадров-то и нет.
Вот здесь очень удобно использовать наш if. Всё, что внутри этой конструкции, будет выполняться только в том случае, если наше условие соответствует истине.
// Проверяем, существует ли переменная $АДРЕС_КАРТИНКИ <?php if($АДРЕС_КАРТИНКИ): ?> // Если действительно существует, то показываем картинку <img src="$АДРЕС_КАРТИНКИ" /> <?php endif ?>
Можете не заморачиваться тем, как проверяется условие в скобках (скриншот), удобнее будет просто прочитать моё пояснение выше, чтобы стало понятней. Если вкратце - если в списке похожих сериалов действительно есть какие-то сериалы - показываем секцию. А если список пуст - то и вся вёрстка внутри конструкции
<?php if(...) ?> какая-то вёрстка <?php endif ?>
Есть ещё несколько мест, по которым можно кратко пройтись
Вордпресс не использует такие адреса, как в вёрстке (типа ./img/1.jpg или css/style.css). Вордпрессу нужно, чтобы все адреса начинались с адреса сайта, то есть типа такого https://kratserial.ru/wp-content/themes/kratserial0525/assets/css/style_renew.css. Вот этот дополнительный путь (https://kratserial.ru/wp-content/themes/kratserial0525/assets/) скрыт в за надписью KRATSERIAL0525_ASSETS (по сути, что-то вроде переменной).
Можете особо не вникать, просто добавляйте <?= KRATSERIAL0525_ASSETS > при необходимости подключения файлов
Форма поиска подключена с использованием плагина, то есть вся вёрстка уже сделана и повлиять на внешний вид мы можем только через css. Для этого нужно найти в браузере, как эта форма выводится через html-тэги и добавить к этим тэгам свои стили через css.
Нашли форму, у неё есть класс is-search-form, на него навешиваем свои стили. И так далее, можно провернуть для всех остальных элементов формы