オリジナルブロックテーマで自分のPFを改変したまとめ

オリジナルブロックテーマ

これまでオリジナルのクラシックテーマで60件近くのサイトを制作してきましたが、2024年3月からは「原則、オリジナルブロックテーマで」WordPressサイトを作成しています。
これまでにオリジナルのブロックテーマで6本制作しており、その中から自分のポートフォリオを実験的にさまざまな方法で構築してみましたので、その試行錯誤をまとめておきます。

Contents

ブロックテーマに目覚めたきっかけ
参考にしたテキストはこれ
オリジナルブロックテーマで困ったこと①：いい感じのヘッダーパターンがない
オリジナルブロックテーマで困ったこと②：カスタム投稿タイプの作り方がわからない
まとめ

ブロックテーマに目覚めたきっかけ

このYouTubeでハムさん（X : @h2ham）は、優しい口調ながら「もうこれからはブロックテーマで構築する時代だよ」と諭していらっしゃいます。
最近やっと、オリジナルのブロックテーマでのWordPress構築に慣れ、「これからはいろんなサイトが作れる」とワクワクしていたところに、「そのやり方じゃなくて」と言われた気がして、強い衝撃が走った動画でした。

参考にしたテキストはこれ

しかし、ブロックテーマを学ばなきゃいけないのであれば、やるしかありません。
いろいろな情報を探す中で、一冊の本にたどり着きました。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

作って学ぶ　WordPress ブロックテーマ [ エビスコム ]
価格：3,509円（税込、送料無料) (2024/7/22時点)

楽天で購入

2024年7月22日現在、WordPressはバージョン6.6となっています。4ヶ月程度に一度バージョンが上がっています。
この本は、2023年1月に出版されたこともあり、私が購入した2024年3月でも、内容とズレがありました。
しかし、それ以上にブロックテーマで作成する手順や知識、オリジナルブロックテーマで作る方法について、基本的なことがしっかりと網羅されています。
この本に出会っていなかったら、今も瞑想しているのではないかと思うほど、秀逸な一冊です。
（上の本のリンクにはアフィリエイトがついています）

オリジナルブロックテーマで困ったこと①：いい感じのヘッダーパターンがない

はじめにぶつかった壁は、ヘッダーのカスタマイズがブロックエディターではうまくいかないことでした。
いろいろな方にアドバイスをいただいて、Functions.phpにショートコードを記述し、表示させることとしました。

これは2024年7月現在も、このスタイルで作成しており、制作しやすいスタイルではありますが、FSEの概念からは外れたやり方なのかなぁ、とも思います。

Functions.phpにショートコードを記述するには、

function 任意の関数名(){
return 'この中にコードを書く ';
}
add_shortcode('header','任意の関数名');

とするのが基本的な書き方ではないかと思います。
最終行のheaderが、ショートコードブロックで入力する名前になります。
実際にこのサイトのヘッダーのショートコードは以下のとおりです。

// ヘッダー
function shortcode_header(){
return
        '<header class="header" id="header">
     <div class="header-main wrapper">
      <div class="header-main__left">
        <a class="header-main__left-logo" href="https://www.shinichi-miyazaki.website">　　　　　　　　　　　　<img src="https://www.shinichi-miyazaki.website/wp-content/uploads/2024/04/logo4_transparent.png" alt="会社ロゴ"></a><a class="header-main__left-text sp-only" href="https://www.shinichi-miyazaki.website">エル・タジェール</a>
　　　 </div>
     <div class="header-main__right" id="js-nav">
      <div class="header-navigation" >
          <ul class="header-navigation__list">
            <li class="header-navigation__item">
              <a href="https://www.shinichi-miyazaki.website">HOME</a>
            </li>
            <li class="header-navigation__item">
              <a href="https://www.shinichi-miyazaki.website/archives">実績アーカイブ</a>
            </li>
            <li class="header-navigation__item">
              <a href="https://www.shinichi-miyazaki.website/price">料金とフォロー</a>
            </li>
            <li class="header-navigation__item">
              <a href="https://www.shinichi-miyazaki.website/vktechnic/">WordPressブログ</a>
            </li>
            <li class="header-navigation__item">
              <a href="https://www.shinichi-miyazaki.website/sitesight/">サイトサイト</a>
            </li>
            <li class="header-navigation__item">
              <a href="https://www.shinichi-miyazaki.website/blog">お知らせ</a>
            </li>
            <li class="header-navigation__item cta wp-block-button__link">
              <a href="https://www.shinichi-miyazaki.website/contact">お問い合わせ</a>

          </ul>
      </div>
     </div>
  　<div>
    <button class="header__hamburger hamburger" id="js-hamburger"><span class="hmbgr-menu__border"></span><span class="hmbgr-menu__border"></span><span class="hmbgr-menu__border"></span></button>
  </div>
        </div>
     </header>'
        ;
}
add_shortcode('header','shortcode_header');

ショートコードのメリットは、return”の中に埋め込んでしまえば、ショートコードブロックでホイホイと表示できてしまうことです。
しかし、前述したようにこれはFSEの「あとあとからでもブロックエディターで変更可能」とするコンセプトとは合致していないことが気になっています。

なにか他に上手く表示させる方法がありましたら、教えていただきたいです。

オリジナルブロックテーマで困ったこと②：カスタム投稿タイプの作り方がわからない

今回このサイトでは、4種類の投稿タイプがあります。

「お知らせ」デフォルトの投稿タイプ
「WordPress技術ブログ」カスタム投稿タイプ①
「制作実績」カスタム投稿タイプ②
「サイトサイト」カスタム投稿タイプ③

そして、２～４のカスタム投稿タイプは、次の2種類の方法でカスタム投稿タイプを表示させています。

カスタム投稿タイプ①：プラグイン「VK All in One Expansion Unit」でカスタム投稿タイプを作る

デフォルトの投稿タイプと同様なスタイルのカスタム投稿タイプを作成するだけなら、このプラグインが便利かもしれません。

私は、このプラグインの使い方を、この記事を参考にさせていただきました。とても丁寧に書かれていて、すぐに理解できました。

WordPressプラグイン：多機能＆カスタム投稿タイプを簡単作成「VK All in One Expansion Unit」

カスタム投稿タイプ②③：プラグイン「Advanced Custom Field」とショートコードの組み合わせ

ヘッダーでショートコードが上手くいったことに気を良くしてしまい、ACFもショートコードと組み合わせたら表示させられるのでは？と思ったら、上手くいったようです。

この②③は①と異なり、入力項目を制限して（固定にして）います。そのため、今回はACFを使用しました。

他の方法としては、プラグイン「Custom Blocks」も検討しました。こちらもで、どうように作成が可能だと思います。

【WordPress】簡単にカスタムブロックを作成！Genesis Custom Blocksの使い方

カスタム投稿タイプの個別記事ページを作る

ACFで設定したフィールドをカスタム投稿の個別記事ページに表示させるコードは以下のようにしてみました。

このサイトでは、「制作実績」と「サイトサイト」を、ACFとショートコードの組み合わせで作っています。
以下のコードは、制作実績の個別記事ページです。

// カスタム投稿タイプ個別投稿制作実績
function display_acf_fieldsArchives() {
    // カスタムフィールドの値を取得
    $site_name = get_field('siteTitle');
    $site_image = get_field('siteimg');
    $site_url = get_field('link');
    $site_profile = get_field('profile');
    $site_tools = get_field('tools');
    $site_workingArea = get_field('workingArea');


    // 出力内容を作成
    $output = '';

    $output .= '<h2>'.'実績紹介'.'</h2>';
    if ($site_name) {
      $output .= '<h3>' . esc_html($site_name) . '</h3>';
    }

    if ($site_image) {
      $output .= '<img class="custom-img" src="' . esc_url($site_image) . '" alt="">';
    }

     $output .= '<div class="custom-tar">';
    if ($site_url) {
      $output .= '<p><a href="' . esc_url($site_url) . '" target="_blank">' . esc_html($site_url) . '</a></p>';
    }
    $output .= '</div>';

    $output .= '<h3>' . '制作経緯'. '</h3>';
    if ($site_profile) {
      $output .= '<p>' . esc_html($site_profile) . '</p>';
    }

    $output .= '<h3>' . '使用ツール' . '</h3>';
    if ($site_tools) {
      if (is_array($site_tools)) {
        $output .= '<ul>';
        foreach ($site_tools as $tool) {
          $output .= '<li>' . esc_html($tool) . '</li>';
        }
        $output .= '</ul>';
      } else {
        $output .= '<p>' . esc_html($site_tools) . '</p>';
      }
    }

    $output .= '<h3>' . '作業エリア' . '</h3>';
    if ($site_workingArea) {
      if (is_array($site_workingArea)) {
        $output .= '<ul>';
        foreach ($site_workingArea as $area) {
          $output .= '<li>' . esc_html($area) . '</li>';
        }
        $output .= '</ul>';
      } else {
        $output .= '<p>' . esc_html($site_workingArea) . '</p>';
      }
    }

    return $output;
}
add_shortcode('acf_archives', 'display_acf_fieldsArchives');

カスタム投稿タイプのアーカイブページを作る

デフォルトの投稿スタイルの表示テンプレートの「新規投稿タイプ作成」で「個別投稿」を選択し、テンプレートを作成します。
このテンプレートは、Create Blockで作成した「WordPress技術ブログ」にも適用されました。

一方ACFで作ったアーカイブページも、「カスタムテンプレート」として作成した見たのですが、画像の引用方法がわからず、泣く泣く、投稿する際に「サムネイル画像」を登録し、表示させています。

まとめ

この春に、「ブロックテーマでサイトを作れるようにしなければ！」と思い立って３ヶ月、案件の合間に自分のサイトを作り変える形で試行錯誤してみました。

ほんとはもっと楽にサクッと作る方法があるのかもしれませんが、そのあたりはこれからも模索しながら、またこのサイトを作り変えていこうと思っています。

ここまでお読みいただき、ありがとうございました。