Wordpressのメニューにページ内リンクを混入

WordPressのメニューにページ内リンクを混入

明示的に除外しない限りだいたい全ページについてくる共通メニューのカスタマイズメモ。

使っているテンプレートが縦スクロールでセクションを並べるタイプだったので、トップページだけはページを読み直しせずにページ内リンクの移動になるようにしたかったのです。
だけど他のページからは、アンカー付きでトップページへリンクしてくれないと困ります。

メニューを書き出しているのは、Walker_Nav_Menuクラス
wp-includes/class-walker-nav-menu.php にあります。
少し前のWPだと、wp-includes/nav-menu-template.phpにありました。

このクラスを継承してメニューを作って、必要なところだけ書き換えます。

いつもの、functions.phpに、Walker_Nav_Menuを継承したクラスを追加しました。

元のWalker_Nav_Menuクラスにはいくつか要素がありますが、star_el関数に、リンクのhtmlタグの内容があります。カスタマイズすべきはここだけなので、とりあえず、まずはstar_el関数を、丸ごとMy_Walker_Nav_Menuに持ってきました。

ソースの中に、それっぽい一行が。

$atts[‘href’]   = ! empty( $item->url )        ? $item->url        : ;

どうやら $item->url に入った値がそのまま、リンクURLになるようです。

というわけで、その手前に追記。
リンクのURLが#ではじまるときに、Wordpressのホームページではそのままアンカーへ(ページ内リンク)、他の時はトップページへのリンクにアンカーをつけたものにします。

 

最終的には、こうなりました。
黄色いところ以外は元のWalker_Nav_Menuクラスからのコピペなので、実際に使っているWPのものを使ってください。

Wordpress管理画面 > 外観 > メニューは、ページ内リンクはカスタムリンクで#で始まるものにします。
#の内容は、トップページのソースコードから、各セクションのタイトルあたりに<a href=”#latestnews”>などアンカーが埋め込まれてあればそれを。
もしくは、<a href=”#アンカー”>で自分で作成したものを。とにかく、#で始まるようにします。

kohukumenu

そして、テンプレート内のWalker_Nav_Menuを表示している場所を、作成したMy_Walker_Nav_Menuに置き換えます。

おそらく、header.phpです。ソースコードを「Walker_Nav_Menu」でテキスト検索して、「My_Walker_Nav_Menu」に置き換えます。

使ってるテンプレートだと、こんな感じです。

「My_Walker_Nav_Menu」になっていますが、元は「Walker_Nav_Menu」でした。

 

実際に動いているサイトが、こちらです。

http://kohuku.jp/

(サンドイッチを食べて、野菜を買って家で野菜を食べてね!)

 

ところで、トップページがとうとうブログだけになりました。
ボスはエネリークスに旅立ちました。 http://eneleaks.com/

 

Satokoが、弊社本体のスタッフブログで紹介されていたので、本人に内緒でこっそりリンクを貼ります。
新しい仲間が増えました!〜その6〜 – ・゚・発電屋ブログ・゚・