久々の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って、素敵やん。。。

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

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

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

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

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

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

先日公開になった、Evernoteの「Site Memory」を、このサイトにも導入してみることに。。

標準的なスクリプトは、本家Evernoteの「GET STARTED」で必要事項を入力すれば、自動ではき出されますが、

EvernoteにClipされるのが下記のようにリンクのみなので、画像を含む本文もCrip出来るように少々カスタマイズ。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'成功への試行錯誤な日々。。',header: '<h1><?php the_title(); ?></h1>',contentId: 'main' }); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

「',contentId: 'main'」で規定した記事本文と、wordpressのテーマ「単一記事の投稿（single.php）」の本文部分<div class="entry">を「<div class="entry"id="main">」と、「id="main"」を追加して本文をClip出来るように。

ついでに記事タイトルもClipのヘッダーに取り込むように、「header: '<h1><?php the_title(); ?></h1>',」を追加で記述してみました。

ノートブックやタグのサジェストはユーザーが自由に決められるよう、指定していません。

まあ、ほかにもいろいろ設定出来るようですが、とりあえず、記事下のツイートボタンの上に配置してみました。

あとは、コンテンツの内容充実に精進するばかり、です、ハイ。

できるポケット+ Evernote 活用編

EVERNOTE「超」仕事術

去る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に変更してみました。

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

このサイトのTwitter連携プラグインを、SimpletweetからTwitter Toolsに変更しました。

なので、とりあえず、投稿テストです。