忍者ブログ
27 June

XAMPP　本番環境をローカルへコピーする

1、XAMPPインストール

http://localhost/xampp/　
XAMPP設定画面にて、MYSQLのパスワードと、ディレクトリ制御のユーザー名パスワードを設定する。このときチェックボックスにチェックをいれて、忘れた時用にパスをローカル保存しておく。

2、データベースを作成する

XAMPPパネルからMYSQLのadminをおしてphpMyAdminへ行く。
先ほど設定したユーザー名「root」、パスワード「＊＊＊＊」を入力する。
新規データベース作成で、本番環境と同じデータベース名を作成する。（まだインポートしない）

3、WP本体をインストールする

http://10251.net/xampp_wordpress_local_install

本番環境と同じバージョンをDLして解凍する。（defaultのフォルダ名はwordpress）
C:￥xampp/htdocs/wordpress
htdocsフォルダ内にWPのフォルダを入れる。
フォルダ名を変えたいときはここで「wordpress」というフォルダ名を変える

http://localhost/wordpress/
（WPのフォルダ名を変えた場合は、wordpressの部分をそのフォルダ名にする）
にアクセスしてWPの新規インストールを開始する。
wp-config.phpの設定を指示に従い入力する。
データベース名、接頭辞は、本番環境と同じものを入力する。
ホスト名は「localhost」

ローカルのサイトタイトル、ローカルWPのユーザー名パスワードを設定する
http://localhost/wordpress/wp-login.php
ローカルWPのログインURL↑

4、本番環境のデータで上書きする

wp-contentフォルダのみ丸ごと上書きする。それ以外はそのまま。

5、データベースをインポートする。

※インポートできるサイズが小さすぎるので持ってくるときは拡張が前提となる
C:￥xampp/php/php.ini　を編集する

post_max_size
upload_max_filesize
を100Mくらいに変更する（変更したらXAMPPパネルの再起動をする）

エクスポートしていたデータベースを、先ほど作った同名データベースへインポートする。
内部のURLが違うのでローカル環境のURLへ変える。

http://oxynotes.com/?p=2152

「接頭辞_options」の一番上にある「siteurl」の編集を押す
そこに書いてある本番環境のURLを
http://localhost/xampp/wordpress
に変更してセーブする（WPのフォルダ名を変えてるときはwordpressの部分を変更）

「接頭辞_options」の次のページにある「home」のURLも同じように編集する

6、トップページ以外404になる

http://webshufu.com/object-not-found-after-setting-wordpress-on-xampp/

私もこの記事と同じ現象になった。
パーマリンクを再設定したら直った。
後述するがここでも.htaccessが邪魔している
もともとXAMPPを以前入れてあったので、それを使おうとしたんだけど、
まずパスがわからない･･･。いつも使ってるようなパスを色々入れてみてもわからない･･･。
以前のパスがわからないのに、新規パスだけ入れてパス変更実行してみたら
「パスが変更されました」とかでてマジ意味わからない･･･。以前のパスの入力欄の意味は･･･

そこからパスを忘れたときのためのことを色々しらべたけれど、
パスをローカル保存してなかったし、コマンドプロンプトを開いてうんたらかんたらとか
全然意味わかんないのでもうやめた

XAMPPを新規インストールすることにした。
しかしここでも注意点がある。以前の情報が残ってると正常にインストールできないため、
アンインストールしたあと残っていたXAMPPファイルを削除する。
なぜWPを丸ごとコピーしなかったかというと、丸ごとコピーしてもどうしても出来なかったから。
.htaccessとかリダイレクトとかが邪魔してもうダメ。
/wp　を消してリダイレクトとかやってると、その設定があるためローカルでもそういうファイルを再現しないとダメってことでしょう？もうめんどくさい。
そもそもwpをドメイン変更で移行するときにもコレの扱いが、どれが本当のアドレスで
どれを入力すればいいんだっけ？っていちいち考えてすごいめんどくさいしイライラした。
もう今後はフォルダに直でいれてバラけて汚くなろうがリダイレクトとか余計なことして、
色々変更したいときに無駄に悩んだりイライラしなくてすむように、
こういうリダイレクトする設定はやめようと思う。
これのせいでURL変更や階層がだるい。
スカイプと同時に使う場合のポート80問題みたいなのもなんか設定した気がするけど
もう忘れたわ･･･

　

PR
21 June

クロムChromeでのみ文字フォントサイズが勝手に大きくなる現象

原因

html{
font-size:62.5%;
}
body{
font-size:14px;
font-size:1.4rem;
}

62.5%が無視され、100%に1.4remがかかってしまいドデカ文字サイズになったという現象。
remを使うと稀に起きるらしい。私も始めてなりました。

解決法

body > div{
font-size:14px;
font-size:1.4rem;
}

http://hazumu.net/blog/2014/02/24/body%E3%81%84rem%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%89chrome%E3%81%A7%E5%8B%9D%E6%89%8B%E3%81%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%8C%E5%A4%A7%E3%81%8D/

Scriptを追加する
http://n2p.co.jp/blog/tech/chrome-fontsize/


全ページにスプリクト埋め込むのがめんどうなので、1番目のcssに書くのを採用することにする。

05 June

PC用のfaviconとスマホ用のウェブクリップアイコンを作る　ワードプレス

http://shirose.jp/2013/10/wordpress-add-favicon/
このサイトのかたは他の記事でも説明が丁寧でわかりやすいのでとても参考になります。

1枚の画像から一括で色んなサイズを書き出してくれるという
外国のサイトがエラー吐いて使えませんでした。
http://www.allthefavicons.com/

しょうがないので日本の有名なサイトを使います
http://ao-system.net/favicon/index.php

始めは1枚の作った大きなアイコン画像で全部のサイズに当てはめましたが、
やっぱり縮小で汚くなるので、写真とかじゃない限り各サイズ作ったほうが綺麗です。

16x16
32x32
48x48
150x150（スマホ）

を作りました。
16、32、48は上記サイトの「参照」ボタンのところへドラッグドロップでいけます。
favicon.icoが簡単に仕上がりました。
スマホウェブクリップアイコンは「任意の名前.png」で使います。

favicon.icoのアップロード場所ですが、通常のサイトの場合は「index.htmlと同じ階層に置く」、
とよく言われてます。今までもそういうふうに作ってきました。
しかしWPで検索すると「imagesフォルダに入れます」なんてのがたくさんでてきました。
どっちが正解なのかわからない･･･。
結局私は　theme/自テーマ名/favicon.ico　にしました。
なんか不具合起こったら　theme/自テーマ名/images/favicon.ico　にします。
ウェブクリップアイコンもルートさえあってればどこでもいいんじゃないでしょうか
私はテーマのimagesフォルダにいれました。

次にコードをheader.phpの<link rel=”～～”>が各種並んでるところに貼り付けます。
スマホサイトは別テーマでやってるため、スマホテーマheader.phpに
スマホウェブクリップアイコンコードを貼り付けました

PC用faviconコード
親テーマ使用
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
子テーマ使用
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

スマホ用ウェブクリップコード
 
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/任意のファイル名.png">
<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/任意のファイル名.png">
アイコンに光沢あり　rel="apple-touch-icon"
アイコンに光沢なし　 rel="apple-touch-icon-precomposed"
光沢ありだと色合いが薄くなるので、それ前提に作ってないのでナシにしてます
これ見てふと思いました。
今まで　<?php bloginfo( ‘stylesheet _url’ ); ?>　を見てきて書いてました
http://mypacecreator.net/blog/archives/642/2
bloginfoは古い記述だそうです。WPのタグの変遷なんて知らなかったです･･･
htmlのタグレベルの長期間に渡る変遷ならともかく、WPは短期間でこういうふうに
非推奨に変わるから嫌です。
05 June

welcartでGoogleアナリティクスを使う

Google Analytics への対応方法について
http://www.welcart.com/community/archives/70199

０、Google アナリティクスのサイトでトラッキングコードを取得し、header.phpに貼り付け
１、WPプラグイン「Google Analytics Dashboard for WP」を使用
２、welcartが配布してるファイルをこのプラグインの中で上書き
　　＊プラグインアップデートで上書きされます

Welcart の為の Google Analytics の設定
http://www.welcart.com/community/archives/70484

３、Google アナリティクスの「目標」でwelcartが配布してる「目標」をインポートする

カートの各ページを見るために導入するものらしいです。
welcartではdefaultではカートページは全ページが同じURLのため。
それが必要なくともGoogle Analytics Dashboard for WPをいれることで、
ダッシュボードにて簡易ではありますがGoogleアナリティクスの簡易データが見れます。