ブログトップ

SOY CMSの管理画面の共通部品について

2014年03月11日

SOY CMSの管理画面のHTMLの修正に関して、

headerやfooterといった共通部品についてを説明します。

管理画面を作成するにあたって、

赤い枠で囲ったような箇所のデザインは共通であることが多いです。

ページ数が少なければ問題はないのですが、

ページ数が多くなった場合にタブの追加等の修正を行うのは億劫です。

多くのシステムでは共通部分として括りだしという機能がありますが、

SOY CMSの管理画面にもそのような機能があります。

たとえば、

赤い枠で囲ったタブの箇所ですが、

トップページの赤い枠で囲った箇所のHTMLを見ると

/soycms/webapp/pages/IndexPage.html

<div id="menu" class="span-24 last" soy:page="_common.TabPage"></div>

タブの箇所にsoy:page="_common.TabPage"という記述があります。

soy:pageに入れている値は、

/soycms/webapp/pages/以下のファイルをドット区切りでの指定となりますので、

/soycms/webapp/pages/_common/TabPage.class.php

(soy:pageでは.class.phpは省略)

(エクストラモードの場合は、pagesの箇所が指定した値に変わります)

エクストラモードでSOY CMSの管理画面をカスタマイズする

_commonディレクトリのTabPage.class.phpを開くことになります。

このファイルのコンストラクタでHTMLPage::HTMLPage();を呼び出しており、

TabPage.htmlを表示するという指示になっています。

/soycms/webapp/pages/_common/TabPage.html

を開いてみると、

<div soy:id="not_simple_mode" id="tab" class="span-24 last">
	<a soy:link="Index">
		<div soy:id="dashboard" id="tab_left" class="menu_active">
			<p>ホーム</p>
		</div>
	</a>
	<a soy:link="Entry">
		<div soy:id="entry" class="menu_inactive span-3">
			<p>記事</p>
		</div>
	</a>
	<a soy:link="Label">
		<div soy:id="label" class="menu_inactive span-3">
			<p>ラベル</p>
		</div>
	</a>
	<a soy:link="Page">
		<div soy:id="page" class="menu_inactive span-3">
			<p>ページ</p>
		</div>
	</a>
	
	<a soy:link="Plugin">
		<div soy:id="plugin" class="menu_inactive span-3">
			<p>プラグイン</p>
		</div>
	</a>
</div soy:id="not_simple_mode">

<!-- 以下は省略 -->

この通り、タブに関するHTMLの記述がありました。

SOY CMSの管理画面はsoy:pageをうまく活用して、

カスタマイズしやすいコードにしています。