VK Block PatternsでWordPressにオリジナルレイアウトのパターンを作る| cumak

2023年1月11日

VK Block PatternsでWordPressにオリジナルレイアウトのパターンを作る

グーテンベルグの「パターン」

WordPressのサイトを構築している時に、あがってきたデザインを見ると、記事詳細のページに、WordPressのデフォルトにないパーツが作成されている…。というとき、そのパーツを作らなくてはいけません。

グーテンベルグはかなりたくさんのブロックが用意されていますが、さらにそこにオリジナルのレイアウトを作る時、「パターン」を追加するのが良い選択でした。

ちなみに、通常「＋」ボタンから追加するのは「ブロック」であり、今回作るのはその「ブロック」を組み合わせてつくる「パターン」です。

最初はブロック作成を考えていましたが、ブロックを作るのは至難の技でしたので、パターンの作成がおすすめです。

プラグイン　VK Block Patterns

インストール

WordPressプラグインページ

このプラグインを有効化すると、カスタムブロックパターンを作るカスタム投稿が作成されます。
カスタムパターンを登録すると、作成したブロックパターンを編集画面で選択できるようになります。

このプラグインをインストールして有効化すると、管理画面の左サイドに「VK ブロックパターン」が現れます。（つまりカスタム投稿が作成されます）

パターンを作る

「新規作成」で、ビジュアルエディタで好きなパターンを作ります。

最終的に、全体を選択してグループ化し、クラスをつけておくことをおすすめします。

後でスタイリングするために、各パーツ（上記でいうとタイトルとリスト）にクラスをつけておくと良いです。

また、注意事項として、動的要素を含まないが必要な要素は、カスタムHTMLで入れる必要がありました。（<div class="articleIndex-title">INDEX</div>の部分）
コードエディタで入れるだけだと、実際にページに挿入された時消えてしまったので、注意です。

<div class="articleIndexx">
  <div class="articleIndex-title">INDEX</div>
  <div class="articleIndex-list">
    <ul>
      <li><a href="">リスト</a>
        <ul>
          <li><a href="">子リスト</a></li>
          <li><a href="">子リスト</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

カテゴリーを付与する

VKブロックパターン＞カテゴリー　で、新規にカテゴリを作成できます。ここでカテゴリーを作っておくとあとで見つけやすいので便利です。

「オリジナル」というカテゴリを作って付与しておきます。

投稿画面で使う

画面左上の「＋」ボタンで、「パターン」タブを選び、カテゴリーを選ぶと、先ほどのパターンが表示されるので、投稿に挿入することができます。

おまけカスタムHTMLがちょっと気になる場合

カスタムHTMLを使うと、投稿画面にもごそっと表示されます。

カスタムHTMLは基本的には触って欲しくないという場合がほとんどだと思うので、さわらないことを編集者に伝えるために、半透明にすることにしました。

削除してしまうと、パターンを削除したい場合に選択ができなくて削除できなくなってしまうため、削除ではなく「さわらない」と伝える方向性にしました。（が、他に良い感じの方法があればなぁとも思っています。）

具体的には、管理画面用のCSSを用意し、カスタムHTMLはopacity:0.1がかかるようにしておきます。

// 管理画面のスタイルシートを追加
function admin_custom_css() {
    echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("テンプレのディレクトリパス").'/css/admin.css">';
}
add_action('admin_head', 'admin_custom_css');

admin.cssに、こんな感じで記述します。

.post-type-post .editor-styles-wrapper .articleIndex .wp-block-html {
  opacity: 0.1;
}

.articleIndexのところは、ブロック作成の時につけたクラスを入れます。

他のページに影響しないように、クラスを適宜つけてください。
投稿ページのエディット画面のみに効くようにします。

functions.phpで追加する方法もある

プラグインを使わず、functions.phpを使って手動で作る方法もあります。

基本的にVK Block Patternsを使えば良いと思うのですが、WordPressタグを使いたい場合など（アイコン画像を入れないといけなくて、テーマまでのパスが必要…など？）の時にはこちらの方が便利かもしれません。

・・が、上記の場合でも、テーマまでのパスをfunctions.phpでなんとかする方法もあるので、個人的にはプラグインを使った方が楽だという気はしています。

コード例

// カスタマイズパターンの作成
add_action( 'init', function()  {
  register_block_pattern(
      'my-plugin/my-awesome-pattern',
      array(
        'title'       => __( 'オリジナルギャラリー', 'my-plugin' ),
        'blockTypes' => array( 'core/gallery','core/group' ,'core/image' ),
        'content'  => '<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group galleryManyItem js-imgChange">
<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group galleryManyItem-sub">
<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped gallerySub">
<!-- wp:image -->
<figure class="wp-block-image"><img src="'.get_theme_file_uri('/img/common/sample-1.jpg').'" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:image -->
<figure class="wp-block-image"><img src="'.get_theme_file_uri('/img/common/sample-1.jpg').'" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:image -->
<figure class="wp-block-image"><img src="'.get_theme_file_uri('/img/common/sample-1.jpg').'" alt=""/></figure>
<!-- /wp:image -->
</div><!-- /wp:group -->
</figure><!-- /wp:gallery -->
</div><!-- /wp:group -->',
        'categories' => array( 'my-cate' ), 
      )
  );
});
add_action( 'init', function() {
  register_block_pattern_category(
    'my-cate',
    array( 'label' => __( 'オリジナル', 'my-plugin' ) )
  );
});

<ちなみに>ブロックを作るのは至難の技だった記録

ブロックをオリジナルで作るには、jsとの組み合わせが必要です。

結果的には、下記の理由で諦めました。
📖2023/1/1現在

webpack使わないといけない（私は普段esbuildを使っているので切り替えが必要になる）
必然的にbabelがくっついてくるので重い（webpackとbabelって一蘭托生なのでしょうか・・。babel-loaderがないとエラーがでてしまう）
おそらくreact18に対応してない（@wordpress/componentのところでエラー）

JSXを使わない方法もありますが、そうするとHTMLを作っていくのが大変でした。短いコードなら問題ないですが、複雑なコードはかなり大変です。
できれば「HTMLエレメントを作る」のではなく「HTMLを書く」方向でやりたかったので、ReactのJSXの方式でいこうとしましたが、上記の点でつまづき、ブロック作成は諦めてパターン作成をすることにしました。

Blog