Sindbad~EG File Manager

<?php
/*
  Template Name: Article
*/
?>
<?php get_header(); ?>
<?php
$author_id = get_the_author_meta('ID');
$display_name = get_the_author_meta('display_name', $author_id);
$user_description = get_the_author_meta('description', $author_id);
$user_avatar = get_avatar($author_id, 96);
?>

<?php $categories = get_categories(); ?>
<?php $conclusion = get_field('conclusion'); ?>
<?php $newsletter = get_field('newsletter'); ?>
<se class="single-article">

  <section class="single-article__hero">

    <div class="single-article__hero-container">
      <div class="single-article__wrapper">
        <div class="single-article__author-container">
          <div class="flex justify-between items-center">
            <div class="single-article__author-row">
              <div class="single-article__author-image">
                <?php echo $user_avatar; ?>
              </div>
              <div class="single-article__author-info">
                <p class="single-article__author-label">Rédigé par</p>
                <p class="single-article__author-name"><?= $display_name; ?></p>
              </div>
            </div>
            <div class="single-article__date-container">
              <p class="single-article__date-title">Date</p>
              <p class="single-article__date"><?php the_date(); ?></p>
            </div>
          </div>
          <div class="single-article__author-description"><?= $user_description; ?></div>

          <h1 class="heading-2 text-purple800 font-bold mb-12 ">
            <?php the_title(); ?>
          </h1>
          <div class="single-article__excerpt subheading mb-12">
            <?php the_excerpt(); ?>
          </div>
          <div class="flex items-center gap-24 mb-32">
            <div class="single-article__categories">
              <?php foreach ($categories as $category): ?>

                <div class="single-article__category">

                  <span class="body-1 text-purple500">Outils</span>
                </div>
              <?php endforeach; ?>
            </div>
            <?php // Read time
            $post_reading_time = do_shortcode('[rt_reading_time]');
            ; ?>
            <div class="flex items-center gap-8">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
                <g clip-path="url(#a)">
                  <path stroke="#7209B5" stroke-linecap="round" stroke-linejoin="round"
                    d="M8 4v4l2.667 1.333m4-1.333A6.667 6.667 0 1 1 1.334 8a6.667 6.667 0 0 1 13.333 0Z" />
                </g>
                <defs>
                  <clipPath id="a">
                    <path fill="#fff" d="M0 0h16v16H0z" />
                  </clipPath>
                </defs>
              </svg>
              <span class="body-2 text-purple500 font-semibold"><?= $post_reading_time; ?> min de lecture</span>
            </div>
          </div>
          <div class="single-article__thumbnail">
            <img src="<?= get_the_post_thumbnail_url(); ?>">
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="single-article__content-container">
    <div class="single-article__content-wrapper">
      <div class="single-article__share">
        <a href="mailto:?subject=<?php the_title(); ?>&body=<?php the_excerpt(); ?> "
          class="single-article__share-icon-container">
          <img src="<?php echo get_template_directory_uri(); ?>/assets/images/article/share-email.svg" class="" />
        </a>
        <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&summary=<?php the_excerpt(); ?>&source=<?php echo get_template_directory_uri(); ?>"
          class="single-article__share-icon-container linkedin">
          <img src="<?php echo get_template_directory_uri(); ?>/assets/images/article/share-linkedin.svg" class="" />
        </a>
        <button class="single-article__share-icon-container reverse scroll-up">
          <img src="<?php echo get_template_directory_uri(); ?>/assets/images/article/arrow-up.svg" class="" />
        </button>
      </div>
      <div class="single-article__content">
        <div class="single-article__table-of-content">
          <button class="single-article__toc-button">
            <h2 class="heading-3s text-purple600 font-bold">
              Table des matières

            </h2>
            <div class="single-article__toc-arrow">
              <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_362_1296)">
                  <path d="M26 21.5L16 11.5L6 21.5" stroke="#7209B5" stroke-width="2.5" stroke-linecap="round"
                    stroke-linejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_362_1296">
                    <rect y="0.5" width="32" height="32" rx="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>

            </div>
          </button>
          <div class="single-article__toc-content">
            <ul>

            </ul>
          </div>
        </div>
        <div class="single-article__wysiwyg">
          <?php the_content(); ?>
        </div>

        <div class="single-article__conclusion">
          <h4 class="heading-3s text-purple600 font-bold mb-24">
            <?= $conclusion['title']; ?>
          </h4>
          <p class="body-2 text-purple800 font-regular">
            <?= $conclusion['content']; ?>
          </p>

          <?php
          // Fetch previous and next post
          $prev_post = get_previous_post();
          $next_post = get_next_post();
          ?>


        </div>

        <div class="single-article__newsletter-container">
          <h3 class="heading-4s text-purple300 font-semibold mb-12">
            <?= $newsletter['title']; ?>
          </h3>
          <p class="body-1 text-purple300 mb-24">
            <?= $newsletter['content']; ?>
          </p>
          <div class="single-article__newsletter-form">
            <?php $form_shortcode = $newsletter['form_shortcode']; ?>
            <?php echo do_shortcode($form_shortcode);
            ; ?>
          </div>
          <div class="flex gap-8 mt-8">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/images/article/info.svg" class="" />
            <p class="single-article__newsletter-policy">
              Accédez à nos <a href="#">politiques de confidentialité</a>
            </p>
          </div>
        </div>
        <div class="single-article__post-nav">
          <?php if ($prev_post): ?>
            <a href="<?= get_permalink($prev_post->ID); ?>" class="single-article__post-nav-link">

              <p class="caption mb-8 text-purple500 font-semibold"><?= $prev_post->post_title; ?></p>
              <div class="flex gap-8 items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none">
                  <path stroke="#180835" stroke-linecap="round" stroke-linejoin="round" d="m10 12.5-4-4 4-4" />
                </svg>
                <span class="body-1 text-purple800">Article précédent</span>
              </div>
            </a>
          <?php endif; ?>
          <?php if ($next_post): ?>
            <a href="<?= get_permalink($next_post->ID); ?>" class="single-article__post-nav-link next">
              <p class="caption mb-8 text-purple500 font-semibold"><?= $next_post->post_title; ?></p>

              <div class="flex gap-8 items-center">

                <span class="body-1 text-purple800">Article Suivant</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none">
                  <path stroke="#180835" stroke-linecap="round" stroke-linejoin="round" d="m6 12.5 4-4-4-4" />
                </svg>
              </div>
            </a>
          <?php endif; ?>
        </div>
        <div class="single-article__faq-container">
          <?php $faqs = get_field('faq'); ?>
          <?php foreach ($faqs as $faq): ?>
            <button class="single-article__faq-item">
              <div class="single-article__faq-question">
                <p class="subheading text-purple500 font-semibold">
                  <?= $faq['question']; ?>
                </p>
                <div class="single-article__faq-arrow">
                  <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_362_1296)">
                      <path d="M26 21.5L16 11.5L6 21.5" stroke="#7209B5" stroke-width="2.5" stroke-linecap="round"
                        stroke-linejoin="round" />
                    </g>
                    <defs>
                      <clipPath id="clip0_362_1296">
                        <rect y="0.5" width="32" height="32" rx="16" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>

                </div>
              </div>
              <div class="single-article__faq-answer">
                <p class="body-3 text-purple800 font-regular">
                  <?= $faq['answer']; ?>
                </p>

            </button>
          <?php endforeach; ?>
        </div>


      </div>
      <div class="single-article__latest-articles">
        <h3 class="subheading text-purple500 mb-12 font-bold">
          Nos derniers articles
        </h3>
        <?php

        $args = array(
          'post_type' => 'post',
          'posts_per_page' => 2,
          'orderby' => 'date',
          'order' => 'DESC',
          'post__not_in' => array(get_the_ID())
        );
        ; ?>
        <?php $latest_articles = new WP_Query($args); ?>
        <?php foreach ($latest_articles->posts as $latest_article): ?>
          <?php $category = get_the_category($latest_article->ID)[0]; ?>
          <article class="single-article__latest-article-card">
            <a href="<?= get_permalink($latest_article->ID); ?>" class="single-article__latest-article-thumbnail">

              <div class="latest-article__category text-purple500 font-semibold">

                <span>
                  <?= $category->name; ?>
                </span>
              </div>

              <h4 class="body-2 font-bold mb-8 latest-article__title">
                <?= $latest_article->post_title; ?>
              </h4>
              <p class="latest-article__content">
                <?= $latest_article->post_excerpt; ?>
              </p>

              <div href="<?= get_permalink($latest_article->ID); ?>" class=" cta h_animation latest-article__cta">En
                savoir
                plus
                <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.5 9.28571L7.5 6.28571L4.5 3.28571" stroke="#560BAB" stroke-width="0.75"
                    stroke-linecap="round" stroke-linejoin="round" />
                </svg>

              </div>
            </a>
          </article>
        <?php endforeach; ?>

      </div>
    </div>



  </section>


  <section class="single-article__comment">
    <div class="single-article__comment-wrapper">
      <div class="single-article__comment-container">
        <?php // Display le nombre de commentaires
        $comment_count = get_comments_number();
        ; ?>

        <p class="subheading font-semibold single-article__comment-title">
          <?= $comment_count; ?> commentaires
        </p>
        <ul class="comment-list">
          <?php
          // Boucle de publication externe pour itérer à travers les articles
          


          foreach ($posts as $post) {
            setup_postdata($post);
            $comments = get_comments(
              array(
                'post_id' => get_the_ID(),
              )
            );

            // Afficher les commentaires pour cet article
            wp_list_comments(
              array(
                'avatar_size' => 50,
                // Taille de l'avatar
                'style' => 'ul',
                // Style de la liste
                'short_ping' => true,
                // Afficher les pingbacks et les trackbacks
                'callback' => 'custom_comment_output',
                // Fonction de rappel personnalisée pour personnaliser l'affichage des commentaires
                'per_page' => -1,
                // Afficher tous les commentaires
              ),
              $comments
            );
          }



          ?>

        </ul>
        <div class="divider"></div>
        <div class="commentary__container">
          <h2 class="commentary__form--title heading-4s font-semibold text-purple800 mb-12">Laissez un commentaire</h2>

          <div class="commentary__form--container">


            <!-- Système de notation par étoiles (KK Star Ratings) -->
            <div class="kk-star-ratings">
              <?php if (function_exists('kk_star_ratings')) {
                echo kk_star_ratings($post->ID);
              } ?>

            </div>
            <!-- Formulaire de commentaires -->
            <div class="comment-form">
              <?php comment_form(
                array(
                  'comment_field' => '<div class="comment-col comment-form-comment"><label for="comment">Commentaire</label><textarea id="comment" name="comment" cols="45" rows="40" aria-required="true"></textarea></div>',
                  'fields' => array(
                    'author' => '<div class="comment-row"><div class="comment-col comment-form-author"><label for="author">Nom <span class="required">*</span></label><input id="author" name="author" type="text" value="" size="30" aria-required="true"></div>',
                    'email' => '<div class="comment-col comment-form-email"><label for="email">E-mail <span class="required">*</span></label><input id="email" name="email" type="text" value="" size="30" aria-required="true"></div></div>',
                  ),
                  'comment_notes_after' => '',
                  'class_submit' => 'submit-button',
                  'label_submit' => 'Laisser un commentaire',
                )
              ); ?>

            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</se>
<?php get_footer(); ?>