wordpress Vicuna のナビゲーションバー　globalNavi　の色を保持する方法

やり方は想像はついていたのですが、

急に迫られて（お客さんのサイトの件で）ちょっと改造したものを配布しておきます。

あまりスマートな方法では無いので、ご了承を。

やっている方にはわかる話なんですが、

ページを複数作ったものを、自動的にメニューバーにする機能事がこのプラグインについています。

ただ、このメニューバーは全色統一で、”mod_gNavi.css” あたりのCSSで色や幅を制御しています。

大体はここまでたどり着いて、幅を調整し、色も変えちゃったりしていますよね。

リンク先のメニューバーの色を変える方法をちょっと書いておこうかなーと思います。 

 そして、これはカテゴリー別やシングルページなど、特定のページでちょっとデザインを変えたい！バナーなどを出したい！という場合にも再利用できますので、興味のある方はご利用くださいね。

長くなるので以下からどうぞ。

1.前提

私はページのタイトルがそのまま反映されるこのバーはあまり好きでは無いので、

一度ページを作成して、コピペで

<?php  vicuna_global_navigation() ?>

の部分を、

 <ul id=”globalNavi”>
  <li class=”page_item page-item-1″><a href=”monosashi.com/home” title=”HOME”>Monosashiホーム</a></li>

  <li class=”page_item page-item-2″><a href=”monosashi.com/about” mce_href=”monosashi.com/about” title=”HOME”>about　US</a></li>

・

・

以下略

と好きな名前に変えて利用しています。

この部分の制御は

vicunaのscriptフォルダの中のconfig.phpあたりで制御している物ですので、こっちをいじれば原理は同じと思います。

面倒なので考えませーん

2.どうやるか？

えー、PHPのIF文でやりました。負荷はそれなりにある。。かと思います。スマートではありません。　時短です。

まず　mod_gNavi.css　の一番最後でも良いので、以下の様なCSSを書き足しておきましょう。
ul#globalNavi li#now a{
 background-image: url( );
}

URL の中はお好きな色の画像です。　このまま使うと白になります。

文字の色などを変えたい場合はCSSをもっと書く必要があります。　頑張ってください。 

次に、各テンプレート制御のPHPに移ります。（もしくはconfigi.php です。　）

 前提　で書いたとおり、ナビゲーション部分を自分で入力したと仮定してー

 変更するテンプレートは

 index.php

page.php

です。　手書きですので、カテゴリーへのリンクを入れていたりするので、場合によっては

category.php

single.php

archive.php

など変更しても良いでしょう。

index.php

 <ul id=”globalNavi”>
  <li ID=now a href=”monosashi.com/home” title=”HOME”>Monosashiホーム</a></li>

  <li ><a href=”monosashi.com/about” mce_href=”monosashi.com/about” title=”HOME”>about　US</a></li>

・・・

index.php はHOMEだけが色が変わればよいので、こんな感じでOK　NOWを見せます。

page.php

 <ul id=”globalNavi”>
  <li a href=”monosashi.com/home” title=”HOME”>Monosashiホーム</a></li>

  <li <?php
$nowpage = get_permalink();
if($nowpage == ‘http://monosashi.com/about’) { echo ‘id=”now”‘; }
else {
 echo ”;
}
?>><a href=”http://monosashi.com/about” title=”HOME”>about　US</a></li>

・・・ 以下同様

のように記述します。

リンクが複数ある場合は,  文字部分のURLを同じ表記にして続ければ、OK。

今いるページが、同じ時に、CSSのNOWを見て色が変わっている状態です。

$nowpage　に先にget_permalink();　を格納してしまうので、省略しても良いでしょう。　また逆に格納する必要もないかもしれません。

初めての方に簡単に説明すると、

get_permalink();　　これはwordpressオリジナルのもので、　今いるURLを持ってきなさいという物です。

これを$nowpage　に格納しました。　$nowpage＝今いるURL　となります。

これを元に、

もし、今いるURL　＝　’http://monosashi.com/　　ならば、

id=”now　を入力せよ

違うなら書くな。

とういう単純な物ですね。

何個かのメニューバーであれば、それほど重くならないと思いまーす。

応用して、get_category() 等で、　今のカテゴリーと同じ場合　や、

特定のページで、get_permalink();　　と同じならば！！　という形で、

その時にだけ出現するCSS用のIDなどを出現させることによって、

いろいろ出来ると思います。

結構、カテゴリーによって表示するタイトルなど変えたいみたいな話は出るのですが、

結構大がかりならば、それ専用のプラグインなど使用された方が楽かと思いますよー。

ではこんな所で申し訳ありませんが、、どうぞー

(3 投票, 平均値/最大値: 4.67 / 5)

 読み込み中 ...