WordPress ブロックエディタのリンク設定をショートコードで制御する

ここ最近、Wordpressのカスタマイズをご依頼いただくとクラシックエディタではなく、ブロックエディタを使用している方が以前より増えているなと感じます。

先日、Wordpressの有料テーマ「SWELL」で作成されたサイトのカスタマイズのご依頼がありました。「SWELL」のブログパーツ機能で作成されたコンテンツ内のリンクを表示されるページ毎にリンクが変わるようにしてほしいといった内容だったのですが…

親・子・孫と階層化された固定ページ

実際に作成されていた固定ページは以下のように親・子・孫と階層化されていました。

TOPページ
├── 固定ページTOP-子 (〇〇〇.com/top/子/)
│ └── 固定ページTOP-孫 (〇〇〇.com/top/子/孫/)
├── 固定ページA (〇〇〇.com/A/)
│ └── 固定ページA-子 (〇〇〇.com/A/子/)
│ 　└── 固定ページA-孫 (〇〇〇.com/A/子/孫)
├── 固定ページB (〇〇〇.com/B/)
│ └── 固定ページB-子 (〇〇〇.com/B/子/)
│ 　└── 固定ページB-孫 (〇〇〇.com/B/子/孫)
├── 固定ページC (〇〇〇.com/C/)
│ 　└── 固定ページC-子 (〇〇〇.com/C/子/)
│　　└── 固定ページC-孫(〇〇〇.com/C/子/孫/)
├── 固定ページD (〇〇〇.com/D/)
├── 固定ページE (〇〇〇.com/E/)

また、サイト全てで表示される「ヘッダー」「フッター」はSWELLのブログパーツ機能でそれぞれ作成されたパーツを共通して使うようにしていました。

ヘッダーとフッターに設置されたリンクボタン

さらに、ヘッダーとフッターにはリンクボタンが設置されており、そのリンクボタンをクリックすると任意のページに移動するようにしたいということでした。

例えば、固定ページA (〇〇〇.com/A/)が表示されている場合のヘッダーとフッターのリンク先は固定ページA-子(〇〇〇.com/A/子/)といったように、子を持っているページは子のURLとなり、逆に子を持たない固定ページDやEのリンク先はTOPページの子 (〇〇〇.com/top/子/)のURLにするといった具合です。

ただ、ブログパーツの編集ページでリンク設定すると、一律で設定したURLに置き換えられてしまうため、ここをクリアする方法が必要となります。

リンクフォームにショートコードを入力してみる

表示されるページ毎にリンク先が変わるようにするとなると、「表示されるページは固定ページなのか？」「子を持つ固定ページなのか？」などの判別が必要となってきます。

これらを判別したうえで生成したURLをリンクに設定するとなると、一番手っ取り早いのは、各条件を満たしたURLを生成して設定するショートコードをリンク挿入フォームに入力し、それが機能することです。

試しに、以下のようなショートコードを作成し、ページが表示される際にリンクが意図したとおりに設定されるかを確認してみました。

function setting_url_test(){
  $url = get_bloginfo('url');
  return $url;
}
add_shortcode('url-test','setting_url_test');

まず、下の画像のようにリンク設定欄にショートコードを入力します。

その後、プレビューで意図したリンク先が設定されているかどうかを確認すると、下の画像の左下をご覧いただければ分かるようにURLが設定されていました。

今回は画像のリンク設定にショートコードを挿入してみましたが、意図したとおりに動いてくれたので、SWELLのブログパーツにも同様にショートコードを入れたところ問題なく動作しました。

ちなみに、そのままのコードではないのですが、以下のようにショートコードを設定しました。

function contact_link_replace(){
  global $post;

  if(is_front_page()){
    $link = get_bloginfo('url').'/top/contact/';
  }elseif(is_page()){
    $parent = $post->post_parent;
    $page_id = $post->ID;
    if($parent == 0){
      $child = get_posts(
        array(
          'post_type' => 'page',
          'post_parent' => $page_id,
          'posts_per_page' => 1,
        )
      );

      if($child){
        $slug = $post->post_name;
        $link = get_bloginfo('url').'/'.$slug.'/contact/';
      }else{
        $link = get_bloginfo('url').'/top/contact/';
      }
    }elseif($parent > 0){
      $page_array = get_ancestors($post->ID,'page');
      $page_array = array_reverse($page_array);
      $parent_id = $page_array[0];
      $page = get_post($parent_id);
      $slug = $page->post_name;
      $link = get_bloginfo('url').'/'.$slug.'/contact/';
    }
  }else{
		$link = get_bloginfo('url').'/top/contact/';
	}

	return $link;
}
add_shortcode('contact-link','contact_link_replace');

ものすごく簡単に説明すると「フロントページかどうか？」「固定ページかどうか？」「親ページを持っているかどうか？」などを分岐させてリンクを生成するといった流れになっています。

WordPressの非同期パターンのように、記事内でパターンを編集できたりすればここまでややこしくすることはなかったのですが、SWELLのブログパーツ機能は同期パターンと同じではないのですが、近い仕様になっているようで、少し頭を使いました。

それにしても、リンクの設定でショートコードが機能するということが分かったので良かったかなと思います。ただ、リンク挿入フォームにショートコードを入力するような機会は中々ないとは思いますが…