بروزرسانی: 25 خرداد 1404
چگونه محتوای گوتنبرگ را برای وردپرس بدون هد تجزیه کنیم
گوتنبرگ ویرایشگر پیش فرض وردپرس است. این ویرایشگر به شما امکان می دهد با استفاده از بلوک های مجزا برای متن، تصاویر، ویدیو و سایر عناصر سایت از طریق یک رابط کشیدن و رها کردن، محتوا را بسازید و سبک کنید. این رویکرد انعطاف پذیری و قابلیت های طراحی وردپرس را افزایش می دهد.
این راهنما نحوه تجزیه محتوای گوتنبرگ را به عنوان HTML با استفاده از WordPress REST API در یک سایت استاتیک Next.js توضیح می دهد.
پیش نیازها
برای پیگیری، شما نیاز دارید:
محتوای گوتنبرگ را با استفاده از REST API واکشی کنید
برای تعامل برنامه نویسی با سایت وردپرس خود و بازیابی محتوای ساختار یافته در بلوک های گوتنبرگ، از API REST وردپرس یا افزونه WPGraphQL استفاده می کنید. این ابزارها به شما امکان می دهند محتوای وردپرس خود را با فرمت JSON واکشی کنید.
برای فعال کردن دسترسی به داده های JSON از طریق REST API، تنظیمات پیوند دائمی وردپرس را به دور از «Plain» تنظیم کنید. این امکان دسترسی API را از طریق یک URL ساختاریافته به شرح زیر فراهم می کند:
https://yoursite.com/wp-json/wp/v2با ایجاد درخواست های API برای این URL، می توانید به صورت برنامه نویسی اطلاعات مختلف را بازیابی کنید و در سایت وردپرس خود عملیات انجام دهید. برای مثال، می توانید فهرستی از پست ها را با ارسال یک درخواست GET به:
https://yoursite.com/wp-json/wp/v2/postsاین یک شی JSON حاوی اطلاعاتی در مورد پست های سایت وردپرس شما، از جمله عناوین، محتوا، جزئیات نویسنده و موارد دیگر را برمی گرداند.
بلوک های گوتنبرگ را به عنوان HTML تجزیه کنید
هنگام بازیابی پست ها از یک سایت وردپرس که از ویرایشگر گوتنبرگ استفاده می کند، محتوای ذخیره شده در پایگاه داده می تواند ترکیبی از فراداده های HTML و JSON را برای توصیف انواع بلوک ها، مانند نقل قول ها و گالری ها، ارائه دهد. برای مثال:
<!-- wp:quote {"className":"inspirational-quote","style":{"typography":{"fontSize":"large"}}} -->
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>“The journey of a thousand miles begins with one step.”</p><cite>Lao Tzu</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:gallery {"ids":(34,35),"columns":2,"linkTo":"none","sizeSlug":"medium","className":"custom-gallery"} -->
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery"><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="A breathtaking view of the mountains" class="wp-image-34"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Serene lakeside at dawn" class="wp-image-35"/></figure></li></ul>
<!-- /wp:gallery -->این قطعه دو بلوک گوتنبرگ را نشان می دهد: یک نقل قول و یک گالری. هر کدام با فراداده های JSON که در نظرات HTML محصور شده اند، تکمیل می شوند. ابرداده ویژگی هایی مانند نام کلاس ها، سبک ها و سایر تنظیمات مربوط به ارائه بلوک را تعریف می کند.
وقتی این بلوک ها را از طریق WordPress REST API یا WPGraphQL واکشی می کنید، وردپرس آنها را پردازش می کند و ترکیبی از ابرداده های HTML و JSON را به عناصر HTML کاملاً رندر شده تبدیل می کند که می توانید مستقیماً در صفحات وب قرار دهید. HTML تبدیل شده برای بلوک های بالا به صورت زیر ظاهر می شود:
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>“The journey of a thousand miles begins with one step.”</p><cite>Lao Tzu</cite></blockquote>
<ul class="wp-block-gallery columns-2 is-cropped custom-gallery">
<li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image1-300x200.jpg" alt="A breathtaking view of the mountains" class="wp-image-34" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
<li class="blocks-gallery-item"><figure><img loading="lazy" src="http://example.com/wp-content/uploads/2021/09/image2-300x200.jpg" alt="Serene lakeside at dawn" class="wp-image-35" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
</ul>برای توسعه دهندگانی که با استفاده از چارچوب های جاوا اسکریپت مانند Next.js برنامه های جداشده یا بدون هد می سازند، این روشی ساده برای نمایش محتوا با تزریق مستقیم HTML به صفحه با استفاده از dangerouslySetInnerHTML ویژگی برای ارائه نشانه گذاری.
<div dangerouslySetInnerHTML={{ __html: <raw_html_string> }} />علاوه بر این، ممکن است لازم باشد برای عناصری مانند پیوندها قالب بندی بیشتری انجام دهید و کاراکترهای اضافی خط جدید را مدیریت کنید (\) که این راهنما بعدا توضیح می دهد.
تجزیه گوتنبرگ محتوا را در سایت استاتیک Next.js مسدود می کند
در این بخش، بیایید محتوای وردپرس را در یک پروژه Next.js واکشی کنیم و سپس بلوک های گوتنبرگ را به صورت HTML تجزیه کنیم.
- با تنظیم یک تابع برای واکشی پست ها از سایت وردپرس خود شروع کنید. باز کن src/page.js در پروژه خود فایل کنید و محتوای آن را با قطعه کد زیر جایگزین کنید:
const getWpPosts = async () => { const res = await fetch(\'https://yoursite.com/wp-json/wp/v2/posts\'); const posts = await res.json(); return posts; };این تابع ناهمزمان یک درخواست API را به API REST WordPress انجام می دهد. تمام پست های موجود در سایت شما را واکشی می کند و آنها را به صورت یک آرایه برمی گرداند.
- در مرحله بعد، اجازه دهید از پست های واکشی شده در یک جزء ساده صفحه Next.js با ثبت پست ها در کنسول و ارائه یک تبریک اولیه استفاده کنیم:
const page = async () => { const posts = await getWpPosts(); console.log(posts); return ( <div> <h1>Hello World</h1> </div> ); }; export default page;زمانی که پروژه خود را با استفاده از
npm run dev، پیام "Hello World" را نمایش می دهد و پست های واکشی شده را در ترمینال ثبت می کند.( { "_links" : { "about" : (...), "author" : (...), "collection" : (...), "curies" : (...), "predecessor-version" : (...), "replies" : (...), "self" : (...), "version-history" : (...), "wp:attachment" : (...), "wp:term" : (...) }, "author" : 1, "categories" : (...), "comment_status" : "open", "content" : { "protected" : false, "rendered" : "\<p>Fire, a primal force, captivates with its <strong>flickering flames</strong>, evoking both awe and caution. Its <quote>dance</quote> symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.</p>\\\\<figure class=\\"wp-block-image size-full\\"><img loading=\\"lazy\\" decoding=\\"async\\" width=\\"250\\" height=\\"148\\" src=\\"https://img.example.com/wp-content/uploads/2024/02/burningbuilding.jpg\\" alt=\\"\\" class=\\"wp-image-14\\"/></figure>\\\\<p>In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire’s dual nature reminds us of our fragile relationship with the elements.</p>\\\\<figure class=\\"wp-block-image size-large\\"><img decoding=\\"async\\" src=\\"https://img.example.com/premium-photo/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\" alt=\\"\\"/></figure>\\\\<p>You can check out other articles on our blog:</p>\\\\<ul>\<li><a href=\\"https://yoursite.com/?p=6\\">Lorem Ipsum: Beginnings</a></li>\\\\<li><a href=\\"https://yoursite.com/?p=9\\">Lorem Ipsum: Act 2</a></li>\\\\<li><a href=\\"https://yoursite.com/?p=11\\">Lorem Ipsum: Act 3</a></li>\</ul>\" }, "date" : "2024-02-27T12:08:30", "date_gmt" : "2024-02-27T12:08:30", "excerpt" : { "protected" : false, "rendered" : "<p>Fire, a primal force, captivates with its flickering flames, evoking both awe and caution. Its dance symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate. In ancient times, fire was a beacon of light and warmth, (…)</p>\" }, "featured_media" : 0, "format" : "standard", "guid" : { "rendered" : "https://yoursite.com/?p=13" }, "id" : 13, "link" : "https://yoursite.com/?p=13", "meta" : { "footnotes" : "" }, "modified" : "2024-02-29T16:45:36", "modified_gmt" : "2024-02-29T16:45:36", "ping_status" : "open", "slug" : "fire-fire", "status" : "publish", "sticky" : false, "tags" : (), "template" : "", "title" : { "rendered" : "Fire" }, "type" : "post" }, }, ... )اشیاء JSON که داده های پست گوتنبرگ منفرد را نشان می دهند، شامل فیلدهای مختلفی هستند، که در میان آنها فیلدهای محتوا و گزیده ای به عنوان بلوک های گوتنبرگ به عنوان رشته های HTML تجزیه می شوند.
- برای اینکه این محتوای HTML را به درستی در Next.js ارائه کنیم، از عبارت استفاده می کنیم
dangerouslySetInnerHTMLویژگی:const page = async () => { const posts = await getWpPosts(); return ( <> <h1> Headless Blog </h1> <div> {posts.map((post) => ( <Link href={\'/blog/\' + post.id} key={post.id}> <h2> {post.title.rendered} <span>-></span> </h2> <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} /> </Link> ))} </div> </> ); }; export default page;در این جزء به روز شده، ما روی آرایه پست های واکشی شده نقشه می زنیم تا فهرستی از گزیده های پست ایجاد کنیم. هر گزیده ای در یک بسته بندی شده است
Linkجزء برای پیمایش، نمایش عنوان پست و قطعه ای از محتوای آن.این
dangerouslySetInnerHTMLویژگی برای تجزیه و رندر محتوای HTML موجود در داخل استفاده می شودexcerpt.renderedرشته. - بعد، یک فایل ایجاد کنید blog/(id)/page.js در داخل برنامه فهرست راهنما. شما از پوشه ها برای تعریف مسیرها استفاده می کنید. بنابراین، با ایجاد یک وبلاگ پوشه، شما تعریف کنید وبلاگ مسیر شما این را با مسیریابی پویا ترکیب می کنید تا مسیرهایی را برای هر پست ایجاد کنید.
- هر پست یک شناسه دارد. شما از این شناسه برای ایجاد مسیر منحصر به فرد آن استفاده می کنید،
/blog/{post_id}در برنامه شما کد زیر را اضافه کنید:import Link from \'next/link\'; export async function generateStaticParams() { const res = await fetch(\'https://yoursite.com/wp-json/wp/v2/posts\'); const posts = await res.json(); return posts.map((post) => { return { params: { id: post.id.toString(), }, }; }); } export async function getPost(id) { const response = await fetch(\'https://yoursite.com/wp-json/wp/v2/posts/\' + id); const post = await response.json(); return post; }این
generateStaticParams()تابع به صورت ایستا مسیرها را در زمان ساخت بر اساس شناسه مربوطه برگردانده شده در هر پست ایجاد می کند. اینgetPost()تابع داده های گوتنبرگ را از REST API برای پست با شناسه عبور واکشی می کند.بخش قبلی نمونه ای از داده های گوتنبرگ تجزیه شده را نشان می دهد که از REST API برای یک پست بازگردانده شده اند. در حال حاضر، ما فقط نگران این هستیم
content.renderedرشته:( { ... "content": { "rendered" : "\<p>Fire, a primal force, captivates with its <strong>flickering flames</strong>, evoking both awe and caution. Its <quote>dance</quote> symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.</p>\\\\<figure> class=\\"wp-block-image size-full\\"><img loading=\\"lazy\\" decoding=\\"async\\" width=\\"250\\" height=\\"148\\" src=\\"https://img.example.com/wp-content/uploads/2024/02/burningbuilding.jpg\\" alt=\\"\\" class=\\"wp-image-14\\"/></figure>\\\\<p>In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire’s dual nature reminds us of our fragile relationship with the elements.</p>\\\\<figure> class=\\"wp-block-image size-large\\"><img decoding=\\"async\\" src=\\"https://img.example.com/premium-photo/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\" alt=\\"\\"/></figure>\\\\<p>You can check out other articles on our blog:</p>\\\\<ul>\<li><a> href=\\"https://yoursite.com/?p=6\\">Lorem Ipsum: Beginnings</a></li>\\\\<li><a> href=\\"https://yoursite.com/?p=9\\">Lorem Ipsum: Act 2</a></li>\\\\<li><a> href=\\"https://yoursite.com/?p=11\\">Lorem Ipsum: Act 3</a></li>\</ul>\" }, ... } )این فیلد حاوی HTML خام پست است. می توان آن را به طور مستقیم با استفاده از
dangerouslySetInnerHTMLملکی مانند این<div dangerouslySetInnerHTML={{ __html: <raw_html_string> }} />. - در مرحله بعد، می توانید داده ها را با تجزیه پیوندهای داخلی و تغییر اندازه تصاویر پردازش کنید. را نصب کنید
html-react-parserبسته ای برای ساده کردن فرآیند تجزیه برچسب ها:npm install html-react-parser --save - کد زیر را به blog/(id)/page.js فایل:
import parse, { domToReact } from "html-react-parser"; /* * We use a regular expression (pattern) to match the specific URL you want to replace. * The (\\d+) part captures the numeric ID after ?p=. * Then, we use the replacement string \'data-internal-link="true" href="https://kinsta.com/blog/"\', * where $1 is a placeholder for the captured ID. */ export function fixInternalLinks(html_string) { const pattern = /href="https:\\/\\/yoursite.com\\/\\?p=(\\d+)"/g; const replacement="data-internal-link="true" href="https://kinsta.com/blog/""; return html_string.replace(pattern, replacement); } export function parseHtml(html) { // Replace 2+ sequences of \'\\' with a single \'<br />\' tag const _content = html.replace(/\{2,}/g, \'<br />\'); const content = fixInternalLinks(_content); const options = { replace: ({ name, attribs, children }) => { // Convert internal links to Next.js Link components. const isInternalLink = name === "a" && attribs("data-internal-link") === "true"; if (isInternalLink) { return ( <Link href={attribs.href} {...attribs}> {domToReact(children, options)} </Link> ); } else if (name === "img") { attribs("width") = "250"; attribs("height") = "150"; return ( <img {...attribs}/> ); } }, }; return parse(content, options); }این
fixInternalLinks()تابع از یک عبارت معمولی برای یافتن پیوند به پست ها در سایت وردپرس شما از رشته HTML استفاده می کند. در HTML خام، می توانید ببینید که پست حاوی aListبا پیوندهایی به پست های دیگر در سایت خود تگ کنید و آن پیوندها را با پیوندهای داخلی به مسیرهای موجود در سایت استاتیک خود جایگزین کنید.این
parseHTML()تابع چندین توالی از خطوط جدید اضافی را پیدا می کند،nو جایگزین آنها می شود<br />برچسب ها همچنین لینک های داخلی را پیدا کرده و تگ های لنگر را به تگ های لینک تبدیل می کند. سپس، این تابع با استفاده از ویژگی های برچسب، اندازه تصاویر را تغییر می دهد. - برای ایجاد رابط کاربری اصلی برای هر مسیر پویا، کد زیر را اضافه کنید:
export default async function Post({ params }) { const post = await getPost(params.id); const content = parseHtml(post.content.rendered); return ( <> <h1> {post.title.rendered} </h1> <div>{content}</div> </> ); }پس از تجزیه HTML خام از داده های گوتنبرگ، کد JSX را برمی گرداند که نمایانگر UI فرمت شده صفحه است.
در نهایت، هنگامی که پروژه خود را اجرا می کنید، صفحه اصلی لیستی از پست های وردپرس شما را نمایش می دهد. همچنین، وقتی روی پست های جداگانه کلیک می کنید، محتوای تجزیه شده گوتنبرگ را خواهید دید که به درستی ارائه شده است.
سایت استاتیک Next.js خود را در Kinsta مستقر کنید
هنگام ترکیب وردپرس بدون هد با فریم ورک های پیشرفته مانند Next.js، یافتن یک راه حل استقرار مقرون به صرفه ضروری می شود، به خصوص زمانی که از میزبانی قدرتمند وردپرس مانند Kinsta برای سایت وردپرس خود استفاده می کنید. سرویس میزبانی سایت استاتیک Kinsta یک راه بی نقص و مقرون به صرفه برای آنلاین کردن سایت شما ارائه می دهد.
Kinsta به شما امکان می دهد تا 100 وب سایت ثابت را میزبانی کنید رایگان. ابتدا کد خود را به یک ارائه دهنده Git ترجیحی (Bitbucket، GitHub یا GitLab) فشار دهید. هنگامی که مخزن شما آماده شد، این مراحل را برای استقرار سایت استاتیک خود در Kinsta دنبال کنید:
- برای مشاهده داشبورد MyKinsta خود وارد شوید یا یک حساب ایجاد کنید.
- Kinsta را با ارائه دهنده Git خود مجاز کنید.
- کلیک سایت های استاتیک در نوار کناری سمت چپ، سپس کلیک کنید سایت اضافه کنید.
- مخزن و شاخه ای که می خواهید از آن مستقر شوید را انتخاب کنید.
- یک نام منحصر به فرد به سایت خود اختصاص دهید.
- تنظیمات ساخت را در قالب زیر اضافه کنید:
- دستور ساخت:
npm run build - نسخه Node:
18.16.0 - دایرکتوری را منتشر کنید:
out
- دستور ساخت:
- در نهایت کلیک کنید سایت ایجاد کنید.
و بس! اکنون در عرض چند ثانیه یک سایت مستقر دارید. پیوندی برای دسترسی به نسخه مستقر سایت شما ارائه شده است. در صورت تمایل می توانید بعداً دامنه سفارشی و گواهی SSL خود را اضافه کنید.
به عنوان جایگزینی برای میزبانی استاتیک، می توانید سایت استاتیک خود را با سرویس میزبانی برنامه Kinsta گسترش دهید، که انعطاف پذیری میزبانی بیشتر، طیف گسترده تری از مزایا، و دسترسی به ویژگی های قوی تر - مانند مقیاس پذیری، استقرار سفارشی شده با استفاده از Dockerfile را فراهم می کند. و تجزیه و تحلیل جامع شامل داده های زمان واقعی و تاریخی. همچنین نیازی به پیکربندی پروژه Next.js برای رندر استاتیک ندارید.
خلاصه
این راهنما نحوه ادغام و تجزیه محتوای بلوک گوتنبرگ را به طور موثر به عنوان HTML از طریق API وردپرس توضیح داده است. این باعث می شود وقتی از وردپرس بدون هد استفاده می کنید، رندر کردن هر نوع محتوایی در قسمت جلویی شما امکان پذیر باشد.
شما می توانید وردپرس بدون سر خود را در سرویس میزبانی مدیریت شده وردپرس ما میزبانی کنید و سایت استاتیک خود را در سرویس میزبانی سایت استاتیک ما مستقر کنید. این بدان معناست که همه چیز در مورد سایت شما در یک داشبورد است: MyKinsta.
با انتخاب Kinsta، از یک ارائه دهنده میزبانی بهره می برید که عملکرد بهینه سایت و مقیاس پذیری را در اولویت قرار می دهد و در عین حال وب سایت ها را با اقدامات امنیتی پیشرفته به شدت تقویت می کند. امروز Kinsta را امتحان کنید!
نظر شما در مورد وردپرس بدون هد و رندر آن چیست؟ آیا راه بهتری برای ادغام بلوک های گوتنبرگ دارید؟ ایده های خود را در بخش نظرات به اشتراک بگذارید!
ویرایشگر محتوا و بازاریابی در Kinsta، توسعه دهنده وب وردپرس و نویسنده محتوا. خارج از همه چیز وردپرس، من از ساحل، گلف و فیلم لذت می برم. من هم مشکلات قد بلندها دارم ;).