Discussion :

[laurentSc]

Bonjour,

Sur mon site, je voudrais obtenir cette apparence :


A savoir que je ne suis pas un grand connaisseur de Wordpress. Aussi, je me demande si c'est possible avec un thème gratuit ou est-ce qu'il faut investir ? On m'a recommandé Divi...Mais c'est pas donné :

La licence Lifetime de Divi vous coutera environ 255€ une fois pour toute (cela pourra fluctuer en fonction du taux de change).

Qu'en pensez-vous ?

Mon site actuel, avec un thème gratuit (Sydney) : https://pasdpanique.fr/ (j'avais démarré avec un autre thème)

[mathieu]

wordpress ne limite rien à ce qu'il est possible de faire. donc là la question est de savoir si vous avez le code html et css qui produit ce que vous souhaitez.
si c'est le cas, vous pourrez avoir ce résultat dans wordpress soit en développant votre propre thème, soit en adaptant un thème existant, cela dépend du code html.

[laurentSc]

Merci pour votre réponse mathieu. Je sais qu'on peut faire plein de choses avec Wordpress, mais malheureusement, je n'ai pas votre compétence.
Développer mon propre thème reviendrait pour moi à gravir l'Everest. S'approcher du besoin en codant du html et du CSS, je pense pouvoir le faire (avec l'aide de DVP !). Par contre, j'ai même pas trouvé un thème qui me permettrait d'inclure l'image d'en-tête (qui pèse 7351kO...) :

[Christophe]

Par contre, j'ai même pas trouvé un thème qui me permettrait d'inclure l'image d'en-tête (qui pèse 7351kO...)

Ce n'est pas un prob. de thème, mais à mon avis de limitation d'upload dans le php.ini du serveur. Il suffit de baisser la taiile de l'image, taille qui te pénalisera en tant de chargement.

[SpaceFrog]

Développer mon propre thème reviendrait pour moi à gravir l'Everest.

Ce n'est pas si compliqué que cela de développer son propre thème, ni de modifier un thème existant.

Pour rationaliser ton image pour le web il existe des petits utilitaires qui vont te permettre de reduire drastiquement la taille et donc accélerer le chargement.
Bien que pas mal de viewer en soient pourvus dans leurs outils, il m'arrive d'utilier celui ci: https://riot-optimizer.com/

[laurentSc]

Merci pour vos réponses.
Dommage qu'il ne soit pas possible d'héberger l'image chez un hébergeur d'image puis de déclarer l'URL...
J'ai réduit mon image avec https://www.faststone.org (je suis habitué à utiliser celui-là) 355kO.
Par contre une fois que je sélectionne mon image dans la médiathèque puis fais sélectionner et recadrer, la partie gauche est claire et la partie droite assombrie. Si je déplace le curseur vers la gauche et rend presque tout assombri (on peut pas le déplacer vers la droite) puis fais recadrer l'image, message d'erreur : Une erreur est survenue lors du recadrage de votre image. Donc, comment faire ?

[SpaceFrog]

Dommage qu'il ne soit pas possible d'héberger l'image chez un hébergeur d'image puis de déclarer l'URL...

ben si tu peux le faire ...

Tu peux meme uploader ton image dans les fichiers du thème et l'appeller dans ton css ou en src d'une balise img



Par exemple tu mets à la racine du theme un répertoire MesImages

du coup dans functions tu déclares des constantes

Code :

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

define('THEME_PICS', get_stylesheet_directory_uri()."/MesImages/");

Ainsi dans ton code php tu peux mettre les images :

Code :

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

<img src="<?php echo THEME_PICS.'nomfichierimage.png' " />

Mais je pense que tu as plutot un souci de css ...
il suffirait de mettre ton image en arrière plan d'un div et de gérer son positionnement en cover

[mathieu]

Une erreur est survenue lors du recadrage de votre image

cette erreur me fait penser à un souci de configuration du serveur.
avez-vous l'extension php "imagick" ou "image" ? suivant l'extension, vérifier aussi que le format de votre image est géré.

la configuration recommandée est détaillé là :
https://make.wordpress.org/hosting/h...r-environment/

[SpaceFrog]

J'ai un souci identique avec l'outil de suppression du fond des images, il me mets une erreur can't upload ou un turc du genre ...

[laurentSc]

ben si tu peux le faire ...

et comment STP ? Sachant que si je clique sur le bouton Ajouter une nouvelle image, il me donne le choix entre Téléverser des fichiers et Médiathèque. Donc aucun de ces choix ne permet de saisir une URL...
Sinon, merci pour le moyen de gérer ça par du code...

Je n'ai installé aucune des 2 extensions citées par mathieu.

[laurentSc]

Ainsi dans ton code php tu peux mettre les images :...

Quand tu dis mon code PHP, je suppose qu'il s'agit de header.php. Pour le thème que j'utilise (sydney), voici header.php :

Code php :

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
<?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Sydney
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?> <?php sydney_do_schema( 'html' ); ?>>
 
<span id="toptarget"></span>
 
<?php wp_body_open(); ?>
 
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
 
<div id="page" class="hfeed site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
 
	<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>	
 
	<?php do_action( 'sydney_header' ); ?>
 
	<?php do_action('sydney_after_header'); ?>
 
	<div class="sydney-hero-area">
		<?php sydney_slider_template(); ?>
		<div class="header-image">
			<?php sydney_header_overlay(); ?>
			<?php if ( ( get_theme_mod('front_header_type','nothing') == 'image' && is_front_page() ) || (get_theme_mod('site_header_type') == 'image' && !is_front_page() ) ) : ?>
				<?php $shop_thumb = get_the_post_thumbnail_url( get_option( 'woocommerce_shop_page_id' )); ?>
				<?php if ( class_exists( 'Woocommerce' ) && is_shop() && !$shop_thumb  ) : ?>
					<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
				<?php endif; ?>
			<?php endif; ?>
		</div>
		<?php sydney_header_video(); ?>
 
		<?php do_action('sydney_inside_hero'); ?>
	</div>
 
	<?php do_action('sydney_after_hero'); ?>
 
	<div id="content" class="page-wrap">
		<div class="container content-wrapper">
			<div class="row">

A mon avis, il en manque un bout vu que les 3 div de la fin ne sont pas fermés (ou alors, ils sont refermés dans un autre fichier).
EDIT : je viens de voir que le commentaire de début du fichier dit ça !

Peux-tu me dire où mettre <img src="<?php echo THEME_PICS.'nomfichierimage.png' " /> ?

[laurentSc]

Bonsoir,
ça serait-y pas à la place de <img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"> ?

[laurentSc]

Bonsoir,

j'ai tenté de suivre les indications que tu donnes, SpaceFrog, dans le post #7, mais aucune image n'est affichée. Merci de m'indiquer où est mon erreur.

Voici exactement ce que j'ai fait :

1- dans wp-content -> themes, création du répertoire MesImages

2- dans le répertoire MesImages, je mets le fichier Bandeau.jpg qui 355kO et que voici :



3- dans functions.php, tout à fait à la fin, je rajoute la ligne define('THEME_PICS', get_stylesheet_directory_uri()."/MesImages/");.

4- dans header.php, je mets ... j'arrête car je viens de voir que c'est pas bon :

Code php :

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

1
2
3
 <?php if ( class_exists( 'Woocommerce' ) && is_shop() && !$shop_thumb  ) : ?>
                   <img src="<?php echo THEME_PICS.'Bandeau.jpg' ?>" />
                <?php endif; ?>

ce n'est pas du Woocommerce...

Du coup, ma question du post #11 reste...

[SpaceFrog]

Où as tu mis l'image sur le serveur ???

Tu dois la mettre dans le répertoire de ton thème :

Tu as créé le répertoire MesImages ?

Ensuite tu uploades ton image en FTP dasn le répertoire

[Racine du site] > wp-content >themes > [nom du thème] > MesImages >

[laurentSc]

Super,

hier soir, idées pas claires, donc j'avais tout bien fait sauf que le répertoire MesImages, au lieu de le mettre dans [Racine du site] > wp-content >themes > [nom du thème] > MesImages >, je l'avais dans [Racine du site] > wp-content >themes > MesImages >.
et le html <img...> était conditionné par <?php if ( class_exists( 'Woocommerce' ) && is_shop() && !$shop_thumb ) : ?> donc j'ai enlevé la condition et ça marche

Par contre, ma question du post #10 reste d'actualité même si j'en ai moins besoin (mais pour la culture)

A noter que la solution que tu m'as proposée, ça s'invente pas ; il faut connaître...

Je clos le sujet et si des difficultés pour réaliser les autres points du post #1, je crée une autre discussion.