サポート » 使い方全般 » スクロール型のPAGETOPを導入してみたらWordPressサイトだけ実装できず。。

  • スクロール型のPAGETOPボタン機能を運営サイト群に実装している最中です。
    以下のサイトの、

    http://www.webopixel.net/javascript/538.html

    「1.ちょっとスクロールしたら「トップへ戻るボタン」を表示」
    のタイプを使っております。

    しかし、静的HTMLのサイトや、MODXのサイトでは何ら問題なく動作するのですが、
    WordPressで制作したサイトだけはうまく機能してくれず困っております。

    具体的な症状としましては、最初からページトップボタンが出現していて、
    かつ、ボタンを押してもスクロールしてページの先頭へ移動するのではなく、
    ノンスクロールの布津のアンカーリンク移動になってしまいます。
    このスクロールボタンの正常な動きは、ある一定のスクロールがされると、透明度ゼロから不透明になるようにアニメしながら出現し、出現したページトップボタンをクリックするとスクロールしてページの先頭へ移動する、というものです。

    本機能をサイトに追加するにあたっておこなったことは以下です。

    (1) head内に外部のjqueryのJSファイルを呼び出す記述を入れた
    以下です。
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script&gt;

    (2) 上記(1) のソースの前でなく後に元々入れていたJSファイルの中の一番最後に、
    以下のソースを追加した。

    $(function() {
    	var topBtn = $('#page-top');
    	topBtn.hide();
    	//スクロールが100に達したらボタン表示
    	$(window).scroll(function () {
    		if ($(this).scrollTop() > 100) {
    			topBtn.fadeIn();
    		} else {
    			topBtn.fadeOut();
    		}
    	});
    	//スクロールしてトップ
        topBtn.click(function () {
    		$('body,html').animate({
    			scrollTop: 0
    		}, 500);
    		return false;
        });
    });

    (3) HTMLソースの終了bodyタグの直前ぎみに以下のHTMLソースを追加した。
    リンク先のwrapperは、当方のHTMLソースのbodyタグ開始直後あたりにあるdiv idタグ名。

    <p id="page-top"><a href="#wrapper">↑</a></p>

    (4) 外部CSSファイルにページトップボタンの装飾記述をおこなった。
    以下です。

    #page-top {
    	position: fixed;
    	bottom: 20px;
    	right: 20px;
    	font-size: 2em;
    }
    
    #page-top a {
    	background: #666;
    	filter: alpha(opacity=50);
    	-moz-opacity: 0.50;
    	-khtml-opacity: 0.50;
    	opacity: 0.50;
    	text-decoration: none;
    	color: #fff;
    	width: 50px;
    	padding: 10px;
    	text-align: center;
    	display: block;
    	border-radius: 5px;
    }
    
    #page-top a:hover {
    	text-decoration: none;
    	background: #999;
    }

    なぜかWordPressだけ実装できず困惑しております。
    解決方法がもしわかるようでしたらご教授くださいましたら幸いです。
    宜しくお願いいたします。

15件の返信を表示中 - 1 - 15件目 (全29件中)
  • wordpressでは自動でjqueryが読み込まれますので
    自分でjquery本体を読み込ませる場合はwp_deregister_script,wp_enqueue_scriptを使って
    ‘jquery’ハンドルを書き換えてやらなければ二重に読み込まれたりします。

    で、wordpressで自動で読み込まれるjqueryはnoConfrictが標準でついていますので
    一番スマートな方法としてはwodpressのjqueryを使用して

    もともと入れていたjsに追記する部分を

    (function($){
    	var topBtn = $('#page-top');
    	…
    })(jQuery);

    に書き換えてやれば他の部分に問題なければ雨読と思います。

    スレッド開始 charinchi

    (@charinchi)

    ご助言大変有難うございます。
    しかしダメです。。

    以下のソースをheadタグから削除し、

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    ご支給いただいたソースそのままでは動かなかったので、…と書いてあるところに
    削除したソースを入れるのかと思い、以下のようにしてみました。

    //出現PTOP
    (function($){
    	var topBtn = $('#page-top');
    		topBtn.hide();
    	//スクロールが100に達したらボタン表示
    	$(window).scroll(function () {
    		if ($(this).scrollTop() > 100) {
    			topBtn.fadeIn();
    		} else {
    			topBtn.fadeOut();
    		}
    	});
    	//スクロールしてトップ
        topBtn.click(function () {
    		$('body,html').animate({
    			scrollTop: 0
    		}, 500);
    		return false;
        });
    
    })(jQuery);

    これでおこなったのですが、動作変わらず、最初からページトップボタンが出現し、
    かつ、ページボタンをクリックするとスクロールせずに上に移動します。

    御支給いただいたJSのソースに対する当方のソースの追加のさせ方がおかしいのでしょうか。

    上記スクリプトを追記したjsファイル
    仮に example.js とした場合に

    header.php内の
    wp_head();
    の前に

    <?php wp_enqueue_script('my_example','/js/example.js',array('jquery'),null,null); ?>

    とやってみたらいかがでしょう?

    my_exampleは適当に
    /js/example.jsはjsファイルのurl

    スレッド開始 charinchi

    (@charinchi)

    ありがとうございます。
    本件のソースを追記したjsファイルを記載してみて、ファイル名もmy_exampleから適当に変えてOKとのことだったので変更して、
    wp_head();
    の前に以下を入れてみました。
    <?php wp_enqueue_script(‘pagetop_scroller’,’/js/function.js’,array(‘jquery’),null,null); ?>

    しかし現象変わらずだったので、JSファイルへのパスが相対パスになっていますので、
    試しに絶対パスを入れてみたらDreamweaver上でエラーメッセージが出ましたのでやめました。
    相対パスしかダメなようですね。

    my_exampleの箇所は好きなものに変更OKとありましたが、この記述はどこかに呼応していないで
    いいのでしょうか。どこかの記述もここと一致させねばならない、とかあるのでしょうか。

    ううぅ~ん・・・どこか作業に間違いをしていますでしょうか。

    スレッド開始 charinchi

    (@charinchi)

    参考になるかわかりませんが、headの周辺ソースを以下につけてみます。

    <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>
    <title><?php title_mysite(); ?></title>
    <?php remove_action('wp_head', 'wp_generator'); ?>
    <?php wp_enqueue_script('pagetop_scroller','/js/function.js',array('jquery'),null,null); ?>
    <?php wp_head(); ?>
    </head>
    <?php flush(); ?>
    モデレーター gatespace

    (@gatespace)

    <?php wp_enqueue_script('pagetop_scroller','/js/function.js',array('jquery'),null,null); ?>

    テーマからの相対パスはダメです。
    /js/function.js は実際にはどこに保存されているのですか?

    ちなみに、デフォルトテーマのfunctions.phpに似たような書き方で js ファイルをインクルードさせていますから、参考にしてみてください

    2行目に読み込んでるのはおそらく大丈夫だと思いますが
    1行目の
    <script type=”text/javascript” src=”<?php bloginfo(‘url’); ?>/wp-content/themes/myweb/js/function.js”></script>
    こちらが関数名に$を使っているということはないでしょうか?

    スレッド開始 charinchi

    (@charinchi)

    gatespace様、ありがとうございます。

    テーマからの相対パスはダメです。

    相対パスで御支給いただいていたのですが、相対パスはダメなのですか??
    どちらの方のおっしゃるのを正とすればいいのかわからなくなりましたが、
    とにかく試そうと思い、Dreamweaverではエラー表示になった以下の記述にしてみました。

    <?php wp_enqueue_script('pagetop_scroller','<?php bloginfo('url'); ?>/wp-content/themes/myweb/js/function.js',array('jquery'),null,null); ?>

    が、Parse error: syntax errorが出てサイト自体が表示されなくなりました。

    /js/function.js は実際にはどこに保存されているのですか?

    上記パスでおわかりかも知れませんんが、themesフォルダの中にテンプレートをつくっているので(テンプレートの仮名:myweb)、その直下にjsフォルダがあります。

    ちなみに、デフォルトテーマのfunctions.phpに似たような書き方で js ファイルをインクルードさせていますから、参考にしてみてください

    済みません、これは何のことを言われているのかわかりません。WPサイトを何年も前にいじってつくったきりで知識ほとんどありません。何を言われているのか考えてみます

    スレッド開始 charinchi

    (@charinchi)

    jdbb様、引き続きありがとうございます。

    2行目に読み込んでるのはおそらく大丈夫だと思いますが
    1行目の
    <script type=”text/javascript” src=”<?php bloginfo(‘url’); ?>/wp-content/themes/myweb/js/function.js”></script>
    こちらが関数名に$を使っているということはないでしょうか?

    なるほど。function.jsでは本件以外で $ は使ってありませんでした。
    しかし、もしかしてと思い、もう一つのJSファイルである、lightbox.js を開いてみたところ、
    以下のようにいくつもありました。
    これが原因でしょうか?

    //
    Object.extend(Element, {
    	getWidth: function(element) {
    	   	element = $(element);
    	   	return element.offsetWidth;
    	},
    	setWidth: function(element,w) {
    	   	element = $(element);
        	element.style.width = w +"px";
    	},
    	setHeight: function(element,h) {
       		element = $(element);
    以下続く.......

    $ なんていうのはよく使われる感じなんでしょうか。
    本件の$表記のところを何か違う記号にいたしましょうか?

    スレッド開始 charinchi

    (@charinchi)

    gatespace様、デフォルトテンプレートというのはこれでしょうか。
    トゥウェンティーイレブンとかテンとかいうフォルダがあったので、どちらも見てみたところ、
    これらにもheader.phpがありました。
    イレブンの方に、以下の記載がありましたので真似してアップロードしてみました。

    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->

    以下のようにしてアップしてみたのです。

    <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>
    <title><?php title_epiphane(); ?></title>
    <?php remove_action('wp_head', 'wp_generator'); ?>
    <?php wp_enqueue_script('pagetop_scroller','<?php echo get_template_directory_uri(); ?>/js/function.js',array('jquery'),null,null); ?>
    <?php wp_head(); ?>
    </head>

    しかし、これも現象変わらずでした。
    最初からページトップボタンは存在していて、かつ、ボタンをクリックしたらスクロールせずに移動するだけです。
    お二方のアドバイスを拝見するに、要するにJSの記述が機能していない、ということのようですが・・・

    横からすみません、、、

    pagetop.jsではないですが、同じ様な経験があります。

    なにかプラグインを使っていらっしゃるなら、
    全て無効にして試されましたか??
    プラグインと喧嘩しているような気がします、、、(私のときはそうでした)

    スレッド開始 charinchi

    (@charinchi)

    miwarock777様、ありがとうございます。
    おっしゃる方法、全てのプラグインを無効化してみましたが、現象変わらずです・・・

    charinchi様
    遅くなりました。
    php内で処理する場合と、直接表示する場合ではいくつか書き方が変わりますので

    <?php wp_enqueue_script('pagetop_scroller','<?php echo get_template_directory_uri(); ?>/js/function.js',array('jquery'),null,null); ?>
    こちらの部分ですが

    <?php wp_enqueue_script('pagetop_scroller',get_template_directory_uri().'/js/function.js',array('jquery'),null,null); ?>
    このようにしてください。

    firefoxなどでどのようなscriptエラーが出ているか見ることができれば
    もう少しピンポイントにわかるとは思いますが・・・

    モデレーター gatespace

    (@gatespace)

    jdbbさんも書かれているとおり、WordPressに自前のjQueryスクリプト(プラグイン)を組み込む時、注意すべき点がいくつかあります。

    最初にjdbbさんが回答された jQueryの読み込み方とnoConfrict

    wp_enqueue_script についてはこちらのブログが詳しいです。
    http://mypacecreator.net/blog/archives/1493
    http://www.webopixel.net/wordpress/108.html

    英語になりますが、Codexも参考にしてください。
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    その上で、パスの問題。
    これはjQueryに限りませんが、WordPressのテーマディレクトリ(フォルダ)内のjavaScriptやcss、画像などをテンプレートファイルに読み込む場合、相対パスは使えません。

    相対パスでは画像は表示されないのでしょうか。
    http://ja.forums.wordpress.org/topic/6986?replies=7

    イマドキは bloginfo ではなくget_stylesheet_directory_uri()get_template_directory_uri() を使います。

    あとはPHPの書き方の問題です。
    <?php ?>の中でさらに <?php ?>は使えません。

    横から出てまとめてしまってますが、
    1. /js/function.js がきちんと読み込まれているか確認(パス)

    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を使うやり方にする。

    ここまでならブラウザで表示した後にソースから確認できます。

    3. 各jsがnoConcriftに対応した物になったいるか確認
    FireBugなどでJavaScriptがエラーを出していないか確認してください。

    スレッド開始 charinchi

    (@charinchi)

    jdbb様、どうもありがとうございます。
    早速、相対パスから変更されたご支給のソースでおこなってみました。

    <?php wp_enqueue_script('pagetop_scroller',get_template_directory_uri().'/js/function.js',array('jquery'),null,null); ?>

    しかし、状況変わらずでした。

    しかし、このfunction.jsが読み込まれていないわけでもないのです。
    というのは、このJSファイルには、画像のロールオーバーに関するDreamweaverが生成するソースが主に含まれており、ナビゲーションの画像ボタンのロールオーバーはちゃんと機能しているんです。

    こうなったらということで、スクローラーのJSソースをHTMLのhead内にじかに入れてみました。
    これだとどうだ!ということで。

    .......
    <?php wp_head(); ?>
    <script language="javascript">
    //出現PTOP
    (function($){
    	var topBtn = $('#page-top');
    		topBtn.hide();
    	//スクロールが100に達したらボタン表示
    	$(window).scroll(function () {
    		if ($(this).scrollTop() > 100) {
    			topBtn.fadeIn();
    		} else {
    			topBtn.fadeOut();
    		}
    	});
    	//スクロールしてトップ
        topBtn.click(function () {
    		$('body,html').animate({
    			scrollTop: 0
    		}, 500);
    		return false;
        });
    
    })(jQuery);
    </script>
    </head>

    結果、これもダメでした。現象変わらずです・・・

    なんでこんなにまでWordPressは出来ないのかなぁ・・・・・・
    headにじかに書いてもダメ、プラグインを無効化してもダメ、何をやっても現象変わらず・・・
    困り果てております・・・・

15件の返信を表示中 - 1 - 15件目 (全29件中)
  • トピック「スクロール型のPAGETOPを導入してみたらWordPressサイトだけ実装できず。。」には新たに返信することはできません。