WordPress:カテゴリアーカイブにカスタム投稿タイプも追加した一覧ページでページングにハマった

ニュースカテゴリの一覧ページを作成していて、そこにカスタム投稿タイプの記事一覧もあわせて表示させました。
クエリ自体は問題がなくposts_per_page=-1にすれば、すべてが取得できています。

しかし、ページ送りをしようとすると2ページ目以降でページがありません、と404が返ってきてしまうという症状で悩みました。

ページ送りは、よく使っているこちらのコード。

WP-PageNavi を使わずにナビゲーション表示 (改良版)

で、今回はそれをfunctions.phpに置くのを使わせていただきました。
ページナビゲーション機能を改版してみたり

このコードは通常のカテゴリ一覧などでこれまでに何度も使用しているので、問題ないはずなのですが、カスタム投稿タイプが絡んでるのが原因なのかよくわからないのですが、2ページ目以降で404。ただposts_per_pageの値をいじってみるとどうやらページ数はちゃんと合っています。

それで、結論から言えば、パーマリンクの/category/news/page/2/などと表示されるものを/category/news/?page=2と変えたらいけました。

試したけど今回効果がなかったものは、

Top Level Categories Fixプラグイン
Custom Post Type Category Pagination Fix
・表示設定の「1ページに表示する最大投稿数」を1にする

などです。

先の吟遊詩人さんのコードがこれ

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;
 
  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('paged', '%#%');
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    user_trailingslashit('page/%#%/', 'paged');;
    $paginate_base .= '%_%';
  }
 
  $result = paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 5,
    'current' => ($paged ? $paged : 1),
  ));
 
  return $result;
}

そして、最終的にfunctions.phpにかいてあるコードはこれです。

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;

  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('page', '%#%');
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    untrailingslashit('?page=%#%', 'paged');;
    $paginate_base .= '%_%';  
  }

  $result = paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 5,
    'current' => ($paged ? $paged : 1),
  ));

  return $result;
}

微妙に変わってます。
9行目と13行目だけか。。あんなにもがいたのに。
まぁ意図どおりに動かせたので良しです!

Illustrator:ピクセルパーフェクトを実現するために「ピクセルグリッドに整合」をチェックするよりも前にチェックすべきたった1つのこと

いろんなところで、ピクセルパーフェクトな画像書き出しをイラレで実現するためのTipsが書かれているにもかかわらず、あまり気づかれていない気がするので書いておきます。
どなたかが書かれていましてもやさしく教えていただければと思います。

通常イラレでデザインを行いますとアンチエイリアスがかかって輪郭がぼやけてしまいます。
印刷用データなどでしたら問題ないのですが、Webで使用を使用する場合には「変形」パネルの「ピクセルグリッドに整合」にチェックをいれたり、0.5ピクセル単位で調整をされたりしているのではないかと思います。
それにもかかわらず、スライスのサイズよりも1ピクセル大きく書き出されてしまうようなことはないでしょうか?例えば、200px四方のスライスを書き出したら201*200pxの画像が書き出されていたとか。

これはアートボードの位置の設定に起因しています。
「ウィンドウ」-「アートボード」からアートボードパネルを表示して、下図のように「アートボードオプション」を選択します。
イラレ アートボードオプション

開いたダイアログの「位置」に小数点が含まれていたら整数に直してください。
アートボードオプションの位置がキモです

ちゃんと確認してないですが、たぶんこれをきちんと設定していると、0.5ピクセルとかで調整する必要がないのではないかと思います。
少なくとも、私はそういう細かい調整をしていないです。
「アートボードの位置を整数に」+「ピクセルグリッドに整合」でピクセルパーフェクトになるかと思います。
モヤモヤしていた方、一度お試しください。

CS3か4か5かいつからか分からないですが、アートボードを複数作ることができるようになりましたが、アートボードを追加すると新しいアートボードの位置はピクセルグリッドに沿ってくれません。
これがデフォルトでピクセルグリッドに合わせてくれたらいいんですけど、このためにクライアントから送られたデータを毎度チェックしなければいけません。
最近、いくつもの案件で各ページをそれぞれのアートボードに入れてくれたりするので、この作業だけでも半端無いんです(^^ゞ

Word:数式エディタ内で項目の縦位置を微調整する方法

なんとも細かい話なのですが、できることがわかってちょっとうれしかったのでシェアしておきます。
そうそう需要ないとおもいますが。。

今回入力した数式は次のようなものです。

G≧の位置がだいぶ上にいってますよね。
おそらく根号の中の分数のラインと合わせる仕様になっているのだと思います。
ただ、ちょっと気持ち悪いので上下中央にセンタリングできる方法はないかと調べていたら、こちらで教えていただきました。
Inner Journeys

調整したい項目(今回はG≧)を選択してcontrol+↓。
上下左右どこにでも移動できました。
数式エディタ使いにくいと思ってましたが、これで少し自由になれた気がします。

調整後のイメージはこちら

PHP:PDFのファイルサイズを取得して表示するのにはまったので解決策を

IR情報などPDFファイルのリストを作成することはよくあると思いますが、ファイルのサイズを表示したいという要望は多いのではないかと思います。
PHPにはfilesize()というそのまんまな関数があって、ファイルサイズを取得し、単位を出力するスクリプトを参考に下記の関数を作りました。ってほぼコピペなんですけど。

[追記]
WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました。末尾のコードご参照ください。(2015/01/19)

あと、プラグイン化してショートコードで使えるようにしましたのでよかったら使ってください。
WordPress:PDFとかのファイルサイズを取得して表示するショートコードを公式ディレクトリに公開しました
WordPress.orgのPlugin Directory:
Get Filesize Shortcode

function get_file_size($file){
	if ( is_file($file) ){
		$filesize = filesize($file);
		$s = array('B', 'KB', 'MB', 'GB', 'TB', 'PB');
		$e = floor(log($filesize)/log(1024));
		if($e==0 || $e==1) { $format = '%d '; }
		else { $format = '%.1f '; }
		$filesize = sprintf($format.$s[$e], ($filesize/pow(1024, floor($e))));
		return $filesize;
	}
}

このとき、get_file_sizeに渡す引数$fileはカスタムフィールドにあるpdfファイルのurlになります。
http://www.ika-ring.net/aaa.pdfみたいなのです。

ですが、このままだと
Warning: filesize() [function.filesize] : stat failed for…….
というエラーが出てしまいます。もうだいぶググったのですが、サクッと理解できるようなものがなかったので書いとくことにしました。
is_file($file)とかで見てもfalseが返ってくるので、さっぱり分かりませんでした。

それで、答えはこのページにありました。
WordPress and the “filesize() [function.filesize]: stat failed” Error

最初二つのコードでなにが変わったのか分からなかったのですが、要はfilesize()やfiletype()などに渡す引数はURLではなくてサーバーのディレクトリーパスを渡せということです。フルパスっていうんでしょうか。
ということで先の$fileからstr_replaceでディレクトリーパスに書き換えることで無事できました。
以下、完成版コードです。
もっといい書き方があったら教えてください。

function get_file_size($file){
	/*教えていただいたように記述を変更しました。
	$mfile = str_replace( 'https://ika-ring.net','/usr/home/somedirectory/www/htdocs',$file );*/
	$mfile = str_replace( esc_url(home_url('/'))."wp/",ABSPATH,$file );
	if ( is_file( $mfile ) ){
		/* WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました */
		$filesize = size_format( filesize( $mfile ) );
		return $filesize;
	}
}

Dreamweaver CS5のコードヒントカスタマイズ [backface-visibility]

Dreamweaverを使っていて重宝するのがコードヒントという機能です。
例えば、cssファイルを編集しているときに、cと入力するとclear,color,….と入力候補が表示されるやつです。
ただ、いらない、というかほとんど使わない項目もアルファベット順に出てきてしまうというイラつきがあります。
よくあるものだとwidthを出したいのに最初にwidowsなんてのが出てくるために、widtまで入力しないといけなかったりします。つぎにhキーを打つかreturnキーを打つかの差しかなかったりするわけです。

それなら設定ファイルを変えてしまえというわけで、BUN:Logさんなどいろいろな方が、設定ファイルを配布してくださってます。

ただ、どうもこのファイルだけでは治っていない項目があり、私の場合は結構ひんぱんに入力するものなのでなんとかしたいと思っていたのが、ようやく対処できたのでご紹介します。大したことないですが。

私がよく使うっていうのは、background。みなさん使いますよね?
でも、bってうつと backface-visibility ってのが最初にでてきます。
少なくとも今のところ使うことはないので、最初に出るのがbackgroundになったら気持ちいいです。

この設定は
/Applications/Adobe Dreamweaver CS5/Configuration/CodeHints/CSS3_hints.xml
にあります。
このファイルをコピーして、
/Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/CodeHints/
の中にペーストします。
それでこのコピーしたファイルを開いて、770行目くらいにある

 <menuitem label="backface-visibility" value="backface-visibility:" icon="shared/mm/images/hintMisc.gif" />

をいじります。
今回は、のちのち状況が変わって使われることがあるかもしれないなぁという思いもあって、コメントアウトや削除はしない方向でいきます。
要はbackgroundよりも後に表示されたらよいので、labelを
label=”backface-visibility”
から
label=”bf-visibility”
とかに変えてしまいます。

以上。DWを再起動したらOKです。
bでbackgroundが出るようになったー。

一語変えただけのファイルに需要があるかどうか分かりませんが一応置いときます。
CSS3_hints.xml.zip [Dreamweaver CS5]

ほかにも、CSS3関連でまだ必要ないものはこのファイルで修正できると思います。
最後は、BUN:Logさんにならって、
「ご利用は、自己責任でお願いします。」

subやsupでline-heightがズレるのを防ぐCSS

備忘録として。
下付き文字のsubタグや上付き文字のsupタグを使用すると、行送りが通常よりも広くなりブサイクになる。
それをfixするためのcss指定。

出典:CSS Advisor

<style type="text/css">
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}
</style>

iBooksの辞書の辞書は英和辞書だった

iPadやiPhoneのiBooksで英語の本を読んでる時に、辞書を引くとなぜか英英辞書が表示されます。

iBooksの英英辞書イメージ

いろいろとハック的に英和辞書を使えるようにする方法が紹介されているようでしたが、辞書の中でさらに辞書を引くと英和辞書で引けました。これって周知なのだろうか?

iBooks内の英和辞書イメージ

ちょっとモヤッとするけど、新鮮だったので紹介しておきます。

追記:どうやらアップデートで英和辞書のなかのテキストが選択できなくなってしまった。代わりに「Webを検索」と「Wikipediaで検索」のボタンが追加されてるけど、辞書が選択出来たほうがいいなぁ。

PowerPoint2003:グラフの色を好きな色にカスタマイズする方法

先日、仕事で必要に迫られて使用したTipsをご紹介します。
対象バージョンはPPT2003です。Wordでも同様に使用可能ですが、Excelでは少し問題があります。
2000以前のバージョンは検証していません。
正直なところ、最近のバージョンではどうなのか分からないので、このTipsがどれほど役に立つのかわからないのですが、私のお客さんはまだ2003のバージョンを使われているところがそこそこあるようですので、備忘録も兼ねて紹介しておきます。

マイクロソフトのオフィスを使っていて、ストレスを感じるのが色の選択ですが、特にグラフに関しては選択肢が少なすぎると思います。

今回は、それを克服する方法です。あらかじめ申し上げておきますが、めんどくさいです。

それでは始めます。

  1. グラフをダブルクリックして選択状態にします。
  2. メニューの「ツール」-「オプション」を選択します。
  3. 「色」タブを選択します。ここで既存の色を選択して、「変更」から好きな色を選ぶことでカラーパレットを自分の好みのものに変えることができます。
    ただし、ここで気をつけるのは、変更するのは上の「標準色」のみにしてください。「グラフの塗りつぶし」や「線の色」を変更した場合、一度グラフの編集モードから出て、再度グラフをダブルクリックした際に、元の色に戻ってしまうことがあります。
  4. データ系列の色を変更して、輪郭線をなしにしたり、わずかにグラデーションをかけたりして、完成になります。グラデーションをあまりきつくかけないようにご注意ください。

重要なのは、このカラーパレットのカスタマイズは、各グラフ固有のものであるという点です。
複数のグラフがあった場合に、全て設定をする必要があります。
冒頭に申し上げたエクセルでは少し問題があるというのは、エクセルの場合カラーパレットをカスタマイズするとブック全体に影響してしまうようです。
逆に言えば、全ての色を統一させられるということでもあるので、一長一短であるといえるでしょうか。