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

interation opengraph

Browse Source
This commit is contained in:
sebvtl728 2025-01-15 09:50:46 +01:00
parent 7c25479236
commit a9f17ff11f
7 changed files with 5105 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/api.js
View File

@ -1,8 +1,22 @@
import axios from 'axios';
// Création de l'instance Axios
const api = axios.create({
baseURL: 'https://preprod.octopusdesign.fr/api-octopus/server/wp-json',
withCredentials: true,
});
export default api;
// Méthode pour récupérer les données OpenGraph d'un article spécifique
export const fetchPostWithOG = async (postId) => {
try {
const response = await api.get(`/wp/v2/posts/${postId}`);
const { opengraph } = response.data; // Les métadonnées OpenGraph doivent être disponibles ici
return opengraph;
} catch (error) {
console.error('Erreur lors de la récupération des données OpenGraph :', error);
throw error;
}
};
// Exportation de l'instance Axios par défaut
export default api;

1
frontend/src/components/Pages/Post.jsx
View File

@ -3,6 +3,7 @@ import { Grid, Card, CardContent, CardMedia, Typography, Box } from '@mui/materi
import api from '../../api'; // Adaptez le chemin vers l'instance Axios
const Post = () => {
const [posts, setPosts] = useState([]);

39
frontend/src/components/Pages/PostPage.jsx Normal file
View File

@ -0,0 +1,39 @@
import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useParams } from "react-router-dom";
import { fetchPostWithOG } from "../../api"; // Assure-toi que le chemin est correct
const PostPage = () => {
const { id } = useParams();
const [ogData, setOgData] = useState(null);
useEffect(() => {
const getOgData = async () => {
try {
const data = await fetchPostWithOG(id);
setOgData(data);
} catch (error) {
console.error("Erreur lors de la récupération des métadonnées OpenGraph :", error);
}
};
getOgData();
}, [id]);
if (!ogData) return <div>Chargement...</div>;
return (
<div>
<Helmet>
<meta property="og:title" content={ogData.title} />
<meta property="og:description" content={ogData.description} />
<meta property="og:image" content={ogData.image} />
</Helmet>
<h1>{ogData.title}</h1>
<p>{ogData.description}</p>
<img src={ogData.image} alt={ogData.title} />
</div>
);
};
export default PostPage;

64
frontend/src/components/SEO.jsx
View File

@ -1,23 +1,53 @@
import React from 'react';
import { Helmet } from 'react-helmet-async';
import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import axios from "axios";
const SEO = ({ title, description, canonicalUrl }) => {
return (
<Helmet>
{/* Title et Description */}
<title>{title || 'Titre par défaut'}</title>
<meta name="description" content={description || 'Description par défaut.'} />
{canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
const SEO = ({ postId, defaultTitle, defaultDescription, defaultCanonicalUrl, defaultOgImage }) => {
const [metaData, setMetaData] = useState({
title: defaultTitle || "Titre par défaut",
description: defaultDescription || "Description par défaut",
canonicalUrl: defaultCanonicalUrl || "",
ogTitle: "",
ogDescription: "",
ogImage: defaultOgImage || "https://votre-site.com/default-image.jpg",
});
{/* Preconnect */}
<link rel="preconnect" href="https://octopusdesign.fr" />
<link rel="preconnect" href="https://preprod.octopusdesign.fr" />
useEffect(() => {
if (!postId) return;
{/* DNS Prefetch */}
<link rel="dns-prefetch" href="https://octopusdesign.fr" />
<link rel="dns-prefetch" href="https://preprod.octopusdesign.fr" />
</Helmet>
);
const fetchMetaData = async () => {
try {
const response = await axios.get(
`https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${postId}`
);
const ogData = response.data.rank_math_og || {};
setMetaData((prev) => ({
...prev,
title: ogData.og_title || prev.title,
description: ogData.og_description || prev.description,
ogTitle: ogData.og_title || "",
ogDescription: ogData.og_description || "",
ogImage: ogData.og_image || prev.ogImage,
}));
} catch (error) {
console.error("Erreur lors de la récupération des données SEO :", error);
}
};
fetchMetaData();
}, [postId]);
return (
<Helmet>
<title>{metaData.title}</title>
<meta name="description" content={metaData.description} />
{metaData.canonicalUrl && <link rel="canonical" href={metaData.canonicalUrl} />}
<meta property="og:title" content={metaData.ogTitle || metaData.title} />
<meta property="og:description" content={metaData.ogDescription || metaData.description} />
<meta property="og:image" content={metaData.ogImage} />
</Helmet>
);
};
export default SEO;

64
frontend/src/main.jsx
View File

@ -1,36 +1,48 @@
import React,{ lazy, Suspense } from "react";
import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme";
import { HelmetProvider } from "react-helmet-async";
import SimpleReactLightbox from "simple-react-lightbox";
import SimpleReactLightbox from "simple-react-lightbox";
// Lazy loading des pages
const Home = lazy(() => import('./components/pages/Home.jsx'));
const About = lazy(() => import('./components/Pages/About'));
const Contact = lazy(() => import('./components/Pages/Contact'));
// import Home from "./components/Pages/Home.jsx";
import Post from "./components/Pages/Post";
// import About from "./components/Pages/About";
// import Contact from "./components/Pages/Contact";
import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche
import Header from "./components/Header";
import Footer from './components/Footer';
const Post = lazy(() => import('./components/Pages/Post'));
const PostPage = lazy(() => import('./components/Pages/PostPage')); // Nouveau composant pour un post spécifique
const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche
// Import des services
import ServiceUn from "./components/Pages/ServiceUn.jsx";
import ServiceDeux from "./components/Pages/ServiceDeux.jsx";
import ServiceTrois from "./components/Pages/ServiceTrois.jsx";
function App() {
// Import des composants globaux
import Header from "./components/Header";
import Footer from './components/Footer';
function YourApp() {
return (
<SimpleReactLightbox>
<YourApp />
</SimpleReactLightbox>
<Suspense fallback={<div>Chargement...</div>}>
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/posts" element={<Post />} />
<Route path="/posts/:id" element={<PostPage />} /> {/* Route dynamique pour un post spécifique */}
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
{/* Routes pour les services */}
<Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
<Route path="/services/formation-ia" element={<ServiceDeux />} />
<Route path="/services/formation-video" element={<ServiceTrois />} />
</Routes>
<Footer />
</Router>
</Suspense>
);
}
@ -38,22 +50,10 @@ ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<HelmetProvider>
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/posts" element={<Post />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/search" element={<Search />} /> {/* Route pour les recherches */}
{/* Routes pour les services */}
<Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
<Route path="/services/formation-ia" element={<ServiceDeux />} />
<Route path="/services/formation-video" element={<ServiceTrois />} />
</Routes>
<Footer />
</Router>
<SimpleReactLightbox>
<YourApp />
</SimpleReactLightbox>
</HelmetProvider>
</ThemeProvider>
</React.StrictMode>
);
);

4949
frontend/stats.html Normal file
View File

File diff suppressed because one or more lines are too long

23
server/wp-content/themes/hello-elementor-child/functions.php
View File

@ -161,4 +161,25 @@ register_rest_field(
},
'schema' => null,
]
);
);
function ajouter_opengraph_meta_api($data, $post, $context) {
if ($context !== 'view' || !$post) {
return $data;
}
// Récupérer les métadonnées de Rank Math
$og_title = get_post_meta($post->ID, 'rank_math_title', true);
$og_description = get_post_meta($post->ID, 'rank_math_description', true);
$og_image = get_post_meta($post->ID, 'rank_math_facebook_image', true);
// Ajouter les métadonnées au champ API
$data->data['opengraph'] = [
'title' => $og_title ?: $post->post_title,
'description' => $og_description ?: wp_trim_words($post->post_content, 20),
'image' => $og_image ? wp_get_attachment_url($og_image) : null,
];
return $data;
}
add_filter('rest_prepare_post', 'ajouter_opengraph_meta_api', 10, 3);