FEATURE Introducing the Search results page and behaviour

resources/css/app.css

@@ -15,7 +15,6 @@
 @import './components/news-card.css';
 @import './components/post-grid.css';
 @import './components/footnote-reference.css';
-
 @import './components/revues-grid.css';
 @import './components/articles-grid.css';
 @import './components/post-card.css';
@@ -35,6 +34,7 @@
 @import './components/article-references.css';
 @import './components/article-informations.css';
 @import './components/search-module.css';
+@import './components/post-count.css';
 
 /* ########### PAGES ############ */
 @import './pages/singles.css';
@@ -43,6 +43,7 @@
 @import './pages/archive-articles.css';
 @import './pages/single-articles.css';
 @import './pages/single-auteurs.css';
+@import './pages/search-results.css';
 
 /* ########### LAYOUT ############ */
 @import './layout/nav.css';

resources/css/components/post-count.css

@@ -0,0 +1,12 @@
+.post-count {
+  @apply flex items-center gap-2 text-primary;
+
+  &__count {
+    @apply font-normal uppercase fjalla text-4xl;
+    line-height: 0.8;
+  }
+
+  &__text {
+    @apply text-lg nunito font-normal;
+  }
+}

resources/css/pages/search-results.css

@@ -0,0 +1,79 @@
+.search-results-page {
+  &__page-header {
+    @apply bg-primary text-white py-16;
+
+    .inner {
+      @apply max-w-7xl mx-auto;
+    }
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply !text-white;
+    }
+
+    a {
+      @apply text-white;
+    }
+  }
+
+  &__results-container {
+    @apply max-w-2xl mx-auto mt-16;
+    @apply flex flex-col gap-8;
+  }
+
+  &__results-counter {
+    @apply mb-4;
+  }
+
+  .search-results-card {
+    @apply bg-white p-8 border border-primary;
+    @apply transition-shadow hover:shadow-lg;
+
+    h2 {
+      @apply mb-4;
+
+      a {
+        @apply text-primary hover:underline;
+      }
+    }
+
+    &__link {
+      @apply inline-block mt-4 text-primary font-semibold;
+      @apply hover:underline;
+    }
+  }
+
+  .search-results-pagination {
+    @apply mt-12 mb-8;
+
+    .pagination {
+      @apply flex justify-center items-center gap-2;
+    }
+
+    .page-numbers {
+      @apply px-4 py-2 border border-gray-300 rounded;
+      @apply transition-colors;
+
+      &:hover {
+        @apply bg-primary text-white border-primary;
+      }
+
+      &.current {
+        @apply bg-primary text-white border-primary;
+      }
+    }
+
+    .prev,
+    .next {
+      @apply font-semibold;
+    }
+  }
+
+  .no-results {
+    @apply text-center text-gray-600 py-12;
+  }
+}

search.php

@@ -1,16 +1,19 @@
 <?php get_header(); ?>
 
-<div class="search-results-page container mx-auto my-8">
+<div class="search-results-page ">
 
-	<section class="block-content-page-header">
+	<section class="search-results-page__page-header">
-		<div class="block-content-page-header__content">
+		<div class="inner">
-			<div class="section_titling section_titling--left">
+
-				<h1 class="section_titling__title"><?php echo __("Résultat de recherche  ", "homegrade-theme__texte-fonctionnel") ?></h1>
+
-				<h2 class="section_titling__subtitle">
+			<div class="search-results-page__page-header__content__titling">
-					<?php echo __("Résultats de la recherche pour : ", "homegrade-theme__texte-fonctionnel")  ?>
+				<p>Rechercher</p>
+				<h1 class="section_titling__title">
+					<?php echo __("Résultats de recherche pour : ", "homegrade-theme__texte-fonctionnel")  ?>
 					<span class="search-results-page__current-term">« <?php echo get_search_query(); ?> »</span>
-				</h2>
+				</h1>
 			</div>
+
 		</div>
 
 		<img decoding="async" class="block-content-page-header__page-icon" src="<?php echo get_template_directory_uri() . "/resources/img/illustrations/homegrade_rechercher.svg" ?>" alt="">
@@ -18,13 +21,42 @@
 
 
 	<div class="search-results-page__results-container">
-		<?php if (have_posts()) : ?>
+		<div class="search-results-page__results-counter">
-			<?php
+			<p class="post-count">
-			while (have_posts()) :
+				<span class="post-count__count"><?php echo $wp_query->found_posts; ?></span>
-				the_post();
+				<span class="post-count__text">résultats</span>
-			?>
+			</p>
-				<?php get_template_part('template-components/content', get_post_format()); ?>
+		</div>
+		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
+
+				<div class="search-results-card">
+
+					<h2 class="search-results-page__results-container__item__content__title">
+						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
+					</h2>
+					<div class="search-results-page__results-container__item__content__excerpt">
+						<?php the_excerpt(); ?>
+					</div>
+					<a href="<?php the_permalink(); ?>" class="search-results-card__link">
+						<?php echo __('Lire la suite', 'homegrade-theme__texte-fonctionnel'); ?> →
+					</a>
+
+				</div>
 			<?php endwhile; ?>
+
+			<!-- Pagination -->
+			<div class="search-results-pagination">
+				<?php
+				the_posts_pagination(array(
+					'mid_size'  => 2,
+					'prev_text' => __('« Précédent', 'homegrade-theme__texte-fonctionnel'),
+					'next_text' => __('Suivant »', 'homegrade-theme__texte-fonctionnel'),
+				));
+				?>
+			</div>
+
+		<?php else : ?>
+			<p class="no-results"><?php echo __('Aucun résultat trouvé pour votre recherche.', 'homegrade-theme__texte-fonctionnel'); ?></p>
 		<?php endif; ?>
 	</div>
 </div>

searchform.php

@@ -6,6 +6,11 @@
 
 		<input class="search-module__search-form__input" type="text" name="s" id="search" value="<?php the_search_query(); ?>" placeholder="<?php echo __('Rechercher dans la revue Dynamiques', 'homegrade-theme__texte-fonctionnel') ?>" />
 
+		<!-- Ou pour plusieurs types : -->
+		<input type="hidden" name="post_type[]" value="articles">
+		<input type="hidden" name="post_type[]" value="revues">
+
+
 		<button type="submit">
 			<span><?php echo __('Rechercher', 'homegrade-theme__texte-fonctionnel') ?></span>
 		</button>