Demon – I Think (main mix)

こういうヴォーカルいいよなあ。ここがサイト?

男性ヴォーカルものといえば、これすごく好き。
Omar S – Set It Out

WordPress にカスタムメニューをいくつかいれる

WordPress 3 の新機能のカスタムメニューに対応させる方法を調べた。複数のメニューを入れることを前提で。

対応させるにはサイドバーウィジェットの仕組みと同じ感じで、テンプレートと functions.php に記述が必要。

テンプレート

テンプレート内のどこかにひとつめ

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary')); ?>

テンプレート内のどこかにふたつめ

<?php wp_nav_menu( array( 'container_class' => 'menu-footer', 'theme_location' => 'secondary')); ?>

上のテンプレートの theme_location の値は、そこにどのメニューを呼び出すかの指定で、 functions.php のregister_nav_menusのキーの部分に対応。

functions.php

//add_theme_support('menus');
register_nav_menus( array(
	'primary' => 'ヘッダーに入ります',
	'secondary' => 'フッターにに入ります'
));

functions.php の register_nav_menus の 「ヘッダーに入ります」は管理画面で表示されるメニューの場所の説明。add_theme_support('menu') は、register_nav_menus() を書く場合には必要ないということで調べていない。

id・class・CSS

グローバルナビゲーションなどに使ったりするのなら、メニューごとに CSS を書くことになるのだけど、テンプレートで container_id, container_class, menu_class などを指定していても、ユーザーが設定からカスタムメニューを指定した場合と、指定しない状態(fallback_cb のデフォルトの wp_page_menu によりページ一覧が出る)で id・class が付いたり付かなかったり、どの html タグに class がつくのかが変わる。

テンプレートで container_class に YYYY を指定した場合、管理画面で設定したメニュー名前をXXXXとするとこうなった。

  container_class の指定無し 'container_class' => 'YYY'
カスタムメニューを指定無し <div class="menu"><ul><li ... <div class="menu"><ul><li ...
カスタムメニューを指定有り <div class="menu-XXX-container"><ul id="menu-XXX" class="menu"><li ... <div class="YYY"><ul id="menu-XXX" class="menu"><li ...

XXXX はユーザが管理画面で命名するので、テーマ側ではどんな名前になるのかはわからない。
container_classを指定しても付いたり、まったく付かなかったりする。class="menu"div に付いたり、ul に付いたりする。Twenty Ten を見ると、さらに外側の div を使って、container_class がある場合とない場合をそれぞれ指定している。

#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}

自分以外が使うテーマや、一般公開するようなテーマでは、カスタムメニューを指定してあったりなかったりする場合に対応しないとならないのでややこしい。

参考

2011-01-11T13:00:31.209Z 追記
自分で読み返してもわけがわからないので少し書き直しました。

記事に個別のデザインを

日記やメモばかりで、記事というようなものはないけど、WordPress で投稿単位で CSS をあてるテスト。
記事の個別ページを見てください。

印刷物のデザインの影響を受けた Web デザインとか、個別にディレクションされた記事とか流行ってるようなので。

技術的には、WordPress のテーマで対応させて、カスタムフィールドに書いた CSS をテーマで <haed > に 流し込もうかと考えたけど、探したらそれを出来るプラグインがあったので導入。個別記事ごとに CSS の入力、適用が出来るようになる。
記事個別のページで CSS が挿入されるので、トップページやアーカイブページでは他と同じフォーマットで表示される。

プラグインでの対応だけでは、記事で body の背景色を白にした場合、黒にした場合など、テーマのデザインへの影響が把握しきれないので、デザイン・CSS 的に対応を考えられたテーマも必要そう。デザインでは色、質感、レイアウトの対応。CSS で言えば値の明示と inherittransparent などの使い分けが必要。
サイトを通して共通のヘッダ、フッタはアイデンティティを示しつつも、個別の記事のデザインの邪魔や影響を考えたものがいいのかな。

フィードに流れるような本文の部分のテキストや画像だけが情報ではなくて、サイトのデザイン、レイアウトも含めて情報だと考えたいし、単純に言えば、楽しいことは楽しい感じで伝えたいし、うんざりした日にはそんな感じが記事に出たっていいんじゃないかと思う。

CakePHP のビューから head に JS を書き込む

CakePHP で出力される html の head に JavaScript を書き込む方法。

コントローラで Javascript ヘルパーを追加。

var helpers = array('Javascript');

ビューテンプレートで JavaScript を出力 (レイアウトに $scripts_for_layout が必要)

$code = 'window.alert("foo");';
$javascript->codeBlock($code, array("inline" => false));

※20100825 "inline" => false の場合は値を返すわけではないので、 echo いらないですね。

960 Grid System のクラスと内容

960 Grid System の 960.css で設定されているクラスをまとめてみる。

class 内容
.container_12, .container_16 全体を囲む。コンテナ。
.grid_1 … .grid_X グリッドX個分の幅。左右にマージンが10px。
.prefix_1 … .prefix_X 左 padding をグリッドX個分。
.suffix_1 … .suffix_X 右 padding をグリッドX個分。
.push_1 … .push_X グリッドX個分右にずらす。(position: relative と left をプラス方向に指定)
.pull_1 … .pull_X グリッドX個分左にずらす。(position: relative と left をマイナス方向に指定)
.alpha 左マージン0
.omega 右マージン0
.clear フロートのクリア
.clearfix clearfix

コマンド置換、バッククォート

コマンドの実行結果に置き換わる。


$ echo 'test' > $(date +%Y%m%d-%H%M).txt
$ echo 'test' > `date +%Y%m%d-%H%M`.txt

$() を知らなかった。

Gmail のアドレス画像を作成

アドレス画像と言えばいいのか、バナーといえばいいのか、E-Mail Icon Generator で、メールアドレスを画像化したものを作ってみた。

こちらの Gmail Signature Generator はデザインのバリエーションが多い。

トップページ作った。

http://www.hrykozw.com/ が白紙だったのでリンクなど載せてみた。記念にスクリーンショット!

Twitter とか Flickr とかブログとか、いろいろな使っているサービスのアップデートをまとめたいけど、アーカイブさせたいよなぁ、と思うと JS で API やフィードを読み込むだけではなく、フィードで取ってきて貯めたりしないとならなかったりするので、それはまた今度に。

jQuery で Cookie を扱う

Cookie を簡単に扱えるようにする jQuery のプラグインの jQuery Cookie Plugin のメモ。

値の設定

$.cookie("name", "value");
$.cookie("name","value", { expires: 7 }); // 有効期限7日

値の取得

$.cookie("name");

Cookie の削除

$.cookie("name", null);

サンプルだとこんな書き方で名前とオプションを変数に入れてる。

var COOKIE_NAME = 'test_cookie';
var options = { path: '/', expires: 10 };
$.cookie(COOKIE_NAME, 'test', options);

Flickr の写真のページへのリンクを Slimbox 2 で表示させる

jQuery 版の Lightbox 系スクリプトの Slimbox 2 は、付属のスクリプトを使うと、 Flickr の写真のページへリンクが張られた写真の表示も出来るので使い方を。Slimbox 2 v2.04と jQuery v1.4.2で確認。

slimbox-2.04/extra/flickr.js が Flickr からの埋め込み写真を Slimbox 2 で表示させるためのスクリプト。flickr.js のコメントによると、

  • Flickr のサムネイルを自動で Slimbox に対応させる
  • Flickr の写真のページへのリンクがあるすべての画像が対象になる
  • rel="lightbox" は追加しなくていい
  • クリックでミディアムサイズの画像を表示する
  • リンクの title か、画像の alt をタイトルとして表示する
  • タイトルには、 Flick の写真のページへのリンクが追加される

とのこと。

slimbox2.js など通常読み込むファイルに加えて、flickr.jsも読み込む。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<script type="text/javascript" src="js/flickr.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

不要なら、 slimbox2.js

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)

の所のロード処理を削除しても問題ない。

html は、Flickr の Shere this で取れる html のままでいい。

<a href="http://www.flickr.com/photos/51979237@N04/4868471305/" title="20100808_01 by hrykozw, on Flickr"><img src="http://farm5.static.flickr.com/4121/4868471305_f93510149e_s.jpg" width="75" height="75" alt="20100808_01" /></a>
<a href="http://www.flickr.com/photos/51979237@N04/4869085578/" title="20100808_02 by hrykozw, on Flickr"><img src="http://farm5.static.flickr.com/4119/4869085578_290e7d675d_s.jpg" width="75" height="75" alt="20100808_02" /></a>

これで slimbox 2 で写真が表示されるようになる。

リンクに ref="lightbox" を入れなくていいということだけど、入れても効かないので、写真を複数のグループには出来なかった。