Intégrer slider dans entête

WordPress :6.1
Statut : résolu

Ce sujet contient 22 réponses, 3 participants et a été mis à jour pour la dernière fois par AssoN.P, le il y a 2 mois et 2 semaines.

15 sujets de 1 à 15 (sur un total de 23)

1 2 →

Auteur

Messages
30 décembre 2022 à 21 h 23 min #2438155
AssoN.P
Participant

Chevalier WordPress
145 contributions
Bonjour,

Ma configuration WP actuelle :
– Version de WordPress : 6.1.1
– Version de PHP/MySQL : 7.4.33 / 5.5.5
– Thème utilisé : Flash Child
– Thème URI : https://themegrill.com/themes/flash
– Extensions en place : Child Theme Configurator (2.6.0), Forum_wordpress_fr (4.2), MetaSlider (3.28.2)
– Adresse du site : https://ecoleblaisydecouvertes.legtux.org/FFP89
– Nom de l’hébergeur : Apache

Problème(s) rencontré(s) :

Je voudrais intégrer un slider dans le header de ce site à la place de l’image actuelle.

J’ai donc créé un silder avec Metaslider.

J’obtiens ce code php, mais à quel endroit dois-je l’intégrer (à quelle ligne) dans le header.php (du thème enfant) ?
```
<?php echo do_shortcode('[metaslider id="36"]'); ?>
```
Merci.
- Ce sujet a été modifié le il y a 2 mois et 3 semaines par AssoN.P.
- Ce sujet a été modifié le il y a 2 mois et 3 semaines par AssoN.P.
31 décembre 2022 à 10 h 51 min #2438269

momofr@free.fr
Modérateur

Maître WordPress
5633 contributions

Salut, d’après le code c’est dans la balise div : wp-custom-header.

Tu utilises un thème Premium, les forums WPFR sont dédiés aux thèmes et extensions gratuits.

Sans disposer de ce thème il est impossible de t’aider.

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.

31 décembre 2022 à 13 h 46 min #2438289
AssoN.P
Participant

Chevalier WordPress
145 contributions
Bonjour,

Non, je n’utilise pas de thème premium (ils sont payants, non ?). J’ai intégré ce thème directement depuis l’admin de mon site.

Je vais en chercher un autre.
- Cette réponse a été modifiée le il y a 2 mois et 3 semaines par AssoN.P.
31 décembre 2022 à 14 h 55 min #2438298
AssoN.P
Participant

Chevalier WordPress
145 contributions
J’ai trouvé un autre thème (boldR Lite).

1) Intégrer le slider à la place de l’image est-il envisageable ?

2) Je voudrais également ajouter un logo à cet endroit. L’option « intégrer un logo » n’est pas présente dans ce thème : est-ce possible en passant par du code ?

Merci.
- Cette réponse a été modifiée le il y a 2 mois et 3 semaines par AssoN.P.
31 décembre 2022 à 17 h 26 min #2438316
AssoN.P
Participant

Chevalier WordPress
145 contributions
Re,

En regardant mieux, l’option « intégrer logo » est bien présente, mais dès que j’en intègre un, il remplace le titre du site…
- Cette réponse a été modifiée le il y a 2 mois et 3 semaines par AssoN.P.
- Cette réponse a été modifiée le il y a 2 mois et 3 semaines par AssoN.P.
31 décembre 2022 à 19 h 37 min #2438329
ferman
Participant

Maître WordPress
5968 contributions
Bonjour,

Vous pouvez essayer ce qui suit:
1. il vous faut un thème enfant et y copier le header du thème parent
2. Pour le slider, dans les réglages du thème vous choisissez sur quelles pages vous voulez mettre votre image d’en-tête .
3. dans le header du thème enfant, vous modifiez les lignes comme indiqué ci dessous
4. pour le logo, il apparaîtra à gauche. Si vous voulez qu’il soit à droite, il faudra rectifier sa position avec des CSS. Ce ne sera pas forcément simple.
Attention, ceci n’est valable que pour votre thème. Si vous voulez changer le shortcode du slider ou le logo, il faudra modifier le code dans le header.
```
// POUR LE SLIDER
				?>
				<div id="header-image" class="container">
					<img src="<?php header_image(); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt='' />
				</div>
				<?php

	//modifier en:

				?>
				<div id="header-image" class="container">
					<?php echo do_shortcode('[metaslider id="36"]'); ?>
				</div>
				<?php
				
				
// POUR LE LOGO				
				<div class="container">
				<div id="logo">
					<a href="<?php echo esc_url( home_url() ); ?>" title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'>
						<?php
						if ( get_theme_mod( 'boldr_logo' ) ) :
				
	//modifier en:							
				
				<div class="container">
				<div id="logo">
					<a href="<?php echo esc_url( home_url() ); ?>" title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'>
					<img src = "http://localhost/annelaureeustache-studio/wp-content/uploads/2015/08/logo-ale-style-et-concept-doré.jpg">
						<?php
						if ( get_theme_mod( 'boldr_logo' ) ) :
```
1 janvier 2023 à 19 h 11 min #2438429
AssoN.P
Participant

Chevalier WordPress
145 contributions
Bonjour,

Merci, pour le slider c’est nickel !

Encore quelques petites questions.
1. Je voudrais que mon menu principal (celui du haut) soit fixe (c’est-à-dire qu’il reste apparent en haut de la fenêtre lors d’un scrolling vertical). L’option n’étant pas présente dans les paramètres, est-ce quand même possible ?
2. Sur smartphone, en format portrait, le site ne prend pas toute la largeur (marge à gauche et droite) alors qu’en format paysage si. Est-il possible de supprimer ces marges ?
3. Est-il possible également de faire apparaître le slogan sous le titre (comme classiquement) ? Car actuellement sur smartphone en mode portrait il y a une marge importante entre le titre et le slogan.
Bonne et heureuse année.
- Cette réponse a été modifiée le il y a 2 mois et 3 semaines par AssoN.P.
1 janvier 2023 à 20 h 23 min #2438434
AssoN.P
Participant

Chevalier WordPress
145 contributions
4. Dernière petite chose et je ne vous embête plus…
Dans les articles, je ne veux pas voir apparaître la date de création et l’auteur : j’ai donc ajouté ce code qui semble fonctionner (est-il correct ?)
```
.post-category, .postmetadata span { display: none; }
```
Mais la marge correspondant à l’emplacement de ces blocs est toujours là… Est-il possible de la supprimer ?

Merci.
1 janvier 2023 à 21 h 20 min #2438442
ferman
Participant

Maître WordPress
5968 contributions
Bonjour,

Pour le menu, je pense que le mieux est d’utiliser une extension (voir ICI). Pour la classe de votre menu ce sera « #navbar.container » (pour laptop) Si vous voulez aussi pour mobile , ce sera « .menu-container « .

Pour les marges, je n’ai pas vu de différence sur mobile entre portrait et paysage. Je re-regarderai tranquillement.

Pour l’espace sur mobile, essayez ça dans les CSS additionnelles du thème.
```
@media screen and (max-width:760px){
#header #logo,#header #tagline{padding-bottom:0px;
	}
#header #tagline{padding-top:0px;
	}
}
```
1 janvier 2023 à 23 h 53 min #2438456
AssoN.P
Participant

Chevalier WordPress
145 contributions
Bonjour,

Merci pour ces 2 astuces.

Concernant les marges sur mobile, voici ce que j’ai : en portrait en paysage

J’aimerais être aussi en full screen en portrait.

Est-il possible également de faire apparaître le slogan sous le titre (comme classiquement) ?

Bonne nuit.
- Cette réponse a été modifiée le il y a 2 mois et 3 semaines par AssoN.P.
3 janvier 2023 à 0 h 28 min #2438613
AssoN.P
Participant

Chevalier WordPress
145 contributions
Bonjour,

Concernant le slogan sous le titre, problème résolu avec ce code.
```
#tagline {
  float: none;
  clear: left;
  padding-top: 0;
}
#logo {
  padding-bottom: 0;
}
```
Si vous avez des idées pour le reste…

Merci.
3 janvier 2023 à 19 h 34 min #2438727
ferman
Participant

Maître WordPress
5968 contributions
Bonjour,

Essayez cette règle CSS et dites-moi ce que vous en pensez; il n’y a plus aucune marge visible pour les petits écrans.
```
@media only screen and (max-width:1000px){
body #main-wrap {width:100%;
	}
}
```
4 janvier 2023 à 0 h 11 min #2438749
AssoN.P
Participant

Chevalier WordPress
145 contributions
Bonjour,

ça ne supprime pas les marges (la largeur des éléments reste inchangée), mais il n’y a plus les bandes noires, l’ensemble est blanc, ce qui supprime cette impression « d’étroitesse ». Donc c’est très bien, merci.

Encore une petite chose : dans les articles, je ne veux pas voir apparaître la date de création et l’auteur : j’ai donc ajouté ce code qui semble fonctionner (est-il correct ?)
```
.post-category, .postmetadata span { display: none; }
```
Mais la marge correspondant à l’emplacement de ces blocs est toujours là… Est-il possible de la supprimer (de façon à ce que la largeur occupée par les éléments soit plus grande) ?

Merci.
4 janvier 2023 à 10 h 12 min #2438778
ferman
Participant

Maître WordPress
5968 contributions
Bonjour,

Essayez plutôt ça:
```
.postmetadata { display: none;
}
#main-content img.wp-post-image{width:100%;
}
#main-content .post-contents {margin-left:0px;
}
```
la première règle va supprimer la marge gauche pour l’image; la deuxième met la largeur de l’image à celle du contenu; la troisième supprime la marge gauche pour le contenu de l’article. Tous ces paramètres sont modifiables.
4 janvier 2023 à 12 h 00 min #2438792
AssoN.P
Participant

Chevalier WordPress
145 contributions
Bonjour,

Le code supprime bien la marge à gauche, mais en crée une à droite…
- Cette réponse a été modifiée le il y a 2 mois et 2 semaines par AssoN.P.
Auteur

Messages