fonc(pied de page) créé le pied de page avec des liens personnalisables de réseaux sociaux

web/app/themes/haiku-atelier-2024/functions.php

@@ -30,3 +30,47 @@ add_action("wp_enqueue_scripts", "charge_styles_haiku_atelier_2024");
 
 // Initialise les fonctionnalités du thème
 new StarterSite();
+
+
+// Personnalisation du thème
+function enregistre_personnalisation_theme($wp_customize) {
+  // Section « Réseaux sociaux »
+  $wp_customize->add_section("liens_reseaux_sociaux", [
+    "title" => __("Liens des réseaux sociaux"),
+    "description" => __("Liens des réseaux sociaux s'affichant dans le pied de page."),
+  ]);
+
+  // Instagram
+  $wp_customize->add_setting("lien_instagram", [
+    "type" => "theme_mod",
+    "capability" => "edit_theme_options",
+  ]);
+  $wp_customize->add_control("lien_instagram", [
+    "type" => "url",
+    "section" => "liens_reseaux_sociaux",
+    "label" => __("Profil Instagram"),
+  ]);
+
+  // Facebook
+  $wp_customize->add_setting("lien_facebook", [
+    "type" => "theme_mod",
+    "capability" => "edit_theme_options",
+  ]);
+  $wp_customize->add_control("lien_facebook", [
+    "type" => "url",
+    "section" => "liens_reseaux_sociaux",
+    "label" => __("Profil Facebook"),
+  ]);
+
+  // Pinterest
+  $wp_customize->add_setting("lien_pinterest", [
+    "type" => "theme_mod",
+    "capability" => "edit_theme_options",
+  ]);
+  $wp_customize->add_control("lien_pinterest", [
+    "type" => "url",
+    "section" => "liens_reseaux_sociaux",
+    "label" => __("Profil Pinterest"),
+  ]);
+}
+add_action("customize_register", "enregistre_personnalisation_theme");

web/app/themes/haiku-atelier-2024/src/StarterSite.php

@@ -22,6 +22,23 @@ class StarterSite extends Site {
   public function ajoute_au_contexte_twig(array $context): array {
     $context["site"] = $this;
 
+    // Récupère les liens des réseaux sociaux définis dans la personnalisation du thème
+    $personnalisations_theme = get_theme_mods();
+    $liens_reseaux_sociaux = [];
+    $liens_reseaux_sociaux["facebook"] = [
+      "nom" => "Facebook",
+      "url" => $personnalisations_theme["lien_facebook"] ?? "",
+    ];
+    $liens_reseaux_sociaux["instagram"] = [
+      "nom" => "Instagram",
+      "url" => $personnalisations_theme["lien_instagram"] ?? "",
+    ];
+    $liens_reseaux_sociaux["pinterest"] = [
+      "nom" => "Pinterest",
+      "url" => $personnalisations_theme["lien_pinterest"] ?? "",
+    ];
+    $context["liens_reseaux_sociaux"] = $liens_reseaux_sociaux;
+
     // Logo personnalisée
     $logo_personnalisee_id = get_theme_mod("custom_logo");
     $logo_personnalisee = wp_get_attachment_image_src($logo_personnalisee_id, "full");

web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss

@@ -0,0 +1,35 @@
+// Styles pour le pied de page du site
+
+#pied-de-page {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  place-items: center;
+  align-self: end;
+  min-width: 100vw;
+  padding: 1rem 2rem;
+  line-height: 1.5;
+  background: var(--couleur-jaune);
+  border: 1px solid var(--couleur-noir);
+
+  .zone-menu-navigation-secondaire {
+    justify-self: start;
+    width: 100%;
+    height: 100%;
+    text-transform: lowercase;
+  }
+
+  .zone-liens-reseaux-sociaux {
+    justify-items: end;
+    width: 100%;
+    height: 100%;
+    text-align: right;
+  }
+
+  a {
+    @media (hover: hover) {
+      &:hover {
+        text-decoration-color: var(--couleur-noir);
+      }
+    }
+  }
+}

web/app/themes/haiku-atelier-2024/src/sass/main.scss

@@ -14,3 +14,4 @@
 // 3. Régions
 @use "layouts/en-tete" as en-tete;
 @use "layouts/menu-categories-produits" as menu-categories-produits;
+@use "layouts/pied-de-page" as pied-de-page;

web/app/themes/haiku-atelier-2024/views/base.twig

@@ -19,4 +19,5 @@
   {# Pied de page #}
   {% block pied_de_page %}
   {% endblock %}
+  {% include "parts/pied-de-page.twig" %}
 </body>

web/app/themes/haiku-atelier-2024/views/parts/pied-de-page.twig

@@ -0,0 +1,23 @@
+<footer id="pied-de-page">
+  <section class="zone-menu-navigation-secondaire">
+    <nav class="menu-navigation" id="menu-navigation-secondaire">
+      <ul>
+        <li><a href="/contact">Contact</a></li>
+        <li><a href="">Terms & Legals</a></li>
+        <li><a href="">Shipping & Returns</a></li>
+      </ul>
+    </nav>
+  </section>
+
+  <section class="zone-liens-reseaux-sociaux">
+    <nav class="menu-navigation" id="liens-reseaux-sociaux">
+      <ul>
+        {% for lien in liens_reseaux_sociaux %}
+          {% if lien.url %}
+            <li><a href="{{ lien.url }}">{{ lien.nom }}</a></li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </nav>
+  </section>
+</footer>