WordPress内でEC-cubeのセッションを引き継ごうとして色々ハマったのでメモ。 まずは普通に require.phpを requireしてやったのだが、早速エラー。 で、内容をみてみるとデータベースがつなげてないと。 なんのこっちゃと色々考えた結果、下のエントリーを発見。 http://ec.emerge-group.com/blog/detail.php?id=360 いやー、そういう事だったのか、、 で、wp-config と load.php上の該当変数を修正したら、無事に動いた！ 参考になりましたー！
さて、ナビが出てくる所の動きは理解出来た。 後googleナビに近づけるためには、ナビの上下の動きがどうもカクカクした感じがあるので、何とかならんかと本家を見てみた。 google のソースでは、ナビ内をスライドすると、 transition : -moz-transform 0ms ease-in-out 0s がついて、 transform の値が translate3d(0px, -109px, 0px) のようになる。 これを再現するには。。 touchstart、touchmove, touchendの部分をちょっと変えます。 $(settings.menu_list).bind({ ‘touchstart’: function(e) { menu_list_height = $(settings.menu_list).height(); sfY = event.touches[0].screenY; }, ‘touchmove’: function(e) { mfY = event.changedTouches[0].screenY; var moveY = smY + mfY – sfY; // moving $(this).css({ “-webkit-transition”: “all “+timer+”ms cubic-bezier(0.075, 0.82, 0.165, 1)”, ‘-webkit-transform’:’translate3d(0px,’+ moveY +’px,0px)’, }); […]
http://qiita.com/items/64e4589e37944bf032d9 こちらで紹介されてるスライドメニューの縦板をテストしてみた。 普通にスマホでjQueryとかでアニメーションをやろうとすると、かなりもっさりしてしまう。 そこで、スマホだからこそcss3を使って実装する視点、確かにそうだよねと脱帽。 処理はシンプルで、touchイベントを使ってtouch.start, touch.endでの挙動をそれぞれ制御し、 スライドすべき時にクラスをつけている、って感じだ。 しかしCSS３の-webkit-transition，あなどれない、、、これはいけるやんか。 サンプル：http://shnr.net/samples/m.slide/ これで良い感じの縦スライドが実装できる。
CPIサーバではそのままだとWordpressが動かなかったのでメモ。 動かすために必要な事はこの３つ。 ・phpを使用可に ・文字コードをUTF8へ（そのままだと日本語入力できない） ・Rewrite機能をONに（パーマリンク設定を可能にするため） htaccessとphp.iniを使います。 記述は以下を参考に。 htaccess AddHandler x-httpd-php528 .php suPHP_ConfigPath /usr/home/xxxx/html Options +FollowSymLinks RewriteEngine on ※補足 suPHP_ConfigPath /usr/home/xxxx/html の部分は、公開ディレクトリへのフルパスが入ります。 わからない時は、この場合だと/へ下記を記述したphpファイルをアップして、アクセスしてみます。
jQuery deffered について ajaxでスクリプトを書くときに、ajaxで取った値を基に別のリクエストを送って、返り値を一回目のリクエストと合わせて表示、 なんてことをやる必要があった。 最初recursiveだけで組んでみたが、良い機会なのでdefeerdと組み合わせて使ってみる。かなり見通しが良くなった（と思う） 下の例では、jsonで受け取った結果をflagでrecursive_one, recursive_twoに分けて操作している。 また、json内には順不同でflag = true, false が混在するものとし、true のものから順に展開する。 $(function(){ $.ajax({ type:”GET”, url:jsonfile, dataType: “json”, success:function(data){ GetResults.getContents_first(data).done(function(data) { GetResults.getContents_second(data).done(function() { GetResults.finalFunction(); }); }); }, error :function(XMLHttpRequest,textStatus){ console.log(textStatus); } }); }); var GetResults = { getContents_first: function(data) { var defer = $.Deferred(); var total = data.somearticle.length; var num = 0; var […]
ちょっと探したのでメモ。 wordpressの関数を外部PHPから使う方法。 require(‘../wp-blog-header.php’); 参考 Codex:http://codex.wordpress.org/Integrating_WordPress_with_Your_Website
予定があるので備忘録。 マルチサイト化したwordpressの、ドメインを変更したら以下の手順で変更する。 ローカル環境でのテストの記録。 今回は本サイトのはいかに、/test/というマルチサイトを持ち、 そしてドメインを、localhost -> 192.168.24.55へ変更する想定。 ※バックアップを忘れずに ■p-config.php define(‘DOMAIN_CURRENT_SITE’, ‘localhost’); ↓ define(‘DOMAIN_CURRENT_SITE’, ‘192.168.24.55’); ■データベース まず、localhost も文字列が入っているテーブルを検索。 変更が必要そうなものは、以下がヒットした。 wp_2_options wp_options wp_blogs wp_site wp_sitemeta １．wp_opstions 各サイトのwp_options table を変更。 マルチサイトが増えるに連れて、 wp_n_optionsとなっているはず。 // home site UPDATE wp_options SET option_value = ‘http://192.168.24.55’ WHERE option_name = ‘home’; // multi site 2 UPDATE wp_2_options SET option_value = ‘http://192.168.24.55/test’ WHERE option_name = […]
プラグイン作成の練習。 スクロールと同時にランダムに動くプラグインを作成しました。 基本ソースは以下。 ■HTML <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>Parallax Test</title> <meta name=”keywords” content=””> <meta name=”description” content=””> <link rel=”stylesheet” href=”css/style.css” media=”all”> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script> <script src=”js/jquery.randomScroll.js”></script> <script> $(function() { $(“#parallax”).shparallax({ scrollValueDiv : “#scrollValue” }); }); </script> </head> <body> <h1>Just scroll it.</h1> <p class=”indicator”>スクロール値 | <span id=”scrollValue”>0</span></p> <ul id=”parallax”> <li id=”item1″></li> <li id=”item2″></li> <li id=”item3″></li> […]
Powertip Powertipを使って、フォームの入力補助テキストを表示する。 とても便利だったので、簡単にメモ。 １．下のようなHTMLフォームを用意する。 <form> <label>Name</label> <input type=”text” name=”name” class=”name” id=”field_01″> <label>Email</label> <input type=”text” name=”email” class=”email” id=”field_02″> <label>Comment</label> <textarea></textarea> <input type=”submit” value=”submit”> </form> ２．powertipライブラリのjs, css ファイルを読みこませる。 ダウンロード ↓ http://stevenbenner.github.io/jquery-powertip/ <script type=”text/javascript” src=”assets/js/powertip/core.js”></script> <script type=”text/javascript” src=”assets/js/powertip/csscoordinates.js”></script> <script type=”text/javascript” src=”assets/js/powertip/displaycontroller.js”></script> <script type=”text/javascript” src=”assets/js/powertip/placementcalculator.js”></script> <script type=”text/javascript” src=”assets/js/powertip/tooltipcontroller.js”></script> <script type=”text/javascript” src=”assets/js/powertip/utility.js”></script> <script type=”text/javascript” src=”assets/js/powertip/powertip.js”></script> <link rel=”stylesheet” href=”assets/css/powertip/jquery.powertip.css” > ３．新たにcontact.js等でファイルを作成し、powertip表示スクリプトを記述していく。 […]
個人でのサービスを始めるにあたって、オープンソースかつMetro UIベースのテンプレートを使おうと思ってリサーチしたところ思った以上に良さげなのをたくさん見つけたのでメモ。 １．Bootme TRO Windows8風のデザインで、素晴らしい完成度。アイコンの種類も豊富で、綺麗。 でもレスポンシブで縮めた時に少し違和感を感じた。 ２．BOOTSWATCH テーマが充実したフレームワーク。Twitter Bootstrapベースで、320pressがWordPress用のテーマも配布しているようだ。 ３．Metro-bootstrap こちらもTwitter Bootstrapベース。BOOTSWATCHよりもシンプルで、カスタムしやすそうだ。 ４．Metro UI CSS こちらはよりWindows8っぽいデザイン。使用する際にはMetro UI CSSサイトへのリンクを設置する必要があるようだ。 ５．METRO MANIA これもまた素晴らしいクオリティ。。 ただ使用にはコストが発生するようだが、一番安いものでたったの$4。クライアントへの納品には問題なさそう。 カスタマイズしての再配布や販売の場合は$300ドルらしい。 https://wrapbootstrap.com/theme/metro-mania-no.1-metro-bootstrap-theme-WB07F9G8L by http://responsivewebinc.com/ ６．SCAFFOLD コーポレートサイトなんかに良さそうな、テンプレート。 DLリンクとライセンスに関する情報はみつからなかったのだが、ソースを見る限りはやはりTwitter Bootstrapがベースにある。 by http://iweb-studio.com/ しかしクオリティの高い素材がたくさんあることに驚きました！ スキルの高い制作会社も。。 世界は広いっす。 Thanks for developers!!!
