К написанию статьи меня мотивировал этот пост. Автор приводит забавный трюк позволяющий избавиться от обертки div.container. На первый взгляд это экономия на спичках, но Вордпрес-програмисты знают толк. Нам, Вордресграмистам и кобыла невеста.
В чём тут наши проблемы:
- С точки зрения SEO текст не следует разбивать на секции
- Дата должна подставляться автоматически
- Для редактора разметка страницы должна быть линейной
- Бежевый фон на всю ширину страницы
- Пятно может менять цвет ( а иногда и форму ) (( а иногда и двигаться )).
Для пункта №2 мы напишем нехитрый короткод который здесь приводить не будем. Гутенберг позволяет легко вставлять короткоды в текст.
Чтобы решить все остальное можно, конечно использовать ACF. Но подумайте сами —
- поле для первой строчки
- поле для параграфа после даты
- поле для описания пятна
Для простого автора это будет совсем не прозрачно, да и темплейт превращается в кучу IF-ов.
Итак
Вот как мы это всё решим:
- Ничего кроме Гутенберга
- Первый параграф — верхняя строчка
- Далее секция заголовок Н1
- потом короткод [post-date]
- параграф с текстом
- магия — Разделитель!
- ну и дальше обычный текст
Наш single.php выглядит примерно так:
<?php
the_post();
get_header();
?>
<article>
<?php the_content() ?>
</article>
<?php get_footer() ?>
the_content() выведет такое:
<p>как доказать что</p>
<h1>Ты настоящий программист</h1>
<time>2013-11-11</time>
<p class="has-medium-font-size">"lorem ipsum ".repeat(20)</p>
<hr class="wp-block-separator">
... остальной текст ...
Поископтимизаторы счастливы, автору всё понятно. А нам это всё оформлять.
Но это, в общем, не сложно:
article {
display:flex;
flex-direction: column;
align-items: center;
}
article {
width: 960px;
margin: auto;
}
hr {
margin: 80px 0 70px;
border: 0;
padding: 1px 0 0;
position: relative;
}
/* это бежевый фон */
hr::before {
width: calc(100vw - 10px); /* -10px потому что скролбар не помещается - иначе появляется горизонтальный скрол. Буду рад совету как победить. */
left: calc(480px - 50vw);
content: "";
position: absolute;
transform-origin: 0 100%;
transform: scaley(1000);
background: #f7f2eb;
z-index: -1;
height: 1px;
margin: 0;
border: none;
}
/* а это пятно */
hr::after {
width: 130px;
height: 120px;
content: "";
background: url(blot.svg) 0 0 no-repeat;
position: absolute;
left: calc(100% + 100px);
transform: translatey(-50%);
}
Всё остальное не стоит особого внимания, основная магия именно в разделителе HR и том, что в нём можно псевдоэлементы. Цвет и поведение пятна, соответственно, можно менять через классы этого же разделителя.
Если Вам понравилось это видео, жмите лайк и подписывайтесь на наш канал
Секундочку, это ж не Ютуб? Нет?
Ну тогда Happy Hacking
Специально для сайта ITWORLD.UZ. Новость взята с сайта Хабр