[BaserCMS] BaserCMSでナビメニューにサブメニューを追加する

アイキャッチ画像


記事内に商品のプロモーションを含む場合があります。

Nプログラマ(@Nprog128)です。

今回はBaserCSMでナビメニューにサブメニューを追加してみます。

環境情報

検証した環境の情報です。サーバはいつものさくらのレンタルサーバ ライトプランです。

  • BaserCMS
    • version: 4.1.5
    • テーマ: baserCMSサンプルテーマ (bc_sample)

概要

サイトページのグローバルメニューにサブメニューを追加します。

現在使用中のテーマでは、デフォルトで3つのサブメニューが登録されています。
ここにサービス4というサブメニューを追加します。

結果はこんな感じになります。

サブメニュー 追加前

/img/article/2018/12/16/01.jpg
サブメニュー 追加前

サブメニュー 追加後

/img/article/2018/12/16/02.jpg
サブメニュー 追加後

それでは具体的な手順を見ていきます。

サブメニューを追加してみる

追加と言っていますが実際には、対象のメニュー配下に公開されているコンテンツがサブメニューに表示されるようになっているようです。
(テーマによっては対応していないかもしれないです)

それでは追加してみましょう。

管理画面トップ > よく使う項目 > コンテンツ管理 をクリックする。

/img/article/2018/12/16/03.jpg
コンテンツ管理を開く

コンテンツ一覧が表示されるので、「サービス」の隣にある…のアイコンをクリックするとメニューが表示されるので、固定ページをクリックします。

/img/article/2018/12/16/04.jpg
サービスに固定ページを追加

そうすると新しい固定ページが作成されます。 今度はその新しい固定ページの隣にある…のアイコンをクリックして、公開を押します。

/img/article/2018/12/16/05.jpg
追加した固定ページを公開する

サイトの方で確認してみます。

管理画面左上の「baserCms inc」の部分をクリックすると、サイトのページに遷移することができます。(気づくまで随分時間がかかりました)

/img/article/2018/12/16/06.jpg
管理画面からサイトを開く

先程と同じようにサービスのメニューにマウスカーソルを当ててみると、先程作成したページに対応するサブメニューが表示されています。

/img/article/2018/12/16/07.jpg
追加したサブメニューが表示されている

これで追加できたので完了です。

あと、URLに統一感がないので変更しておきます。

URLが日本語

公開はできたのですが、新しい固定ページに遷移するとURLが日本語になっていますね。

1ドメイン/service/新しい_固定ページ

既存のメニューはservice1, service2, service3となっているので、新しく追加したページのURLはservice4に変更してみます。

先程作成した固定ページ隣の…の部分をクリックして、メニューから編集をクリックします。

/img/article/2018/12/16/08.jpg

URLの項目が実際に公開されるURLなので、ここを任意のもの変更しましょう。

/img/article/2018/12/16/09.jpg

ここではservice4に変更してみました。
変更後、下の方にある保存を押してからサイトの方で確認してみます。

URLが入力したものになっていればオッケーです。 ここでは、service4と入力したので、URLがドメイン/service/service4となっています。

これで終わりです。 お疲れ様でした。

ハマったところ

追加したメニューが公開ページに表示されなかったことですね。追加したコンテンツを公開しないとサブメニューに表示されません。

BaserCMSを始めて触って最初にコンテンツを作った時には、作成してすぐ編集画面に入ってしまいました。
なので、公開の設定をしないままページを作ってしまい、いざ確認しようとするとサブメニューが表示されない!という状態になって慌てました。

他のページと見比べてみると、公開設定が違うことに気がついて解決しました。

まとめ

今回はグローバルメニューにサブメニューを一つ追加する、という内容でした。
自分で使うなら、こんな感じになりますかね

  • ゲーム
    • 自作アプリA
    • 自作アプリB

こんなメニューを作るのは一体いつの日になるやら。。。
早く作ってみたい!

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /


関連した記事