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; }
実際には以下を実行します。
- 「アイコン」と「説明」と呼ばれるカスタムフィールドのコンテンツを取得します: get_post_meta($page_id,’icon’,true);
- 項目がどのメニューレベルにあるか調べます。トップメニューは「0」、ドロップダウン項目は「1」です。
- トップメニュー項目については、24×24のアイコン一つ、ページタイトル、説明を追加します。
- ドロップダウンメニューに対しては、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フィルターのため、何回でも呼び出し、いくつでもフィールドを追加できます。