ダッシュボードにリンクを入れる

2011年04月26日

a-blog cmsのダッシュボード

a-blog cmsのダッシュボードです。管理ページにアクセスすると最初に表示される画面ですからa-blog cmsを使っている人にはお馴染みですよね。このダッシュボードの中に、外部のサイトへのリンクや特定の記事ページのリンクを追加したくなりました。
どんな時に便利かというと、外部のサイトだとGoogle Analyticsへのリンクやその他外部のWebサービスのマイページへのリンクなどがあれば便利ですし、毎回特定の記事に内容を追加したり上書きする必要がある場合、ここからダイレクトに行ければクライアントさんにも嬉しいはず。
今回はこのダッシュボードにリンクを追加する方法を紹介します。説明で使うのはa-blog cms1.4.1です。

右上のショートカットの中に設定できそうな気がしますが、ここはa-blog cms内で設定するモジュールのコンフィグなどにダイレクトにアクセスできるように設定するショートカットなので、ここに外部リンクを設定したり、特定記事に進むリンクを設定することはできません。なので、この下あたりに場所を作ってみましょう。

１．準備

Pic.2

Pic.3

まずダッシュボードの元ファイルを使用するテーマフォルダにコピーしてしのファイルを編集しましょう。a-blog cmsのシステムは、使用しているテーマフォルダのテンプレートファイルをまず参照するために探します。そこに目的のファイルが無ければ、「system」の中を参照しに行きます。ですから何かをする時はかならずここからファイルをコピーして編集し元のファイルは壊さないようにしておくのがコツです。
今回のダッシュボードのファイルは、「themes > system > admin > top.html」（Pic.2）です。これをコピーしてサイトで使用中のテーマフォルダの該当フォルダにペーストします。今回は「company3」を使いますので、「themes > company3 > admin > top.html」（Pic.3）です。

２．top.htmlを開い編集してみる

Pic.4

ファイルを開くとダッシュボードの内容が書かれているのがわかると思います。
今回は右上のショートカットの下に項目を追加しようとしていますので、240行目あたりのh2の中にいる「ショートカット」のブロックの下に追加していきます。（Pic.4）
わかりやすいように「ユーザーショートカット開始▼▼▼」と「ユーザーショートカット終了▲▲▲」のコメントを入れておきましょう。

３．ショートカットのコードをコピペ

Pic.5

上のショートカットのブロックと同じような感じにしたいのでそのままコピペしてみましょう。
全体がdivで括られた中に、divで囲まれたh2。その下にulとliでリンクが書かれている感じです。ulにはshortcutというidが付いていますが、idが重複しちゃうとだめなので、shortcut2とでもしておきます。（Pic.5）

<!-- 　ユーザーショートカット開始▼▼▼　 -->
<div class="dashboardContents">
	<div class="indexHeading"><h2>記事編集ショートカット</h2></div>
	<ul id="shortcut2">
	<li><a href="#">リンクを入れるテストです</a></li>
	<li><a href="#">ほむほむ</a></li>
	</ul>
</div>
<!-- 　ユーザーショートカット終了▲▲▲　 -->

４．確認＆CSSを追記

Pic.6

Pic.7

ダッシュボードを見てみると、ショートカットのブロックの下にちゃんと追加されています。（Pic.6）
リンクの部分の表示が変なのは先程の「ul id="shortcut2"」のスタイルが無いからだと思いますので、shortcutと同じスタイルを追加してみましょう。Firebugとかを使うとどこにCSSが書かれているか確認できます。「themes > system > CSS > system.css」に「#shortcut2」を追記します。４箇所あるようですのでそれぞれに追記します。（Pic.7）
一応これで、ちゃんとリンク先のURLとラベルを書けばOKですが、リンクを追加や修正するたびにこのファイルを編集するのはちょっと賢くないので、せっかくa-blog cmsなのですから、ここも管理画面から編集できるようにしておきましょう。

５．モジュールIDを設定しコードを追加

Pic.8

Pic.9

Navigationモジュールを使って適当なID名を付けます。ここでは「D01usrshortcut」にしました。（Pic.8）
先程３（Pic.5）で編集していた部分にナビゲーションモジュールのコードを貼り付けます。a-blog cmsのサイトのリファレンスにスニペットがありますのでそこからコピペしてください。先頭の「BEGIN_MODULE Navigation」にIDを追記して「BEGIN_MODULE Navigation id="D01usrshortcut"」にします。
これで、管理画面からリンクを追加したり編集したり出来るようになりました。「BEGIN_MODULE Navigation id="D01usrshortcut"」と「END_MODULE Navigation」をdivの外に出して全体を囲むことで、何もリンクなどを設定していない場合は、このブロック丸ごと出現しないのでタイトルや枠だけが残ることはありません。

６．設定画面にリンクを設定

Pic.10

Pic.11

後は、管理画面で「リンク名」「URI」「target属性」を設定すればダッシュボードに表示されるようになります。（Pic.10）
これで設定したものがダッシュボードで表示されます。後は、上のショートカットブロックみたいにアイコンを表示したい場合は、外部リンクアイコンやサイト内リンクアイコンなどを作ってCSSの設定をすればいいのですが、ちょっと面倒なのでショートカットブロックの「会社の基本情報の設定」のものをそのまま使っておきましょう。Firebugなどでここにあたっているスタイル（下記のコード）をそのままコピーして、（Pic.10）でリンクを設定した画面の「属性」にコードを貼り付けます。（Pic.11）

 style="background-image: url(http://localhost/themes/system/images/config/shortcut/blog_edit.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: 10px 50%; background-repeat: no-repeat no-repeat; " class="shortcutList"

Pic.12

これで完成です。わかりやすいようにまわりくどく書きましたが、結局はダッシュボードのhtmlにナビゲーションモジュールをコピペするだけのことなので簡単ですよね。管理画面もモジュールを使っていろいろとカスタマイズできるのでクライアントさんが使いやすいような画面を作っておくことも可能になります。

一覧へ

a-blog cms