Me : prière de générer un code php qui exécute les fonctions suivantes : 1. afficher le contenu téléchargé par REST API d’un article WordPress avec un ID spécifique en mode “Mobile First” 2. la page web à afficher comprend une barre fixe en haut (header), une barre fixe en bas (footer) et le contenu (main) au milieu, avec une largeur adaptée à l’écran d’un smartphone. 3. le header affiche le titre de l’article et un sélecteur déroulant de langue (en, fr, de, pt, lb) 4. le footer affiche quatre boutons sous forme d’icônes, de gauche à droite : une flèche “backward” vers le post avec le premier tag de l’article, un bouton HOME vers la page d’accueil (index.html), un bouton TOC vers la page index-toc.html, une flèche “forward” vers le post avec le deuxième tag de l’article. 5. les couleurs de fond des trois éléments header, footer et contenu sont spécifiées dans un fichier JSON indiqué dans le troisième tag de l’article
ChatGPT-4o : Voici un exemple complet de code PHP qui réalise ce que vous demandez, avec des appels à l’API REST de WordPress, une structure Mobile First et une lecture des couleurs depuis un fichier JSON. Le code est commenté pour plus de clarté.
<?php
// Récupérer l'ID de l'article depuis l'URL (ex: article.php?id=123)
$article_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
if ($article_id === 0) {
echo "Article ID manquant.";
exit;
}
// Charger l'article via REST API de WordPress
$wp_api_url = "https://votre-site.com/wp-json/wp/v2/posts/$article_id";
$response = file_get_contents($wp_api_url);
if (!$response) {
echo "Impossible de récupérer l'article.";
exit;
}
$post = json_decode($response, true);
$title = $post['title']['rendered'];
$content = $post['content']['rendered'];
$tags = $post['tags'];
// Charger les couleurs depuis le fichier JSON (indiqué dans le 3e tag)
$color_json = null;
if (count($tags) >= 3) {
$tag_id = $tags[2];
$tag_api = file_get_contents("https://votre-site.com/wp-json/wp/v2/tags/$tag_id");
$tag_info = json_decode($tag_api, true);
$json_url = trim($tag_info['description']);
// Chargement du fichier JSON
$colors = json_decode(file_get_contents($json_url), true);
} else {
$colors = [
"header" => "#333",
"main" => "#fff",
"footer" => "#333"
];
}
// Déterminer les URLs vers les articles par tags
$prev_post_url = "#";
$next_post_url = "#";
$base_url = "https://votre-site.com";
// Fonction pour récupérer un article via tag
function get_article_url_by_tag($tag_id) {
global $base_url;
$api = "$base_url/wp-json/wp/v2/posts?tags=$tag_id&per_page=1";
$response = file_get_contents($api);
$posts = json_decode($response, true);
if (!empty($posts)) {
return "article.php?id=" . $posts[0]['id'];
}
return "#";
}
if (isset($tags[0])) {
$prev_post_url = get_article_url_by_tag($tags[0]);
}
if (isset($tags[1])) {
$next_post_url = get_article_url_by_tag($tags[1]);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?= htmlspecialchars($title) ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header, footer {
position: fixed;
width: 100%;
left: 0;
padding: 1em;
color: white;
z-index: 1000;
}
header {
top: 0;
background-color: <?= $colors['header'] ?>;
display: flex;
justify-content: space-between;
align-items: center;
}
main {
margin-top: 70px;
margin-bottom: 70px;
background-color: <?= $colors['main'] ?>;
padding: 1em;
}
footer {
bottom: 0;
background-color: <?= $colors['footer'] ?>;
display: flex;
justify-content: space-around;
align-items: center;
}
.icon-btn {
background: none;
border: none;
color: white;
font-size: 24px;
}
select {
font-size: 1em;
}
</style>
<script>
function changeLang(select) {
const lang = select.value;
const url = new URL(window.location.href);
url.searchParams.set('lang', lang);
window.location.href = url.toString();
}
</script>
</head>
<body>
<header>
<div><?= htmlspecialchars($title) ?></div>
<select onchange="changeLang(this)">
<option value="en">EN</option>
<option value="fr">FR</option>
<option value="de">DE</option>
<option value="pt">PT</option>
<option value="lb">LB</option>
</select>
</header>
<main>
<?= $content ?>
</main>
<footer>
<a href="<?= $prev_post_url ?>" class="icon-btn">←</a> <!-- Flèche gauche -->
<a href="index.html" class="icon-btn">⌂</a> <!-- Home -->
<a href="index-toc.html" class="icon-btn">☰</a> <!-- TOC -->
<a href="<?= $next_post_url ?>" class="icon-btn">→</a> <!-- Flèche droite -->
</footer>
</body>
</html>
🔍 Explication rapide :
- 📲 Mobile First : largeur adaptative via
meta viewport, mise en page fluide.
- 🧱 Disposition fixe : header + footer en haut et en bas, contenu entre les deux.
- 🌍 Langues : sélection modifie l’URL avec le paramètre
lang.
- 🎨 Thèmes dynamiques : couleurs chargées depuis un fichier JSON lié au 3e tag.
- 🔁 Navigation : boutons dynamiques vers les articles liés aux 1er et 2e tags.
ChatGPT-4o : Souhaitez-vous que je vous crée aussi un exemple de fichier JSON de couleurs, ou que j’adapte le tout pour être utilisé comme un plugin WordPress ?
Me : oui, Plugin WordPress
✅ 1. Créez un plugin : ki-laeirbud-viewer.php
Placez ce fichier dans :
wp-content/plugins/ki-laeirbud-viewer/ki-laeirbud-viewer.php
<?php
/**
* Plugin Name: KI-Léierbud Post Viewer
* Description: Affiche un article WordPress en mode mobile-first avec navigation, via le shortcode [ki_laeirbud_post id=123].
* Version: 1.0
* Author: Votre Nom
*/
add_shortcode('ki_laeirbud_post', 'ki_laeirbud_render_post');
function ki_laeirbud_render_post($atts) {
$atts = shortcode_atts(['id' => 0], $atts);
$post_id = intval($atts['id']);
if ($post_id === 0) return "Article ID manquant.";
$post = get_post($post_id);
if (!$post) return "Article introuvable.";
$title = get_the_title($post);
$content = apply_filters('the_content', $post->post_content);
$tags = wp_get_post_tags($post_id, ['fields' => 'all']);
// Récupération des couleurs depuis le 3e tag (s'il existe)
$colors = ['header' => '#222', 'main' => '#fff', 'footer' => '#333'];
if (isset($tags[2])) {
$json_url = trim($tags[2]->description);
$json = wp_remote_get($json_url);
if (!is_wp_error($json)) {
$data = json_decode(wp_remote_retrieve_body($json), true);
if (is_array($data)) {
$colors = array_merge($colors, array_intersect_key($data, $colors));
}
}
}
// Navigation par tags
$prev_url = '#';
$next_url = '#';
if (isset($tags[0])) {
$prev = get_posts(['tag_id' => $tags[0]->term_id, 'numberposts' => 1]);
if ($prev) $prev_url = get_permalink($prev[0]->ID);
}
if (isset($tags[1])) {
$next = get_posts(['tag_id' => $tags[1]->term_id, 'numberposts' => 1]);
if ($next) $next_url = get_permalink($next[0]->ID);
}
ob_start();
?>
<style>
.ki-wrapper {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.ki-header, .ki-footer {
position: fixed;
width: 100%;
padding: 1em;
color: white;
z-index: 1000;
}
.ki-header {
top: 0;
background-color: <?= esc_attr($colors['header']) ?>;
display: flex;
justify-content: space-between;
align-items: center;
}
.ki-footer {
bottom: 0;
background-color: <?= esc_attr($colors['footer']) ?>;
display: flex;
justify-content: space-around;
}
.ki-main {
margin-top: 70px;
margin-bottom: 70px;
padding: 1em;
background-color: <?= esc_attr($colors['main']) ?>;
}
.ki-icon {
font-size: 24px;
color: white;
text-decoration: none;
}
.ki-lang-select {
font-size: 1em;
}
</style>
<div class="ki-wrapper">
<div class="ki-header">
<div><?= esc_html($title) ?></div>
<select class="ki-lang-select" onchange="window.location.search='lang='+this.value;">
<option value="en">EN</option>
<option value="fr">FR</option>
<option value="de">DE</option>
<option value="pt">PT</option>
<option value="lb">LB</option>
</select>
</div>
<div class="ki-main"><?= $content ?></div>
<div class="ki-footer">
<a href="<?= esc_url($prev_url) ?>" class="ki-icon">←</a>
<a href="<?= esc_url(home_url('/')) ?>" class="ki-icon">⌂</a>
<a href="<?= esc_url(home_url('/index-toc.html')) ?>" class="ki-icon">☰</a>
<a href="<?= esc_url($next_url) ?>" class="ki-icon">→</a>
</div>
</div>
<?php
return ob_get_clean();
}
📁 2. Structure du plugin
/wp-content/plugins/
└── ki-laeirbud-viewer/
└── ki-laeirbud-viewer.php
🧪 3. Utilisation dans un article ou une page WordPress
Dans n’importe quelle page ou article WordPress, ajoutez ce shortcode :
[ki_laeirbud_post id=123]
(remplacez 123 par l’ID de l’article cible)
🎨 4. Exemple de fichier JSON (couleurs)
Créez un fichier .json quelque part en ligne (par exemple sur votre site) :
{
"header": "#005f73",
"main": "#f0f0f0",
"footer": "#0a9396"
}
Collez l’URL de ce fichier dans la description du 3e tag de votre article.
