ページ内リンクをスムーズスクロールするjQueryプラグイン(Inside Scroll)を使わせていただいています。
ページ内リンクをクリックすると、シュルシュルとスムーズにスクロースする、アレです。
この機能はもちろん大変ありがたいですが、このページは、jQuery Easing Plugin のエフェクトの確認として秀逸です。
アレどうやって動くんだっけと疑問になったときは、ここで確認です。
アーカイブ年: 2010
可変グリッドレイアウト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 が並び順ランダムです。
Twitter ウィジェットについてのちょっとした Tips。
そんなん当たり前やん、という方はヌルーで。
- フォントサイズが指定できない
くそー、CSSで指定してんのに何で font-size変わらないんだよ!
とお嘆きの貴兄。bodyタグの font-sizeや font-familyを強制的に使うみたいですよ。お試しあれ。(bodyじゃないかもしれませんが、とにかくベースの方の要素です) - プロフィール画像とIDやタイトルが上下に分かれる
これは純粋に CSSの問題です。H3タグや H4タグにはよく clear:both; が入っていると思いますので、これを無効にしてください。.twtr-hd h3, .twtr-hd h4 { clear:none; }
- WordPressのウィジェットとして貼りたい
ハイハイ、PHP Code Widgetプラグインを入れてください。
Twitter ウィジェットからコピペした JSコードは functions.php で関数にでもして。それを PHP Code Widgetから呼び出します。function twitter_widget() { ?> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 'auto', height: 300, theme: { shell: { background: '#17375e', color: '#ffffff' }, tweets: { background: '#305378', color: '#ffffff', links: '#418a21' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('hogehoge').start(); <?php }
本題から外れますが、この functionの書き方、目から鱗と違います?
こういうのを書くとき、いままでは echoで書いたり、ヒアドキュメントにしたりしてたんですが、?>で PHPを閉じちゃって、HTMLをそのまま書いて最後に<?phpで戻すなんて、なんという荒業なんでしょう! と最初みたとき、びっくりしました。
WordPressに限ったことじゃないんだけど、他人さまの翻訳ファイル(.mo)を使わせていただいていて、「ちょっとここの訳はなぁ」と思うこともたまにはあると思います。
明らかな間違いだったら、作者に教えてあげるのが親切だと思いますが、自分が使いたい用途が少し特殊で、そのときだけ「こういう言い回しになっててほしいな」ということもあるんじゃないでしょうか?
そういうときに、.poファイルがついていれば、Poeditでオレオレ翻訳ファイル(.mo)を作ってチョチョイのチョイでいいんですが、往々にして作者の方はそこまで親切じゃないので、バイナリの .moファイルだけしか付いてこないという場合も結構あります。
そういう場合は、コレ(↓)。
cd C:\Program Files\Poedit\bin\ msgunfmt.exe C:\tmp\hoge.mo -o C:\tmp\hoge.po
これで .poファイルが手に入ります。あとは Poeditで好きにするだけ。
保存のときにこんなエラーが出ますが、.moファイル自体はちゃんと作られてます。
5:07:20: C:\tmp\hoge.po:269: message catalog has plural form translations... 5:07:20: C:\tmp\hoge.po:2: ...but header entry lacks a "plural=EXPRESSION" attribute 5:07:20: C:\tmp\hoge.po:269: message catalog has plural form translations... 5:07:20: C:\tmp\hoge.po:2: ...but header entry lacks a "nplurals=INTEGER" attribute 5:07:20: msgfmt: found 2 fatal errors
いままで、WordPress-mu 2.7 でサイトを構築していたので、WordPress 3.0.1 にしたら、テーマ関係がガラッと変わっていてびっくり。DB回りは大して変わってないのに。
というわけで、『ええー、こんなことも知らないの?』ということを中心にメモっていきます。
- 子テーマ
WP3には子テーマというやつができたらしい。いままで使いたいテーマをコピーして、それをシコシコ直していたんだけど、それはお行儀悪いから『親は誰それで、自分は誰それの子供です』と宣言して使うようになったらしい。なるほど、PHPerにも倫…(以下自主規制)
詳しくは、子テーマを見てもらうことにして、簡単にいうと、/wp-content/themes の下に子テーマのディレクトリを作って、その中に style.css を入れればいいと。
そんでもって、style.css の頭にこう書いておくと。/* Theme Name: kid Template: twentyten */ @import url('../twentyten/style.css');
これで、WP3デフォルトの twentytenの子供ですよということです。うんじゃ、テンプレート自体直したいときはどうすんのというのはまた別で。もちろんできます。
- 子テーマの function.php
これは、親テーマの前に読み込まれるようになっています。同じ名前があった場合、親テーマの関数が、こういうのをちゃんとやってくれてると二重定義になりません。子テーマに出ていたサンプルはまさにいつもいつも使うやつなので、助かりました。こうやってやればスマートなんだ。
<?php function favicon_link() { echo '' . "\n"; } add_action('wp_head', 'favicon_link'); ?>
サンプルの favicon.ico はルートでしたが、通常は子テーマの中に置くので(マルチサイトなので)、ディレクトリを付けておきました。
従来の ’template_url’ だと親テーマ(この場合、twentyten)のディレクトリをもってくるのでNGです。
重い腰を上げて、WordPress 3.0.1をインストールしました。インストール自体はいつにも増して簡単です。
ただ、2.9 by PostgreSQL はコアに手を入れすぎているので、アップデードはできそうになく、エクスポートを試みましたが一瞬でエラーになったので、やらなくてよかったなぁと。
2.7.1 by MySQL は、以前 2.9 にアップデートしようとして失敗した覚えがあるので、これも無理っぽいかなと。こちらはエクスポートできるので、地道に1つずつ移していけばいいかな。
ということで、普通に WordPress 3.0.1を新規インストールしたので、それをマルチドメイン対応にしていきたいと思います。
- WordPress3のダウンロード
WordPress 日本語ローカルサイトからダウンロード。パーミッションとかをすごく気にしないといけないわけではないので、.zipで解凍したものをサーバに持っていってもいいと思います。もちろん、.tar.gz を wgetするのが正統派ですが。
- データベースの作成
MySQLに新しいDBをクリエイトしておきます。$ mysql -u root -p mysql> create database wordpress3; mysql> grant all on wordpress3.* to 'wpadmin'@'localhost' identified by 'password';
- 設定ファイル(wp-config.php)
ダウンロードしたファイルを解凍すると、ルート・ディレクトリに wp-config-sample.php があります。これをエディットして、以下のところを修正して、wp-config.php として保存します。(他のところはデフォルトのままでOK)define('DB_NAME', 'wordpress3'); define('DB_USER', 'wpadmin'); define('DB_PASSWORD', 'password');
認証用ユニークキー(’AUTH_KEY’ ~ ‘NONCE_SALT’)は、WordPress.org の秘密鍵サービスを使って変えておきましょう。
- Apacheの設定
WordPressをインストールするためには、/wp-admin/install.php をブラウザで開かないといけないので、WordPressのファイルを置いたサーバのディレクトリを DocumentRoot にする Apacheのエントリ(ドメイン)を作らないといけません。ServerName hoge.jp ServerAlias *.hoge.jp DocumentRoot /home/www/wordpress3/
ここでは、hoge.jp でアクセスにいくと、/home/www/wordpress3/ を見に行くようにしました。Apacheの再起動は忘れずに。(restartでなくて reloadでいいと思うけど)
- WordPress3のインストール
http://hoge.jp/wp-admin/install.php でOKです。
- マルチドメイン化
WordPress3ではネットワークと呼んでる機能です。ざっと見たところ、WordPress-muと変わりありませんね。WordPress本体にマージされたということが重要なんでしょうね。
さて、ネットワーク機能を使用するためには、wp-config.php に以下の記述を追加します。define ('WP_ALLOW_MULTISITE', true);
そうすると、ダッシュボードの「ツール」に「ネットワーク」が追加されます。
- ネットワークの設定
・「サブドメイン」にするか「サブディレクトリ」にするか ・・・ うちはいつも「サブドメイン」です。(好き好きですが)
・「ネットワークのタイトル」 ・・・ あとで変えられます。
・「管理者のメールアドレス」 ・・・ あとで変えられます。
これだけ設定して「インストール」を押すと、次のステップが表示されます。- wp-content ディレクトリに blogs.dir ディレクトリを作成。Apacheの書き込み権限を追加。
# cd /home/www/wordpress3/wp-content # mkdir blogs.dir # chown www-data:www-data blogs.dir
- wp-config.php に以下のコードを追加。
define( 'MULTISITE', true ); define( 'SUBDOMAIN_INSTALL', true ); $base = '/'; define( 'DOMAIN_CURRENT_SITE', 'hoge.jp' ); define( 'PATH_CURRENT_SITE', '/' ); define( 'SITE_ID_CURRENT_SITE', 1 ); define( 'BLOG_ID_CURRENT_SITE', 1 );
- /home/www/wordpress3/ ディレクトリに .htaccess を作成する。
RewriteEngine On RewriteBase / RewriteRule ^index.php$ - [L] # uploaded files RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L] RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] RewriteRule . index.php [L]
これでネットワーク関係はOKです。
- wp-content ディレクトリに blogs.dir ディレクトリを作成。Apacheの書き込み権限を追加。
- WordPress MU Domain Mapping のインストール
ネットワークを入れただけだと、http://hoge.jp や http://ore.hoge.jp 、http://dare.hoge.jp など、複数のブログを管理することができるようになりますが、マルチドメインになったわけではありません。
そこで、WordPress-muの文字通りのドン、donnchaさん作のプラグインを導入します。プラグインは新規追加で「WordPress MU Domain Mapping」を検索すれば出てきますから、いつもの手順通りにどうぞ。
インストールしただけだと有効化しないので、以下2点を忘れずに。
1.プラグインディレクトリの wordpress-mu-domain-mapping/sunrise.php を wp-content ディレクトリにコピー
2.define( ‘SUNRISE’, ‘on’ ); を wp-config.php に追加
- サイトの追加
時間切れなので、あとは注意点のみ。
・サイトを追加するときは、「サイトのアドレス」として、サブドメインを指定するが、独自ドメインにMappingしたあとは、使わなくなってしまうので、あまり名前付けに神経質にならなくてもよい。
・WordPress MU Domain Mapping の Domains で実際に割り当てる独自ドメインを指定する。
・Apacheの設定はもちろん必要。