Site avec Wordpress, intégration dans une page, en code HTML ?

Bonjour, j'espère que vous allez bien ?

Ma question concerne le site suivant : https://telepermanence.ch/

Sur la page, en peu plus bas, se trouve 4 vignettes de photos avec un petit résumé à chaque fois, voir photo ci-dessous.

Le site a été fait par une professionnelle mais elle ne semble pas en mesure de pouvoir me répondre correctement, je me permets donc de vous exposer ma question ici.

Ce que je voudrais, c'est que ces 4 vignettes soient dynamiques et qu'elles affichent les véritables dernières réalisations à chaque fois.

Sur mon ancien site, un script PHP allait interroger la base de données et faisaient afficher les 5 dernières réalisations.

Maintenant pour le site actuel, j'ai vu (je connais pas du tout Wordpress) que l'on peut intégrer du code HTML/CSS dans une page et j'aurai donc pu reprendre le script que j'avais avant pour afficher les dernières réalisations.

Ou alors, il y a un moyen plus "simple", selon vous ?

Un grand merci d'avance et une belle suite de journée !

Marc

Le site est fait avec Elementor (plugin de WordPress)

Il faudrait voir comment la page a été faite...


Sinon un 'vrai' professionnel aurait créé une boucle (WP_Query) custom pour afficher les 4 derniers articles d'une catégorie particulière ('réalisations' par exemple), c'est du blog simple... l'essence même de WordPress...

Salut,

Voici un exemple de boucle simplifié, elle sortira les liens et titres des 4 derniers articles épinglés et les retournera dans un h2 :

if( get_option( 'sticky_posts' ) ) {
  $query = new WP_Query( [
    'post__in' => get_option( 'sticky_posts' ), // cibler les posts "Mis en avant"
    'posts_per_page' => 4 // nombre d'items maximum
  ] );
  while ( $query->have_posts() ) : $query->the_post();
    $postTitle = get_the_title();
    $permalink = get_permalink();
    echo '<h2><a href="' . $permalink . '">' . $postTitle . '</a></h2>';
  endwhile;
  wp_reset_postdata();
}

Pour voir les options de cette boucle, c'est ici : class WP_Query {}
Modifié par Olivier C (01 Mar 2023 - 21:11)

Olivier C a écrit :
Salut,

Voici un exemple de boucle simplifié, elle sortira les liens et titres des 4 derniers articles épinglés et les retournera dans un h2 :

Oui, mais apparemment le contenu est créé avec l'éditeur d'Elementor...

alors à moins de créer un template spécifique pour afficher la page, ou alors si c'est Elementor Pro on peut intégrer des posts je crois...

<div class="elementor-element elementor-element-5267635a e-con-boxed e-con" data-id="5267635a" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;content_width&quot;:&quot;boxed&quot;}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-5c4a65ba elementor-widget elementor-widget-image" data-id="5c4a65ba" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<picture decoding="async" class="attachment-large size-large wp-image-283" loading="lazy">
<source type="image/webp" srcset="https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-1024x576.jpg.webp 1024w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-300x169.jpg.webp  300w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-768x432.jpg.webp  768w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-1536x864.jpg.webp  1536w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation.jpg.webp  1920w" sizes="(max-width: 800px) 100vw, 800px">
<img decoding="async" src="https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-1024x576.jpg" alt="" loading="lazy" srcset="https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-1024x576.jpg 1024w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-300x169.jpg  300w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-768x432.jpg  768w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation-1536x864.jpg  1536w,  https://telepermanence.ch/wp-content/uploads/2023/01/television-telepermanence-installation.jpg  1920w" sizes="(max-width: 800px) 100vw, 800px" width="800" height="450">
</picture>
															</div>
				</div>
		<div class="elementor-element elementor-element-653f957f e-con-boxed e-con" data-id="653f957f" data-element_type="container" data-settings="{&quot;content_width&quot;:&quot;boxed&quot;}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-6efcc4fa elementor-widget elementor-widget-heading" data-id="6efcc4fa" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Installation Télévision</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-5467c20a elementor-widget elementor-widget-text-editor" data-id="5467c20a" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Lausanne – Fourniture et installation d’une télévision Panasonic 55 pouces 4K.</p><p>Comme l’ancienne TV était en fin de vie, le client à profiter de prendre une taille plus grande</p>						</div>
				</div>
					</div>
				</div>
					</div>
				</div>

et tant qu'à faire, penser aussi à corriger les fautes de conjugaison (participe passé et verbe avoir sans accent), pour donner un minimum de professionnalisme au site web


Comme l’ancienne TV était en fin de vie, le client à profiter de prendre une taille plus grande
Modifié par lionel_css3 (02 Mar 2023 - 09:26)

Bonjour à vous et merci beaucoup pour votre aide

J'avoue n'avoir pas bien compris, il y a une nuance entre faire un site avec Wordpress et faire un site avec elementor ?

Vu que je ne connais rien à Wordpress...

Sur mon ancien site, j'avais fais la requête ci-dessous, cela voudrait dire que je ne pourrais "l'intégrer" à la page interphone ?

Encore un grand merci pour votre aide, j'apprécie

<?php
require_once('includes/base_de_donnees/connexion.php');
$connexion = $bdd->query('SELECT * FROM interphones ORDER BY `id` DESC LIMIT 20');
 
// On affiche chaque entrée une à une
while ($donnees = $connexion->fetch())
{
?>
<h2><?php echo $donnees['titre']; ?></h2>
<p><?php echo $donnees['extrait']; ?></p>
<img src="images/images_travaux/<?php echo $donnees['image']; ?>.jpg" alt="image illustrant <?php echo $donnees['titre']; ?>"/>  
</br></br>
<hr> 
<?php
}
 
$connexion->closeCursor(); // Termine le traitement de la requête
?>

C'est un monde à part, un peu...

WordPress est un CMS (content management system), système de gestion de contenu en Français.
Wordpress fonctionne avec une base de données et sur un système principal de Blog d'articles d'actualités.

Ça c'est la base, après on peut faire beaucoup d'autres choses avec WordPress.
Dans votre cas, les dernières réalisations pourraient s’apparenter à des articles, ou a des contenus similaires, et WordPress a des outils pour les afficher automatiquement, ou bien de façon spécifique avec un système de boucle.

Après, Elementor est une extension de WordPress (il ne peut pas fonctionner sans lui) qui permet -- principalement -- d'éditer le contenu des articles de WordPress mieux que ne le faisait l’ancien éditeur de WordPress qui lui est remplacé aujourd’hui par Gutenberg.

Dans votre cas, les 4 dernières réalisations ont été 'entrées en dur' dans le contenu d'une Page Wordpress (ou d'un article) et il n'y a pas d'automatisme possible dans ce cas...


Maintenant si vous ne connaissez pas le développement à l'intérieur de WordPress ça risque d'être compliqué à mon avis...

marc.suisse a écrit :


Sur mon ancien site, j'avais fais la requête ci-dessous, cela voudrait dire que je ne pourrais "l'intégrer" à la page interphone ?

Non, ça ne sera pas possible, WordPress a une mécanique particulière pour gérer les contenus et dialoguer avec la base de données, il faut utiliser les fonctions et la logique propres à WordPress pour créer et gérer des contenus...
Modifié par lionel_css3 (02 Mar 2023 - 16:25)

Hello, merci encore pour votre aide

Une chose que j'aimerais comprendre, on est d'accord que maintenant, on peut largement faire de sites internet "professionnel" avec wordpress sans devoir taper du code HTML/CSS comme auparavant ?

Sinon, si je me documente sur la boucle WP_Query, je pourrais arriver à faire ce que je souhaite ?

A terme, si cela est possible, je souhaite également créer une page style telepermanence.ch/création-nouvel-article qui me permettrait d'avoir un formulaire avec plusieurs champs, par exemple extrait-contenu-lien_de_la_photo pour pouvoir "envoyer" les nouvelles réalisations facilement.

Encore un grand merci et une toute belle suite de journée !

Meilleures salutations.

Marc
Modifié par marc.suisse (07 Mar 2023 - 15:02)

marc.suisse a écrit :

Une chose que j'aimerais comprendre, on est d'accord que maintenant, on peut largement faire de sites internet "professionnel" avec wordpress sans devoir taper du code HTML/CSS comme auparavant ?
Marc

Euhh, non pas du tout, c'est une légende urbaine ça...

Effectivement il existe des systèmes utilisables avec WordPress pour créer des sites, et surtout des contenus, par des opérations de drag and drop (Elementor, Divi, Nimus builder....) mais pour faire un site vraiment Professionnel qui peut répondre à tous les scénarios (comme dans ton cas), il faut (en + de notions de base de développement) bien connaitre l'architecture et le fonctionnement de WordPress, les principes de création de thèmes et de plugins, etc...

Tout cela demande beaucoup de code (même du code spécifique à WordPress) et un peu d'expérience qui ne se construit pas en 15 jours...

marc.suisse a écrit :
Hello, merci encore pour votre aide

A terme, si cela est possible, je souhaite également créer une page style telepermanence.ch/création-nouvel-article qui me permettrait d'avoir un formulaire avec plusieurs champs, par exemple extrait-contenu-lien_de_la_photo pour pouvoir "envoyer" les nouvelles réalisations facilement.

Marc

Oui, soit tu utilises un article (ou Page) de WodPress ou alors tu crées des custom-post-type avec des champs meta mais tout cela demande aussi beaucoup de code...