2015-08-03

ウェブサイトリニューアルでワードプレスを利用する際の手順と、エラッた時の対処方法メモ。

１：テスト環境とかはめんどくさいので、本番環境にサブディレクトリを作ってそこにワードプレスをインスコする。そこにBasic認証をかけて作業をする。
２：リニューアルの準備が整ったら、サブディレクトリ内のindex.phpと.htaccessをrootに突っ込んで、中の設定を書き換え。

３：管理画面の一般設定はサイトアドレスの欄からサブディレクトリの部分を削除

ってここまでは、このページに書いてあった部分。

<a href="http://b-risk.jp/blog/2015/03/renewal_wordpress/" data-mce-href="http://b-risk.jp/blog/2015/03/renewal_wordpress/">失敗しないWordPressのリニューアル手順 | BRISK | 東京都江東区のホームページ制作・Web制作</a>b-risk.jp

だけど、これをやった後にアクセスしてみたらどこをアクセスしても画面が真っ白に。。なんでやー！と色々四苦八苦しましたが原因がいくつかあったので、同じように困った人は以下をチェックしたらよいかと。

＊サーバーが使っているデフォルトのphpのバージョンをチェック。最新版になっていないとエラーが起こる可能性大です。

＊wp-config.phpを開いてDEBUG_WPの部分をtrueにして、再度アクセス。エラーが表示されてどこがエラーになっているかわかるので、そのエラーに応じてググって対応。

そんな感じですした。

2015-04-30

modal-syncerとparallaxを同時に使用時に、モーダルを開いてスクロールすると背景もスクロールしてしまう問題の対処法

js/jquery

これにどんだけ時間をついやしてしまったことか...。
とりあえず解決策を見つけたのでこれから書いていきます。

1.モーダル時のparallaxスクロールを無効化

まじはシンプルにモーダルが開いたことをクラスをつけて教えてあげて、

	<script type="text/javascript">
$(document).ready(function(){
		$("#modal-movies").mouseenter(function(){
		   $("body").addClass("modal-open");
		}).mouseleave(function(){
			 $("body").removeClass("modal-open");
		});
});
	</script>

そのクラスをみつけたら、スクロールが止まるようにfsvs.jsの中のslideDown, slideUPのfunctionのすぐ後に

				if ($("body").hasClass("modal-open")) { return false; }
				if ($("body").hasClass("modal-closed")) { scrolling = true; }
<||

を追記してあげます。もしかしたらmodal-closedの方はいらないかも。


>||

			/**
			 * [slideDown description]
			 * @return {[type]} [description]
			 */

			slideDown : function(e) {
				if ($("body").hasClass("modal-open")) { return false; }
				if ($("body").hasClass("modal-closed")) { scrolling = true; }
				if( app.canSlideDown() ) {
					ignoreHashChange = true;
					app.slideToIndex( (currentSlideIndex+1), e );
				} else {
					scrolling = false;
				}
			},

			/**
			 * [slideUp description]
			 * @return {[type]} [description]
			 */

			slideUp : function(e) {
				if ($("body").hasClass("modal-open")) { return false; }
				if ($("body").hasClass("modal-closed")) { scrolling = true; }
				if( app.canSlideUp() ) {
					ignoreHashChange = true;
					app.slideToIndex( (currentSlideIndex-1), e );
				} else {
					scrolling = false;
				}
			},

そうすると、モーダルを開いている時にスクロールしても、背景のparallax部分はスクロールされなくなりました！めでたしめでたし！？

モーダルを閉じた後に、スクロールが復活しない問題を解決する！

めでたしー。かと思ったら、モーダルを閉じた後にスクロールが出来ない状態になっていることが発覚...。いろいろと原因しらべたけど根本的な解決策は見つからず。

どうやったらスクロールが復活するのかいじっていたら、右側のページネーションのボタンをクリックするとまたスクロールができるようになることがわかったので、jsでモーダルが閉じた後にその部分をクリックしたことにさせました。

それがこちら↓↓↓↓

	<script type="text/javascript">
　　　　$(document).ready(function(){
		$("#modal-movies").mouseenter(function(){
		   $("body").addClass("modal-open");
		}).mouseleave(function(){
			 $("body").removeClass("modal-open");
			 var e = new jQuery.Event("click");
			e.offsetX = 100;
			e.offsetY = 100;
			$('#fsvs-pagination li.active').trigger(e);
		});
　　　　});
	</script>

根本的な解決になってないし、俺と同じケースがどれくらいあるかわからないけどもし誰か困っていたら参考にしてくださいませ。

ーーー

参考になったリンク集

<a href="http://logic-a.com/2014/02/09/jquery%E3%81%A6%E3%82%99a%E3%82%BF%E3%82%AF%E3%82%99%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/">jQueryでaタグのリンクをクリックさせる方法 | LogicA　- jQueryだいすきフリーランサーのブログ -</a>logic-a.com

<a href="http://stackoverflow.com/questions/29910014/how-to-re-activate-scroll-after-exiting-modal/29956321#29956321">How to re-activate scroll after exiting modal?</a>stackoverflow.com

2014-10-11

ウィンドウサイズに合わせて、要素の高さやスタイルを変えたりするときのtipsまとめ

js/jquery

これとか
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方 | bl6.jp

これとかが使える。

<a href="http://kyasper.com/jquery-tips-4/#comment-24642" data-mce-href="http://kyasper.com/jquery-tips-4/#comment-24642">jQuery 画面サイズの高さを取得して、要素に反映させる</a>
jQuery 画面サイズの高さを取得して、要素に反映させる | 福島県郡山市のホームページ制作、Web制作 Kyasper Web Design キャスパーウェブデザイン

ただそのまま使うとページを表示したときのサイズ対応しかしてくれなかったりするので、リサイズの際にも対応できるようにしないといけないので、注意。

そこらへんは名前付けて上げて、bodyに onRoadとonResizeとかで指定してあげる。と。

高さだけ揃えたいーとかシンプルな話ならjavascript使わなくてもcssだけでもいける。できたらこっちのほうがいいよね。

cssでウィンドウ（body）に高さを合わせようとして嵌まった話 [俺の備忘録]

一番応用が効きそうなのはこれ

ブラウザ縦横サイズを取得してコンテンツ位置を変えるJavaScript

追記：20150918

やっぱこっちが良いかも

bashalog.c-brains.jp