May 16, 2025

Про непонятные места в коде

По большей части, вам нужно понять 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, на него навешиваем свои стили. И так далее, можно провернуть для всех остальных элементов формы