こんにちは！ あますた(@amaguristar)です。

せっかくMarkdown表記でブログをカタカタしてるんだし、「WordPressの再利用ブロックも直ぐに使える様にしたいな」って思った自分。今回はその設定の考察です。

　

そもそも「gutenberg」の「再利用ブロック」ってどうやって処理してるんだ？

WrodPress上で「再利用ブロック」の処理が分からないとどうしようもないってんで早速サクッと調べる事に。

WrodPressにログインして「記事を新規作成」をクリック。適当にカタカタと打ち込んで、「再利用ブロック」を挿入後「コードエディタ」にて確認。ショートカットを変更してなければ「Shift+Option+Command+M」で表示されるはず。エディタ上で変更するなら”公開するボタン”横の『・・・』ボタン(歯車マークの右)をクリックして変更も可能。

再利用ブロックのコード部を確認すると、

<!-- wp:block {"ref":1057} /-->

と表示。「つまりこのコードをMarkdownで書けば良いのか？」って事で早速挑戦(コードは自身の環境により変わります)。

### てすと

<!-- wp:block {"ref":1057} /-->

#### これで表示されるのかな？

と記入後。WrodPressの「gutenberg」に貼り付けして確認。結果は「再利用ブロックは表示されます」が肝心のMarkdown部分は変更されず「###」表示。つまり、

### てすと

「ただしい再利用ブロックに変更」

#### これで表示されるのかな？

と<!-- wp:block {"ref":1057} /-->部分のみ変更された状態。これは困る。

色々と試した結果どうやら現状、貼り付けるMarkdown形式の文章にhtmlタグが混在してると「gutenberg」にうまく貼り付けられない様子。

プラグインをインストールすると違うのだとは思いますが、プラグインをそんなに入れたくない自分。むりやり対応する事にしました。

「function.php」に関数を作成して置換処理

もっとも簡単なのは、ここ最近よく使う「str_replace関数」を使用する方法。

具体的には？

具体的にはMarkdownにて、使わないであろう文字列。今回は試しに

【ctkーinfo】

と打ち込んだら

<p>こんにちは！あますた(<a href="https://twitter.com/amaguristar" target="_blank">@amaguristar</a>)です。</p>

と置換される様にする事。

処理は簡単。毎度お馴染み「function.php」の適切な場所に下記コードを入力するだけ。

function ctk_replace_to_custom_tags( $postarr ) {
    //..再利用ブロック関連
    $postarr['post_content'] = str_replace('【ctkーinfo】', '<!-- wp:block {"ref":6877} /-->', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('【ctkーkoukoku】', '<!-- wp:block {"ref":6963} /-->', $postarr['post_content'] );

    return $postarr;
}
add_filter('wp_insert_post_data', 'ctk_replace_to_custom_tags');

これで、Markdownにて

【ctkーinfo】

と打ち込んだものが、

<!-- wp:block {"ref":1057} /-->

と置換されます。

先ほどの例で言うと無事に

<h3>てすと</h3>

「ただしい再利用ブロックに変更」

<h3>これで表示されるのかな？</h3>

と変更されます。<h3>タグにクラスを追加する場合は「function.php」に、

function ctk_replace_to_custom_tags( $postarr ) {
    //..Hタグ関連
    $postarr['post_content'] = str_replace('<h3>', '<h3 class="style3a">', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('<h4>', '<h4 class="style4a">', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('<h5>', '<h5 class="style5a">', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('<h6>', '<h6 class="news_headline2">', $postarr['post_content'] );

    //..再利用ブロック関連
    $postarr['post_content'] = str_replace('【ctkーinfo】', '<!-- wp:block {"ref":6877} /-->', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('【ctkーkoukoku】', '<!-- wp:block {"ref":6963} /-->', $postarr['post_content'] );

    return $postarr;
}
add_filter('wp_insert_post_data', 'ctk_replace_to_custom_tags');

と書けば一緒に置換されます。上記コードのHタグ関連については、下記リンク参照。

まとめ

なんだかんだ便利な「str_replace関数」。今後もきっとお世話になります。