baserCMSの管理画面ダッシュボードにランチャーを表示する

通常、ダッシュボードを表示すると、コンテンツ部分は３カラム（baserCMSニュース、公開ページ数、最近の動き）に分かれています。このうち、baserCMSニュースと公開ページ数の２カラムを削り、よく使いそうな機能をアイコン表示し、ランチャー化します。（こうすることで、ユーザーが視覚的に目的の機能までの動線を把握できるようになるのではないかと思います。）

１．アイコン画像を準備する。

フリーのものを探すと良いと思います。有名所だと「ICON HOIHOI」や「CristalClear」などが良さそうです（フリーといっても、ライセンスや注意事項が全く無いわけではありません。使用上の注意などを各サイトでご確認ください）。

カラム幅に応じて、ある程度はアイコン画像のサイズを変更したいので、今回は１つ１つのアイコンを130px×130px程度の大きさで用意しておきます（この辺は、並べるアイコンの行数によると思いますので、適当に調節してください）。

出来あがったら規定のフォルダに入れておきます。今回はテーマフォルダ内に作成します。（iconsフォルダは無いので作ってください。その中にアイコンを全て入れます。今回は各画像は01.png〜08.pngという名前で保存しました。）

/app/webroot/theme/（お使いのテーマ）/img/admin/icons/

２.ダッシュボードのHTMLを書き直し、CSSを作成する。

HTMLの編集です。特に難しいことはありません。しかし、baserCMSのコア部分にある原本ファイルを、そのまま編集してしまうと、baserCMSのバージョンアップ時にカスタマイズ部分が消えてしまいますので、必要なファイルをappフォルダ以下（今回はさらにその中のテーマフォルダ以下）にコピーしてそちらを編集します。

まず、ダッシュボードのViewファイルを以下のようにコピーして編集します。もともと３カラムになっていたのを、２カラムに修正し、アイコン表示部分を加えます。また、冒頭でCSSを読み込みます。このCSSは今回のランチャー表示専用のもので、あとで作成するものを読み込んでいます。

■ダッシュボードのViewの場所とコピー先
（元の場所）/lib/Baser/View/Dashboard/admin/index.php
（コピー先）　/app/webroot/theme/（お使いのテーマ）/Dashboard/admin/index.php

<?php
//アイコン部分CSS読込
$this->BcBaser->css(array('admin/admin_icon'));
?>

<div id="AlertMessage" class="message" style="display:none"></div>

<div class="float-left" style="width:66%">
 <div class="panel-box corner10">
  <h2>サイト管理メニュー</h2>

  <div class="clearfix"> 
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/01.png', array('url' => '/pages/index')) ?>
      <br />
      <?php $this->BcBaser->link('固定ページ管理', '/pages/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/02.png', array('url' => '/blog/blog_posts/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('新着情報管理', '/blog/blog_posts/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/03.png', array('url' => '/mail/mail_fields/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('お問合わせ管理', '/mail/mail_fields/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/04.png', array('url' => '/blog/blog_comments/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('コメント一覧', '/blog/blog_comments/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/05.png', array('url' => '/users/index')) ?>
      <br />
      <?php $this->BcBaser->link('ユーザー管理', '/users/index') ?>
    </div>
   
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/06.png', array('url' => '/themes/index')) ?>
      <br />
      <?php $this->BcBaser->link('テーマ管理', '/themes/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/07.png', array('url' => '/plugins/index')) ?>
      <br />
      <?php $this->BcBaser->link('プラグイン', '/plugins/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/08.png', array('url' => '/site_configs/form')) ?>
      <br />
      <?php $this->BcBaser->link('システム管理', '/site_configs/form') ?>
    </div>
   
  </div>
 </div>
</div>

<div class="float-left" style="width:33%">
 <div class="panel-box corner10">
  <h2>最近の動き</h2>
  <div id="DblogList">
       <?php $this->BcBaser->element('dashboard/index_dblog_list') ?>
  </div>
 </div>
</div>

次にCSSを新規作成します。カラム幅にある程度合わせて大きさが変わるようにします。

■ランチャーアイコン用のCSSの設置場所
/app/webroot/theme/（お使いのテーマ）/css/admin/admin_icon.css

div.iconBox{
  float: left;
  width: 21%;
  margin: 2%;
  text-align: center;
  height: 150px;
}

div.iconBox img{
  width: 100%;
  margin: auto;
  max-width: 128px;
}

div.iconBox a{
  text-decoration: none;
  color: #000;
}

div.iconBox a:hover{
  text-decoration: underline;
  color: #000;
}

３．ブラウザでアクセス

一応、ブラウザキャッシュを消してアクセスします。ダッシュボードにアイコンが並んでいればOKです。

いかがでしたでしょうか？　今回のサンプルではあまりメリットがありませんが、独自に機能を拡張している場合など、クライアントに分かりやすい動線付けができるため、喜ばれることも多いと思います。ぜひ、お試しください。(^^