add single page rfo

content-post-rfo.php

@@ -0,0 +1,25 @@
+<?php
+$formatted_date = format_event_date();
+$full_width = $args['full_width'] ?? false;
+$class = $full_width ? 'article-item article-item--lg' : 'article-item-rfo';
+?>
+<div class="article-item-wrapper__rfo">
+    <div class="<?= $class; ?>">
+        <a href="<?php the_permalink(); ?>" class="article-item__image-container">
+            <?=render_webp_picture_by_post( null, 'news-list-picture'); ?>
+        </a>
+        <div class="article-item__text">
+            <div class="article-time">
+                <img src="<?= get_asset('/icons/time.svg'); ?>" alt="" /><?php echo $formatted_date; ?>
+            </div>
+            <a href="<?php the_permalink(); ?>" class="subtitle-16 article-item__link"><?php the_title(); ?></a>
+            <? if ($full_width) : ?>
+                <p class="article-item__descr text-13"><?php the_excerpt(); ?></p>
+            <? endif; ?>
+        </div>
+        <div class="article-rfo-details">
+            <div class="article-rfo-details-text">Подробнее</div><div class="article-rfo-details-icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712" stroke="#006842" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg></div></div>
+    </div>
+</div>

frontend/src/main.js

@@ -28,6 +28,9 @@ import './styles/rfo/rfo.css';
 import './styles/rfo/search-rfo.css';
 import './styles/rfo/featured.css';
 import './styles/rfo/social.css';
+import './styles/rfo/article.css';
+import './styles/rfo/breadcrumbs.css';
+
 
 import './scripts/calendar.js';
 import './scripts/menu-vertical.js';

frontend/src/styles/rfo/article.css

@@ -0,0 +1,65 @@
+.articles-preview-rfo{
+    display: flex; /* Активируем Flexbox */
+    justify-content: space-between; /* Равномерное распределение пространства между колонками */
+    /* или можно использовать justify-content: space-around; */
+    gap: 10px; /* Расстояние между колонками */
+}
+
+.article-item-wrapper__rfo{
+    flex: 1;
+    background-color: white;
+    width: 100%;
+    border: 6px solid white;
+    border-radius: 14px;
+}
+
+.article-item-rfo{
+    position: relative; 
+    height: 409px;
+  background: #f1f3eb; /* пример фона */
+
+  /* МАСКА через встроенный data URI */
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 387 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0L378.205 0C383.042 0 386.999 3.9499 386.999 8.77793V34.6476V374.353V400.222C386.999 405.05 383.042 409 378.205 409H225.707C219.54 409 218.385 405.144 215.499 400.222L209.392 389.805C207.382 386.378 203.127 383.509 199.559 383.13H8.79426C3.95665 383.13 0 379.181 0 374.352V8.77756C0 3.94952 3.95667 0 8.79428 0Z" fill="black"/></svg>');
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: cover;
+
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 387 409"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79428 0L378.205 0C383.042 0 386.999 3.9499 386.999 8.77793V34.6476V374.353V400.222C386.999 405.05 383.042 409 378.205 409H225.707C219.54 409 218.385 405.144 215.499 400.222L209.392 389.805C207.382 386.378 203.127 383.509 199.559 383.13H8.79426C3.95665 383.13 0 379.181 0 374.352V8.77756C0 3.94952 3.95667 0 8.79428 0Z" fill="black"/></svg>');
+  mask-repeat: no-repeat;
+  mask-size: cover;
+}
+
+.article-section-title__rfo{
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 150%;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+.article-rfo-details{
+    position: absolute;
+      bottom: 12px;  
+      right: 20px;
+      display: flex;
+      gap: 8px;
+      color: #333;
+      font-size: 1.6rem;
+      font-weight: 500;
+}
+
+.article-show-next__rfo{
+    border-radius: 10px;
+    margin: 22px 0;
+    padding: 15px 25px;
+    font-weight: 500;
+    font-size: 1.8rem;
+    text-align: center;
+    width: 100%;
+    background-color: white;
+}
+
+
+
+
+  

frontend/src/styles/rfo/rfo.css

@@ -48,7 +48,7 @@
   }  
 
 .content-rfo{
-    margin-top: -152px;
+    margin-top: -222px;
     width: 1200px;
     max-width: 1200px;
   }

rfo/related-posts.php

@@ -0,0 +1,33 @@
+<?php
+$current_post_id = get_the_ID();
+
+// Получаем категории текущего поста
+$categories = get_the_category($current_post_id);
+if ($categories) {
+    $category_ids = array_map(function ($category) {
+        return $category->term_id;
+    }, $categories);
+
+    $args = array(
+        'category__in'   => $category_ids,
+        'post__not_in'   => array($current_post_id),
+        'posts_per_page' => 3,
+    );
+
+    $related_posts_query = new WP_Query($args);
+
+    if ($related_posts_query->have_posts()) {
+
+        echo '<div class="article-section-title__rfo">Читайте также:</div>';
+        echo '<div class="articles-preview-rfo">';
+
+        while ($related_posts_query->have_posts()) {
+            $related_posts_query->the_post();
+            get_template_part('content', 'post-rfo');
+        }
+
+        echo '</div>';
+        wp_reset_postdata();
+    }
+}
+?>