Octopusdesign/Octopus-React-Wp
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MAJ 18022024

Browse Source
This commit is contained in:
sebvtl728
2025-02-18 18:35:24 +01:00
parent 26ecadd238
commit 94c215a253
7 changed files with 429 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+4 -2
View File
@@ -17,10 +17,12 @@
<meta name="twitter:title" content="Titre par défaut - Bureau d’études"> <meta name="twitter:title" content="Titre par défaut - Bureau d’études">
<meta name="twitter:description" content="Bienvenue sur notre bureau d’études en Maîtrise d’œuvre."> <meta name="twitter:description" content="Bienvenue sur notre bureau d’études en Maîtrise d’œuvre.">
<meta name="twitter:image" content="https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"> <meta name="twitter:image" content="https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif">
<link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script"> <!-- <link rel="preload" href="/src/assets/vendor-BFTbvl5C.js" as="script"> -->
<link rel="preload" href="/assets/index-CfManBR6.css" as="style">
<link rel="stylesheet" href="/assets/index-CfManBR6.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx" defer></script>
</body> </body>
</html> </html>
frontend/package-lock.json
Generated
+312 -296
View File
File diff suppressed because it is too large Load Diff
frontend/src/components/Pages/Home.jsx
+1 -1
View File
@@ -153,7 +153,7 @@ const Home = () => {
Un service exceptionnel, une équipe formidable Un service exceptionnel, une équipe formidable
</Typography> </Typography>
<Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}> <Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
- Client 1 - zertides
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
frontend/src/components/Pages/ServiceQuatre.jsx
+69 -27
View File
@@ -1,64 +1,93 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Helmet } from "react-helmet-async"; // ✅ SEO
import ServicePageTemplate from "../ServicePageTemplate"; import ServicePageTemplate from "../ServicePageTemplate";
import { getPageById } from "../../wordpress"; import { getPageById } from "../../wordpress";
/**
* ✅ Fonction pour supprimer les balises HTML des champs WYSIWYG
*/
const stripHtml = (html) => {
const doc = new DOMParser().parseFromString(html || "", "text/html");
return doc.body.textContent || "";
};
const ServiceQuatre = () => { const ServiceQuatre = () => {
const [acfData, setAcfData] = useState(null); const [acfData, setAcfData] = useState(null);
const [seoData, setSeoData] = useState(null); // ✅ Stocke les données SEO de RankMath
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const pageId = 590; // 🔥 Remplace par l'ID réel de la page WordPress const pageId = 590; // 🔥 ID réel de la page WordPress
useEffect(() => { useEffect(() => {
const fetchACFData = async () => { const fetchPageData = async () => {
try { try {
const pageData = await getPageById(pageId); const pageData = await getPageById(pageId);
setAcfData(pageData.acf);
// ✅ Vérification des données ACF
if (pageData.acf) {
setAcfData(pageData.acf);
} else {
console.warn("⚠ Aucune donnée ACF trouvée !");
}
// ✅ Récupération des données SEO depuis RankMath
if (pageData.rankMath?.assessor?.serpData) {
const serpData = pageData.rankMath.assessor.serpData;
console.log("📢 Données SEO récupérées :", serpData);
setSeoData({
metaTitle: serpData.title || pageData.title?.rendered || "Titre par défaut",
metaDescription: serpData.description || "Description par défaut",
keywords: serpData.focusKeywords || "bureau d'études, construction, rénovation",
ogImage: serpData.ogImage || "https://picsum.photos/id/1018/1920/1080.webp",
});
} else {
console.warn("⚠ Aucune donnée SEO trouvée dans RankMath !");
}
} catch (error) { } catch (error) {
console.error("❌ Erreur récupération des champs ACF :", error); console.error("❌ Erreur récupération des champs ACF et SEO :", error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
fetchACFData(); fetchPageData();
}, []); }, []);
// ✅ Affichage du chargement en attendant les données ACF
if (loading) { if (loading) {
return <p>Chargement...</p>; return <p>Chargement...</p>;
} }
const serviceDetails = { const serviceDetails = {
// Hero title: acfData?.titre_principal || "Titre héros !",
title: acfData?.titre_principal || "Titre héros !", // ✅ Modifiable individuellement subtitle: stripHtml(acfData?.description_principal) || "Description, héros",
subtitle: <span dangerouslySetInnerHTML={{ __html: acfData?.description_principal || "Description, héros" }} />,
image: "https://picsum.photos/id/1021/1920/1080.webp", image: acfData?.hero_image || "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/02/service-securite-incendie.webp",
ctaText: "En savoir plus", ctaText: "En savoir plus",
ctaLink: "/contact", ctaLink: "/contact",
// section 1 interestTitle: acfData?.second_titre || "Titre interet",
interestTitle: acfData?.second_titre || "Titre interet", // ✅ Modifiable individuellement description: stripHtml(acfData?.second_description) || "Description interet",
description: <span dangerouslySetInnerHTML={{ __html: acfData?.second_description || "Description interet" }} />,
// section 2 desirTitle: "Titre",
desirTitle: "Titre", // ✅ Modifiable individuellement
features: [ features: [
{ {
title: acfData?.titre_carte_one || "Titre !", title: acfData?.titre_carte_one || "Titre !",
description: acfData?.description_carte_one || "Description.", description: stripHtml(acfData?.description_carte_one).substring(0, 100) + "...",
modalText: acfData?.description_carte_one || "Description Modal.", modalText: stripHtml(acfData?.description_carte_one) || "Description Modal.",
modalImage: "https://picsum.photos/id/300/800/400.webp", modalImage: "https://picsum.photos/id/300/800/400.webp",
}, },
{ {
title: acfData?.titre_carte_two || "Titre !", title: acfData?.titre_carte_two || "Titre !",
description: acfData?.description_carte_two || "Description.", description: stripHtml(acfData?.description_carte_two).substring(0, 100) + "...",
modalText: acfData?.description_carte_two || "Description Modal.", modalText: stripHtml(acfData?.description_carte_two) || "Description Modal.",
modalImage: "https://picsum.photos/id/301/800/400.webp", modalImage: "https://picsum.photos/id/301/800/400.webp",
}, },
{ {
title: acfData?.titre_carte_tree || "Titre !", title: acfData?.titre_carte_tree || "Titre !",
description: acfData?.description_carte_tree || "Description.", description: stripHtml(acfData?.description_carte_tree).substring(0, 100) + "...",
modalText: acfData?.description_carte_tree || "Description Modal.", modalText: stripHtml(acfData?.description_carte_tree) || "Description Modal.",
modalImage: "https://picsum.photos/id/302/800/400.webp", modalImage: "https://picsum.photos/id/302/800/400.webp",
}, },
], ],
@@ -66,18 +95,31 @@ const ServiceQuatre = () => {
carouselItems: [ carouselItems: [
{ {
title: "Portfolio Modern", title: "Portfolio Modern",
description: "Montrez vos compétences avec un portfolio unique.", description: "Description de l'image",
image: "https://picsum.photos/id/305/800/400.webp", image: "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/02/securite-incendie.webp",
width: 800,
height: 400,
}, },
{ {
title: "Blog SEO", title: "service securité S.S.I",
description: "Optimisez vos articles pour le référencement.", description: "Description de l'image",
image: "https://picsum.photos/id/306/800/400.webp", image: "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/02/service-securite-ssi.webp",
width: 800,
height: 400,
}, },
], ],
// ✅ Ajout du SEO dynamique récupéré via RankMath
seo: {
metaTitle: seoData?.metaTitle || "Pourquoi faire appel à un bureau d’études ?",
metaDescription: seoData?.metaDescription || "Description SEO par défaut",
keywords: seoData?.keywords || "bureau d'études, construction, rénovation",
ogImage: seoData?.ogImage || "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/02/service-securite-incendie.webp",
},
}; };
return <ServicePageTemplate {...serviceDetails} />; return <ServicePageTemplate {...serviceDetails} />
}; };
export default ServiceQuatre; export default ServiceQuatre;
frontend/src/wordpress.js
+1 -1
View File
@@ -226,7 +226,7 @@ export async function getPageById(pageId) {
try { try {
const response = await axios.get( const response = await axios.get(
`https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${pageId}?_fields=id,title,acf` `https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${pageId}?_fields=id,title,acf,_rank_math_seo_meta`
); );
return response.data; return response.data;
} catch (error) { } catch (error) {
frontend/vite.config.js
+21 -23
View File
@@ -4,25 +4,27 @@ import viteCompression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer'; import { visualizer } from 'rollup-plugin-visualizer';
import path from 'path'; import path from 'path';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
// Plugin React // ✅ Plugin React
react(), react(),
// Compression Brotli
// ✅ Compression Brotli & Gzip fusionnées
viteCompression({ viteCompression({
algorithm: 'brotliCompress', algorithm: 'brotliCompress', // Utilisation de Brotli en priorité
ext: '.br', ext: '.br',
threshold: 10240, // Fichiers supérieurs à 10 Ko seront compressés threshold: 10240, // Compression à partir de 10 Ko
}), }),
// Compression Gzip
viteCompression({ viteCompression({
algorithm: 'gzip', algorithm: 'gzip', // Compression Gzip en fallback
ext: '.gz', ext: '.gz',
threshold: 10240, threshold: 10240,
}), }),
// Visualiseur de bundle
// ✅ Visualisation des bundles (ouvre `stats.html` après le build)
visualizer({ visualizer({
open: true, // Ouvre automatiquement le fichier généré après le build open: false, // Mets `true` si tu veux ouvrir le fichier automatiquement
filename: 'stats.html', filename: 'stats.html',
template: 'treemap', template: 'treemap',
}), }),
@@ -30,7 +32,6 @@ export default defineConfig({
resolve: { resolve: {
alias: { alias: {
// Définit les alias pour des chemins simplifiés
'@pages': path.resolve(__dirname, './src/pages'), '@pages': path.resolve(__dirname, './src/pages'),
'@components': path.resolve(__dirname, './src/components'), '@components': path.resolve(__dirname, './src/components'),
'@assets': path.resolve(__dirname, './src/assets'), '@assets': path.resolve(__dirname, './src/assets'),
@@ -39,18 +40,17 @@ export default defineConfig({
build: { build: {
chunkSizeWarningLimit: 1000, chunkSizeWarningLimit: 1000,
target: 'esnext', // Cible des navigateurs modernes target: 'esnext', // ✅ Meilleure compatibilité avec les navigateurs modernes
minify: 'esbuild', // Minification avec esbuild pour une meilleure performance minify: 'esbuild', // ✅ Utilisation d'Esbuild pour un build rapide
sourcemap: false, // Désactive les sourcemaps en production (activez pour dev si nécessaire) sourcemap: true, // ✅ Active les source maps en production (utile pour le debug)
rollupOptions: { rollupOptions: {
output: { output: {
manualChunks(id) { manualChunks(id) {
// Création de chunks manuels pour optimiser les performances
if (id.includes('node_modules')) { if (id.includes('node_modules')) {
if (id.includes('@mui')) { if (id.includes('@mui')) {
return 'vendor_mui'; // Chunk spécifique à MUI return 'vendor_mui'; // ✅ Sépare MUI du reste des dépendances
} }
return 'vendor'; // Autres dépendances return 'vendor'; // ✅ Sépare les dépendances globales
} }
}, },
}, },
@@ -58,18 +58,16 @@ export default defineConfig({
}, },
server: { server: {
port: 3000, // Définit le port du serveur de développement port: 3000, // ✅ Serveur sur le port 3000
open: true, // Ouvre automatiquement le navigateur au démarrage open: true, // ✅ Ouvre le navigateur au démarrage
cors: true, // Autorise toutes les requêtes CORS cors: true, // ✅ Active les requêtes CORS
}, },
optimizeDeps: { optimizeDeps: {
include: [ include: [
'swiper/react', // Inclut swiper/react dans les dépendances optimisées 'swiper/react',
'swiper/modules', // Inclut swiper/modules dans les dépendances optimisées 'swiper/modules',
],
exclude: [
'cssnano', // Exclut les dépendances problématiques comme cssnano
], ],
}, },
}); });
server/wp-content/themes/hello-elementor-child/functions.php
+17
View File
@@ -305,3 +305,20 @@ function update_acf_mission($post, $request) {
} }
add_action('rest_after_insert_page', 'update_acf_mission', 10, 2); add_action('rest_after_insert_page', 'update_acf_mission', 10, 2);
function add_rankmath_to_rest_api($response, $post, $request) {
$seo_meta = get_post_meta($post->ID, 'rank_math_description', true);
$seo_title = get_post_meta($post->ID, 'rank_math_title', true);
if (!empty($seo_meta)) {
$response->data['seo_description'] = $seo_meta;
}
if (!empty($seo_title)) {
$response->data['seo_title'] = $seo_title;
}
return $response;
}
add_filter('rest_prepare_page', 'add_rankmath_to_rest_api', 10, 3);