スマートフォン向けレイアウト表示用WordPress3プラグインWPtap News Press

スマートフォン向けレイアウト表示用のWordPress3プラグインとして「WPtap News Press」というプラグインも有ることを知り、早速試してみました。プラグインのインストールは、WordPress3のダッシュボードにあるプラグインメニューからプラグイン名「WPtap News Press」で検索して簡単にインストール出来ました。

このブログを「WPtap News Press」を使用して、Xperiaからトップページを表示すると以下のような感じになりました。
上記の表示が、デフォルトのデザイン「Black」になります。

記事を表示させてみると、「MobilePress」で表示出来なかった「Syntax Highlighter for WordPress」の表示も問題無く表示出来ました。

WPtap News Press」では、上記デフォルトのデザイン「Black」の他に、下に有るような5つのデザインから好みのデザインを簡単に選べるようになっていました。この点は、先にインストールした「WPtouch」よりも良いと思いました。

  • Blooming Lavender
  • Miss Jade
  • Naughty Pumpkin
  • Persian Rose
  • Rocky Blue

このサイトで「WPtap News Press」と「WPtouch」のどちらを使用するか悩んだのですが、WordPress3ダッシュボードの「NewsPress」メニュー「Theme Settings」-「Home Menu Settings」からメニュー表示をカスタマイズ出来る点が気に入ったので「WPtap News Press」を使用して行くことにしました。



WordPress3のページ内でPHPスクリプトを実行出来るようにするプラグインWP exec PHP

WordPressのページ内でPHPスクリプトを実行出来るようにするプラグインとして、以前にrunPHPというプラグインを使用していたのですが、Wordpress3では、「このプラグインには有効なヘッダーがありません。」と表示されてプラグインを有効にすることが出来ませんでした。

他のプラグインを探したところ、「Exec-PHP」と「PHP Execution」というプラグインが見つかり、どちらも問題無くWordPress3のページ内でPHPスクリプトを実行出来きました。どちらを使おうか悩んでいたのですが、なんと!ソースコードを表示するために使用している「Syntax Highlighter for WordPress」と相性が悪く、ソースコードとして表示したい部分を「Exec-PHP」と「PHP Execution」が実行してしまうではないですか(汗)。私は、「Syntax Highlighter for WordPress」を多用するので、残念ですが「Exec-PHP」と「PHP Execution」の使用は、見送らざるを得ませんでした。(残念)

「Syntax Highlighter for WordPress」のように特殊タグで挟まれた部分のみ処理するようなプラグインは無いかと探したところ、「WP exec PHP」というプラグインが見つかりました。「WP exec PHP」プラグインは、特殊タグに挟まれた部分のPHPコードを実行するので、「Syntax Highlighter for WordPress」と干渉して不具合を起こすことがありませんでした。

以下のように投稿ページでも「Syntax Highlighter for WordPress」と干渉せずにPHPスクリプトの実行が出来ます。

お薦め商品:インターネット・Web開発


情報の呼吸法 (アイデアインク)
メーカー:朝日出版社
標準価格:¥ 987

ソーシャルデザイン (アイデアインク)
メーカー:朝日出版社
標準価格:¥ 987

WordPressで加速させる!ソーシャルメディア時代の[新]SEO…
メーカー:秀和システム
標準価格:¥ 2,709

グーグル ネット覇者の真実 追われる立場から追う立場へ
メーカー:阪急コミュニケーションズ
標準価格:¥ 1,995

日経 ソフトウエア 2012年 03月号 [雑誌]
メーカー:日経BP社
標準価格:¥ 1,180

Google上位表示 64の法則 (WEB PROFESSIONAL)
メーカー:アスキー・メディアワークス
標準価格:¥ 2,499

ソーシャルメディアの夜明け―これからの時代を楽しく生きるた…
メーカー:メディアライフ
標準価格:¥ 1,980

以下に「Syntax Highlighter for WordPress」を使用して上記PHPスクリプトのソースコードを表示しています。

<?php
//------------------------------------------------------//
// インクルードファイル
//------------------------------------------------------//
require_once('Services/Amazon.php');
//------------------------------------------------------//
// 定数
//------------------------------------------------------//
// アクセスキーID
define('ACCESSKEY_ID', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
// シークレットアクセスキー
define('SECRET_ACCESSKEY', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx);
// アソシエイトID
define('ASSOCIATE_ID', 'xxxxxxxx-22');
// ItemSearch:ECSのバージョン
define('ECS_VERSION','2010-09-01');
// レスポンスグループ
define('RESPONSE_GROUP','Small,Images,ItemAttributes,OfferSummary,Reviews');
// 商品タイトル文字数MAX
define('TITLE_MAX','60');
// サーチインデックス
define('SEARCH_INDEX','Books');
// サーチブラウズノード
define('BROWSE_NODE','492332');
// サーチブラウズノード名
define('BROWSE_NODE_NAME','インターネット・Web開発');
//------------------------------------------------------//
// メインプログラム
//------------------------------------------------------//
$amazon = new Services_Amazon(ACCESSKEY_ID,SECRET_ACCESSKEY,ASSOCIATE_ID);
$amazon->setLocale('JP');
$options = array();
$options['BrowseNode'] = BROWSE_NODE;
$options['Sort'] = 'salesrank';
$options['ResponseGroup'] = RESPONSE_GROUP;
$options['ItemPage'] = '1';
$search_index= SEARCH_INDEX;

// 検索結果を配列に格納して返す
$ret = $amazon->ItemSearch($search_index,$options);
if (PEAR::isError($ret)) { // ItemSearchでエラーが発生した場合
    echo '商品が存在しない等の理由により検索出来ませんでした。<br>';
    echo '<hr size="1" color="#cccccc" style="border-style:dashed">';
    die($ret->getMessage());
}

// 商品の配列を取得する
$item_array = get_item_array($ret);

// 結果の表示
show_item($item_array);

//------------------------------------------------------//
// アイテム用の配列を得る関数 (タイトルと商品URLを抽出)
//------------------------------------------------------//
function get_item_array($ret){
    if (isset($ret[Item])) {
        $i=0;
        foreach ($ret[Item] as $item) {
            // ASIN
            $item_array[$i][asin]=$item[ASIN];
            // 商品イメージ
            if(isset($item[SmallImage][URL])){
                $item_array[$i][image]=$item[SmallImage][URL];
            }else{
                $item_array[$i][image]="";
            }
            // タイトル
            $item_array[$i][title]
             = mb_strimwidth($item[ItemAttributes][Title], 0, TITLE_MAX, "...");
            // 商品URL
            $item_array[$i][url]=$item[DetailPageURL];
            // メーカー
            $item_array[$i][manufacturer]=$item[ItemAttributes][Manufacturer];

            // 価格
            if(isset($item[ItemAttributes][ListPrice][FormattedPrice])
                && $item[ItemAttributes][ListPrice][Amount]>10){
                $item_array[$i][price_name]='標準価格';
                $item_array[$i][price]=$item[ItemAttributes][ListPrice][FormattedPrice];
            }else if(isset($item[OfferSummary][LowestNewPrice][FormattedPrice])){
                $item_array[$i][price_name]='新品価格';
                $item_array[$i][price]=$item[OfferSummary][LowestNewPrice][FormattedPrice];
            }else if(isset($item[OfferSummary][LowestUsedPrice][FormattedPrice])){
                $item_array[$i][price_name]='中古価格';
                $item_array[$i][price]=$item[OfferSummary][LowestUsedPrice][FormattedPrice];
            }else{ // 価格が無い
                $item_array[$i][price_name]='価格不明';
                $item_array[$i][price]='---';
            }
            $i++;
        }
    }
    return $item_array;
}
//------------------------------------------------------//
// ItemSearchの結果を表示する関数
//------------------------------------------------------//
function show_item($item_array){
    echo '<div style="width:560px;">';
    echo '<h3>お薦め商品:';
    echo BROWSE_NODE_NAME;
    echo '</h3>';
    echo '<hr size="1" color="#cccccc" style="border-style:dashed">';
    foreach ($item_array as $item) {
        echo '<div style="width:560px;">';
        echo '<div style="float:left; width:100px;">';
        echo '<a href="'.$item[url].'" target="_blank">';
        echo '<img src="' .$item[image].'" border="0"></a>';
        echo '</div>';
        echo '<div style="float:left; width:460px;">';
        echo '<a href="'.$item[url].'" target="_blank">';
        echo $item[title].'</a><br>';
        echo 'メーカー:'.$item[manufacturer].'<br>';
        echo $item[price_name].':'.$item[price].'<br>';
        echo '</div>';
        echo '<div style="clear: both;">';
        echo '<hr size="1" color="#cccccc" style="border-style:dashed">';
        echo '</div>';
        echo '</div>';
    }
    echo '</div>';
}
?>

パンくずリスト表示用のWordPress3プラグインBreadcrumb NavXT

このブログにパンくずリストを表示させるために「Breadcrumb NavXT」というプラグインを導入しました。インストールは、ダッシュボードのプラグインメニューからプラグイン名で検索して簡単にインストール出来ました。

プラグインを「ネットワークで有効化」し「設定」を行えば、パンくずリストが表示されるのかと思ったのですが、私が使用しているテーマは、Breadcrumb NavXTに対応していなかったので、テーマファイルの修正が必要でした。公式サイトの「Basic Usage」を参考にして、以下のコードをテーマフォルフダにあるindex.phpのパンくずリストを表示したい箇所に追記しました。

<div class="breadcrumbs">
<?php
if(function_exists('bcn_display'))
{
    bcn_display();
}
?>
</div>

上記以外にも色々な使い方が、公式サイトの「documentation」で紹介されていましたので、これから色々と研究したいと思います。



スマートフォン向けレイアウト表示用WordPress3プラグインMobilePress

スマートフォン向けレイアウト表示用のWordPress3プラグインとして「MobilePress」というプラグインも試してみました。

このブログを「MobilePress」を使用して、Xperiaで見ても「WPtouch」と同じように表示されるので、MobilePresでの記事表示に特に問題はなさそうでした。好みの問題ですが、私は、レイアウト的にはWPtouchよりもMobilePressの方が好きです。

  • 【MobilePressでトップページを表示】
  • 【MobilePressで記事を表示】

WPtouch、MobilePressのどちらもWordpress3の管理画面の「プラグイン」-「新規追加」から検索して、プラグインのインストールが出来、自分の好みに合わせて設定も行えます。プラグインの設定については、MobilePressよりもWPtouchの方が色々と設定出来る感じでした。私は、タイトルとディスクリプションぐらいしか変更していません。プラグインの設定項目の種類と多少についても好みが分かれる所かもしれません。

このブログで使用する場合、MobilePressでの表示に、1つだけ致命的な問題がありました。ソースコードを表示するために使用しているプラグイン「Syntax Highlighter for WordPress」にMobilePressが対応しておらず、残念ながら、以下のように表示されてしまいます。

  • 【MobilePressでの表示】
  • 【WPtouchでの表示】

【MobilePressでの表示】と【WPtouchでの表示】を比較してみると、MobilePressでは、[/php]と「Syntax Highlighter for WordPress」プラグインのタグがそのまま表示されてしまっており、このブログ固有の問題かもしれませんが、プラグインが有効になっていないことが解ります。

このブログでは、「Syntax Highlighter for WordPress」を使用しますので、レイアウト的にはWPtouchよりもMobilePressの方が好きなのですが、残念ながらMobilePressは使用出来ないという結果となりました。このブログでのスマートフォン向けレイアウト表示用WordPress3プラグインは、継続してWPtouchを使用して行こうと思います。



スマートフォン向けレイアウト表示用WordPressプラグインWPtouch

Xperiaからこのブログにアクセスしてみたのですが、下記のような感じで見れないことは無いのですが、記事を横にスクロールして表示しなくてはならないなど、実用的には今ひとつというのが現実でした。

  • 【プラグイン無し】

なにか対応策は無いかと調べたところ、流石WordPress!WPtouchというスマートフォン向けのレイアウト表示用WordPressプラグインがありましたので、早速導入しました。WPtouch導入後の表示は、以下のようになり、記事も横スクロールすること無く読めるようになりました。

  • 【WPtouchでトップページを表示】
  • 【WPtouchで記事を表示】

メニューを表示させて、タグやカテゴリの項目で記事の抽出も出来ますので、使い易そうです。

  • 【WPtouchのメニュー】

参考サイト