WordPress Gutenbergコンテンツの解析方法

11月11日 19:48更新

07940

GutenbergはWordPressのデフォルトエディターです。このエディターでは、テキスト、画像、動画、その他のウェブサイト要素を、ドラッグ＆ドロップのインターフェースを通じて、個別のブロックを使用してコンテンツを作成し、デザインすることができます。このアプローチにより、WordPressの柔軟性とデザイン機能が強化されている。

REST APIでGutenbergコンテンツを取得する

プログラムで WordPress サイトとやり取りし、Gutenberg ブロック内の構造化コンテンツを取得するには、WordPress REST API または WPGraphQL プラグインを使用できます。これらのツールを使用すると、WordPress のコンテンツを JSON 形式で取得できます。

REST APIによるJSONデータアクセスを有効にするには、WordPressのパーマリンク設定を「Plain」から調整する。そうすることで、以下のように特定の形式のURLからAPIにアクセスできるようになる：

https://yoursite.com/wp-json/wp/v2

このURLにAPIリクエストを送信することで、WordPressサイト上のさまざまな情報をプログラムで取得したり、アクションを実行したりすることができる。例えば、以下のアドレスにGETリクエストを送ることで、投稿のリストを取得することができます：

https://yoursite.com/wp-json/wp/v2/posts

タイトル、コンテンツ、作者の詳細など、WordPressサイト上の投稿に関する情報を含むJSONオブジェクトが返される。

GutenbergブロックをHTMLに解析する

Gutenbergエディタを使ってWordPressサイトから投稿を取得する際、データベースに保存されたコンテンツはHTMLとJSONメタデータを混在させて、引用やギャラリーなどの様々なブロックタイプを記述することができる：

<!-- wp:quote {"className":"inspirational-quote","style":{"typography":{"fontSize":"large"}}} -->
<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>「千里の道も一歩から。</p><cite>老子</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="息をのむような山々の眺め" 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="夜明けの静かな湖畔" class="wp-image-35"/></figure></li></ul>
<!-- /wp:gallery -->

このスニペットは、引用とギャラリーの2つのGutenbergブロックを示しています。各ブロックには、HTMLコメントにカプセル化されたJSONメタデータがあります。メタデータは、クラス名、スタイル、その他ブロックの表示に関する設定などの属性を定義します。

WordPress REST APIまたはWPGraphQL経由でこれらのブロックを取得すると、WordPressはそれらを処理し、HTMLとJSONメタデータの組み合わせを完全にレンダリングされたHTML要素に変換します。上記のブロックの変換されたHTMLは以下のように表示されます：

<blockquote class="wp-block-quote inspirational-quote has-large-font-size"><p>「千里の道も一歩から。</p><cite>老子</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="息をのむような山々の眺め" 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="夜明けの静かな湖畔" class="wp-image-35" sizes="(max-width: 300px) 100vw, 300px" /></figure></li>
</ul>

Next.jsのようなJavaScriptフレームワークを使用して、非連結アプリケーションやアプリケーションを構築している開発者にとって、これは、属性を使用してページに直接HTMLを注入することにより、コンテンツを表示する簡単な方法を提供する。dangerouslySetInnerHTMLマーカーを提示する。

<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />

GutenbergのブロックコンテンツをNext.jsの静的サイトにパースする

WordPressのコンテンツをNext.jsプロジェクトに抽出し、GutenbergブロックをHTMLに解析しました。

1.まず、WordPressサイトから投稿を取得する関数を設定する。関数を開きます。 src/page.jsファイルの内容を以下のコード・スニペットで置き換える：

const getWpPosts = 非同期 () => { {.
const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts')；
  const posts = await res.json()；
const posts = await res.json(); return posts；
};

この非同期関数は、WordPress REST API への API リクエストを実行します。あなたのサイトで利用可能なすべての投稿を取得し、配列として返します。

2.次に、シンプルなNext.jsページコンポーネントで、コンソールに投稿をロギングし、基本的な挨拶をレンダリングすることで、取得した投稿を利用してみましょう：

const page = 非同期() =&gt; { { { { {
  const posts = await getWpPosts(); console.log(posts)；
  console.log(posts)；

  return (
    <div>
      <h1>ハロー・ワールド</h1>
    </div>
  );
}.

デフォルトのページをエクスポートします。

を使用してプロジェクトを実行する場合npm run devHello World "メッセージを表示し、取得したポストをターミナルに記録する。

[
  {
    "_links" : {
      "about" : [...］,
      "author" : [...］コレクション" : [...] , "著者" : [...]。
      「コレクション" : [...］キュリー" : [...] , "コレクション" : [...] .
      "curies" : [...] .,
      "predecessor-version" : [...] .replies" : [...] , "replies" : [...] , "predecessor-version" : [...] .
      「返信" : [...] .self" : [...] , "replies" : [...] .
      self" : [...] , "version-history" : [...] , "replies" : [...] .バージョン履歴" : [...] , "返信" : [...] , "self" : [...] .
      "version-history" : [...] ."wp:attachment" : [...] , "self" : [...] , "version-history" : [...] .
      "wp:attachment" : [...] .wp:term" : [...] , "version-history" : [...] , "wp:attachment" : [...] .
      "wp:term" : [...] .
    },
    
    "categories" : [...] }.また、"categories" : [...] }, "comment_status" : "open", "wp:term" : [...] } .
    "comment_status" : "open", "content" : { "wp:term" : [...] } .
    "content" : {
      "protected" : false, "rendered" : "\new", "content" : {
      「レンダリング" : "♪n<p>火は原始的な力であり、その炎で人々を魅了する。 <strong>ひらめき</strong>畏敬の念と警戒心を呼び起こす。 <quote>ダンス</quote> 破壊と再生を象徴し、古いものを焼き尽くして新しいものを生み出す。 私たちの家や心を温める一方で、火はその破壊力に対して敬意を払う必要がある。壊滅させる。</p>\杏子<figure class="\"wp-block-image" size-full\"><img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\杏子<p>太古の昔、火は光と暖かさの道標であり、生存に不可欠なものだった。 今日でも、火は人間の巧妙さと危険の象徴であり続けている。 囲炉裏の心地よい輝きから山火事の破壊的な猛威まで、火の二面性は私たちと世界とのもろい関係を思い起こさせる。囲炉裏の心地よい輝きから山火事の破壊的な猛威まで、火の二面性は私たちと世界とのもろい関係を思い起こさせる。要素である。</p>\杏子<figure class="\"wp-block-image" size-large\"><img decoding="\"async\"" src="\"https:></figure>\杏子<p>ブログの他の記事もご覧ください。</p>\杏子<ul>\n<li><a href="/ja/"https:>ローレム・イプサム：始まり</a></li>\杏子<li><a href="/ja/"https:>ローレム・イプサム：第2幕</a></li>\杏子<li><a href="/ja/"https:>ローレム・イプサム：第3幕</a></li>\n</ul>\n"
    },
    "date" : "2024-02-27T12:08:30"、
    "date_gmt" : "2024-02-27T12:08:30"、
    "excerpt" : {
      "protected" : false, "rendered" ：
      "rendered" : "<p>原始的な力である火は、揺らめく炎で人々を魅了し、畏敬の念と警戒心を呼び起こす。 そのダンスは破壊と再生を象徴し、古いものを焼き尽くして新しいものを生み出す。私たちの家や心を暖める一方で、火はその破壊力への敬意を要求する。古代において、火は光と暖かさの道標であった。</p>\n"
    },
    "featured_media" : 0、
    "フォーマット" : "標準"、
    "guid" : {
      "rendered" : "https://yoursite.com/?p=13"
    },
    
    
    "meta" : {
      "footnotes" : ""
    },
    
    
    
    
    
    
    
    「テンプレート" : ""、
    "title" : {
      "rendered" : "Fire"
    },
    "type" : "post"
   },
  },
  ...
]

個々のGutenberg投稿のデータを表すJSONオブジェクトには様々なフィールドがあり、コンテンツと抜粋フィールドはHTML文字列としてパースされたGutenbergブロックとして返されます。

3.このHTMLコンテンツをNext.jsで適切にレンダリングするためにdangerouslySetInnerHTML属性：

const page = async () =&gt; { { { { {
  const posts = await getWpPosts()；

  return (
    <>
      <h1> ヘッドレス・ブログ </h1>

      <div>
        {posts.map((post) =&gt; (
          <link href="{'/blog/'" + post.id} key="{post.id}">
            <h2>
              {post.title.rendered}。 <span>-></span>
            </h2>
            <div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
          </Link>
        ))}
      </div>
    </>
  );
}.

デフォルトのページをエクスポートします。

更新されたコンポーネントでは、投稿の抜粋のリストを生成するために、取得された投稿の配列をマップします。それぞれの抜粋はリンク投稿タイトルとそのコンテンツスニペットは、ナビゲーションに使用されるコンポーネントに表示されます。

ねばなりませんdangerouslySetInnerHTML属性は解析とレンダリングに使用される抜粋.レンダリングフィールドに含まれるHTMLコンテンツ。

4.次に、アプリケーションでディレクトリにファイルを作成するブログ/[id]/page.js .ルートはフォルダを使って定義できる。したがって、ルートはブログ フォルダを定義することができます。ブログ ルート。これはダイナミック・ルーティングと組み合わせることができ、各投稿に対してルートを生成する。

5.各投稿にはIDがある。/ブログ/{post_id}」。アプリケーションに固有のパスを生成する。以下のコードを追加する：

next/link'からLinkをインポートする；

非同期関数 generateStaticParams() { をエクスポートします。
    const res = await fetch('https://yoursite.com/wp-json/wp/v2/posts')；
    const posts = await res.json(); return posts.map((post); }); })
    return posts.map((投稿) => {)
        return {
            params: {
                id: post.id.toString(), { params: { post.id.
            }, }
        }; }
    });
}

エクスポート非同期関数 getPost(id) {
    const response = await fetch('https://yoursite.com/wp-json/wp/v2/posts/' + id)；
    const post = await response.json(); return post; const post = await response.
    const post = await response.json(); return post; }.
}

ねばなりませんgenerateStaticParams() 関数は、各ポストから返される対応するIDに基づいて、構築時に静的にパスを生成する。そのためゲットポストこの関数は、渡されたIDを使用してREST APIから投稿のGutenbergデータを取得します。

前のセクションでは、投稿のREST APIから返されたGutenbergデータを解析した例を示した。ここではコンテンツレンダリング フィールド

[
  {
    ...
    "content": {
      "rendered" : "レンダリング<p>火は原始的な力であり、その炎で人々を魅了する。 <strong>ひらめき</strong>畏敬の念と警戒心を呼び起こす。 <quote>ダンス</quote> 破壊と再生を象徴し、古いものを焼き尽くして新しいものを生み出す。 私たちの家や心を温める一方で、火はその破壊力に対して敬意を払う必要がある。壊滅させる。</p>\杏子<figure> class="wp-block-image size-full"&gt;。<img loading="\"lazy\"" decoding="\"async\"" width="\"250\"" height="\"148\"" src="\"https:></figure>\杏子<p>太古の昔、火は光と暖かさの道標であり、生存に不可欠なものだった。 今日でも、火は人間の巧妙さと危険の象徴であり続けている。 囲炉裏の心地よい輝きから山火事の破壊的な猛威まで、火の二面性は私たちと世界とのもろい関係を思い起こさせる。囲炉裏の心地よい輝きから山火事の破壊的な猛威まで、火の二面性は私たちと世界とのもろい関係を思い起こさせる。要素である。</p>\杏子<figure> class="wp-block-image size-large"&gt;.<img decoding="\"async\"" src="\"https:></figure>\杏子<p>ブログの他の記事もご覧ください。</p>\杏子<ul>\n<li><a> href="https://yoursite.com/?p=6"&gt;Lorem Ipsum: Beginnings</a></li>\杏子<li><a> href="https://yoursite.com/?p=9"&gt;Lorem Ipsum: Act 2</a></li>\杏子<li><a> href="https://yoursite.com/?p=11"&gt;Lorem Ipsum: Act 3</a></li>\n</ul>\n"
    },
    ...
  }
]

このフィールドには投稿の生のHTMLが含まれます。dangerouslySetInnerHTML このような物件はレンダリングする<div dangerouslysetinnerhtml="{{" __html: <raw_html_string> }} />.

6.次に、内部リンクを解析したり、画像のサイズを変更したりして、データを処理することができる。以下のファイルをインストールする。html-リアクト・パーサー パッケージを使用することで、タグの解析プロセスを簡素化することができる：

npm install html-react-parser --save

7.以下のコードをブログ/[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="/blog/$1"',
 * 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="/blog/$1"';

  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の文字列からWordPressサイトの投稿へのリンクを見つける。生のHTMLでは、投稿にリストタグは、サイト上の他の記事へのリンクを含み、それらのリンクを静的サイト内のパスを指す内部リンクに置き換える。

ねばなりませんパースHTML() 関数は複数の冗長な改行シーケンスを検出する。nラベルに置き換える<br /> .また、内部リンクを探し、アンカータグをリンクタグに変換します。この関数は、tag属性を使用して画像のサイズを変更します。

8.各ダイナミック・パスのメインUIを生成するには、以下のコードを追加する：

エクスポートデフォルトの非同期関数 Post({ params }) { 次のようになります。
  const post = await getPost(params.id)；

  const content = parseHtml(post.content.rendered)；

  return (
    <>
      <h1>
        {post.title.rendered}。
      </h1>
 	 
      <div>内容</div>
    </>
  );
}

Gutenbergのデータから生のHTMLを解析した後、コードはページのフォーマットされたUIを表すJSXを返す。

最後に、プロジェクトを実行すると、ホームページにはWordPressの投稿一覧が表示されます。また、個々の投稿をクリックすると、パースされたGutenbergのコンテンツが正しくレンダリングされているのがわかります。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み