WordPressのレスポンシブテンプレートをつくってみた

レスポンシブ対応がなんとかとりあえず終わったので、やったとりくみを記載していきます＾＾

WordPressのレスポンス化でやったこと

コーディングのやり方から変えた・・・

前は、普通のエディタでちまちま全ページ1からアナログでコーディングするやり方しかやったことなかった私ですが、転職先で「なにそんなだっせーやり方してんの」ぐらいの勢いを感じたので、先輩たちに教えてもらい、「スキーマ」という考えとやり方を学びました。cresent eve でコーディングしてたとか言ったときの「ファック？！」な反応といったらw。

なので新しく学んだ、Grunt（http://gruntjs.com/）を使って、cofee script（http://coffeescript.org/）でjsを書き、sass（http://compass-style.org/）でcssを書き、テンプレートはassembleというプラグインをGruntでインストールして、やりやすい開発環境で実装をやってみることに。最後、wordpressに当て込みするときは、今まで通りちまちまアナログですが。

ただcofee scriptばっかやると普通の書き方忘れそうでそこは気をつけたいです！

PC、TB、SP、全部うまいこと表示されるようにワンソースで組む

レスポンシブも転職してはじめてやったんですが、とりあえず、metaのlinkで読み込むスタイルをウィンドウの幅別で変えます。こんな感じで。

<link rel="stylesheet" href="/common/css/common.css">
<link rel="stylesheet" href="/common/css/s_common.css" media="screen and (max-width:640px)">

それと一緒にjsの処理の出し分けも必須になるので、jsのほうでもウィンドウの横幅を取得してサイズを判別する仕組みをいれときます。こんな感じでとりあえずいれた、あってるかは謎。とりあえず動いてくれてる。

      function windHandler() {}
      windHandler.prototype.publicFunc = function() {
        var _this = this;
        return this.windSize();
        return $(window).on('resize', function(e) {
          return _this.windSize();
        });
      };
      windHandler.prototype.windSize = function() {
        var self;
        self = this;
        this.window = $(window);
        this.windWt = this.window.width();
        if (this.windWt > 640) {
          return 'large';
        } else {
          return 'small';
        }
      };
      return windHandler;

cssとjsのふたつあってやっとちゃんとレンスポンシブになる感じです。

要素の高さを調整するjsが必要

要素の高さを調整する仕組みがレスポンシブだからなおさらいろんなところで必要になったので、それをタグで判別できるようにcommon.jsに用意しときます。

SPは横向きもあるので、リサイズしたときにも該当のclassがついているところは全部実行して調整されるようにする必要がある。

モーダルも２種類タグで判別できるように用意しといた

テキストと動画の2種類用意しときました。youtubeの動画のモーダルは、SPを横にした時は小さいとおかしいので、これもまたウィンドウの横幅を取得したら、縦も一緒に取得してどっちが大きいかで、横向きなのか、通常なのかを判別させる仕組みが必要になりました。animationは部分的にcss3のtransitionを使用したら動きがスムーズだった。