CMS（WordPress）などの技術ブログ

Chromeの拡張機能をショートカットで呼び出せたらなー
と思いつつ、良い方法が見つからないまま過ごしてきました。
（ちょっと誇張しました。別にずっと考えてる訳ではないです。もちろん。）

しかし、解決方法が見つかったのでエントリーしておきます。

なんとChromeの標準機能を利用します。

使い方

拡張機能の設定画面を開きます。
画面の一番下に「コマンドを設定する」というリンクがあるので開きます。


すると拡張機能にショートカットが割り当てる為の設定画面が表示されるので、
お好きなショートカットを割り当てて下さい。



これだけです。簡単ですね。
全然気づかなかったんですが、Chrome22から可能になっていたようです。
ご参考まで！

WordPressは投稿や固定ページ（以下投稿に省略）に登録しておいた情報を呼び出して表示しますので、
投稿を呼び出さない事には何も始まりません。

投稿を呼び出すのにも色々パターンがあるかと思います。
投稿を1つ取得したいのか、一覧で取得したいのか、カテゴリーを限定して取得したいのか、などなど。
この辺は別の機会にまとめるとして、query_postsを使う場合の注意事項をメモしておきます。

query_postsの基本的な使い方

例えばカテゴリーIDが1,2,3の投稿を取得する場合、下記のような書き方をします。
どういう条件で投稿を取得するかを指定して、投稿を取得して、ループで1投稿ずつ処理していく、という流れです。

<?php

	//条件
	$args = array(
		'cat' => 1,2,3
	);

	// クエリ
	query_posts( $args );

	// ループ
	if ( have_posts() ) : 
		while ( have_posts() ) : 
		the_post();
			echo $post->post_title;
		endwhile; 
	else:
	  ..
	endif;

	// クエリをリセット
	wp_reset_query();

?>

これがページのメインのコンテンツ用であればあまり問題になりませんが、
サイドバーやヘッダー、フッター用にquery_postsを使う場合、ちょっと注意が必要です。

query_postsの省略形（条件無しで使う）

WordPressでは今投稿詳細ページなのか、トップページなのか、というのをアクセス時のURLで判断しています。
今回はquery_postsに「条件」を指定しましたが、このように条件なしでも使えます。

<?php

	// クエリ
	query_posts();

	// ループ
	if ( have_posts() ) : 
		while ( have_posts() ) : 
		the_post();
			echo $post->post_title;
		endwhile; 
	else:
	  ..
	endif;

?>

条件無しとはどういう事かというと、URLに従ってWordPress側で検索条件をセットしているのです。
その為、何も条件を指定しなくても使える、という事になります。

でも「サイドバーにも別の投稿を表示させたい！」となると、
1ページで2回query_postsすることになりますよね？
すると、条件分岐タグ等の関数がうまく動作しなくなります。
query_postsはグローバル変数を書き換える為、それを元に動作しているタグ（関数）が正常に動作しなくなるという訳です。

query_postsを使ったら必ずリセットする

では、どうしたら良いかと言うと、
「query_postsを使ったらリセット」すればOKです。
最初のコードにはしれっと入れておきましたが、query_postsを使い終わったら（ループが終わったら）下記コードでリセットします。

wp_reset_query();

結論としては簡単な話ですが、ハマる人も多いかと思いますので、ご参考下さいませ。

投稿一覧を出力する方法は幾つかありますが、デフォルトではいずれの方法も「新しい投稿順」で表示されます。
WordPressをブログ以外の用途で使う場合、投稿の並び替えができないと困ったことになります。

投稿一覧を取得するテンプレートタグにも並び替えオプションが指定できますが、
タイトルや日付順といった指定になりますので、自由に順番を指定するにはプラグインを利用するのが良いです。

そこでこのプラグイン。

AStickyPostOrderER
基本的には普通にインストールするだけですが、テンプレートによっては並び替えが効かないはず。
ここで途方にくれる人も多いでしょう（私もそうでした…）。

ダウンロード先
AStickyPostOrderER

インストール方法
1) ダウンロードしたファイルを解凍し、「wp-content/plugins」フォルダへアップします。
2) WP管理画面からプラグインを有効化

使い方
1) 専用の設定画面を開きます
ツール -> AStickyPostOrderER

2) 一覧から並び替えをしたいカテゴリーかタグをクリック
3) 投稿一覧が出てきます。右側の「Send To」に数字で順番を入れていきます。
4) 「Save and Reflesh」で保存
数字を入れた投稿は「Sorted」側へ移動します。
この時点で並び替えが反映されます。

並び替えができない場合
並び替えされてないよ！という方も多いでしょう。
特にカスタマイズをしている場合は、うまく動かすのに少しコツが必要なので、下記も試してみて下さい。

query_postsに引数を与える
query_postsにorderby、orderという2つの引数を与えてみて下さい。

$args = array(
	'orderby' 	=> 'order',
	'order' 	=> 'ASC'
);

query_posts($args);

修正パッチを当てる
WP3.1以降はここまでやってもまだ動かないと思います。
パッチが存在しますのでこれを当てます。

AStickyPostOrderER WordPress 3.1 compatibility patch

ダウンロードしたファイルを「AStickyPostOrderER」のプラグインフォルダに上書きすればOKです。

それでも並び替えができてない！という方。
get_postsを使ってませんか？このプラグインはquery_postsでないと動作しないようです。
query_postsを使ってみて下さい。

非常に便利なプラグインなので使ってる方はかなり多いと思いますが、類似のプラグインはあまり見かけないですねー

カラーピッカーというツールをご存知でしょうか？
カラーピッカーというと、一般的には2つの意味で使われているようです。

1.色相環から好きな配合の色をパレットで選ぶツール
ツールの設定画面で色を設定するときにパレットが出てくるやつがこれです。
身近なところで言うとExcelのセルや文字の色を選ぶ時にも使われてますね。
PhotoshopやFireworksなど画像を扱うソフトでは高機能なカラーピッカーが搭載されています。
こんなのです。

2.PCの画面上の色のカラーコードを取得するツール
スポイトツール、とも呼ばれますが、カラーピッカーとも呼ばれます。
「この色いいな」という時にカラーコードを控えておけば同じ色が再現できるので、
Web制作やブログを書く場合に良く使われます。


今回は「カラーコードを取得するツール」、ColorPickerのご紹介。
しばらく使ってて具合が良いです、これ。

ダウンロード&インストール

インストールは不要で、実行ファイル（ColorPicker.exe）を起動するだけで使えます。

ColorPicker


使い方

こんな感じに知りたい色にマウスを近づけ、1px単位で知りたい色に照準を合わせて、、、クリック。


クリックする前に右クリックすると出力するカラーコードの種類を選べたり、その場で色を加工できます。

クリップボードにカラーコードが保存されますので、貼りたい場所で貼り付け（Ctrl+V）ればOK。


この手のツールは本当にたくさんあって、
ブラウザのアドオンや拡張機能も選びきれない程あります。

カラーピッカーは頻繁に使わないんですが、思い立ったらすぐ使いたいんですよねー
ブラウザのアドオンの場合は色を取得できる範囲がブラウザ内に限定されていたり、
アドオンを常駐させてメモリを使うのも気になります。
このツールは本当にサクサク。

こんな感じにタスクバーに置いとくと、サクッと使えます。

こういう単機能だけど使いやすいツールって良いですね。

今日ふと気づきましたが、Chrome Developer Toolsを開くと簡易的なルーラーが表示されてますね。

数日前のアップデートで追加された模様。
拡張機能でよくあるルーラーとはちょっと機能が異なり、
画面全体に対してのルーラーが表示されているといった感じです。

すぐに使い道を思いつきませんが、その内役立つ機会を待ちましょう。

Chrome用のルーラーと言えば下記あたりが定番です。
こういった「頻繁に使わないけど無いと困る」機能は標準機能で用意して欲しいですねー


MeasureIt!
マウスでドラッグした範囲のサイズを表示する拡張機能。
1px単位で細かく合わせるのは難しいですが、ザクっとサイズを知りたい時に便利。

MeasureIt!


Pendule
こちらの拡張機能は、Web開発用の多機能ツール。
ルーラーはおまけ機能ですが、「MeasureIt!」と同程度の機能を持っています。

Pendule