baserCMSの勉強会に参加して

baserCMSアドベントカレンダーの7日目に参加させていただきました。

baserCMS Advent Calendar 2016 - Adventar

 

 

昨日(2016年12月6日)baserCMSの勉強会に参加してきました。

【第19回】baserCMS 勉強会

今回登壇された方はお二人、中野さん馬庭さん

勉強会の内容としては、主に管理画面のカスタマイズについてでした。

その内容から管理画面のダッシュボードをランチャー化するカスタマイズについて紹介したいと思います。

ちなみに、登壇された方のブログに勉強会で話された内容が掲載されていたので、そちらも参考にさせて頂きました。

hiniarata.jp

 

始めに管理画面トップページをアクセスすると、ダッシュボードが表示されます。

f:id:shindohiromu:20161207135656p:plain

上画像:通常のダッシュボード

ダッシュボードには、「baserCMSニュース」「公開ページ数」「最近の動き」がデフォルトで表示されます。

クライアントによっては「baserCMSニュース」と「公開ページ数」が不要な場合があると思うので、その二つを取り除き、よく使いそうな機能をアイコンとして表示させる。

というのが今回紹介する内容になります。

 

まず、アイコンを用意します。

フリーのアイコンを検索してみると、意外に使えそうなものが出てくるので、そこから取ってきたものを使うと良いと思います。

 

次に、HTMLやCSSを編集します。

コアにあるダッシュボードのViewファイルを

/lib/Baser/View/Dashboard/admin/index.php

appフォルダ以下の下記ファイル先にコピーして編集します。

/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ファイルを下記パスに作成します。

/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;
}

 

これで管理画面のダッシュボードをランチャー化することが出来ます。

f:id:shindohiromu:20161207173230p:plain

上画像:カスタマイズ後のダッシュボード

わかりやすいですし、パソコンが苦手な方でもなんだか使えそうな気がします。とても便利な機能ですね。

 

このようにbaserCMSの勉強会に参加したことによって、経験豊富な方たちから色んな情報が聞けます。

とても勉強になります。

baserCMSの勉強会は、頻繁にあるみたいなので、

行かれたことがない方、ぜひ行ってみてください。(その後の懇親会もぜひ)