baserCMS 4系テーマの5系化（step 3） - 「Omotenashi2」エレメントテンプレートをマイグレートする。

2025/04/07 web

「4系テーマの5系化」ステップ3では、ステップ1でひとまずスルーした（当たり前）ステータスの読み込みエラーを解消すべく、エレメントテンプレートからマイグレートしていくことにします。
ブログ、メールなどのコンテンツテンプレートのマイグレートは、ステップ4で行うことにして。

というわけで、再度（当たり前）ステータスの読み込みエラーを紐解いてみると、ブログポストの表示崩れ以外の項目は、

Omotenashi2テーマ独自のヘッダーエレメントファイルが読み込めていない。→ 原因はelementフォルダ（およびファイル）を配置していないため（当たり前）
グローバルメニューの表示が崩れている。→ 原因はelementフォルダ（およびファイル）を配置していないため（当たり前）
エレメントテンプレート「footer_contact」が見つからない。→ 原因はelementフォルダ（およびファイル）を配置していないため（当たり前）
Omotenashi2テーマ独自のフッターエレメントファイルが読み込めていない。→ 原因はelementフォルダ（およびファイル）を配置していないため（当たり前）

というものでした。

実際、下図のように、4系「Omotenashi2」テーマのElementsフォルダ内に含まれているファイルやフォルダを見てみると、☆印のファイルがレイアウトファイルで読み込んでいるエレメントファイルで、それらに該当します。

それ以外のブログ、メールなどのコンテンツテンプレートのマイグレートは、冒頭で触れたようにステップ4で行います。

詳細

さて、ここからエレメントテンプレートファイルをマイグレートしていきます。
4系のこれらのファイルは、/theme/omotenashi2/Elements/ フォルダ内に配置されていましたが、5系では、/plugins/Omotenashi2/templates/element/ フォルダ内に配置します。フォルダ構成に関する詳細は「5系テーマガイド - 独自のテーマを作成する - 共通部品を利用する」を参照してください。なお、パンくずを出力するためのエレメントファイル（crumbs.php）も、レイアウトファイルで読み込んでいるエレメントファイルではありますが、「5系テーマガイド - テーマ関数リファレンス」を見ると、それなりに変更がありそうなので、ひとまずbaserCMSのパッケージが提供する初期テンプレート（具体的には、/vendor/baserproject/bc-front/templates/element/crumbs.php）で代用していいのでは？と思うので、再配置せずに進めようと思います。

まず、☆印のheader.php、fotter.php、fotter_contact.php の3つのファイルについては、HTMLタグ以外のコードの記述はなく、マイグレートを目的とする手直しは、特に必要ない様です。
残るglobal_menu.phpは、そもそもbaserCMSが提供するコアのテンプレートをコピーして修正利用されたものなので、不具合をできるだけ避ける為には、あらためて5系baserCMSのパッケージが提供する初期テンプレート（具体的には、/vendor/baserproject/bc-front/templates/element/global_menu.php ファイル）を利用（コピー）して、「Omotenashi2」テーマで独自に使用しているレイアウト用のHTMLタグ等を以下の様に修正（「修正箇所：」のコメントアウト箇所）を行う方が安全かと思います。

<?php
/**
 * baserCMS :  Based Website Development Project <https://basercms.net>
 * Copyright (c) NPO baser foundation <https://baserfoundation.org/>
 *
 * @copyright     Copyright (c) NPO baser foundation
 * @link          https://basercms.net baserCMS Project
 * @since         5.0.0
 * @license       https://basercms.net/license/index.html MIT License
 */

/**
 * サイトマップ
 *
 * カテゴリの階層構造を表現する為、再帰呼び出しを行う
 * $this->BcBaser->contentsMenu() で呼び出す
 *
 * @var \BaserCore\View\BcFrontAppView $this
 */
if (!isset($level)) {
    $level = 1;
}
if(!isset($currentId)) {
    $currentId = null;
}
?>

<?php if (isset($tree)): ?>
    <ul class="ul-level-<?php echo $level ?><?php echo ($level > 1) ? ' sub-nav-group': ' nav-menu'?> fontNotoSerif"><?php //修正箇所： ?>
        <?php if (isset($tree)): ?>
            <?php foreach ($tree as $content): ?>
                <?php if ($content->title): ?>
                    <?php
                    if(!empty($content->exclude_menu)) {
                        continue;
                    }
                    $liClass = 'menu-content li-level-' . $level; //修正箇所：
                    if($content->id == $currentId || $this->BcBaser->isContentsParentId($currentId, $content->id)) {
                        $liClass .= ' current';
                    }
                    $options = []; //修正箇所：
                    if(!empty($content->blank_link)) {
                        $options['target'] = '_blank';
                    }
                    ?>
                    <li class="nav-item <?php echo $liClass ?>"><?php //修正箇所： ?>
                        <?php $this->BcBaser->link($content->title, $this->BcBaser->getContentsUrl($content->url, false, null, false), $options) ?>
                        <?php if (!empty($content['children'])): ?>
                            <div class="nav-menu__sub"><?php //修正箇所： ?>
                                <?php $this->BcBaser->element('contents_menu', ['tree' => $content['children'], 'level' => $level + 1, 'currentId' => $currentId]) ?>
                            </div>
                        <?php endif ?>
                    </li>
                <?php endif ?>
            <?php endforeach; ?>
        <?php endif ?>
    </ul>
<?php endif ?>

見方を変えて、4系の「Omotenashi2」テーマ内で使用されていたglobal_menu.phpファイルと5系マイグレート対応後のファイルを比較して、本来取り沙汰すべきphpコードやテーマ関数側の修正点、変更点に注目すると以下の様になります。

今回のケースの様な場合で、あくまで4系のファイルを利用してマイグレート（モデルデータの変換作業）を行う場合は、以下の様に正規表現を利用した検索・置換を行うととても作業が楽になります。具体的には、利用されているテキストエディタの「検索・置換」を使うのですが、それぞれのテキストエディタごとの多少の違いはあるものの、「正規表現」を利用した「検索・置換」機能はほとんどのテキストエディタで備わっていますので、是非、チャレンジしてみてください。
詳細は、「5系テーマガイド - baserCMS４のテーマを変換 - テンプレートファイルの調整」を参照してください。

# 正規表現
# 「検索」欄の代入する文字列
\$([a-zA-Z0-9]+?)\['([a-zA-Z0-9]+?)'\]\['([a-zA-Z0-9_]+?)'\]

# 「置換」欄に代入する文字列（backreference）
\$$1->$3

これで、トップページについては、ブログポストの表示乱れ（cssが適用されていないため）を残して、それ以外は正しく表示できたと思います。また、固定ページについても、正しく表示できているはずです。

次回、ステップ4では、ブログ、メールなどのコンテンツテンプレートのマイグレートを行いたいと思います、たぶん最終回です。

baserCMS 4系テーマの5系化（step 3） - 「Omotenashi2」エレメントテンプレートをマイグレートする。

詳細

コメント

Related posts