gatespace様、色々と教えて頂いてありがとうございます。
横から出てまとめてしまってますが、
1. /js/function.js がきちんと読み込まれているか確認（パス）
読み込まれています。パスは通っていると思います。
というのは、こんかいのソースを追記したfunction.jsは、その他にナビゲーションボタン画像を
ロールオーバーしたら画像が入れ替わる、という昔からあるDreamweaverの自動生成ソースが
書かれており、サイトではこの機能は正常に動作しているからです。
2.
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/themes/myweb/js/function.js"></script>
<script src="<?php bloginfo('url'); ?>/wp-content/themes/myweb/Scripts/swfobject_modified.js" type="text/javascript"></script>
これらのjavaScriptもjQueryで書いているなら、wp_enqueue_scriptを使うやり方にする。
ここまでならブラウザで表示した後にソースから確認できます。
これも本件解決に必要でしょうか？
済みません、「jQueryで書いているなら」という意味がわかりません。調べることになります。
書いているかどうかの判別をつける知識がないので。一行目のfunction.jsのファイルは
今回の機能のソースを入れたファイルで、
二行目のJSソースはDreamweaverでFlashを仕込むと勝手に生成されるファイルです。
3. 各jsがnoConcriftに対応した物になったいるか確認
済みません、確認する知識持ちません。調べることになります。
FireBugなどでJavaScriptがエラーを出していないか確認してください。
Firebugアドインを入れてみました。やり方調べてやってみたらエラーが二つ出ました。以下です。
jQuery is not defined
()mysite.jp (72 行目)
[このエラーでブレーク] })(jQuery);
MM_preloadImages is not defined
hoverIntent(event=load )admin-...0111130 (1 行目)
ywaOLH(evt=load )ywa.js (3 行目)
[このエラーでブレーク] if(typeof(jQuery)!="undefined"){if(typ...crollBy(0,-32)}})})(document,window)};
アレ？？ preloadImagesって、Dreamweaverが排出する画像ボタンのロールオーバー機能で
使われてる変数名だったような・・・
じゃぁ、function.js自体、読み込まれていない？？でも画像のロールオーバーは実際には稼働してますし・・・
あと、jQueryが見つからないってどういうこと？？
私には何が何だかわからなくなってきております。。
じゃぁ、function.js自体、読み込まれていない？？でも画像のロールオーバーは実際には稼働してますし・・・
「動く・動かない」ではなく、先に私が回答したように、
ブラウザで表示させた後、「ソースを表示」なので出る「HTMLのソース」を見て、実際のjsファイルにリンクされているかどうか確認してください。
サイトが公開できる様であればそのURL出してください。
WordPressのテーマではなく、実際に出力されたソース見た方が話は早いです。
ダメなら出力されたHTMLソースのその当たり（<head>〜</head>長ければ途中省略）を投稿してください
おそらく、wordpressの書き出すjqueryより先にjqueryが必要なjsファイル
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/themes/myweb/js/function.js"></script>
が読み込まれているかと思います。
先述の
wp_enqueue_script()関数で第三引数に’jquery’をしていた場合には
「jquery」というハンドルで登録されているスクリプト(wordpressに入っているjquery)を先に読み込みます。
さらにjqueryが必要なスクリプトの時には二重に読み込まないようにもなります。
このような感じで読み込ませる順番等をかってに判断してくれるので
gatespaceさんのおっしゃっているように
面倒かもしれませんが一元的に管理できるようにwp_enqueue_scriptで読み込ませたほうが
トラブルになりにくいという利点が出てきます。
gatespace様、ありがとうございます。
function.jsのパスは通っているんです。既報の通り、ロールオーバーも機能していますし、
http://www.mysite.com/wp-content/themes/myweb/js/function.js
でアクセスしたらJSファイルの中身はブラウザで表示されますから。
それなのに、Firebugで
MM_preloadImages is not defined
なんて出るのでわけわかんなくなっておりました。
head内のソースを転載いたします。
<head>
<meta name="google-site-verification" content="" />
<meta name="ROBOTS" content="ALL" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Imagetoolbar" content="no" />
<meta http-equiv="Imagetoolbar" content="false" />
<meta name="keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="http://www.mysite.com/wp-content/themes/myweb/style.css" type="text/css" media="screen,tv,print" />
<link rel="alternate" type="application/atom+xml" title="" href="http://www.mysite.com/feed/atom" />
<link rel="alternate" type="application/rss+xml" title="" href="http://www.mysite.com/feed" />
<link rel="start contents" href="http://www.mysite.com/" title="目次" />
<link rel="glossary" href="/gloss/" title="用語集" />
<link rel="help" href="/sitemap/" title="サイトマップ" />
<script type="text/javascript" src="http://www.mysite.com/wp-content/themes/myweb/js/function.js"></script>
<script src="http://www.mysite.com/wp-content/themes/myweb/Scripts/swfobject_modified.js" type="text/javascript"></script>
<title>サイトタイトル</title>
<script type='text/javascript' src='http://www.mysite.com/wp-includes/js/prototype.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.mysite.com/wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.mysite.com/wp-includes/js/scriptaculous/effects.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.mysite.com/wp-content/plugins/wp-lightbox-2/lightbox.js?ver=1.8'></script>
<script type='text/javascript' src='http://www.mysite.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type="text/javascript" src="http://www.mysite.com/wp-content/themes/myweb/js/function.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.mysite.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.mysite.com/wp-includes/wlwmanifest.xml" />
<!-- begin lightbox scripts -->
<script type="text/javascript">
//<![CDATA[
document.write('<link rel="stylesheet" href="http://www.mysite.com/wp-content/plugins/wp-lightbox-2/Themes/Black/lightbox.css" type="text/css" media="screen" />');
//]]>
</script>
<!-- end lightbox scripts -->
</head>
<script type=”text/javascript” src=”http://www.mysite.com/wp-content/themes/myweb/js/function.js”></script>
が二つありますがいいんでしょうか・・・
一つ目はそもそも記載いしていたもので、二つ目は、
<?php wp_enqueue_script(‘pagetop_scroller’,get_template_directory_uri().’/js/function.js’,array(‘jquery’),null,null); ?>
こうやって入れるように言われて入れたものですが・・・
ということで一つ目を削除しても試してみましたが、それも現象変わらずです。
WordPress管理人様
上記の投稿で間違いに気づいたので編集したいのですが昨日あった編集リンクが消えております。
編集できるように御調整いただけないでしょうか。
もし何かの理由で不可ということであれば、
上記の投稿、
「gatespace様、ありがとうございます。
function.jsのパスは通っているんです。既報の通り、ロールオーバーも機能していますし、」
からはじまる投稿の削除をお願い致します。投稿内容はこちらでコピーしましたので
すぐに削除していただいて構いません。上記の投稿は修正して改めて投稿いたしますので。
お手数ですが何卒宜しくお願い致します。
上記の投稿で間違いに気づいたので編集したいのですが昨日あった編集リンクが消えております。
一定時間が経つと消えます（フォーラムの仕様です）。
<script type="text/javascript" src="http://www.mysite.com/wp-content/themes/myweb/js/function.js"></script>
が二つありますがいいんでしょうか・・・
良くないです。
どちらかだけにしてください。
良くないです。
どちらかだけにしてください。
はい、ですので記述していますように、一つ目の方を削除しても試してみてそれでも
ダメだったことをお書きさせて頂いておりました。
<script type='text/javascript' src='http://www.myweb.jp/wp-content/themes/myweb/js/function.js'></script>
本スレの最初の方のご助言を実行すると二つ同じソースが記述されることになるのですよね。
もともと記述していたfunction.jsのファイルがそのままあるのに、その上で
<?php wp_enqueue_script(‘my_example’,’/js/example.js’,array(‘jquery’),null,null); ?>
を入れることになったため、二つ同じ記述がなされることがおこっていたのですね。
しかし、一つ目（結局上の方に記載している方）を削除して、記述をひとつにしても、
それでも相変わらず現象が変わらないです・・・
クマった・・・
念のため。
ソース見るとライトボックス系のプラグインを利用されているようなので、これをいったんオフにして試してみてください。
（prototype.js使ってるので）
その上で、JavsScriptのエラーがでるようならその内容を書いてください。
（重複するかもしれませんが）
—
正直なところ、大本の質問であるページトップのjQueryであれば自作で埋め込むのが難しく、原因を探るのも難しければ、WordPressのプラグイン使っちゃった方が早いかもしれません。
参照
http://kw-note.com/cms/scrolling-plugin-wordpress/
※私はこの手のプラグインを使っていないので個々のプラグインの動作等については保証しかねます。
こんにちは
今トライしている、スクリプトははずしていただいて、
テーマのfunctions.phpにペーストしてみてください。
TwentyTwelveとかだと、動くみたいです。
<?php
define('NOBITA_QUERY', 'nobita_css' );
define('NOBITA_VALUE_TYPE', 'js'); //または、css
$nobita_external_link_value =<<<SCRIPT
jQuery(function() {
var topBtn = jQuery("#page-top");
topBtn.hide();
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
jQuery("body,html").animate({
scrollTop: 0}, 500);
return false;
});
});
SCRIPT;
//ここまで設定
add_action( 'after_setup_theme', 'nobita_setup_theme' );
function nobita_setup_theme(){
//クエリを登録
add_filter('query_vars','nobita_extend_query');
//ヘッダーにリンクを追加
add_action( 'wp_enqueue_scripts', 'nobita_add_style_link', 99 );
//リンクが呼ばれた時に、必要な内容を表示し終了する
add_action( 'template_redirect', 'nobita_external_link_value' );
}
function nobita_extend_query( $vars ) {
$vars[] = NOBITA_QUERY;
return $vars;
}
function nobita_add_style_link() {
if( NOBITA_VALUE_TYPE == 'css' ){
wp_register_style( 'nobita-extend-style', sprintf('/?%1$s=1', NOBITA_QUERY ) );
wp_enqueue_style( 'nobita-extend-style' );
} elseif ( NOBITA_VALUE_TYPE == 'js' ) {
wp_register_script( 'nobita-extend-script', sprintf('/?%1$s=1', NOBITA_QUERY ) );
wp_enqueue_script( 'nobita-extend-script' );
}
}
function nobita_external_link_value( ) {
global $nobita_external_link_value;
if( intval( get_query_var( NOBITA_QUERY ) ) == 1 ) {
$mime_type = wp_get_mime_types( NOBITA_VALUe_TYPE );
if ( ! headers_sent( ) ) {
header( 'Content-type: '.$mime_type );
}
if( NOBITA_VALUE_TYPE == 'css' ){
$nobita_external_link_value = esc_html( $nobita_external_link_value );
$nobita_external_link_value = str_replace( '>', '>', $nobita_external_link_value );
} elseif ( NOBITA_VALUE_TYPE == 'js' ) {
//esc_jsがうまく動かないのではずしてます
$nobita_external_link_value = $nobita_external_link_value ;
//$nobita_external_link_value = str_replace( array('"',"\r",'\n'), array('"','',"\\n"), $nobita_external_link_value );
}
echo $nobita_external_link_value;
exit;
}
}
?>
以下は、<?php get_footer(); ?>の手前ぐらいにでも、貼り付けてみてください
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
コードの意味は
http://tenman.info/labo/snip/archives/4210
に簡単に書いてあります
皆様、感謝です。土日は作業が出来ないので月曜にやってみます。
また改めて結果を投稿致します。
nobita様、遅くなって申し訳ありません。やってみました。
しかしページトップボタン機能は状況変わらずで、なおかつfooter.phpの記述の前の
ミドルコンテンツエリアの下部部分が縦で200pxくらいでしょうか、途中でブツ切りになって
しまい、コンテンツが終わっていない途中なのに割り込んでフッターエリアが表示されています。
さらに困ったのは、コンテンツが途中切れしたままでは困るのでいったんfunction.phpを本件前のファイルに戻したのに直らないことです。あれおかしい、nobita様のソースを仕込む前からこの現象起こってたのかな？？ 気づかなかっただけかな？？ 何が何やらわからなくなってきましたが
とにかくまずこの表示トラブルの方を先に直すべく動きます。
nobita様の件は以下のようにやりました。手順は間違ってないと思うのですが。
<?php
define('NOBITA_QUERY', 'nobita_css' );
....
ご提供頂いたソースをfunction.phpの一番最後に追加してアップロードしてみました。
また、headに記載していた今回のfunction.jsを呼び出すソースもやめて、
バックアップしていた変更前のファイルに戻してアップロードしました。
そして、main.phpというトップページのHTMLが書いてあるphpファイルの中の
<?php get_footer(); ?>の手前に
<p id=”page-top”>PAGE TOP</p>
を記述してアップロードしました。
function.jsに追記していた本件のソースも外した形の本件対応前のバックアップファイルに戻してアップロードしました。
ひとまず、ミドルコンテンツの途中でフッターが登場するトラブルは回避できました。
nobita様からいただいたfunctions.phpに入れるというソース、これをやめて
バックアップしていたfunctions.phpに戻したら直りました。
nobita様のソースをfunctions.phpに入れる際、何か指定があるのでしょうか？
当方は、最下部に追加して貼り付けたのではありますが。
コードの最後の部分のexit;がないような場合は、htmlを出力してしまいます
echo $nobita_external_link_value;
exit;
また、以下のSCRIPT;の部分は、必ず行の先頭になければなりません。
タブや空白があると、動作しません。
SCRIPT;
//ここまで設定
ヒアドキュメントという書き方なので、詳しくは
http://php.net/manual/ja/language.types.string.php
念のため、
http://tenman.info/labo/snip/
に貼り付けで、動作確認しましたが、動作しているようなので、確認してみてください。
トップへのリンクは、ページの一番下の左側にあります。
nobita様ありがとうございます。
(1) exit; の件大丈夫でした。
(2) SCRIPT;
//ここまで設定
の件も、コピペ段階で既に隙間なく記述されてありますので
そのまま貼り付けしましたのでここも大丈夫です。
ちゃんとやっている感じなんですがなぜ自分のサイトはならないのかな、おかしいな・・・・・
