外部ファイル化したヘッダーナビゲーションが機能しない

(@gapel)

テーマを作成しております。
これまで、ヘッダーの画像で作成したグローバルナビゲーションを、テンプレートファイルごとに記述していたので、
hdr.php
という外部ファイルをつくり、そこだけに入れました。
これで、ナビゲーションに変更があってもこのhdr.phpを変更するだけで完了させることができます。

しかし、ここに記載したPHP条件分岐コードが機能しないのです。
普通にエラー無く出力自体はされるのですが、意図しない状態で出力されてしまいます。

グローバルナビゲーションのうち、「製品」のページを開いたときは、「製品」の画像だけがマウスオーバーの画像を表示させて、現在地がどこのカテゴリーにいるかを視覚的に見せたいのですが、
マウスアウト時の画像のままになってしまいます。
そして、「製品」のページを開いているのだから、「ホーム」のナビゲーションはマウスアウト画像になって欲しいのに、マウスオーバー画像になっています。

つまり、「製品」ページを開いているのに、ホームにいるナビゲーションの状態になっているのです。
これは、「製品」ページに限らず、他のページ、「会社概要」のカテゴリでもどこでも同じ状態です。

以下が記載したコードなのですが、このコードで、単なる.phpでウェブページを作ったサイトはこれで機能します。WordPressだと何か勝手が違うのでしょうか？

<ul>
	<?php if(strpos('/index.php', $_SERVER['PHP_SELF']) === false){ ?>
	<li><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01.gif" alt="ホーム" name="gbnv01" width="110" height="48" border="0" id="gbnv01" onMouseOver="MM_swapImage('gbnv01','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01on.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></li>
	<?php }else{ ?>
	<li><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01on.gif" alt="ホーム" name="gbnv01" width="110" height="48" border="0" id="gbnv01" onMouseOver="MM_swapImage('gbnv01','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01on.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></li>
	<?php } ?>

	<?php if(strpos($_SERVER['PHP_SELF'], '/product/') === false){ ?>
	<li><a href="<?php bloginfo('url'); ?>/product/"><img src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv02.gif" alt="NEiWorks" name="gbnv02" width="150" height="48" border="0" id="gbnv02" onMouseOver="MM_swapImage('gbnv02','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv02on.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></li>
	<?php }else{ ?>
	<li><a href="<?php bloginfo('url'); ?>/product/"><img src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv02on.gif" alt="NEiWorks" name="gbnv02" width="150" height="48" border="0" id="gbnv02" onMouseOver="MM_swapImage('gbnv02','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv02on.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></li>
	<?php } ?>

	<?php if(strpos($_SERVER['PHP_SELF'], '/corpinfo/') === false){ ?>
	<li><a href="<?php bloginfo('url'); ?>/corpinfo/"><img src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv03.gif" alt="corpinfo" name="gbnv03" width="150" height="48" border="0" id="gbnv03" onMouseOver="MM_swapImage('gbnv03','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv03on.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></li>
	<?php }else{ ?>
	<li><a href="<?php bloginfo('url'); ?>/corpinfo/"><img src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv03on.gif" alt="corpinfo" name="gbnv03" width="150" height="48" border="0" id="gbnv03" onMouseOver="MM_swapImage('gbnv03','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv03on.gif',1)" onMouseOut="MM_swapImgRestore()" /></a></li>
	<?php } ?>

以下、ナビゲーション続く .....

</ul>

各テンプレートファイルのヘッダーを読み込む記述は、
<?php include (TEMPLATEPATH . “/hdr.php”); ?>
としております。

どう記述すればまともに条件分岐できるでしょうか？

6件の返信を表示中 - 16 - 21件目 (全21件中)

← 1 2

CyberCypher

(@cybercypher)

12年、 8ヶ月前

<li><a href="<?php bloginfo('url'); ?>/">
	<img
		src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01.gif"
		alt="ホーム" name="gbnv01" width="110" height="48" border="0" id="gbnv01"
		onMouseOver="MM_swapImage('gbnv01','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01on.gif',1)"
		onMouseOut="MM_swapImgRestore()" />
		</a>
	</li>
	<li><a href="<?php bloginfo('url'); ?>/">
	<img
		src="<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01on.gif"
		alt="ホーム" name="gbnv01" width="110" height="48" border="0" id="gbnv01"
		onMouseOver="MM_swapImage('gbnv01','','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01on.gif',1)"
		onMouseOut="MM_swapImgRestore()" />
		</a>
	</li>

TAGの中がごちゃごちゃしてたので見やすいように改行してみました
今さらながら気づいたのですが・・・
「MM_swapImage」や「MM_swapImgRestore()」ってどうなってますか？

トピック投稿者

gapel

(@gapel)

12年、 8ヶ月前

「MM_swapImage」や「MM_swapImgRestore()」ってどうなってますか？

これは、Dreamweaverが提供する昔からあるロールオーバー用コードです。
画像ボタンをマウスオーバーしたらマウスオーバー用の画像に切り替わる、という機能のためのソースで、Dreamweaverが自動的に生成します。
外部化したjsファイルにこの機能のためのJavaScriptのfunction関数が記載されています。

また、Dreamweaverで、bodyタグにもマウスオーバーされる画像をロードしておく以下のようなソースが入れ込まれます。

<body onLoad="MM_preloadImages('<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv01on.gif','<?php bloginfo('url'); ?>/wp-content/themes/mytmpl/img/cmn/gbnv02on.gif'........

もしかして本件問題に本機能が関係するとかでしょうか。

モデレーター

gatespace

(@gatespace)

12年、 8ヶ月前

も一個ヒント。
bloginfo()をそのまま書くとすぐ出力されてしまします。
変数や配列に入れてあとから出力（echo）するなら get_bloginfo() を使ってください。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_bloginfo

CyberCypher

(@cybercypher)

12年、 8ヶ月前

今まで取得できてたから気にした事がなかった
情報サンクスです

・・・と本題に戻りますが
後はマウスオーバーとアウトの関数内の解析だけですかね
サーバー変数は(自分の環境では)問題なく取得出来たので
追記：
これなら問題が無さそうなのですが・・・検証してないので分からないです
後は変更を終えた後、ページのソースを見て出力されているTAGが正しいか、
画像が正しい階層に置いているか再度確認してみて下さい

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<ul>
<?php

	/*************************************
		可変するものだけ再代入していく。以下予想解析結果
		<li><a><img >  </img></a></li>;
		<img
			src="off画像URL"
			alt=""
			name=""	：IDと同一
			id=""	：Nameと同一
			width=""
			height=""
			border=""
			onMouseOver="MM_swapImage('','','',1)"
			onMouseOut="MM_swapImgRestore()"
		/>

		onMouseOver時(画像変更用)
			MM_swapImage(
				'IDorName',：画像変更の指定の為
				'',
				'on画像URL',
				1
			)"
		onMouseOut(画像を元に戻す用)
			MM_swapImgRestore()
	*************************************/

	$nowF[] = array("", 		"product/", "corpinfo/"	);	//現在の選択階層
	$nm[] = array(	"gbnv01", 	"gbnv02", 	"gbnv03"	);	//name&ID
	$wd[] = array(	110, 		150, 		150			);	//width
	$alt[] = array(	"ホーム", 	"NEiWorks", "corpinfo"	);	//画像ｷｬﾌﾟｼｮﾝ

	for($i=0;$i<count($nowF);$i++){
		if($nm[$i]==null || $wd[$i]==null || $alt[$i]==null){break;}

		//<li>&<a>：タグ宣言
		$startTag = "<li><a href=\"". get_bloginfo('url')."/".$nowF[$i]."\">";
		$imageTag = "<img src=\"".get_bloginfo('url')."/wp-content/themes/mytmpl/img/cmn/".$nm[$i];
		$closeTag =	"\" alt=\"".$alt[i]."\"".
						" name=\"".$nm[$i]."\"".
						" id=\"".$nm[$i]."\"".
						" width=\"".$wd[$i]."\"".
						" height=\"48\"".
						" border=\"0\"".
						" id=\".$nm[$i].\"".
						" onmouseOver=\"MM_swapImage(\'".$nm[$i]."\',\'\',\'".get_bloginfo('url')."/wp-content/themes/mytmpl/img/cmn/".$nm[$i]."on.gif\',1)".
						" onmouseOut=\"MM_swapImgRestore()\" /></a></li>";
		if($nowF[i] == ""){
			$arrayTag[] = array('/index.php',
								$startTag.imageTag.".gif".closeTag,
								$startTag.imageTag.".ongif".closeTag);
		}else{
			$arrayTag[] = array($nowF[$i],
								$startTag.imageTag.".gif".closeTag,
								$startTag.imageTag.".ongif".closeTag);
		}
	}

	foreach($arrayTag as $singleArray){
		if(strpos($_SERVER['PHP_SELF'], $singleArray[0]) === false){
			echo $singleArray[1];
		}else{
			echo $singleArray[2];
		}
	}
?>
</ul>

nobita

(@nobita)

12年、 8ヶ月前

visibility:hidden方式とのことですが、これもテキストを非表示にするわけなので、結局はGoogleの検索エンジンスパムと判定されることはないでしょうか？

SEOについては、お返事のしようがありませんが、前回お示ししたCSS Zenのサイトのページランクは6、本家は7です。

回答で申し上げたかった事は2つです。

1. WordPressの関数を使ったほうが、おすすめです。
2. WordPressが備えている機能を使ったほうが便利ですよ

img エレメントを使って処理する事も、比較的簡単に出来ます。
WordPressの関数をおすすめする理由を少しでも解ってほしいので、一例として、フィルター　フックをおまけに付けておきますので、参考にしてみてください。:-)

<?php
//おまけ　functions.phpなどから、動的な処理も可能です
	add_filter('myhdr','my_hdr_func');

	function my_hdr_func($content){
		return str_replace('<li>','<li>※',$content);
	}

//手動で画像付のリストを作ります
// hdr.php
$pages = get_pages();

$output = '<ul>';

	foreach($pages as $value){
		if($value->ID == $post->ID){

			$output .= "<li>";
			$output .= '<a href="' . $value->post_name . '" ><img alt="'.esc_html($value->post_title).'" src="'.get_stylesheet_directory_uri(). '/img/current'.$value->ID . '.jpg" /></a>';
			$output .= "</li>";

		}else{

			$output .= "<li>";
			$output .= '<a href="' . $value->post_name . '" ><img alt="'.esc_html($value->post_title).'" src="'.get_stylesheet_directory_uri(). '/img/'.$value->ID . '.jpg" /></a>';
			$output .= "</li>";
		}
	}
$output .= "</ul>";

	echo apply_filters('myhdr', $output);
?>

トピック投稿者

gapel

(@gapel)

12年、 8ヶ月前

nobita様、本当にありがとうございます。
なるほど、こちらの方がのちのち良いようですね！
SEOスパムも問題なさげのようでひとまず安心しておりました。

ノンプログラマな自分にとってはソースが何もかもハイレベルな状態なので時間かけてやってみます。
ひとまずご連絡まで。
また後日ご連絡させていただきます。
感謝申し上げます

6件の返信を表示中 - 16 - 21件目 (全21件中)

← 1 2

トピック「外部ファイル化したヘッダーナビゲーションが機能しない」には新たに返信することはできません。

外部ファイル化したヘッダーナビゲーションが機能しない

トピック

人気のトピック

返信がないトピック

サポート関連ではないトピック

解決済みのトピック

未解決のトピック

すべてのトピック