【WordPress・ブロックエディター対応】wp_insert_post()で自動投稿する

さかっちょのプロフィール画像
エンジニアさかっちょ

wp_insert_post()で自動投稿したい

WordPressでwp_insert_post()という関数を用いて自動で投稿を作成します。

とあるテーマ開発をしていたときに「テーマ適用時にサンプル記事を投稿したい」という場面があり、引数のpost_contentの値をHTMLタグだけにしたところブロックエディターで「クラシック」と表示されてしまったり、エラーでブロックが表示できないという状況が発生しました。

どうやらブロックエディターに投稿するときはHTMLタグに加えて判別用の識別子を付ける必要があるらしいのです。まずは以下のソースコードをご覧ください。

wp_insert_post(
  array(
    'post_type' => 'post', // ①投稿タイプ
    'post_name' => 'sample-post', // ②スラッグ名
    'post_title' => 'サンプル記事', // ③投稿タイトル
    'post_status' => 'draft', // ④投稿ステータス
     // ⑤本文
    'post_content' =>
'<!-- wp:heading -->
<h2>大見出し</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>この記事はサンプルです。下書き状態なので実際のサイトからは見えません。参考にして新しい記事を投稿してみてください。いまこの文章が表示されているブロックは「段落」といいます。文章中には「<a href="#" target="_blank">リンク</a>」というようにリンクを設定することもできます。</p>
<!-- /wp:paragraph -->'
  )
)
①投稿タイプ通常の「投稿」に投稿する場合はpostと指定します。カスタム投稿も指定できます。
②スラッグ名この投稿のURLに当たる部分です。任意の値を指定します。
③投稿タイトル投稿のタイトルです。
④投稿ステータス公開状態ならpublish、下書きにしたければdraftを指定しておきます。
⑤本文投稿の本文にあたります。詳細は後述します。

「本文」は特殊な書き方が必須

ご覧の通り本文に該当するpost_contentの値は各ブロックの直前と直後にコメントアウトが入り、単純なHTMLではなくなっています。これがブロックエディターに何のブロックなのかを認識させるための識別子です。

<!-- wp:paragraph -->
<p>段落ブロック</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>リスト</li></ul>
<!-- /wp:list -->

該当のHTMLコードを<!-- wp:○○ --><!-- /wp:○○ -->というふうに囲みます。主要なブロックのコメントアウトの値は以下のとおりです。

段落<!– wp:paragraph –>
<p>~</p>
<!– /wp:paragraph –>
リスト<!– wp:list –>
<ul><li>~</li></ul>
<!– /wp:list –>
数字リスト<!– wp:list {“ordered”:true} –>
<ol><li>~</li></ol>
<!– /wp:list –>
見出し<!– wp:heading –>
<h2>~</h2>
<!– /wp:heading –>
引用<!– wp:quote –>
<blockquote class=”wp-block-quote”>
<p>~</p>
<cite>~</cite>
</blockquote>
<!– /wp:quote –>
コード<!– wp:code –>
<pre class=”wp-block-code”><code>~</code></pre>
<!– /wp:code –>
整形済みテキスト<!– wp:preformatted –>
<pre class=”wp-block-preformatted”>~</pre>
<!– /wp:preformatted –>
プルクオート<!– wp:pullquote –>
<figure class=”wp-block-pullquote”>
<blockquote><p>~</p></blockquote>
</figure>
<!– /wp:pullquote –>
テーブル<!– wp:table –>
<figure class=”wp-block-table”><table>~</table></figure>
<!– /wp:table –>
<!– wp:verse –>
<pre class=”wp-block-verse”>~</pre>
<!– /wp:verse –>

これらはDBの該当の投稿を見れば識別子のコメントアウト含めて確認できるので、これ以外のブロックで識別子がわからない場合は投稿を作ってDBから確認してみてください。

こんな記事も読まれています

【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】
【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】
かんののプロフィール画像
かんの
ウェブアプリ開発にTailwind CSSを導入してみた
ウェブアプリ開発にTailwind CSSを導入してみた
金 伯冠のプロフィール画像
金 伯冠
俺流フロントエンドのディレクトリ構成と設計の考え方
俺流フロントエンドのディレクトリ構成と設計の考え方
アマノのプロフィール画像
アマノ
ChatGPTの新機能GPTs!自分だけのオリジナルGPTを作ってみた!
ChatGPTの新機能GPTs!自分だけのオリジナルGPTを作ってみた!
金 伯冠のプロフィール画像
金 伯冠
上に戻る