システムメニューを常に表示する(その3)

「システムメニューを常に表示する」のその3として、ページのタイトルの上にグローバルナビゲーションを表示する手順を紹介します。

グローバルナビゲーションの表示

1.書き換えるテンプレートを探す

管理画面の各ページでは、左上にそのページのタイトルが表示されます。
このタイトルの上に、グローバルナビゲーションを表示するようにします。

ページのタイトルの部分のHTMLを調べてみると、以下のような構造になっています。 

<h1 id="page-title" class="title page first-child">ページのタイトル</h1>

そこで、管理画面のテンプレートの中で、id属性が「page-title」になっているh1要素を検索します。
すると、以下の3つのファイルにこの部分が含まれていることが分かります。

  • 「tmpl」→「cms」→「include」ディレクトリの「header.tmpl」ファイル
  • 「tmpl」→「dialog」→「include」ディレクトリの「header.tmpl」ファイル
  • 「tmpl」→「include」ディレクトリの「chromeless_header.tmpl」ファイル

これらのうち、通常の管理画面では、「tmpl」→「cms」→「include」ディレクトリの「header.tmpl」ファイルが使われます。
そこで、このファイルをalt-tmplディレクトリにコピーして書き換えます。

なお、「tmpl」→「dialog」→「include」ディレクトリの「header.tmpl」ファイルは、iframeのダイアログボックスを表示する際に使われます。
また、「tmpl」→「include」ディレクトリの「chromeless_header.tmpl」ファイルは、ポップアップウィンドウのダイアログボックスを表示する際に使われます。

2.header.tmplを書き換える

header.tmplの中で、前述したh1要素の前に以下のHTMLを出力して、グローバルナビゲーションが表示されるようにします。
scope-selector.tmplに対して行った書き換えを参考にして、HTMLを組み立てています。 

<ul class="admin-breadcrumb">
  <li>
  <mt:if name="can_access_overview">
    <a href="<$mt:var name="mt_url"$>?__mode=dashboard&blog_id=0"><__trans phrase="System Overview"></a>
  <mt:else>
    <__trans phrase="System Overview">
  </mt:if>
  </li>
  <mt:if name="scope_type" eq="website">
    <li>
      <mt:if name="curr_website_can_link">
        <a href="<$mt:var name="mt_url"$>?__mode=dashboard&blog_id=<$mt:var name="curr_website_id"$>"><mt:var name="curr_website_name" escape="html"></a>
      <mt:else>
        <mt:var name="curr_website_name" escape="html">
      </mt:if>
    </li>
  <mt:else name="scope_type" eq="blog">
    <li>
      <mt:if name="curr_website_can_link">
        <a href="<$mt:var name="mt_url"$>?__mode=dashboard&blog_id=<$mt:var name="curr_website_id"$>"><mt:var name="curr_website_name" escape="html"></a>
      <mt:else>
        <mt:var name="curr_website_name" escape="html">
      </mt:if>
    </li>
    <li>
      <a href="<$mt:var name="mt_url"$>?__mode=dashboard&blog_id=<$mt:var name="curr_blog_id"$>"><mt:var name="curr_blog_name" escape="html"></a>
    </li>
  </mt:if>
</ul>

3.CSSをカスタマイズする

最後に、CSSをカスタマイズして表示を整えます。
昨日の記事で作成したuser.cssに、以下の記述を追加します。 

.admin-breadcrumb li {
	float: left;
}
.admin-breadcrumb :not(:first-child):before {
	content: '\00a0\00bb\00a0';
}
.admin-breadcrumb:before, .admin-breadcrumb:after {
    display: block;
    height: 0;
    visibility: hidden;
    content: "\00a0";
}
.admin-breadcrumb:after {
	clear: both;
}