可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js)を某プロジェクトで使わせていただいています。
用途としては、固定幅のコンテンツなんで可変である必要はないんですが、リロードするたびにランダムに並び順が変わるという効果として使っています。
こういう固定幅のコンテンツの場合、再描画で各画像のポジション計算が狂って上の方に重なって表示される場合があります。(easingのパラメータの調整で出にくくすることもできますが、完全に出ないわけではありません)
たぶん、ウィンドウサイズが変わった場合の再描画では問題がないのでしょうから、ウィンドウサイズが変わらないような状況で使っている方が悪いのですが、たまにでも、画像が上の方に重なるといろいろ不都合が。(「表示上の問題なんです、F5キーを押してください」と言いたいところですが、見た目、いかにもなにか重大なバグが発生したように見えて、結構厳しいです)
初期化のあと、すぐ vgrefresh() してみたり、vgsort() してみたり、あと、一緒に動く JSがあるとそうなる頻度が上がるので、後ろの方にずらしてみたりしたんですが、なかなかこれといった対策もなく。
外そうかなと思った瞬間、パッと思いつきました。
#grid-content {
display:none;
display:block\9; /* IE7, IE8 */
overflow:hidden;
height:0;
margin-left:-1px;
}
「最初は消しときゃええやん」と。これでばっちりです。IEだけは消しとくとほんとに出てこなくなりましたので、出しときました。
作者さま、ありがとうございました。
追記:これだとページ内ジャンプのとき、やっぱり表示できないケースがありました。なので、上のIE対応は止めて、基本表示しないで別のタイミング(他のJSが動くとき)、これ(↓)を入れることにしました。
$("#grid-content").css('display', 'block');
なんか泥縄式になっているような気がするのは気のせい?
再追記:これでもうまくいかないことがあったので、更に vgrefresh() を足しました。いよいよ泥縄(泥船)です。
$("#grid-content").css('display', 'block');
$("#grid-content").vgrefresh();
ちなみにランダムの方は上流(コンテンツを準備する側)でやることにしました。
query_posts('category_name=top&posts_per_page=-1&orderby=rand');
posts_per_page=-1 は無制限、orderby=rand が並び順ランダムです。
WordPress3:カスタムメニュー
WP3WordPress3にデフォルトでついてくる「Twenty One」テンプレートでカスタムメニューというやつが使えます。
あの例のグローバル・ナビゲーションというやつです。
メニュー階層があるとドロップダウンメニューにしてくれて憂い奴なんですが、どうやって階層にすればいいの、と迷ったので、画面を貼っときます。
カスタムリンクをドラッグ&ドロップするときに、少し右の方へずらせばいいんです。
Memo:タブの吐き出し・・・9/3
Etc, Tips, WP Tipsタブを開いてばかりでブラウザが片付かないのでここで吐き出しておく。
ところで、Googleの画像検索って、以前はもう少しお上品だと思ったんだけど、Baiduや Naverの悪い影響か、「吐き出し」みたいな検索でも結構アダルティなグロい画像を出してくるので、要注意!
そうだ、そうだ。『floatの解除は float:none』
max-widthを指定したら、<img width=”nn” />が効かなくなったので、注意。style=”width:nnpx;”は大丈夫。
WordPressの投稿やページの中で PHPのコードを書けるようにするプラグイン。勝手に入るやつがポピュラーだけど、入れたいところに特別なタグを書くやり方の方が好きです。
3番目と4番目のパラメータはめったに使わないのでメモ。
WordPress3:あとで書くかもしれないTips
WP Tips, WP3ブラウザのタブが溜まりまくりなので、さっさと整理するためにここで一度吐き出しておきます。
といいつつ、書く前に閉じちゃったものがたくさんあって、残っているのは Twitter Tools という大物だけなんですけどね。
BASIC認証じゃなくなって、ハンパなく設定が難しくなりました。「WordPress Twitter Toolsバージョンアップ」を見てやったのでなんとかなりましたが、末端のユーザに Twitter Deverolers登録させるのはイカンでしょう。
以前は、「WPとTwitterで遊んでみる。Twitter Tools」に書かれているように、ユーザ名とパスワードを登録するだけでOKでした。
「Twitter Tools2.1.1プラグインの日本語版配布」から。moファイルしか配布されないので、翻訳を修正したい人は、moファイルを修正をどうぞ。
jQuery:Inside Scroll
jQueryページ内リンクをスムーズスクロールするjQueryプラグイン(Inside Scroll)を使わせていただいています。
ページ内リンクをクリックすると、シュルシュルとスムーズにスクロースする、アレです。
この機能はもちろん大変ありがたいですが、このページは、jQuery Easing Plugin のエフェクトの確認として秀逸です。
アレどうやって動くんだっけと疑問になったときは、ここで確認です。
jQuery:可変グリッドレイアウト(jquery.vgrid.js)
jQuery可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js)を某プロジェクトで使わせていただいています。
用途としては、固定幅のコンテンツなんで可変である必要はないんですが、リロードするたびにランダムに並び順が変わるという効果として使っています。
こういう固定幅のコンテンツの場合、再描画で各画像のポジション計算が狂って上の方に重なって表示される場合があります。(easingのパラメータの調整で出にくくすることもできますが、完全に出ないわけではありません)
たぶん、ウィンドウサイズが変わった場合の再描画では問題がないのでしょうから、ウィンドウサイズが変わらないような状況で使っている方が悪いのですが、たまにでも、画像が上の方に重なるといろいろ不都合が。(「表示上の問題なんです、F5キーを押してください」と言いたいところですが、見た目、いかにもなにか重大なバグが発生したように見えて、結構厳しいです)
初期化のあと、すぐ vgrefresh() してみたり、vgsort() してみたり、あと、一緒に動く JSがあるとそうなる頻度が上がるので、後ろの方にずらしてみたりしたんですが、なかなかこれといった対策もなく。
外そうかなと思った瞬間、パッと思いつきました。
「最初は消しときゃええやん」と。これでばっちりです。IEだけは消しとくとほんとに出てこなくなりましたので、出しときました。
作者さま、ありがとうございました。
ちなみにランダムの方は上流(コンテンツを準備する側)でやることにしました。
posts_per_page=-1 は無制限、orderby=rand が並び順ランダムです。
Twitter ウィジェット
Etc, WP TipsTwitter ウィジェットについてのちょっとした Tips。
そんなん当たり前やん、という方はヌルーで。
くそー、CSSで指定してんのに何で font-size変わらないんだよ!
とお嘆きの貴兄。bodyタグの font-sizeや font-familyを強制的に使うみたいですよ。お試しあれ。(bodyじゃないかもしれませんが、とにかくベースの方の要素です)
これは純粋に CSSの問題です。H3タグや H4タグにはよく clear:both; が入っていると思いますので、これを無効にしてください。
ハイハイ、PHP Code Widgetプラグインを入れてください。
Twitter ウィジェットからコピペした JSコードは functions.php で関数にでもして。それを PHP Code Widgetから呼び出します。
本題から外れますが、この functionの書き方、目から鱗と違います?
こういうのを書くとき、いままでは echoで書いたり、ヒアドキュメントにしたりしてたんですが、?>で PHPを閉じちゃって、HTMLをそのまま書いて最後に<?phpで戻すなんて、なんという荒業なんでしょう! と最初みたとき、びっくりしました。