Wordpress REST API, lets talk!

This is unmanagable someone explain this!
23 Replies
lalo salamanca
lalo salamanca•15mo ago
solution to extract info from wordpress json api: "use client" import Image from 'next/image' import {fetchData} from "./api" import { useEffect, useState } from 'react' export default function Home() { const [pageData, setPageData] = useState(null); const [text1Content, setText1Content] = useState('');
async function pullJson(){ const response = await fetch("http://localhost:10004/wp-json/wp/v2/pages/11") const responseData = await response.json() setPageData(responseData) console.log(responseData) } useEffect(() => { pullJson() },[]) // useEffect(() => { // if (pageData) { // const parsedHTML = new DOMParser().parseFromString(pageData.content.rendered, 'text/html'); // const text1Element = parsedHTML.getElementById('text-1'); // if (text1Element) { // setText1Content(text1Element.innerHTML); // } // } // },[pageData]) useEffect(() => { if (pageData) { const parsedHTML = new DOMParser().parseFromString(pageData.content.rendered, 'text/html'); const text1Element = parsedHTML.getElementById('text-1'); if (text1Element) { const paragraphElement = text1Element.querySelector('p'); if (paragraphElement) { setText1Content(paragraphElement.innerHTML); } } } },[pageData]) return ( <main> <p>{text1Content}</p> <p>loltext</p> <p>loltext</p> </main> ) } --- forgot to add this id, you set it up in elementor as a class-id to be able to extract it by id
Jochem
Jochem•15mo ago
so what's the problem exactly? What is unmanageable?
lalo salamanca
lalo salamanca•15mo ago
@Jochem this its a json file but instead of separating every element into its own value, its all in 1
No description
lalo salamanca
lalo salamanca•15mo ago
i thought cms was suppose to make content available for devs so, clients just worry about content but all the content is smashed together
Jochem
Jochem•15mo ago
oh, you mean that content->rendered contains HTML with multiple elements?
lalo salamanca
lalo salamanca•15mo ago
yeah, the all the content, images everything so i dont understand how a client would work with a dev as a cms
Jochem
Jochem•15mo ago
you just insert that string into your HTML
lalo salamanca
lalo salamanca•15mo ago
the thing is thats all the content of the page
Jochem
Jochem•15mo ago
then you replace the contents of the body with that
lalo salamanca
lalo salamanca•15mo ago
so saw a video of a guy doing that and then doing the css affecting the p and the a of the whole box but i want to be able to control everything
lalo salamanca
lalo salamanca•15mo ago
No description
lalo salamanca
lalo salamanca•15mo ago
im reading about SEO now to see if and how much this fix affects SEO and performance, or try to use this and find a work around the fix
Jochem
Jochem•15mo ago
you can insert the HTML and then change it using normal methods or if your changes cause reflows or other issues you can load that string into domparser and edit it before you reinsert it into the live document as for SEO, I'm not really sure how this is any different than any other React app. You're sending a blank page and then having Javascript clientside fill that page with data from the server, that's how half the internet works nowadays
b1mind
b1mind•15mo ago
bad for seo xD
Jochem
Jochem•15mo ago
oh yeah, definitely bad, but no worse than any other React app
lalo salamanca
lalo salamanca•15mo ago
thats what i thought for a second, but i dont know much about seos or apis affecting it im reading some gpt seo answers and i dont if to just await quick data, put into the code make it invisible so it gets index but the have everything else load after
b1mind
b1mind•15mo ago
if you are using a metaframework you can prerender that is where headless really benefits, but also you have to rebuild when content changes so #depends how you need it.
Jochem
Jochem•15mo ago
no one really knows how SEO works, so I can't even imagine what a mess ChatGPT would produce... please don't use chatgpt if you're trying to learn about things
lalo salamanca
lalo salamanca•15mo ago
yeah also its 2year old seo
Jochem
Jochem•15mo ago
just in general, ChatGPT is a pro tool. You have to be able to judge if its answers are halucinated BS or not, and as a beginner you just don't have that context
lalo salamanca
lalo salamanca•15mo ago
yeah i take all this with a grain of salt, i tried to learn react native with this, only made mad
briancross
briancross•15mo ago
Except regex's. 😀
Jochem
Jochem•15mo ago
you have to abandon all hope if you want to learn regexes so yeah, then chatgpt is fine 😄
Want results from more Discord servers?
Add your server