Skip Navigation
更新済み
2月 12, 2013

WPMLはあなたのHTMLのメニューに素敵なナビゲーションメニューを作成します。

例を見てみましょう。 この例のようにトップ部分のナビゲーション・メニューにアイコンと簡略な説明を追加するとします。

ドロップダウン・メニュー項目にはアイコンと説明を含む
ドロップダウン・メニューはアイコンと説明を含む

まず各ページにカスタムフィールドを追加し、そこへアイコンと説明文を記載します。そしてメニュー機能に行き、これらのフィールドをメニュー項目として使用するよう指示します。

ステップ1) ページにカスタムフィールドを追加する

各ページに独自なアイコンと説明を含むにはカスタムフィールドを使います。

アイコンと説明文のカスタムフィールドをページに追加
アイコンと説明用のカスタムフィールドをページに追加

ステップ2) メニュー項目を作成するテーマ関数を設定する

メニュー項目のHTMLを作成する関数を作成します。初期設定ではメニューの各項目がページタイトルを持ちます。この関数はメニュー項目内に任意のHTMLを置かせます。

WPMLはドロップダウン効果やセクションやその他からメニュー全体を作成します。この関数は各項目のコンテンツをコントロールします。

以下は私の関数です。

function text_for_menu($page_id, $menu_level){
  $ret = '';
  $icon = get_post_meta($page_id,'icon',true);
  $description = get_post_meta($page_id,'Description',true);
  if($menu_level==0){
    if ($icon) $ret .= '<img width="24" height="24" style="vertical-align: middle; margin:0 5px 0 5px;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
    $ret .= '<br /><span>'.$description.'</span>';
  } else {
    if ($icon) $ret .= '<img width="16" height="16" style="vertical-align: middle; margin:0 5px 0 0;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
  }
  return $ret;
}

実際には以下を実行します。

  1. 「アイコン」と「説明」と呼ばれるカスタムフィールドのコンテンツを取得します: get_post_meta($page_id,’icon’,true);
  2. 項目がどのメニューレベルにあるか調べます。トップメニューは「0」、ドロップダウン項目は「1」です。
  3. トップメニュー項目については、24×24のアイコン一つ、ページタイトル、説明を追加します。
  4. ドロップダウンメニューに対しては、16×16アイコンを一つとページタイトルを追加します。

ステップ3) WPMLにその関数を付加します。

最後にWPMLにメニュー項目を作る際、この関数の使用を指示します。 以下のラインを functions.phpに追加することで実施されます。

add_filter('icl_nav_page_html', 'text_for_menu', 1, 2);

このラインはWordPressに text_for_menu と呼ばれる関数を WPMLの icl_nav_page_html に追加するよう指示します。標準のWPフィルターのため、何回でも呼び出し、いくつでもフィールドを追加できます。