6.32 グローバルナビゲーション

ウェブページタイトルをグローバルナビゲーションのメニューに表示する

P.533

2.サンプルテンプレートの場合、「ヘッダー」テンプレートモジュールの最後に、次の内容を追加します。デフォルトテンプレートの場合は、「バナーヘッダー」テンプレートモジュールの最後に、次の内容を追加します。

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
      <li><a href="<mt:blogURL />business.html">事業案内</a></li>
      <li><a href="<mt:blogURL />products.html">製品情報</a></li>
      <li><a href="<mt:blogURL />recruit.html">採用情報</a></li>
      <li><a href="<mt:blogURL />profile.html">会社概要</a></li>
      <li><a href="<mt:blogURL />contact.html">お問い合わせ</a></li>
    </ul>
  </dd>
</dl>

「スタイルシート」インデックステンプレート（サンプルテンプレート）

...前略...
#navi {
    border-top: 1px solid #bed5b4;
    border-bottom: 1px solid #bed5b4;
    background: #ddd;
}
#navi dt {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
#navi dd {
    width: 900px;
    border-left: 1px solid #bed5b4;
}
html > body #navi dd {
    margin: 0 auto;
}
#navi dd ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navi dd ul li {
    float:left;
    border-right: 1px solid #bed5b4;
    width: 100px;
    letter-spacing: 0.1em;
}
#navi dd ul li a {
    display: block;
    color: #333;
    font-size: 75%;
    text-align: center;
    line-height: 2.2;
    text-decoration: none;
}
#navi dd ul li a:link,
#navi dd ul li a:visited {
    background: #eee;
}
#navi dd ul li a:hover {
    background: #999;
}
#navi, /* for ie7 */
#navi dd ul li a { /* for ie6 */
    height: 28px;
}
...後略...

P.534

#navi dd（デフォルトテンプレート用）

#navi dd {
    width: 920px;
    border-left: 1px solid #bed5b4;
}

#navi dd ul li a（デフォルトテンプレート用）

#navi dd ul li a {
    display: block;
    color: #333;
    text-align: center;
    line-height: 2.1;
    text-decoration: none;
}

●移動先ページのメニューを配色を変更する

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
      <li><a href="<mt:blogURL />">ホーム</a></li>
      <li><a href="<mt:blogURL />business.html" class="business">事業案内</a></li>
      <li><a href="<mt:blogURL />products.html" class="products">製品情報</a></li>
      <li><a href="<mt:blogURL />recruit.html" class="recruit">採用情報</a></li>
      <li><a href="<mt:blogURL />profile.html" class="profile">会社概要</a></li>
      <li><a href="<mt:blogURL />contact.html" class="contact">お問い合わせ</a></li>
...後略...

P.535

「ヘッダー」テンプレートモジュール（サンプルテンプレート）

  ...前略...
  <title><mt:getVar name="title"></title>
  <link rel="stylesheet" href="<mt:link template="スタイルシート" />" type="text/css" />
  <mt:if name="page_template">
<style type="text/css">
#navi dd ul li a.<mt:pageBasename />:link,
#navi dd ul li a.<mt:pageBasename />:visited {
    color: #000;
    background: #ddd;
}
#navi dd ul li a.<mt:pageBasename />:hover {
    color: #fff;
    background: #999;
}
</style>
  </mt:if>
  <mt:if name="search_results_template">
  ...後略...

...前略...
<style type="text/css">
#navi dd ul li a.products:link,
#navi dd ul li a.products:visited {
    color: #000;
    background: #ddd;
}
#navi dd ul li a.products:hover {
    color: #fff;
    background: #999;
}
</style>
...後略...

<li><a href="<mt:blogURL />products.html" class="products">製品情報</a></li>

P.536

●グローバルナビゲーションをセンタリングする

「スタイルシート」インデックステンプレート

...前略...
#navi {
    text-align: center;	←グローバルナビゲーションのセンタリングを行います
}
#navi dd {
    width: 606px;	←グローバルナビゲーション全体の幅を設定します
}
...後略...

グローバルナビゲーションのメニューを自動で表示する

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
<mt:blogPageCount setvar="page_count" />
<mt:pages sort_by="excerpt" sort_order="ascend" lastn="$page_count">
      <li><a href="<mt:pagePermalink />" class="<mt:pageBasename />"><mt:pageTitle /></a></li>
</mt:pages>
    </ul>
  </dd>
</dl>

P.537

●グローバルナビゲーションに表示するウェブページのフィルタリングを行う

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
<mt:blogPageCount setvar="page_count" />
<mt:pages sort_by="excerpt" sort_order="ascend" lastn="$page_count">
  <mt:pageExcerpt no_generate="1" setvar="page_excerpt" />
  <mt:if name="page_excerpt">
      <li><a href="<mt:pagePermalink />" class="<mt:pageBasename />"><mt:pageTitle /></a></li>
  </mt:if>
</mt:pages>
    </ul>
  </dd>
</dl>

P.538

●カスタムフィールドを利用して、ソートやフィルタリングを行う

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
<mt:blogPageCount setvar="page_count" />
<mt:pages sort_by="field:pagenavigationnumber" sort_order="ascend" lastn="$page_count">
  <mt:if tag="pageNavigationNumber">
      <li><a href="<mt:pagePermalink />" class="<mt:pageBasename />"><mt:pageTitle /></a></li>
  </mt:if>
</mt:pages>
    </ul>
  </dd>
</dl>

カテゴリ名をグローバルナビゲーションのメニューに表示する

P.539

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
      <li><a href="<mt:blogArchiveURL />business/" class="business">事業案内</a></li>
      <li><a href="<mt:blogArchiveURL />products/" class="products">製品情報</a></li>
      <li><a href="<mt:blogArchiveURL />recruit/" class="recruit">採用情報</a></li>
      <li><a href="<mt:blogArchiveURL />profile/" class="profile">会社概要</a></li>
      <li><a href="<mt:blogArchiveURL />contact/" class="contact">お問い合わせ</a></li>
    </ul>
  </dd>
</dl>

「ヘッダー」テンプレートモジュール

  ...前略...
  <title><mt:getVar name="title"></title>
  <link rel="stylesheet" href="<mt:link template="スタイルシート" />" type="text/css" />
<mt:if name="category_archive">
<style type="text/css">
#navi dd ul li a.<mt:categoryBasename />:link,
#navi dd ul li a.<mt:categoryBasename />:visited {
    color: #000;
    background: #ddd;
}
#navi dd ul li a.<mt:categoryBasename />:hover {
    color: #fff;
    background: #999;
}
</style>
</mt:if>
  <mt:if name="search_results_template">
  ...後略...

グローバルナビゲーションのメニューを自動で表示する

P.540

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
<mt:categories>
  <mt:if tag="categoryCount">
    <mt:if tag="categoryDescription">
      <mt:categoryDescription setVar="category_description" />
      <mt:setVarBlock name="category_menu">
        <li><a href="<mt:categoryArchiveLink />" class="<mt:categoryBasename />"><mt:categoryLabel /></a></li>
      </mt:setVarBlock>
      <mt:setVar name="category_menu_list{$category_description}" value="$category_menu" /> 
    </mt:if>
  </mt:if>
</mt:categories>
<mt:loop name="category_menu_list" sort_by="key">
  <mt:getVar name="__value__" />
</mt:loop>
    </ul>
  </dd>
</dl>

<mt:loop name="category_menu_list" sort_by="key reverse">

数値として降順にソート

<mt:loop name="category_menu_list" sort_by="key numeric">

数値として昇順にソート

<mt:loop name="category_menu_list" sort_by="key numeric reverse">

カテゴリのカスタムフィールドを利用して、ソートやフィルタリングを行う

P.542

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
<mt:categories>
  <mt:if tag="categoryCount">
    <mt:if tag="categoryNavigationNumber">
      <mt:categoryNavigationNumber setVar="category_number" />
      <mt:setVarBlock name="category_menu">
        <li><a href="<mt:categoryArchiveLink />" class="<mt:categoryBasename />"><mt:categoryLabel /></a></li>
      </mt:setVarBlock>
      <mt:setVar name="category_menu_list{$category_number}" value="$category_menu" /> 
    </mt:if>
  </mt:if>
</mt:categories>
<mt:loop name="category_menu_list" sort_by="key">
  <mt:getVar name="__value__" />
</mt:loop>
    </ul>
  </dd>
</dl>

ウェブページとカテゴリを併用する

P.543

「ヘッダー」テンプレートモジュール（サンプルテンプレート）
「バナーヘッダー」テンプレートモジュール（デフォルトテンプレート）

...前略...
<dl id="navi">
  <dt>主なメニュー</dt>
  <dd>
    <ul class="clearfix">
      <li><a href="<mt:blogURL />">ホーム</a></li>
<mt:blogPageCount setvar="page_count" />
<mt:pages lastn="$page_count">
  <mt:if tag="pageKeywords">
    <mt:pageKeywords setVar="page_keywords" />
    <mt:setVarBlock name="page_menu">
      <li><a href="<mt:pagePermalink />" class="<mt:pageBasename />"><mt:pageTitle /></a></li>
    </mt:setVarBlock>
    <mt:setVar name="global_menu{$page_keywords}" value="$page_menu" /> 
  </mt:if>
</mt:pages>
<mt:categories>
  <mt:if tag="categoryCount">
    <mt:if tag="categoryDescription">
      <mt:categoryDescription setVar="category_description" />
      <mt:setVarBlock name="category_menu">
        <li><a href="<mt:categoryArchiveLink />" class="<mt:categoryBasename />"><mt:categoryLabel /></a></li>
      </mt:setVarBlock>
      <mt:setVar name="global_menu{$category_description}" value="$category_menu" /> 
    </mt:if>
  </mt:if>
</mt:categories>
<mt:loop name="global_menu" sort_by="key">
  <mt:getVar name="__value__" />
</mt:loop>
    </ul>
  </dd>
</dl>

「ヘッダー」テンプレートモジュール

  ...前略...
  <title><mt:getVar name="title"></title>
  <link rel="stylesheet" href="<mt:link template="スタイルシート" />" type="text/css" />
  <mt:if name="page_template">
<style type="text/css">
#navi dd ul li a.<mt:pageBasename />:link,
#navi dd ul li a.<mt:pageBasename />:visited {
    color: #000;
    background: #ddd;
}
#navi dd ul li a.<mt:pageBasename />:hover {
    color: #fff;
    background: #999;
}
</style>
  </mt:if>
<mt:if name="category_archive">
<style type="text/css">
#navi dd ul li a.<mt:categoryBasename />:link,
#navi dd ul li a.<mt:categoryBasename />:visited {
    color: #000;
    background: #ddd;
}
#navi dd ul li a.<mt:categoryBasename />:hover {
    color: #fff;
    background: #999;
}
</style>
</mt:if>
  <mt:if name="search_results_template">
  ...後略...