Jadeで静的ファイルを相対パスで読み込むwordpressやjQuery、macについてのtipsを中心に綴ります。Jade良いですね〜。社内でjadeおじさんは僕だけなので、布教活動に勤しんでます。画像やcss、JavaScriptや各下層ページへのリンクなどはgruntが動いているディレクトリをルートとして絶対パスで指定してました。jadeでビルドした時に上手いこと置換してくれる処理とかないのかな〜、調べてみました。plus)さすがに上手いこと相対パスに置換してくれる処理は無さそうだった公式サイトを読んだのですが、絶対パス→相対パスにゴリッと変更してくれそうな処理は無さそう・・・。(見落としてるだけかも)ググッてみてもドンピシャな記事は無く。こちらのページでbaseタグを使用した方法が紹介されていたのですが、書き換えられたソースを納品する必要があるのでこれもハマらない・・・。Gruntfile.jsの設定でコンパイル元とコンパイル先は取得できるGrunt側でなんとかするか〜ってことで。リポジトリを見ると使えそうな設定が用意されてました。}}オプションからJadeテンプレート側にコンパイル元とコンパイル先の絶対パスを渡せるとのこと。これを利用して絶対パスから階層を取得して相対パスに置換することができそうです。普段のファイル構成はこんな感じ。静的ファイル群はコンパイル元・コンパイル先の一層上にある状態です。|--index.jade取得できるパスを元に下記のように書き換えてみました。'../';}//テンプレートに値をわたす。'../';}//テンプレートに値をわたす。dest,page_prefix:page_prefix,assets_prefix:assets_prefix};}srcは配列なのでsrc[0]で取得することに注意です。これでファイルの階層情報をテンプレートに送ることができます。あとはテンプレートの中で相対パスで読み込みたいファイルを下記のように記述。href='#{assets_prefix}css/style.css')これで意図通り!うぉぉ!なんですが、なんか泥臭い処理という印象が否めないなぁ。ブログの更新情報はこちらで配信しています。concrete5で自分好みの超シンプルなpagelistブロックテンプレート(5.7.6で動作確認済み)adwpx定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。読みを繰り返すのがオススメ。超良書です!サンプルが大充実!定番のjQuery入門書です。本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。オリジナルテーマ制作のお供にどうぞ!WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。5.7系で多言語サイト設定の基本をおさらい〜基本設定編〜【地味】window.open()で開いたポップアップ内から指定のリンクを親ウインドウの別タブで開くふと気づくとMarkerClustererのアイコン画像が404エラー・・・!対処法です。APIにSandboxなるステータスが追加されていた。bxSliderを使用時、任意のスライドで止めるVagrantの動作が遅かったので共有フォルダ設定とVirtualBox環境のメモリ設定を見直してみました。wordpressやjQuery、macについてのtipsを中心に綴ります。