task 17075 | сделал блоки для блога

This commit is contained in:
web_103.2 committed 2026-10-16 12:34:53 +03:00
1 parent 73a51cf6f4
commit 6edf5d69bd
10 files changed
+888 -20

No files matched your search

+593 -15
View File
@@ -4138,6 +4138,9 @@ h4 {
.article-main {
min-width: 0;
}
.article-main .article-content:not(:first-child){
margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px);
}
.article-sidebar {
position: sticky;
top: 112px;
@@ -5947,14 +5950,14 @@ h4 {
/* новые */
.h-article-hero {
--h-hero-accent: #d52d49;
--h-hero-text: #202b35;
--h-hero-muted: #68747f;
--h-hero-line: #e7eaf0;
--h-hero-bg: #f7f8fa;
--h-hero-radius: 26px;
.h-article-hero {
--h-hero-accent: var(--color-red);
--h-hero-text: var(--color-dark);
--h-hero-muted: var(--color-grey-dark);
--h-hero-line: var(--color-grey);
--h-hero-bg: var(--color-light);
--h-hero-radius: 26px;
box-sizing: border-box;
width: 100%;
min-width: 1100px;
@@ -5981,7 +5984,7 @@ h4 {
min-height: 600px;
overflow: hidden;
border-radius: var(--h-hero-radius);
background: #e4e8ec;
background: var(--color-grey);
}
.h-article-hero__image {
@@ -6003,7 +6006,7 @@ h4 {
.h-article-hero__breadcrumb-divider {
flex: none;
color: #a9b0b8;
color: var(--color-grey-light);
}
.h-article-hero__breadcrumb-current {
@@ -6024,9 +6027,9 @@ h4 {
align-items: center;
min-height: 29px;
padding: 5px 12px;
border: 1px solid rgba(213, 45, 73, .17);
border: 1px solid color-mix(in srgb, var(--color-red) 17%, transparent);
border-radius: 100px;
background: #fff0f3;
background: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
color: var(--h-hero-accent);
font-size: 12px;
font-weight: 600;
@@ -6045,7 +6048,11 @@ h4 {
}
.h-article-hero__title > span {
background: linear-gradient(98deg, #f05d6b 0%, #bc203f 100%);
background: linear-gradient(
98deg,
var(--color-red) 0%,
var(--color-red-dark) 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -6054,7 +6061,7 @@ h4 {
.h-article-hero__description {
max-width: 710px;
margin: 24px 0 34px;
color: #535f6c;
color: var(--color-text);
font-size: 17px;
font-weight: 400;
line-height: 1.6;
@@ -6068,7 +6075,7 @@ h4 {
margin-top: auto;
padding-top: 25px;
border-top: 1px solid var(--h-hero-line);
color: #4e5a65;
color: var(--color-text);
}
.h-article-hero__meta-item {
@@ -6088,7 +6095,7 @@ h4 {
}
.h-article-hero__meta-item + .h-article-hero__meta-item {
border-left: 1px solid #d7dce3;
border-left: 1px solid var(--color-grey);
}
.h-article-hero__meta-item svg {
@@ -6103,3 +6110,574 @@ h4 {
color: var(--h-hero-text);
font-weight: 600;
}
.h-attention {
--attention-color: var(--color-red);
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
display: flex;
align-items: center;
gap: 20px;
width: 100%;
box-sizing: border-box;
margin: 28px 0;
padding: 24px 28px;
border-radius: 16px;
background: var(--attention-bg);
}
.h-attention--warning {
--attention-color: var(--color-red);
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
}
.h-attention--info {
--attention-color: #a8740b;
--attention-bg: #fff8e8;
--attention-icon-bg: #f9ebc8;
}
.h-attention--success {
--attention-color: #277547;
--attention-bg: #eff8f2;
--attention-icon-bg: #dceee2;
}
.h-attention__icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--attention-icon-bg);
color: var(--attention-color);
}
.h-attention__icon span {
font-family: Arial, sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1;
}
.h-attention__content {
flex: 1;
min-width: 0;
font-size: 16px;
line-height: 1.65;
color: var(--color-text);
}
.h-attention__content p {
margin: 0;
padding: 0;
}
.h-attention__content p + p {
margin-top: 10px;
}
.h-attention__content a {
color: var(--attention-color);
text-decoration: underline;
}
.h-attention__content > :last-child {
margin-bottom: 0;
}
@media (max-width: 767.98px) {
.h-attention{
padding: 12px 14px;
flex-direction: column;
gap: 12px;
}
}
.h-article-quote {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
box-sizing: border-box;
margin: 30px 0;
padding: 28px 16px;
border-radius: 14px;
background: var(--color-dark);
color: var(--color-light);
font-family: inherit;
}
.h-article-quote .h-article-quote__avatar {
display: block;
flex: 0 0 90px;
width: 90px;
height: 90px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.h-article-quote .h-article-quote__body {
flex: 1;
min-width: 0;
}
.h-article-quote .h-article-quote__author {
margin: 0 0 6px;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--color-light);
}
.h-article-quote .h-article-quote__text {
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 20px;
font-weight: 400;
font-style: normal;
line-height: 1.3;
color: var(--color-light);
}
@media (max-width: 767.98px) {
.h-article-quote{
padding: 12px 14px;
flex-direction: column;
align-items: start;
}
.h-article-quote .h-article-quote__text{
font-size: 14px;
}
}
.h-article-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
width: 100%;
margin: 30px 0;
box-sizing: border-box;
}
.h-article-cards .h-article-cards__item {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 110px;
padding: 20px 22px;
box-sizing: border-box;
border: 1px solid var(--color-grey);
border-radius: 10px;
background: var(--color-light);
box-shadow: 0 2px 12px color-mix(in srgb, var(--color-dark) 8%, transparent);
}
.h-article-cards .h-article-cards__item p {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 20px;
font-weight: 400;
line-height: 1.6;
color: var(--color-dark);
}
.h-article-cards .h-article-cards__item p + p {
margin-top: 12px;
}
@media (max-width: 767.98px) {
.h-article-cards{
grid-template-columns: 1fr;
}
.h-article-cards .h-article-cards__item p {
font-size: 16px;
}
}
.h-article-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
width: 100%;
box-sizing: border-box;
padding: 30px 40px;
margin: 30px 0;
background: var(--color-dark);
border-radius: 22px;
color: var(--color-light);
font-family: inherit;
}
.h-article-cta .h-article-cta__content {
flex: 1;
min-width: 0;
}
.h-article-cta .h-article-cta__title {
margin: 0 0 12px;
padding: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.25;
color: var(--color-light);
}
.h-article-cta .h-article-cta__description {
margin: 0;
padding: 0;
max-width: 520px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--color-grey);
}
.h-article-cta .h-article-cta__actions {
display: flex;
flex-direction: column;
flex: 0 0 245px;
gap: 12px;
}
.h-article-cta .h-article-cta__btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
box-sizing: border-box;
padding: 12px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-align: center;
text-decoration: none;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.h-article-cta .h-article-cta__btn--outline {
background: transparent;
border: 1px solid var(--color-grey-light);
color: var(--color-light);
}
.h-article-cta .h-article-cta__btn--outline:hover {
background: var(--color-light);
border-color: var(--color-light);
color: var(--color-dark);
}
.h-article-cta .h-article-cta__btn--white {
background: var(--color-light);
border: 1px solid var(--color-light);
color: var(--color-dark);
}
.h-article-cta .h-article-cta__btn--white:hover {
background: var(--color-grey);
border-color: var(--color-grey);
color: var(--color-dark);
}
@media (max-width: 767.98px) {
.h-article-app-cta,
.h-article-cta{
flex-direction: column;
}
.h-article-cta .h-article-cta__content{
width: 100%;
}
.h-article-cta .h-article-cta__actions{
width: 100%;
flex: auto;
}
}
.h-article-app-cta {
display: flex;
align-items: center;
gap: 24px;
width: 100%;
min-height: 120px;
box-sizing: border-box;
margin: 30px 0;
padding: 18px 32px;
border-radius: 16px;
background: var(--color-red);
font-family: inherit;
}
.h-article-app-cta .h-article-app-cta__image {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 100px;
width: 100px;
height: 100px;
}
.h-article-app-cta .h-article-app-cta__image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.h-article-app-cta .h-article-app-cta__content {
flex: 1;
min-width: 0;
}
.h-article-app-cta .h-article-app-cta__title {
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 700;
line-height: 1.4;
color: var(--color-light);
}
.h-article-app-cta .h-article-app-cta__button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 145px;
min-height: 40px;
box-sizing: border-box;
padding: 10px 20px;
border: 0;
border-radius: 50px;
background: var(--color-light);
color: var(--color-dark);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-align: center;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.h-article-app-cta .h-article-app-cta__button:hover {
background: var(--color-grey);
}
@media (max-width: 767.98px) {
.h-article-app-cta .h-article-app-cta__title{
font-size: 16px;
}
.h-article-app-cta .h-article-app-cta__button{
width: 100%;
flex:auto;
}
}
.h-article-author {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 5px;
width: 100%;
box-sizing: border-box;
margin: 30px 0;
padding: 20px 24px;
border: 1px solid var(--color-grey);
border-radius: 14px;
background: var(--color-light);
font-family: inherit;
}
.h-article-author__text {
font-size: 15px;
line-height: 1.5;
color: var(--color-grey-dark);
}
.h-article-author__link {
font-size: 15px;
font-weight: 600;
line-height: 1.5;
color: var(--color-red);
text-decoration: none;
transition: color .2s ease;
}
.h-article-author__link:hover {
color: var(--color-red-dark);
text-decoration: underline;
}
.h-app-steps {
width: 100%;
box-sizing: border-box;
margin: 40px 0;
padding: 40px 30px;
background: var(--color-light);
border-radius: 18px;
font-family: inherit;
color: var(--color-dark);
}
.h-app-steps *,
.h-app-steps *::before,
.h-app-steps *::after {
box-sizing: border-box;
}
.h-app-steps .h-app-steps__title {
margin: 0 0 40px;
padding: 0;
text-align: center;
font-size: 32px;
font-weight: 700;
line-height: 1.3;
color: var(--color-dark);
}
.h-app-steps .h-app-steps__layout {
display: grid;
grid-template-columns: minmax(210px, 35%) minmax(0, 1fr);
gap: 30px;
align-items: center;
width: 100%;
}
.h-app-steps .h-app-steps__phone {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
height: 100%;
}
.h-app-steps .h-app-steps__phone img {
display: block;
width: 100%;
max-width: 350px;
height: auto;
max-height: 420px;
object-fit: contain;
object-position: center;
border: none;
border-radius: 0;
box-shadow: none;
}
.h-app-steps .h-app-steps__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 28px;
row-gap: 40px;
width: 100%;
min-width: 0;
align-items: start;
}
.h-app-steps .h-app-steps__step {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
height: 100%;
}
.h-app-steps .h-app-steps__number {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
margin: 0 0 16px;
padding: 0;
background: var(--color-grey-light);
border-radius: 12px;
color: var(--color-light);
font-size: 20px;
font-weight: 700;
line-height: 1;
text-align: center;
}
.h-app-steps .h-app-steps__step:first-child .h-app-steps__number {
background: var(--color-red);
}
.h-app-steps .h-app-steps__step-title {
margin: 0 0 8px;
padding: 0;
font-size: 18px;
font-weight: 600;
line-height: 1.35;
color: var(--color-dark);
text-align: left;
}
.h-app-steps .h-app-steps__description {
margin: 0;
padding: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.55;
color: var(--color-text);
text-align: left;
}
.h-app-steps .h-app-steps__download {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
margin-top: 20px;
}
.h-app-steps .h-app-steps__qr {
display: block;
flex: 0 0 82px;
width: 82px;
height: 82px;
max-width: none;
object-fit: contain;
border-radius: 0;
box-shadow: none;
}
@media (max-width: 1279.98px) {
.h-app-steps .h-app-steps__layout{
display: flex;
flex-direction: column;
gap: 20px;
}
.h-app-steps .h-app-steps__phone{
display: none;
}
}
@media (max-width: 767.98px) {
.h-app-steps .h-app-steps__title{
font-size: 24px;
}
.h-app-steps .h-app-steps__grid{
grid-template-columns: 1fr;
}
}
+50 -5
View File
@@ -14,11 +14,21 @@
$parent_id = is_singular('news') ? 82 : 42;
$terms = get_the_terms(get_the_ID(), 'article_category');
$article_content = get_field('article_content');
if ($article_content) :
$generated = generate_toc($article_content);
$article_blocks = get_field('new_blocks') ?: [];
$article_content = get_field('article_content') ?: '';
$generated = generate_toc($article_content, 'article-content');
$content = $generated['content'];
$toc_items = $generated['toc_items'];
foreach ($article_blocks as $block_index => &$block) {
if (($block['acf_fc_layout'] ?? '') !== 'text') {
continue;
}
$generated = generate_toc($block['content'] ?? '', 'article-block-' . ($block_index + 1));
$block['content'] = $generated['content'];
$toc_items = array_merge($toc_items, $generated['toc_items']);
}
unset($block);
if ($article_content || $article_blocks) :
?>
<section class="article">
<div class="container">
@@ -81,10 +91,44 @@
<div class="article-body<?php if (!$toc_items) echo ' no-toc'; ?>">
<div class="article-main">
<?php if ($content) : ?>
<div class="article-content content"><?php echo wrap_tables($content); ?></div>
<?php endif; ?>
<?php
if ($article_blocks) {
foreach ($article_blocks as $block) {
$layout = $block['acf_fc_layout'] ?? '';
if ($layout === 'attention_block') {
$layout = 'attention_blocks';
}
$allowedLayouts = [
'attention_block',
'attention_blocks',
'text',
'block_main',
'quote',
'cta_1',
'cta_2',
'plaque_authorship',
];
if (in_array($layout, $allowedLayouts, true)) {
get_template_part(
'template-parts/article-blocks/' . $layout,
null,
[
'fields' => $block,
]
);
}
}
}
?>
</div>
<?php if ($toc_items) : ?>
<div class="article-sidebar">
<?php if ($toc_items) : ?>
<div class="article-toc">
<div class="article-toc__title">Содержание</div>
<ul class="article-toc__list">
@@ -97,14 +141,15 @@
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</section>
<?php endif; ?>
<?php get_template_part('template-parts/faq'); ?>
<?php get_template_part('template-parts/app-steps'); ?>
<?php get_template_part('template-parts/related'); ?>
<?php get_template_part('template-parts/socials'); ?>
<?php get_template_part('template-parts/getapp'); ?>
@@ -0,0 +1,84 @@
<div class="articles articles--block">
<div class="container">
<section class="h-app-steps">
<h2 class="h-app-steps__title">
Начать работать — просто
</h2>
<div class="h-app-steps__layout">
<div class="h-app-steps__phone">
<img
src="https://play-lh.googleusercontent.com/heeCPL3mSBl1ZW9hAS161lD-vwR57g3BYWmLYXSAS9Jrukcbq_-rMIMVozO5QVq1-TJ8BTJJ6y3hjr1PeZqs=w1052-h592-rw"
alt="Приложение Hantico на смартфоне"
loading="lazy"
>
</div>
<div class="h-app-steps__grid">
<div class="h-app-steps__step">
<div class="h-app-steps__number">1</div>
<h3 class="h-app-steps__step-title">
Скачайте приложение
</h3>
<p class="h-app-steps__description">
Установите Hantico на смартфон.
</p>
<div class="h-app-steps__download">
<img
class="h-app-steps__qr"
src="https://hantico.cp.good-production.xyz/wp-content/uploads/qrcode.svg"
alt="QR-код для скачивания Hantico"
loading="lazy"
>
</div>
</div>
<div class="h-app-steps__step">
<div class="h-app-steps__number">2</div>
<h3 class="h-app-steps__step-title">
Зарегистрируйтесь
</h3>
<p class="h-app-steps__description">
Создайте аккаунт и заполните
необходимые данные.
</p>
</div>
<div class="h-app-steps__step">
<div class="h-app-steps__number">3</div>
<h3 class="h-app-steps__step-title">
Выберите подходящий формат работы
</h3>
<p class="h-app-steps__description">
Найдите доступные варианты и условия,
которые подходят именно вам.
</p>
</div>
<div class="h-app-steps__step">
<div class="h-app-steps__number">4</div>
<h3 class="h-app-steps__step-title">
Начинайте работать
</h3>
<p class="h-app-steps__description">
Переходите к заказам и используйте
Hantico в работе.
</p>
</div>
</div>
</div>
</section>
</div>
</div>
@@ -0,0 +1,25 @@
<?php
$fields = $args['fields'] ?? [];
$attention = $fields['attention'] ?? 'red';
if (is_array($attention)) {
$attention = $attention['value'] ?? 'red';
}
$text = $fields['text'] ?? '';
$variants = [
'red' => ['class' => 'warning', 'icon' => '!', 'title' => 'Важно!'],
'yellow' => ['class' => 'info', 'icon' => 'i', 'title' => 'Полезная информация'],
'green' => ['class' => 'success', 'icon' => '✓', 'title' => 'Рекомендация'],
];
$variant = $variants[$attention] ?? $variants['red'];
?>
<?php if ($text !== '') : ?>
<div class="h-attention h-attention--<?php echo esc_attr($variant['class']); ?>">
<div class="h-attention__icon">
<span><?php echo esc_html($variant['icon']); ?></span>
</div>
<div class="h-attention__content">
<?php echo wpautop(wp_kses_post($text)); ?>
</div>
</div>
<?php endif; ?>
@@ -0,0 +1,14 @@
<?php
$fields = $args['fields'] ?? [];
$cards = $fields['cards'] ?? [];
?>
<?php if ($cards): ?>
<div class="h-article-cards">
<?php foreach ($cards as $card): ?>
<div class="h-article-cards__item">
<p><?php echo nl2br(esc_html($card['text_card'] ?? '')); ?></p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
@@ -0,0 +1,33 @@
<?php
$fields = $args['fields'] ?? [];
$title = $fields['title'] ?? '';
$text = $fields['text'] ?? '';
$link_1 = $fields['link_1'] ?? [];
$link_2 = $fields['link_2'] ?? [];
?>
<div class="h-article-cta">
<div class="h-article-cta__content">
<?php if ($title): ?>
<h2 class="h-article-cta__title"><?php echo esc_html($title); ?></h2>
<?php endif; ?>
<?php if ($text): ?>
<p class="h-article-cta__description"><?php echo nl2br(esc_html($text)); ?></p>
<?php endif; ?>
</div>
<div class="h-article-cta__actions">
<?php if (!empty($link_1['link'])): ?>
<a href="<?php echo esc_url($link_1['link']); ?>" class="h-article-cta__btn h-article-cta__btn--outline">
<?php echo esc_html($link_1['text'] ?? ''); ?>
</a>
<?php endif; ?>
<?php if (!empty($link_2['link'])): ?>
<a href="<?php echo esc_url($link_2['link']); ?>" class="h-article-cta__btn h-article-cta__btn--white">
<?php echo esc_html($link_2['text'] ?? ''); ?>
</a>
<?php endif; ?>
</div>
</div>
@@ -0,0 +1,31 @@
<?php
$fields = $args['fields'] ?? [];
$image = $fields['img'] ?? [];
$text = $fields['text'] ?? '';
$link = $fields['link'] ?? [];
?>
<div class="h-article-app-cta">
<?php if ($image): ?>
<div class="h-article-app-cta__image">
<img
src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
width="90"
height="90"
>
</div>
<?php endif; ?>
<?php if ($text): ?>
<div class="h-article-app-cta__content">
<p class="h-article-app-cta__title"><?php echo nl2br(esc_html($text)); ?></p>
</div>
<?php endif; ?>
<?php if (!empty($link['link'])): ?>
<a href="<?php echo esc_url($link['link']); ?>" class="h-article-app-cta__button">
<?php echo esc_html($link['text'] ?? ''); ?>
</a>
<?php endif; ?>
</div>
@@ -0,0 +1,17 @@
<?php
$fields = $args['fields'] ?? [];
$text = $fields['text'] ?? '';
$link = $fields['link'] ?? [];
?>
<div class="h-article-author">
<?php if ($text): ?>
<span class="h-article-author__text"><?php echo nl2br(esc_html($text)); ?></span>
<?php endif; ?>
<?php if (!empty($link['link'])): ?>
<a class="h-article-author__link" href="<?php echo esc_url($link['link']); ?>">
<?php echo esc_html($link['name_link'] ?? ''); ?>
</a>
<?php endif; ?>
</div>
@@ -0,0 +1,32 @@
<?php
$fields = $args['fields'] ?? [];
$image = $fields['img'] ?? [];
$name = $fields['name'] ?? '';
$text = $fields['text'] ?? '';
?>
<div class="h-article-quote">
<?php if ($image): ?>
<img
class="h-article-quote__avatar"
src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
width="90"
height="90"
>
<?php endif; ?>
<div class="h-article-quote__body">
<?php if ($name): ?>
<div class="h-article-quote__author">
<?php echo esc_html($name); ?>
</div>
<?php endif; ?>
<?php if ($text): ?>
<blockquote class="h-article-quote__text">
<?php echo wp_kses_post($text); ?>
</blockquote>
<?php endif; ?>
</div>
</div>
@@ -0,0 +1,9 @@
<?php
$fields = $args['fields'] ?? [];
$content = $fields['content'] ?? '';
?>
<?php if ($content): ?>
<div class="article-content content"><?php echo wrap_tables($content); ?></div>
<?php endif; ?>