仕事でLavaLampを導入しました。
簡単に設置できず試行錯誤したので、今後LavaLampを使ってみたい人向けの参考にまとめを載せておきます。
LavaLampはjQuery(Javascript)を使用したリッチメニューです。グローバルナビゲーションを格好良く見せることができます。
詳細はコチラのページ(英語) に書かれています。
導入方法
導入方法は2種類あります。ただ、パッケージとして提供されているものについては環境によりクリックできない可能性があり、完全解析するより個別導入した方が早そうなので個別導入方法で説明します。
上記ページのStep 3: The Javascript項目下にあるdownload jQuery here, Easing plugin here, and the LavaLamp plugin here.から3つともDLします。
※jQueryはバージョンにより動作制限があるかも知れません。私が導入した時のバージョンはjQuery1.2.6です。
各ファイルを格納場所(自分で決めて良い)に格納し、Step 3: The Javascript項目を参考に呼び出します。
<script type = "text/javascript" src = "path/to/jquery.js" ></ script >
<script type = "text/javascript" src = "path/to/jquery.lavalamp.js" ></ script >
<!-- Optional -->
<script type = "text/javascript" src = "path/to/jquery.easing.js" ></ script >
<script type = "text/javascript" >
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</ script >
CSSはUpdate項目にあるDownload the zip fileをDL、解凍してlavalamp_test.cssの必要な箇所を取り出して、JSファイル同様に呼び出します。
<link rel = "stylesheet" href = "lavalamp_test.css" type = "text/css" media = "all" >
HTMLにリストタグでメニューを記述します。
<ul class = "lavaLamp" >
<li ><a href = "#" > Home</ a ></ li >
<li ><a href = "#" > Plant a tree</ a ></ li >
<li ><a href = "#" > Travel</ a ></ li >
<li ><a href = "#" > Ride an elephant</ a ></ li >
</ ul >
※初期位置を決めるにはリストタグにクラスをセットします。
先日参加したセミナーでWordPress日本語版が最新Ver.2.7になったのを知り、導入してみました。ざっくりですが、今のところ致命的なバグは見つかっていません(FlashアップローダーはFlash側に問題がある模様)。プラグインも問題なく動いているようです。
前バージョンとの大きな違いは管理画面のインターフェースに大幅な変更が施されたこと。メニューが左側に移動し、折りたためるようになっています。メニューが左側に移ったことで縦の情報量が増え、最近主流のワイドモニタだと画面が有効に使えます。デザインもより今風になり、情報も整理されているように見受けられ分かりやすくなったと感じています。
また、WordPress自体のアップデート機能が付いたことが挙げられます。これによりマイナーチェンジの煩わしい手動アップデートが簡単になり、作業効率化がより高まるだろうと予測されます(当環境ではまだ試していませんが)。
他にも色々機能が追加されているようですが、まだいじっている段階ですので良い機能強化があれば紹介してみようと思います。
投稿ナビゲーション