چگونه محتوای گوتنبرگ را برای وردپرس بدون هد تجزیه کنیم

گوتنبرگ ویرایشگر پیش فرض وردپرس است. این ویرایشگر به شما امکان می دهد با استفاده از بلوک های مجزا برای متن، تصاویر، ویدیو و سایر عناصر سایت از طریق یک رابط کشیدن و رها کردن، محتوا را بسازید و سبک کنید. این رویکرد انعطاف پذیری و قابلیت های طراحی وردپرس را افزایش می دهد.

این راهنما نحوه تجزیه محتوای گوتنبرگ را به عنوان 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> }} />

علاوه بر این، ممکن است لازم باشد برای عناصری مانند پیوندها قالب‌بندی بیشتری انجام دهید و کاراکترهای اضافی خط جدید را مدیریت کنید (\n) که این راهنما بعدا توضیح می دهد.

تجزیه گوتنبرگ محتوا را در سایت استاتیک 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" : "\n<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>\n\n\n\n<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>\n\n\n\n<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>\n\n\n\n<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>\n\n\n\n<p>You can check out other articles on our blog:</p>\n\n\n\n<ul>\n<li><a href=\"https://yoursite.com/?p=6\">Lorem Ipsum: Beginnings</a></li>\n\n\n\n<li><a href=\"https://yoursite.com/?p=9\">Lorem Ipsum: Act 2</a></li>\n\n\n\n<li><a href=\"https://yoursite.com/?p=11\">Lorem Ipsum: Act 3</a></li>\n</ul>\n"
    },
    "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>\n"
    },
    "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" : "\n<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>\n\n\n\n<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>\n\n\n\n<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>\n\n\n\n<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>\n\n\n\n<p>You can check out other articles on our blog:</p>\n\n\n\n<ul>\n<li><a> href=\"https://yoursite.com/?p=6\">Lorem Ipsum: Beginnings</a></li>\n\n\n\n<li><a> href=\"https://yoursite.com/?p=9\">Lorem Ipsum: Act 2</a></li>\n\n\n\n<li><a> href=\"https://yoursite.com/?p=11\">Lorem Ipsum: Act 3</a></li>\n</ul>\n"
    },
    ...
  }
)

این فیلد حاوی 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 '\n' with a single '<br />' tag
  const _content = html.replace(/\n{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 خام، می توانید ببینید که پست حاوی a List با پیوندهایی به پست های دیگر در سایت خود تگ کنید و آن پیوندها را با پیوندهای داخلی به مسیرهای موجود در سایت استاتیک خود جایگزین کنید.

این 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، توسعه دهنده وب وردپرس و نویسنده محتوا. خارج از همه چیز وردپرس، من از ساحل، گلف و فیلم لذت می برم. من هم مشکلات قد بلندها دارم ;).