久々のwordpressネタ。。

このところ静的HTMLで作られた企業サイトの、自社内更新型サイトへのリニューアル案件のご依頼が増えてきたのですが、その場合特に指定がなければWordPressを採択させていただいております。

で、いわゆる時系列のブログではなく、自己更新型の企業サイト等をWordPressで構築する場合、なにかと重宝するのが「固定ページ」。

この「固定ページ」あってのCMS、とも言えるわけで。。

反面、事前にある程度設計した上でサイト構築したとしても、クライアントが新たにページを追加または削除した際に、ページの表示順や階層の移動・変更が生ずるわけで、その度に煩雑な作業・技術的ノウハウが必要、となればせっかくの自己更新型CMSサイトも威力半減。

でも大丈夫、「pageMash」プラグインをインストールすれば一発解決。固定ページの表示順移動や階層管理もドラッグ＆ドロップでOK。

例えばこんなページを作ったとして↓、後からメニュー表示の並び順を変えたい場合、

移動したいページタイトル右のアイコンをドラッグ、移動したい先へドロップし、

画面右下の「Update」ボタンをクリックして更新するだけ。

メニュー表示順も変わります。

もちろん、子ページを親ページに、或いは子ページを孫ページに、、といった階層管理も同様の手順でドラッグ＆ドロップするだけ。

さらに、各ページのタイトル右「>>」にマウスを置くと、[edit]、[hide]、[Rename]という３つのメニューが表示されます。

[edit]をクリックすると、直接そのページの編集画面へ、[hide]は一時的にそのページをメニューから非表示に、[Rename]をクリックすれば、文字通り直接そのページタイトルを変更することが出来ます。

「pageMash」、WordPressでページを活用する際には必須のプラグイン、オススメです。

Webデザイナーのための WordPress入門 3.ｘ対応 テーマカスタマイズからCMSサイト構築まで (Books for Web Creative)

最近は、PCやケータイからのアクセス以外に、各種スマートフォンからの閲覧もかなり増えてきました。

以前からこのサイトは、iPhoneでの表示にはWPtouchにて対応してきましたが、それ以外にもiPad、Android、BlackBerry、Nokia等、現在では様々なデバイスが存在する訳で、それらに一括で自動対応してくれるプラグイン、「WPTap」に入れ替えてみました。

まずは「プラグインの新規追加」で「WPTap」を検索→インストール→有効化。

すると、管理画面左サイドバー最下部に、「News Press」が追加されるので、その中の「Theme Settings」をクリックし、各種設定を行うだけ。

まずはブログのタイトル名。サイトアイコンがあればそれをアップロードする（256k以内）。

サイトのデザインはお好みで。。

「Bookmark Setting」は、Twitter、Facebook、MySpaceで登録済みのものを表示するか否かを選択。

選択すると、サイト右上のブックマークボタンをタップすればアイコンで表示される。

続いてトップページ、各エントリー、ページでの表示内容（投稿者・日付・カテゴリー・タグ）を選択。

「Home Menu Settings」では、ヘッダーメニューに「Home」「カテゴリー」「ページ」「検索」「ログイン」の各ボタンの表示選択、カテゴリーを個別に表示選択、ページの表示選択を設定。

「Ads Setting」には、アドセンスを表示したい場合に「モバイルコンテンツ向けAdSense」→「iPhoneやその他の高機能デバイスのみ」にて設定したコードをコピペ。

以上の設定が完了したら、「Save Change」で設定保存する。

「Mobile Devices」では、対応するデバイスを選択可能ですが、まあこれはあえて外すことはありませんね。。

新たに対応したいデバイスが現れたら、そのデバイス名とエージェントを追加することも可能です。

WPTapの文字化けの修正

これで一応設定完了なのですが、このままだと以下のようなタイトルの文字化けが・・・。

これは日本語が1文字2バイトである、というアレ。。

なのでWPTapフォルダ内、themes/News Press/のindex.phpとarchive.phpを下記の通り修正を加えます。

<?php
while(have_posts()): the_post();
$np_title=get_the_title();
$t_length=40;
if($np_title!=substr($np_title,0,$t_length))
$np_title=substr($np_title,0,$t_length)."...";
?>

上記2つの substr を下記のように  mb_substr に修正します。

<?php
 while(have_posts()): the_post();
 $np_title=get_the_title();
 $t_length=40;
 if($np_title!=mb_substr($np_title,0,$t_length))
 $np_title=mb_substr($np_title,0,$t_length)."...";
 ?>

日付アイコンをサムネイルに

日記的なブログならば日付も意味を持ちますが、情報系のブログの場合、日付よりも多少なりとも内容がイメージ出来た方が・・・。

と言うわけで、ついでにタイトル左の日付アイコンを、各記事の最初の画像のサムネイルに変更するカスタムを。。

まずはWPTapフォルダ内、themes/News Press/の functions.php　に下記をコピペ。

<?php
function catch_that_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
 $first_img = "http://サイトのURL/wp-content/plugins/wptap/themes/News Press/empty.jpg";
 }
 return $first_img;
}
?>

$first_img = “http://サイトのURL/wp-content/plugins/wptap/themes/News Press/empty.jpg”;

↑この行は、エントリーに画像が無い場合の代替画像へのフルパスです（適当なサイズ（この場合は50×50px位）の画像に適当なファイル名を付けて事前にアップロードしておく）。

次に、WPTapフォルダ内、themes/News Press/の index.php に下記修正を加えます。

修正前

<div>
<span>Shwo post detals</span>
 <div style="background-position:0 -<?php echo ((intval(get_the_time('m')-1)) * 50); ?>px;">
 <span><?php echo get_the_time('M'); ?></span>
 <span><?php echo get_the_time('j'); ?></span>
 </div>

修正後

<div>
 <span>Shwo post detals</span>
 <div style="background-position:0 -<?php echo ((intval(get_the_time('m')-1)) * 50); ?>px;">
 <a href="<?php the_permalink(); ?>" ><img src="<?php echo catch_that_image(); ?>"width="50" height="38" align="left" /></a>
 </div>

これで↓こんな感じになります。

iPad

iPhone

こまかい微調整はお好みで・・・。

いずれにしても、一つのプラグインで各種デバイスに最適化できるのは非常にありがたいことです。

WordPressって、素敵やん。。。

iPhoneでのモブログに劇的な快適さをもたらしてくれた『するぷろfor iPhone』ですが、ふと、iPhoneアプリのレビューを書くのにも最適な事に気づきました。

今までは、まずiPhoneでアプリのいろいろな場面のスクショを撮り、それをPCにメール添付で送り、加工ソフトで説明等を加え、wordpressにログインしてエントリー、という流れでした。

が、スクショをiPhotonicで加工、そのまま「するぷろ」で取り込み記事を書く、という方がかなりの工程削減になるかと・・・。

ということで、まずはこの『するぷろfor iPhone』自体で初レビューを。。。

まずはアプリを起ち上げ、左下アイコンをタップし、ブログを設定。

「Accounts」にページ遷移したら、右上＋ボタンをタップしてブログのセッティングへ。

「BlogName」に設定するブログ名を、「Servies」をタップして、Movable TypeかWordPressのいずれかを選択。

「APIURL」には、MTの場合はmt-xmlrpc.cgiまでのフルパスを、WPの場合はxmlrpc.phpまでのそれを入力。

「Account」と「Password」にはそれぞれブログのログイン名とパスワード（MTの場合はあらかじめユーザー情報の編集でwebサービスパスワードを設定したもの）を入力。

「BlogID」にはWPは１でOK、複数のブログを運営出来るMTの場合は、設定したいブログのIDを管理画面で調べそれを入力。

「ImageSize」は、写真の横幅なので、ブログのデザインに合わせて適宜設定。

設定が完了したら、右上の「add」をタップして登録完了。

エントリーの投稿画面は至ってシンプル。一行目が記事タイトルになる仕組み。

後はただひたすら文字を入力するのみ。

画像を挿入する場合は、カメラアイコンをタップして、新たに撮影するか、カメラロールから画像を選択するだけ。

（iPhoneの「設定」から「するぷろ」をタップすると、「1TapCameraRoll」という項目があるのでそれをオンにすれば、カメラアイコンから直接カメラロールにワンタップで行けるようになります。）

老眼気味の私には、文字サイズの拡大もありがたい。。

文字の表示サイズを変更するには、入力画面最下部辺りを長押しし、

スライドバーを表示させ、左右にボタンをスライドするだけ。

さらに画面を左へフリックすると、「MORE」画面になり、「続きを読む」以降の入力が可能に。。

コンテンツの入力が完了したら、右下の矢印をタップ。

下記のようなメニューが現れるので（「Post」で投稿、「Draft」で下書き投稿、「Category」でカテゴリ選択、「SaveText」で入力したテキストを保存、「ClearText」でテキスト削除）、カテゴリーを選択後、Postで投稿すれば完了。

本家WordPressのアプリとは比較にならないほど使い易いのは一体ナゼ？なのでしょうか？

ブログの更新が不思議と楽しくなる、今一押しのアプリです。

Posted from するぷろ for iPhone.

このブログや他のいくつか運営しているwordpressを使ったブログでも、以前から重宝させていただいている画像ポップアッププラグイン「Lightbox2」が、wordpress3.1にバージョンアップすると動かない、という減少が。

仕方がないので「Lightbox2」は停止状態にし、他のプラグインを検索。

Auto Thickboxが問題無く稼働するようなので、代わりにインストール。

プラグインの「新規追加」→「アップロード」で参照したZIPファイルをインストール→有効化するだけ。

ほぼ同様にポップアップしますが、前後の画像への誘導がLightbox2だとわかりやすい矢印ですが、このAuto Thickboxだと画像下の<Prev  Next>という小さい文字リンク、という点が少々残念？な点ですかねぇ。。。

ま、いずれLightbox2もアップデートするとは思いますが・・・。

去る5月29日に開催された「WordCamp Yokohama 2010」のUstをたまたま見ていて、改めてWordPressのすばらしさを再認識したわたくしKOUは、たまたま書店で「WordPressでできる・作れるイマドキWebサイト」のサブタイトルが目に飛び込んできた「Web Site Expert #30」をゲット。

内容もさることながら、ラッキーだったのは、過去2年分と創刊1号の記事すべてがPDF化されたCDが付録に付いていたこと。

かなり得した気分です♪。

ただ、かなりのボリュームなので、iPhoneに入れて電車や待ち合わせの際などにでも読もうかと、「GoodReader」をインストール、転送してみました。

まあ、Evernoteでも良かったんですが、やはり膨大なページ数なので、サクサクと閲覧したいので、iPhone用ファイルビューアとして定番・高評価の「GoodReader」を使ってみることに。

音楽や動画他、様々なファイル形式に対応しているだけあって、色々な機能・設定もあるようですが、まずは最速でpdfの転送・閲覧を。。。

一番手っ取り早いWiFi接続でファイル転送。

「GoodReader」を起動し、メニューの一番左のアイコンをタップし、「WiF-transfer」が表示されたら、「１．IP-address」 に表示されたURLを、ブラウザのアドレスバーに入力。

「iPhone Connection」が開いたら、「Select file to upload:」のボックスで、アップロードしたいPDFを選び、「Upload selected file」をクリック。

これでiPhoneへの転送が開始されます。

ファイルの転送中は、iPhone側の「WiF-transfer」画面右上部に「DO NOT STOP NOW」と赤く表示されているはずなので、その間は放置。

赤い表示が消えたら転送完了なので、「STOP」をタップし、「My Documents」を開くと、アップしたPDFが表示されます。

でもまあさすがに雑誌のPDFはいくらピンチアウトがあるとは言え、やはりiPhoneの画面サイズでは少々難儀ですねぇ。。。

こんな時に人はふと、欲しくなってしまうんでしょうね、、、ipadを。。。

ホント、最近のappleのマーケティング戦略には、抗いがたいですよ、脱帽です。

当初wordpressとTwitterの連携のために使っていたプラグイン「Simple Tweet」ですが、その際のバージョンでは短縮URLがTinyURLのみだったのと、イマイチ相性が悪かったので、途中からWP to Twitterに変更しました。

が、最近これも新規エントリー時にTweetが飛ばなかったりする現象が起こるようになったので、何気にSimple Tweetのサイトへ行ってみたら、バージョンが1.3.1にアップデートされていて、短縮URLもbit.lyなどを選べるようになっていたりOAuth対応化していたりしたので、再度Simple Tweetの最新バージョンに変更してみました。

元々をかもとさんという方が作ったmade in japanのプラグインなので、当然管理画面等がデフォルトで日本語なのと、やはりシンプルなのがいいですね。

ということで、まずはテスト投稿を兼ねて、エントリー。。。

wordpressのTwitter投稿プラグインをtweetableに変更してみましたが、上手く飛ばなかったりタイトルが入らなかったりいろいろ相性が悪かったので、WP to Twitterに変更してみました。

なので、まずは投稿のテスト。。

このブログには当初から「Ktai Entry」と「Ktai Location」プラグインを導入しています。

「Ktai Entry」はwordpressにケータイからモブログする為のプラグインですが、非常に良く出来ていて、エントリーの約半分位（特に写真付き投稿）は、思いついたネタやキーワードなどをケータイにメモし、下書き投稿しておき、PCで清書しています。「Ktai Location」は、「Lightweight Google Maps」プラグインと同時に使用すると、ケータイからの投稿時に、写真に位置情報を付加しておけば、記事に自動でgoogle mapsを貼付けてくれるプラグインなのですが、つい撮影時に位置情報を付けるのを忘れがちで、ほとんど活用していませんでした。

が、iPhoneはデフォルトで写真にジオタグがついているので、今後は「Ktai Location」の出番も増えるかなと・・・。

この記事最下段の地図が上の写真に付加された東京ミッドタウンのジオタグで自動表示されたgoogleマップです。

ま、ミッドタウンの地図を付ける必要など、サラサラないんですけどね、あくまでもテストです（笑）。

隠れた名店などをエントリーするときなどは、便利かな？

固定ページに

<div id="gmap_menu"></div>

<div id="google_maps"></div>

とdiv要素を置いておくだけで、下記のような地図ページが作られ、マップとエントリーが関連付けされるようになります。