REFACTOR Disoplay social links through dedicated function

functions.php

@@ -8,6 +8,8 @@ require_once(__DIR__ . '/includes/logos.php');
 require_once(__DIR__ . '/includes/collective-access-api.php');
 require_once(__DIR__ . '/includes/utilities.php');
 require_once(__DIR__ . '/includes/nawalker_fction.php');
+require_once(__DIR__ . '/includes/social-networks.php');
+
 
 // require_once(__DIR__ . '/includes/widget.php');
 // require_once( __DIR__ . '/includes/taxonomy.php');

includes/nawalker_fction.php

@@ -9,12 +9,10 @@ function carhop_wrap_parent_menu_item_buttons($output, $item, $depth, $args)
 	if ($args->theme_location === "primary") {
 		$page_icon = get_field('page_icon', $item->object_id);
 
-
-
 		if (isset($page_icon)) {
 			$icon = '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>';
-			$link = $output;
-			$output = $icon . $link;
+			// Insérer l'icône à l'intérieur du lien (seulement la première occurrence)
+			$output = preg_replace('/>/', '>' . $icon, $output, 1);
 		}
 	}
 

includes/social-networks.php

@@ -0,0 +1,186 @@
+<?php
+
+/* ----------------------------------------------------------------
+	##### PAGE D'OPTIONS DU THÈME DYNAMIQUES
+| ------------------------------------------------------------------*/
+
+// Ajouter la page d'options au menu d'administration
+function dynamiques_add_options_page()
+{
+	if (get_current_blog_id() !== 1) return;
+
+	add_options_page(
+		'Options de réseaux sociaux',  // Titre de la page
+		'Réseaux sociaux',            // Titre du menu
+		'manage_options',              // Capacité requise
+		'dynamiques-options',          // Slug de la page
+		'dynamiques_options_page_html' // Fonction de callback
+	);
+}
+add_action('admin_menu', 'dynamiques_add_options_page');
+
+// Enregistrer les paramètres
+function dynamiques_settings_init()
+{
+	// Enregistrer un groupe de paramètres
+	register_setting('dynamiques_options', 'dynamiques_options');
+
+	// Ajouter une section pour les réseaux sociaux
+	add_settings_section(
+		'dynamiques_section_social',
+		'Réseaux sociaux',
+		'dynamiques_section_social_callback',
+		'dynamiques_options'
+	);
+
+	// Champs de la section générale
+	add_settings_field(
+		'site_logo',
+		'Logo du site',
+		'dynamiques_field_logo_callback',
+		'dynamiques_options',
+		'dynamiques_section_general',
+		array('label_for' => 'site_logo')
+	);
+
+	add_settings_field(
+		'footer_text',
+		'Texte du pied de page',
+		'dynamiques_field_footer_text_callback',
+		'dynamiques_options',
+		'dynamiques_section_general',
+		array('label_for' => 'footer_text')
+	);
+
+	// Champs pour les réseaux sociaux
+	add_settings_field(
+		'facebook_url',
+		'URL Facebook',
+		'dynamiques_field_facebook_callback',
+		'dynamiques_options',
+		'dynamiques_section_social',
+		array('label_for' => 'facebook_url')
+	);
+
+	add_settings_field(
+		'youtube_url',
+		'URL YouTube',
+		'dynamiques_field_youtube_callback',
+		'dynamiques_options',
+		'dynamiques_section_social',
+		array('label_for' => 'youtube_url')
+	);
+}
+add_action('admin_init', 'dynamiques_settings_init');
+
+
+// Callback pour la section réseaux sociaux
+function dynamiques_section_social_callback()
+{
+	echo '<p>Configurez les liens vers vos réseaux sociaux.</p>';
+}
+
+
+
+
+function dynamiques_field_facebook_callback($args)
+{
+	$options = get_option('dynamiques_options');
+	$value = isset($options[$args['label_for']]) ? $options[$args['label_for']] : '';
+?>
+	<input type="url"
+		id="<?php echo esc_attr($args['label_for']); ?>"
+		name="dynamiques_options[<?php echo esc_attr($args['label_for']); ?>]"
+		value="<?php echo esc_attr($value); ?>"
+		class="regular-text"
+		placeholder="https://facebook.com/votreprofil">
+<?php
+}
+
+function dynamiques_field_youtube_callback($args)
+{
+	$options = get_option('dynamiques_options');
+	$value = isset($options[$args['label_for']]) ? $options[$args['label_for']] : '';
+?>
+	<input type="url"
+		id="<?php echo esc_attr($args['label_for']); ?>"
+		name="dynamiques_options[<?php echo esc_attr($args['label_for']); ?>]"
+		value="<?php echo esc_attr($value); ?>"
+		class="regular-text"
+		placeholder="https://youtube.com/votrechaine">
+<?php
+}
+// Page HTML de l'interface d'options
+function dynamiques_options_page_html()
+{
+	// Vérifier les permissions
+	if (!current_user_can('manage_options')) {
+		return;
+	}
+
+	// Traitement des messages
+	if (isset($_GET['settings-updated'])) {
+		add_settings_error('dynamiques_messages', 'dynamiques_message', 'Paramètres sauvegardés', 'updated');
+	}
+
+	settings_errors('dynamiques_messages');
+?>
+	<div class="wrap">
+		<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
+
+		<form action="options.php" method="post">
+			<?php
+			settings_fields('dynamiques_options');
+			do_settings_sections('dynamiques_options');
+			submit_button('Sauvegarder les paramètres');
+			?>
+		</form>
+
+		<div style="margin-top: 20px; padding: 15px; background: #f1f1f1; border-radius: 5px;">
+			<h3>Comment utiliser ces paramètres :</h3>
+			<p><strong>Dans vos templates :</strong></p>
+			<pre><code>$options = get_option('dynamiques_options');
+echo $options['facebook_url']; // URL Facebook
+echo $options['footer_text'];  // Texte du footer</code></pre>
+		</div>
+	</div>
+<?php
+}
+
+// Fonctions utilitaires pour récupérer les options facilement
+function get_dynamiques_option($option_name, $default = '')
+{
+	$options = get_option('dynamiques_options');
+	return isset($options[$option_name]) ? $options[$option_name] : $default;
+}
+
+// Fonction pour afficher les liens sociaux
+function carhop_display_social_links($class = 'social-links')
+{
+	$facebookUrl = get_dynamiques_option('facebook_url');
+	$youtubeUrl = get_dynamiques_option('youtube_url');
+
+	ob_start();
+?>
+
+
+	<ul class="social-networks-links">
+		<?php if (!empty($facebookUrl)) : ?>
+			<li>
+				<a class="social-link" title="<?php echo __('Facebook', "carhop") ?>" href="<?php echo $facebookUrl ?>" target="_blank">
+					<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-facebook.svg' ?>" alt="">
+				</a>
+			</li>
+		<?php endif; ?>
+		<?php if (!empty($youtubeUrl)) : ?>
+			<li>
+				<a class="social-link" title="<?php echo __('Youtube', "carhop") ?>" href="<?php echo $youtubeUrl ?>" target="_blank">
+					<img class="social-icon" src=" <?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-youtube.svg' ?>" alt="">
+				</a>
+			</li>
+		<?php endif; ?>
+	</ul>
+<?php
+	$output = ob_get_clean();
+	return $output;
+}

resources/css/app.css

@@ -24,6 +24,7 @@
 @import './components/article-tag.css';
 @import './components/page-header.css';
 @import './components/notyf.css';
+@import './components/social-networks-links.css';
 
 /* ########### LAYOUT ############ */
 @import './layout/nav.css';

resources/css/blocks/content-box.css

@@ -57,6 +57,12 @@
   }
 }
 
+main > .content-box:first-child {
+  @media (max-width: 1441px) {
+    @apply !pt-2;
+  }
+}
+
 .single-articles .content-box {
   @apply !pt-10 !pb-8;
 

resources/css/components/social-networks-links.css

@@ -0,0 +1,27 @@
+
+.social-networks-links {
+  @apply flex gap-2;
+
+  li {
+    @apply list-none;
+  }
+  .social-link {
+    @apply transition-all duration-300 ease-out block;
+
+    transform: scale(1);
+    filter: saturate(1) brightness(1);
+
+    &:hover {
+      transform: scale(1.1);
+      filter: saturate(1.2) brightness(1);
+    }
+    &:after {
+      @apply !content-none;
+    }
+  }
+  .social-icon {
+    @apply w-full h-auto;
+
+    width: 48px;
+  }
+}

resources/css/layout/footer.css

@@ -76,21 +76,6 @@ footer {
     a {
       @apply block;
     }
-
-    .social-networks-links {
-      @apply flex gap-2;
-
-      .social-link {
-        &:after {
-          @apply !content-none;
-        }
-      }
-      .social-icon {
-        @apply w-full h-auto;
-
-        width: 48px;
-      }
-    }
   }
 
   .mentions {

resources/css/layout/nav/primary-menu.css

@@ -105,9 +105,16 @@
     }
 
     li.menu-item.has-page-icon {
-      @apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
+      @apply gap-4 font-normal tracking-wide;
+      a {
+        @apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
+      }
       .page_icon {
         @apply w-7 h-7 object-contain object-center;
+        transition: transform 0.3s ease-out;
+      }
+      &:hover .page_icon {
+        transform: scale(1.2);
       }
     }
     li.menu-item.menu-item-has-children:hover {

resources/js/app.ts

@@ -3,5 +3,5 @@ import initFooterShapes from './footer';
 
 window.addEventListener('load', function () {
   // menuInit();
-  // initFooterShapes();
+  initFooterShapes();
 });

template-parts/footer.php

@@ -61,28 +61,13 @@
 	</li>
 	<li class="socials">
 
-		<ul class="social-networks-links">
-			<li>
-				<a class="social-link" title="<?php echo __('Facebook', "carhop") ?>" href="<?php echo "https://www.facebook.com/p/Carhop-asbl-100064324346403" ?>" target="_blank">
-					<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-facebook.svg' ?>" alt="">
-				</a>
-			</li>
-			<li>
-				<a class="social-link" title="<?php echo __('Youtube', "carhop") ?>" href="<?php echo "https://www.youtube.com/channel/UC-PTbzaC0tlrShZE4l8Z2zA" ?>" target="_blank">
-					<img class="social-icon" src=" <?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-youtube.svg' ?>" alt="">
-				</a>
-			</li>
-			<!-- <li>
-				<a class="social-link" title="<?php echo __('Instagram', "carhop") ?>" href="<?php "https://www.instagram.com/carhop.asbl/" ?>">
-					<img class="social-icon" src="<?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-instagram.svg' ?>" alt="">
-				</a>
-			</li>
-			<li>
-				<a class="social-link" title="<?php echo __('TikTok', "carhop") ?>" href="<?php echo "https://www.tiktok.com/@carhop.asbl" ?>">
-					<img class="social-icon" src=" <?php echo get_template_directory_uri() . '/resources/img/icons/carhop-social-tiktok.svg' ?>" alt="">
-				</a>
-			</li> -->
-		</ul>
+		<?php
+
+		echo carhop_display_social_links();
+
+
+		?>
+
 
 	</li>
 </ul>