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
Комментарии (14)
R7R
20.08.2019 09:44преобразовать в блоки
Блоки добавляют множество лишних действий (кликов мышью), по сравнению с классическим вариантом.
Причем управление ими размазано (слева, сверху, справа)
Большинство непрофессионалов умеют работать с обычным MS Word, примерно этого же они хотят от веб-редактора.
Если у классического редактора есть определенное сходство с редакторами, использующими панели инструментов, то Гутенберг выглядит как неудачный закос под ленты.
copyhold Автор
20.08.2019 12:31В моём мире авторы не пишут напрямую в вордпрес — они копипастят.
И с копипастом Гутен… справляется хорошо — сам разбивает на блоки, списки, заголовки и т.п.
И у него, кстати, тоже есть клавиатурные сочетанияR7R
20.08.2019 23:05они копипастят
Кто копипастит, а кто нет.
сам разбивает на блоки, списки, заголовки и т.п.
Он из каждого абзаца автоматически делает блок, а все заголовки второго и третьего уровня у него идут как параграфы. Включая подписи к рисункам (которые, вообще-то, не должны быть ни параграфами, ни заголовками).
Списки да, находит — даже там, где их нет (но есть тире перед абзацем).
После чего тире автоматически заменяется кружочком )
Причем интуитивность управления зашкаливает — не зарываясь глубоко, так не нашел где в режиме редактирования можно заставить гутенберга показывать одной строке блока более 59 символов с пробелами. На мониторе 27" (2560 X 1440).
Причем в итоге все по другому будет.
(Формально все правильно — но по существу издевательство )
mihdan
21.08.2019 18:01Gutenberg — новая веха в развитии WordPress, удобный, понятный как пользователям, так авторам и редакторам.
subversa
22.08.2019 21:00Что новая — это факт, т.к. уже является частью ядра, нравится это комьюнити или нет. В остальном вы, видимо, описали личный опыт пользования новым редактором, ведь отзывы (и их количество) на странице плагина в официальном репо говорят совсем об иной картине, равно как и более 5 миллионов установок «Classic Editor».
mihdan
22.08.2019 21:45Люди — ленивое быдло, которым не хочется чего-то нового, читать, они привыкли тыкать три кнопки, а тут всё не так.
Я реально описал свой опыт, ибо стараюсь заставлять своих пользователей идти в ногу со временем.
copyhold Автор
23.08.2019 09:20Статья, вообще то не совсем про Гутенберг. Гутенберг это объективная реальность, создатели вордпреса хотят чтобы он там был. С классическим редактором то, что описано в статье вообще нереально. И да — мне нравится гутенберг больше чем классический.
R7R
Как я мог заметить, все (буквально все) люди, не являющиеся веб-программистами, но поддерживающие свои сайты на Word Press, самым первым делом заменяют Гутенберга на классический редактор.
Плохо это или хорошо? — в данном случае это просто факт.
copyhold Автор
Старый сайт с множеством контента при обновлении на вордпрес 5 действительно проще поддерживать с классическим редактором. Обновляться придется все равно в конечном итоге — тем более что переключится занимает обычно 4 клика на каждый пост:
TheGodfather
Ага, ну да, особенно с картинками, галереями. Не работает так. Я один длинный пост только минут 15 «конвертировал».
copyhold Автор
Ну, никто не идеален. В конце концов это ж просто вордпрес.
TheGodfather
А веб-программисты не заменяют, получается?
subversa
Присоединяюсь к вашему негодованию. «Classic Editor» — более 5 миллионов установок. «Gutenberg» — более года с рейтингом в 2 звезды (1932 отзыв из 2841 с одной звездой). Многие веб-программисты ставят «Classic Editor» на автомате, равно как и выпиливая «Hello Dolly».