月: 2008年4月

[WP]WordPress　オプションページの作成

by

どうしても作りたいプラグインが出来たので試しに作ってみてるが、その際避けて通れないオプション設定ページ。
テーマの独自設定を作りたい時にも使える。
Creating Options Pagesから適当に抜粋。
ページそのものの追加は前のエントリーで紹介してるので省略。

最後の方に設定保存のメカニズムについても適当に解説をつけてみた。

続きを読む

[WP]WordPress2.5～2.6　サムネイル画像を取得して表示

by

テンプレート内でサムネイルを表示する方法について。
サムネイル（中）をカテゴリーで表示したいと思ったとき、自動でサムネイル作られるならそれ表示するようにすればいいじゃん、と思いませんか。

でもwordpress2.5～2.6ではthumbnailが小、mediumが中という分け方をしてるが、ファイル名にはなぜかファイルサイズが付く。
ギャラリーというサムネイル自動表示の新機能があるんだけど、ショートコードだからテンプレートのソースコードでは使えない。
ファイル名は*-thumbnail.jpgとか*-medium.jpgとかでいいじゃん、という気がする。
というかむしろそちらの方が便利だと思う。ので修正されないかなあ…（期待）

自動作成された、これら名前のバラバラなサムネイルをテンプレートで自動取得する方法があった。

続きを読む

[WP]WordPress2.5～2.7用 Tiny-MCEカスタムプラグイン

by

WordPress2.5のTiny-MCEは非常に具合がいい。Divタグを普通に使えたのが一番驚いた。
そんな具合のいいTiny-MCEのボタン増やしたいと思って、aoinaさんが作られたプラグインみたいな、Tiny-MCEをカスタマイズするプラグインを探してたらいいものが見つかった。

TinyMCE Advanced

▼インストールすると色々追加できるようになります。
Tiny-MCEのカスタマイズが出来るようになるプラグインです

Ver2.7にも対応してます。

続きを読む

[WP]2.2.3から2.5にバージョンアップしてみた

by

5分で終わった:-)

念のためデータベースとwordpressからのエクスポート両方でのバックアップ。
2.2.3の入ってたディレクトリに2.5の全ファイルつっこんで、アップグレードファイルにアクセスするだけで完了。

これとは別にもう一つ2.1.3のがあるんだけど、多分そちらは苦労しそう。2.1.xって結構違うからなあ…
UTFにしてあるけどプラグインが動かないの多そうな予感がする。

続きを読む

[WP]WordPress2.5-2.6　フルサイズの横幅を500px以上にする

by

WordPress2.5～2.6のメディアアップロードでは画像のサムネイルサイズに小・中と２種類増えたことで、
フルサイズを含めて３種類になったわけだが、フルサイズで画像を投稿に挿入したとき何もしてないと
横幅の最大が500ｐｘで固定されてしまうことがある。

500ｐｘ以上にしたい場合は、アクティブなテーマのfunction.phpに次のコードを記述する。

$GLOBALS['content_width'] = 800;

画像でレイアウトを崩されたくない場合などには設定しておくと良いと思う。

続きを読む

[WP]wordpressをインストール先とは別のディレクトリをホームURLにする

by

公式説明を適当に翻訳。
ルートディレクトリとは違うディレクトリにWordpressをインストールして、ホームURLだけ擬似的にルートディレクトリにする方法。

この設定変更さえすれば、好きなディレクトリにWordpressを置くことが出来る。
複数設置する時やルートディレクトリはすっきりさせたいという時に便利。

続きを読む

[WP]メルマガ・メール購読プラグイン比較まとめ

by

wordpress対応のニュースレター系プラグインの比較をしたのでまとめてみた。
メールマガジン配信、メール購読、登録ユーザーへのメール送信がwordpressの管理パネルから出来るプラグインが中心。
ビジネスブログとかCMS的に構築したときリクエストされる事が多いけど、いざ探してみるとなかなか見つからないんだよね…。

Subscribe2の日本語化ファイルver5.6に対応
Subscribe2の日本語化ファイルver4.15に対応
Subscribe2の日本語化ファイルver4.7に対応
説明にダウンロードのリンクがあります。

続きを読む

[mootools]theadやtbodyのfloat:leftがIEで効かないので

by

それじゃあタグ変えて中身をtableの外に出せばいいんじゃん。（そしたらfloatできるじゃん）
…という発想から出来たソース。mootools使用。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

IEはthead、tbody、tfootへのfloat、positionが効かない。
効果的なハックがあればいいんだけど見つからなかった。
つくづくIEはダメな子だな。

続きを読む

[CSS]Safari3.X用CSSハック

by

Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。

FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。

CSS Filter: Safari CSS Hack

Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.

CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)

続きを読む

[mootools]タブとFx.Slideの合わせ技

by

引き出しみたいなメニューっぽいものを作るサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

実際やってみると分かるが、Fx.Slide要素にリストメニュー等をくっつけてタブっぽくさせると、
動かしたとき微妙に隙間が出来てしまう。（横方向にくっつけた場合は出来ない。）
それで色々考えた結果、position駆使すれば出来るじゃない、という結論が出た。

続きを読む

[CSS]透過PNGと透過フィルターの使い方

by

要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し（またはマスクつき）の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。

透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。

以下サンプル

解説は続きに。

続きを読む

[WP]wordpressテンプレートファイルの翻訳方法

by

プラグインと同じくテーマもmoファイルで翻訳可能らしいので作り方メモ。
幅広く使ってもらうテーマを作るなら必須と言える。
プラグインの翻訳もほぼ同じ。

翻訳には言語ファイルの編集ソフトが必要。
有名なのはpoEditだろうか。

参考：Translating WordPress

さらっとpoEditの使い方を書くと

  1. poEditを起動する
  2. 新規カタログ→プロジェクトの設定
    • プロジェクトの名前とバージョン→テーマの名前とか適当に
    • 翻訳チーム→自分の名前とか
    • 言語→japanese
    • 国→JAPAN
    • 文字符号化＆ソースコードの（ry→UTF-8
    • ページのパス→「ドット」だけ入力
    • パス→「新しいアイテム」で「ドット」
    • キーワード→「__（アンダーバー２つ）」と「_e」
  3. ＯＫしてテーマのフォルダ内に保存。ファイル名はja.po（プラグインなら、プラグイン名-ja.po）
  4. カタログのソースから更新で翻訳文取り込み
  5. ひたすら翻訳。保存したら自動的にmoが作成・更新される

続きを読む

[JS]設定した期間だけNEWを表示する

by

新着記事にNEWをつけたりする感じのもののサンプル。
PHPで書いたやつをJavascriptで書いてみる。

function Mark(){
	var date ="2008/04/01";//ログの年月日
	var interval ="4" //表示期限
	a = new Date();
	b = Date.parse(date)+ (parseInt(interval) * 24 * 3600 * 1000);
	c = a.getTime();
	if(b>=c) document.write("New");
	else document.write("Old");
}

続きを読む