baserCMS 「BcColors」テーマのススメ

2023/12/19 web

baserCMS4系対応の「bccolors」テーマは、ミニマルで構造がわかりやすく、さまざまな用途のサイトで利用しやすい無理のないシンプルなデザインで、ゆえにカスタマイズも容易にできるとてもいいテーマだと思います。

ですが、「bccolors」テーマは、元々3系のテーマとして作成されたものを2018年05月に4.0.0としてコンバートリリースされたもので、一部のバグに対応したバグフィクス版が2020年11月に4.0.1としてリリースされたのみで、ほとんど手が入らないまま、現在に至っています。そのため、3系依存の部分があったり、経年でbaserCMS4系の直近のバージョンでは、ところどころに動きが不安定な箇所も散見される様になってしまいました。
しかし、現在でもbaserマーケット上にアップされていて、少なからず利用者もいらっしゃる様に思います。利用者の改修のヒントになればと思いますので、以下に気がついた不具合、のちに勝手な改良のポイントなどご紹介しようと思います。

baserCMS4系自体もメンテナンスフェーズに入っているものの、2016年リリース以降、なんと67回ものアップデートリリースを重ね、さまざまな機能が拡充され不具合を解消し、現在は4.8.0がリリースされています。これまた、すでに5系がリリースされて久しいタイミングに後進的な話題かもしれませんが、引き続きここでは、baserCMS4系とそのユーザーの応援をしていきたいと思っています。

話をbaserCMS4系対応「bccolors」テーマに戻して、

まずは、不具合の解消。

admin-third管理画面の各オプション欄の開閉に関するバグ。

原因は、テーマフォルダ内に移植されたadmin/function.jsの影響によるもので、以前に改修済みのはずでしたが、baserCMS最新版（4.8.0時点）で確認する限りデグレード？しています。そもそもこのadmin/function.js、本テーマが作成された3系当初には、baserCMSに内包されていたいくつかのテーマで、ほぼ $this->BcBaser->js(array('admin/functions.js')); として読み込まれていたという経緯もあってか、4系に移行後もいくつかのテーマでも読み込まれていました。しかし、実のところテーマ側でadmin/function.jsに記述されているスクリプトを利用しているのかもあまり精査されず、安易に読み込んでしまっている傾向があるように思います。4系の他のテーマでも、みたところ、3系からコンバートしたテーマに限ってadmin/function.jsを安易に読み込んでいる傾向があり、その実、そのほとんどのテーマでadmin/function.js内のスクリプトを利用していません。「bccolors」テーマでは、function.jsに個別のスクリプトを追記する格好で読み込ませていますが、現時点では、個別のスクリプトも含めてどうも不要のようです。よって、レイアウトファイル内の $this->BcBaser->js(array('admin/functions.js')); の記述を削除。これによってこのバグはひとまず解消します。
js自体はJsフォルダ内のに残っていますので、もし「えっ？！」なんて場所で使っていた場合は、記述を戻せば復旧しますので（バグも復活しますがw）。

実績一覧ページ内のアイキャッチリンクエラー。

bccolors/Blog/works/index.phpおよびBlog/works/archive.php、アイキャッチリンクのコードを以下のように修正。

<?php $this->Blog->postLink($post, $this->Blog->getEyeCatch($post, ['link' => false, 'noimage' => $this->BcBaser->getThemeUrl() . 'img/blog/works/noimage.png']), ['escape' => false]) ?>

contentsNavi出力に関する判定文のエラー。

contents_navi.php内の旧3系関数を削除。4系コア /lib/Baser/View/Elements/contents_navi.php の条件分岐に倣って修正。

メールフォームの「書き直し」機能の不具合。

4系コア /lib/Baser/Plugin/Mail/webroot/js/form-submit.jsをコピーし、bccolors/js/form-submit.jsの位置に配置することで解消。

新規コンテンツを追加した場合、フッター内メニュー表示にNotice: Undefined indexエラーが表示されてしまう。

global_menu.phpのラベルリネーム処理に条件分岐を加えることで解消。

<?php
/**
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright (c) baserCMS Users Community <http://basercms.net/community/>
 *
 * @copyright       Copyright (c) baserCMS Users Community
 * @link            http://basercms.net baserCMS Project
 * @package         Baser.View
 * @since           baserCMS v 0.1.0
 * @license         http://basercms.net/license/index.html
 */

/**
 * [ADMIN] グロバールメニュー
 * @var BcAppView $this
 */
if (!isset($level)) {
    $level = 1;
}
if(!isset($currentId)) {
    $currentId = null;
}
$linkLabel = [
    'index' => 'home',
    'weblog' => 'blog',
];
?>

<?php if (isset($tree)): ?>
    <ul class="global-menu ul-level-<?php echo $level ?><?php echo ($level > 1) ? ' sub-nav-group': ' nav-menu'?>">
        <?php if (isset($tree)): ?>
            <?php $i = 1 ?>
            <?php foreach ($tree as $content): ?>
                <?php if ($content['Content']['title']): ?>
                    <?php
                    if(!empty($content['Content']['exclude_menu'])) {
                        continue;
                    }
                    $liClass = 'nav-item-' . $i . ' li-level-' . $level;
                    if($content['Content']['id'] == $currentId || $this->BcBaser->isContentsParentId($currentId, $content['Content']['id'])) {
                        $liClass .= ' current';
                    }
                    $options = [];
                    if(!empty($content['Content']['blank_link'])) {
                        $options = ['target' => '_blank'];
                    }
                    ?>
                    <?php if($content['Content']['name'] === 'index' && $level > 1) {continue;} ?>

                    <?php if (!empty($linkLabel[$content['Content']['name']])): ?>
                        <li class="nav-item <?php echo $liClass ?>">
                            <?php $this->BcBaser->link($linkLabel[$content['Content']['name']], $this->BcBaser->getContentsUrl($content['Content']['url'], false, null, false), $options) ?>
                        </li>
                    <?php else: ?>
                        <li class="nav-item <?php echo $liClass ?>">
                            <?php $this->BcBaser->link($content['Content']['name'], $this->BcBaser->getContentsUrl($content['Content']['url'], false, null, false), $options) ?>
                        </li>
                    <?php endif ?>
                    <?php if (!empty($content['children'])): ?>
                        <div class="sub-nav">
                            <?php $this->BcBaser->element('global_menu', ['tree' => $content['children'], 'level' => $level + 1, 'currentId' => $currentId]) ?>
                        </div>
                    <?php endif ?>
                <?php endif ?>
                <?php $i++ ?>
            <?php endforeach ?>
        <?php endif ?>
    </ul>
<?php endif ?>

Aboutページ内、Google Map表示エリアがレスポンシブ未対応。ひとまずページ編集画面から以下の様に修正。

<div class="section"><?php $this->BcBaser->googleMaps(['width'=>'100%']) ?></div>

bccolors/ThemeConfigs/admin/form.php を削除。

「bccolors」テーマは、管理画面のテーマ設定でメインイメージ５をBlog用ヘッダー画像用に流用していて、そのためそれに合わせて管理画面のUIを変更するためにコアファイルをテーマ内にコピー・改修しています。しかし、それがbaserCMSのアップデートに置き去りになってしまい、baserCMSの管理テーマadmin-thirdに対応できなくなってしまっています。よって、思い切ってbccolors/ThemeConfigsフォルダ以下をフォルダごとすべて削除します。
「メインイメージ５をBlog用ヘッダー画像用に流用している」事情は、小細工せずに管理者がしっかり記憶しておく、っていうので良いかと。

次に、改良点。

ひとまず、リストアップしてから次回の記事でまとめてみようかと。

スムーズスクロールのスクリプトが、逆にギクシャクした動きになっている気がするので、思い切って削除。
トップページのWorks、ポスト表示（３連スライダー）のスマホビューのレイアウト修正。
管理ツールバー下へのコンテンツの潜り込みを解消。
グローバルメニューの２階層目プルダウンの表示幅をコンテンツ文字数に合わせて拡張表示できるように修正。
PCビューの1100px幅以下のケースで、コンテンツがオーバーフローしてしまわないようにwidthやmax-widthオプションを修正。
せっかくだから、グローバルメニューバーのSNSアイコンをFontawesomeに変更。
スマホビュー、アコーディオンメニュー用アイコンサイズをフィッティング。retina対応などで2xサイズ画像を入れても問題ない様に修正。
「BcColors」のテーマ名に敬意を払い、よりテーマカラーの変更に全体のデザインが呼応するように、config.cssにエントリーする要素を拡張。
sidebar.php内に直書きされているFBタイムライン表示コードを削除。
メールフォームのボタンデザイン改良。
ブログコメント欄のデザインをメールフォームライクに調整。
TOPへ戻るアイコンのレイアウト調整。ついでにアイコンをFontawesomeに変更。
footer内のメニューを２階層に対応したレイアウトを作成。