Personnalisation du menu par défaut effet sur les liens au scroll au dessus des sections.

**TBA_78** · 05/10/2019, 11h52

Bonjour,

Je n'aime pas trop les plugins et je souhaite faire mon thème perso alors j'ai commencé à créer la structure avec mon index qui ressemble à ça:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<?php
/*
* Template name: Template page index
*
*/
?>
<!-- HEADER -->
<?php get_header(); ?>
<!-- AFFICHAGE DU CONTENT -->
<?php get_template_part( 'content' ); ?>
<!-- AFFICHAGE DU PDP -->
<?php get_footer(); ?>

et on arrive à mon HEADER:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Open+Sans:700|Roboto&display=swap" rel="stylesheet">
	<title><?php bloginfo('name'); ?></title>
	<?php wp_head(); ?>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
	<!-- START NAVBAR -->
	<?php get_template_part( 'components/navbar.inc' ); ?>
	<!-- END NAVBAR -->
	<header id="header-tba" class="header-tba">
		<div class="header-text">
			<h1 class="header-title">Mon site internet</h1> 
			<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nam, aliquid totam, atque voluptatum alias necessitatibus? Delectus architecto ratione ad fuga similique quasi et, consequuntur reiciendis! Dolorum dolor minima, assumenda.</p>
		</header>
		<div id="main">

et à ma navigation:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<nav id="nav-tba" class="navbar navbar-light fixed-top navbar-expand-md bg-tba">
	<div class="container"><a class="navbar-brand" href="#"><img id="brand-logo" class="brand-logo" src="http://localhost/wc-v2/wordpress/wp-content/themes/web-connect-v2/img/logo-menu.jpg"></a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="navbar-toggler-icon">   
		<i class="fas fa-bars"></i>
	</span></button>
	<div class="scrollNav collapse navbar-collapse" id="navcol-1" data-spy="scroll" data-target="#page">
		<ul class="nav navbar-nav ml-auto">
			<li class="nav-item"><a href="http://localhost/wc-v2/wordpress/#methodologie">Lien</a></li>
		</ul>
		<?php
                if (has_nav_menu('main')):
                        wc_main_nav();/*Dans "functions.php" cette fonction affiche le menu*/
                endif;
                ?>
	</div>
</div>
</nav>

et dans functions.php, mon menu (un peu plus bas et avec des commentaires pour ne pas me planter car je débute):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<?php
function add_jquery() {
	//Pour éviter qu'il y ait 2 déclaration de jquery (par exemple lors de l'installation d'une extension qui le fait déjà) on désinstalle jquery (wp_deregister_script) et ensuite on l'installe
	wp_deregister_script( 'jquery' );
	wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_jquery' );
 
function add_styles_and_scripts() {
	/*FEUILLES DE STYLE*/
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/css/theme.css' );
	wp_enqueue_style( 'footer', get_template_directory_uri() . '/css/footer.css' );
	// wp_enqueue_style( 'dashincons', get_stylesheet_directory_uri() . '/css/dashincons.css' );
	wp_enqueue_style( 'icones', get_template_directory_uri() . '/css/themify-icons/themify-icons.css' );
	wp_enqueue_style( 'enfant-style_3', get_template_directory_uri() . '/css/bootstrap-4.3.1.min.css' );
	wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/fontawesome-free-5.10.2-web/css/all.min.css' );
	wp_enqueue_style( 'daterangepicker-css', get_template_directory_uri() . '/css/daterangepicker.min.css' );
	wp_enqueue_style( 'icofont-css', get_template_directory_uri() . '/css/icofont/icofont.min.css' );
	// wp_enqueue_style( 'font-kaushan', get_stylesheet_directory_uri() . 'https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap' );
	/*FICHIERS SCRIPTS*/
	wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
	wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap-4.3.1.min.js', array(), '1.0.0', true );
	wp_enqueue_script( 'loader', get_template_directory_uri() . '/js/loader.js', array(), '1.0.0', true );
	wp_enqueue_script( 'infoBulleDate', get_template_directory_uri() . '/js/infoBulleDate.js', array(), '1.0.0', true );
	wp_enqueue_script( 'daterangepicker', get_template_directory_uri() . '/js/daterangepicker.min.js', array(), '1.0.0', true );
	wp_enqueue_script( 'moment', get_template_directory_uri() . '/js/moment.min.js', array(), '1.0.0', true );
	wp_enqueue_script( 'datePicker', get_template_directory_uri() . '/js/datePicker.js', array(), '1.0.0', true );
	wp_enqueue_script( 'modernizr-3.6.0', get_template_directory_uri() . '/js/modernizr-3.6.0.min.js', array(), '1.0.0', true );
	wp_enqueue_script( 'jquery.easing', get_template_directory_uri() . '/js/jquery.easing.min.js', array(), '1.0.0', true );
	wp_enqueue_script( 'jquery.magnific-popup', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_styles_and_scripts' );
 
 
/*Masquer l'admin bar*/
function wc_show_admin_bar() {
	return false;
}
add_filter('show_admin_bar' , 'wc_show_admin_bar');
 
/*Ajouter le menu*/
//Saisir nav_menus au pluriel au cas ou il aurait plusieurs menus
function wc_theme_support() {
	add_theme_support('menus');
	register_nav_menus(
		array(
			'main'     => 'Navigation principale',
			'footer'   => 'Pied de page',
		)
	);    
}
add_action('after_setup_theme','wc_theme_support');
 
function wc_main_nav() {
	wp_nav_menu(
		array(
			'menu'            => '',
			'container'       => 'false',
			'container_class' => '',
			'container_id'    => '',
			'menu_class'      => 'nav navbar-nav ml-auto',
			// 'menu_id'         => 'menu-{menu slug}',
			'echo'            => true,
			'fallback_cb'     => 'wp_page_menu',
			'before'          => '',//Avant le lien
			'after'           => '',//Après le lien
			'link_before'     => '',//Dans le lien avant le texte du lien
			'link_after'      => '',//Dans le lien après le texte du lien
			// 'link_after'       => '</span><i class="fa fa-2x"></i>',
			// 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
			'items_wrap'      => '<ul class="%2$s">%3$s<li class="nav-item"><a href="#"><i style="font-size: 1em !important" class="fa fa-search fa-fw"></i></a></li></ul>',
			'item_spacing'    => 'preserve',
			'depth'           => 0,
			'walker'          => '',
			'theme_location'  => 'main',
		)
	);
}
 
/*Ajout de la sidebar*/
function my_sidebar_widget() {
	register_sidebar( array(
 'name' => 'My sidebar', // c'est le nom de la sidebar qui apparaitra dans le backoffice
 'id' => 'my-sidebar-widget', // ceci est l'identifiant de la sidebar
 'before_widget' => '<div class="my-sidebar-widget">', // ouverture d'une div avant le widget avec une class pour agir dessus en CSS
 'after_widget' => '</div>', // fermeture de la div après le widget
 'before_title' => '<h3 class="my-sidebar-widget-title">', // action sur le titre de chaque widget avec un tag H3 et une class pour le CSS
 'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_sidebar_widget' );
 
//Pour afficher l'image à la une
add_theme_support( 'post-thumbnails' );
//Pour afficher le titre des pages dans la barre de titre
add_theme_support( 'title-tag' );

Donc tout ça pour vous dire que l'effet au scroll sur mes liens fonctionne bien lorsque mon ul est statique (c'est à dire ajoutée en dehors de mon code PHP) mais mon menu dynamique lui, ne veut rien savoir car il s'ffiche bien sûr mais l'effet au scroll ne fonctionne pas alors que j'épure complètement mon code en supprimant via jquery toutes les class ainsi que les attributs non nécessaires pour l'exemple et le rendu HTML est donc le même que si mon code était à part sur une page HTML voici le rendu:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- START NAVBAR -->
	<nav id="nav-tba" class="navbar navbar-light fixed-top navbar-expand-md bg-tba">
	<div class="container"><a class="navbar-brand" href="#"><img id="brand-logo" class="brand-logo" src="http://localhost/wc-v2/wordpress/wp-content/themes/web-connect-v2/img/logo-menu.jpg"></a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="navbar-toggler-icon">   
		<i class="fas fa-bars"></i>
	</span></button>
	<div class="scrollNav collapse navbar-collapse" id="navcol-1" data-spy="scroll" data-target="#page">
		<ul class="nav navbar-nav ml-auto">
			<li class="nav-item"><a href="http://localhost/wc-v2/wordpress/#methodologie">Lien</a></li>
		</ul>
		<ul class="nav navbar-nav ml-auto"><li id="menu-item-11" class="nav-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-11"><a href="http://localhost/wc-v2/wordpress/#qsn" aria-current="page">Accueil</a></li>
<li id="menu-item-12" class="nav-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-12"><a href="http://localhost/wc-v2/wordpress/#methodologie" aria-current="page">Méthodologie</a></li>
<li id="menu-item-13" class="nav-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13"><a href="http://localhost/wc-v2/wordpress/#prestations" aria-current="page">Prestations</a></li>
<li id="menu-item-14" class="nav-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-14"><a href="http://localhost/wc-v2/wordpress/#realisations" aria-current="page">Réalisations</a></li>
<li id="menu-item-15" class="nav-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-15"><a href="http://localhost/wc-v2/wordpress/#collaborateurs" aria-current="page">Témoignages</a></li>
<li id="menu-item-16" class="nav-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="http://localhost/wc-v2/wordpress/#contact" aria-current="page">Contact</a></li>
<li id="menu-item-17" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="http://localhost/wc-v2/wordpress/blog/">Blog</a></li>
<li class="nav-item"><a href="#"><i style="font-size: 1em !important" class="fa fa-search fa-fw"></i></a></li></ul>	</div>
</div>
</nav>

le rendu est en faisant CTRL+U et le voici dans F12:

Nom : Sans titre.jpg
Affichages : 709
Taille : 180,2 Ko

Ma question aurait peut-être dû être: quel est le moyen pour partir avec un menu simple sans les class et les attributs que rajoute wordpress (alors que je l'ai moi-même "nettoyé avec jQuery au préalable et malgré tout wordpress rajoute sa "sauce") un peu comme celui de l'image ci-dessus faite à partir d'une copie d'écran du débogueur?

J'espère ne pas avoir été trop long mais je ne savais pas comment faire autrement. Je vous remercie de votre aide.

**mathieu** · 06/10/2019, 23h38

que le code vienne d'un fichier HTML ou soit généré par wordpress ne change rien pour le navigateur.
est ce que vous pouvez mettre votre site sur un hébergement de test pour qu'on puisse tester le résultat ?

**TBA_78** · 10/10/2019, 19h21

Bonjour,

J'ai publié l'exemple ici:

https://www.web-connect.fr/test/

Invité · 11/10/2019, 11h53

Bonjour,

Le menu réel affiche l'URL absolue :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="nav-link" href="https://www.web-connect.fr/test/#section5" aria-current="page">Section 5</a>

Et là, ça ne fonctionne pas.

Le menu fonctionne bien avec l'ancre seule :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="nav-link active" href="#section5" aria-current="page">Section 5</a>

**TBA_78** · 14/10/2019, 14h35

Merci beaucoup, je n'avais pas fait attention à ça et c'est vrai que dans mon menu wp je n'ai mis que des url abolues.

Personnalisation du menu par défaut effet sur les liens au scroll au dessus des sections.

WordPress PHP

Vue hybride

Discussions similaires

Partager

Partager