Oh!Happy.JP

さくらのVPS1GでWordPressブログはじめました

WordPressとAmazonで簡単にネットショップを開店してみた

Amazon アソシエイト (アフィリエイト)インスタントストアWordPressのページ内にiframe形式で組み込めば、ショッピングカートを持ったネットショップが簡単に出来るのでは無いかと思い、さくらインターネットさんの「さくらのVPS1G」にインストールしたWordPressマルチ化サイトで試してみました。作成したサイトは、「Amazon.Oh!Happy.JP 」です。

実際に私がどのようにサイトを作成したのかを簡単にご紹介いたします。

1.WordPressのインストール

2.Amazonアソシエイトのアカウント作成

3.インスタントストアの作成

  • Amazon アソシエイト (アフィリエイト)に上記で作成したアカウントでログインして、インスタントストアを作成しました。
    • ページ上部の「インスタントストア」タブをクリックし、「インスタントストアのテンプレート」という表示の横にある「このテンプレートを使う」ボタンをクリック。
    • 「インスタントストアを追加する」画面になり、「インスタントストアのパフォーマンスを計るために使用するトラッキングID を選択してください。トラッキングID はインスタントストアのURL上に表示されます。」と表示されたので、そのまま「次に進む」ボタンをクリック。
    • 「インスタントストアのページを作成する」画面になったので、「カテゴリーページを追加」からカテゴリーと商品を追加して、「次に進む」ボタンをクリック。
    • 「カラーとデザインを編集する」画面になったので、テーマを選択/カスタマイズし、ストア名を設定して、「次に進む」ボタンをクリック。
    • 「サイドバー」画面になったので、サードバーの位置(右/左)とサイドバーに表示する内容を選択して、「この設定でHTMLを取得する」ボタンをクリック。
    • 「あなたのストアが作成されました」と表示され、インスタントストアのURLが表示されました。
    • インスタントストアの表示方法として、「iframe形式でインスタントストアをWebサイトに組み込む場合」を選択すると、iframe形式のHTMLが表示されました。
  • 表示されたiframe形式のHTMLをコピーして、WordPressの固定ページに貼付けました。

4.WordPressの調整

  • WordPressのテーマを貼付けたiframeが上手く表示されるテーマに変更すれば、WordPressに組み込まれた【インスタントストア】の完成です。

WordPressのインストールは済んでいたので、半日程度でサイトの骨組みが出来てしまいました。ただ単に【インスタントストア】を設置しただけでは、少しばかりコンテンツが寂しいので、PEARのServices_Amazonというライブラリを使用して作成したProduct Advertising APIのサンプルプログラムの紹介も行っています。ご興味の有る方は、「Amazon.Oh!Happy.JP 」をご覧ください。

WordPressで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開発


挑まなければ、得られない Nothing ventured, nothing gained…
メーカー:インプレスジャパン
標準価格:¥ 1,680

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

売れるネットショップ開業・運営 eコマース担当者・店長が身…
メーカー:インプレスジャパン
標準価格:¥ 2,520

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod t…
メーカー:ラトルズ
標準価格:¥ 2,310

日経 Linux (リナックス) 2012年 06月号 [雑誌]
メーカー:日経BP社
標準価格:¥ 1,490

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
メーカー:ソフトバンククリエイティブ
標準価格:¥ 2,940

ソーシャルゲームのすごい仕組み (アスキー新書)
メーカー:アスキー・メディアワークス
標準価格:¥ 780

以下に「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>';
}
?>

WordPressのマルチサイト化

WordPress 3.0以降では、マルチサイト機能により一回のインストールで複数サイトを構築することが出来ます。さくらインターネットさんでサブドメイン(wordpress.ohhappy.jp)を設定して、新たにWordPressをインストールして、マルチサイト化を試してみることにしました。以下、私が行った手順です。

WordPress 3.3でマルチサイトを作成する手順

  • サーバーにある「wp-config.php」のバックアップを取った後、「wp-config.php」の「// ** MySQL 設定 – こちらの情報はホスティング先から入手してください。 ** //」という表記の直前に以下のコードを追加しました。
    # cd /var/www/html/wordpress.ohhappy.jp/
    # cp wp-config.php wp-config.php.org
    # nano wp-config.php
    
    • 追加したコード
      define('WP_ALLOW_MULTISITE', true);
      
  • WordPress 3.3のダッシュボード(管理画面)にログインすると、「ツール」メニューに「ネットワークの設定」という項目が追加されていました。
  • 「ツール」ー「ネットワークの設定」をクリックすると「注意: ネットワーク機能を有効化する前に、プラグインを停止してください。」といわれるので、プラグインを全て停止しました。
  • 再び、「ツール」ー「ネットワークの設定」をクリックすると「ネットワークインストールのプロセスへようこそ ! 以下の情報を記入すれば、WordPress サイトネットワークの作成を開始できます。次のステップで設定ファイルを作成します。」と表示されたので、「ネットワーク内のサイトアドレス」に「サブディレクトリ」を指定し、「ネットワークのタイトル」と「管理者のメールアドレス」を入力した後に、インストールボタンをクリックしました。
  • 「サイトのネットワークの作成の機能を有効にするため、次のステップを実行してください。」「注意: 現在ある wp-config.php および .htaccess ファイルのバックアップを取っておくことをおすすめします。」と表示され、以下の手順が表示されました。
    1. /var/www/html/wordpress.ohhappy.jp/wp-content/blogs.dir となるよう blogs.dir ディレクトリを作成してください。このディレクトリは追加サイトにアップロードしたメディアファイルを保存するために使われるため、サーバーが書き込み可能である必要があります。
    2. //var/www/html/wordpress.ohhappy.jp/ にある wp-config.php ファイルの、/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */ という行より上に以下のコードを追加してください。
      define( 'MULTISITE', true );
      define( 'SUBDOMAIN_INSTALL', false );
      $base = '/';
      define( 'DOMAIN_CURRENT_SITE', 'wordpress.ohhappy.jp' );
      define( 'PATH_CURRENT_SITE', '/' );
      define( 'SITE_ID_CURRENT_SITE', 1 );
      define( 'BLOG_ID_CURRENT_SITE', 1 );
      
    3. /var/www/html/wordpress.ohhappy.jp/ の .htaccess ファイルに次を追加し、ほかの WordPress のルールを置き換えてください。
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.php$ - [L]
      
      # uploaded files
      RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]
      
      # add a trailing slash to /wp-admin
      RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
      
      RewriteCond %{REQUEST_FILENAME} -f [OR]
      RewriteCond %{REQUEST_FILENAME} -d
      RewriteRule ^ - [L]
      RewriteRule  ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*) $1 [L]
      RewriteRule  ^[_0-9a-zA-Z-]+/(.*\.php)$ $1 [L]
      RewriteRule . index.php [L]
      
    4. 以上のステップを完了すると、ネットワークの有効化と設定が行われます。ログインし直す必要があります。 ログイン

  • 上記の指示に従い、サーバーにある「wp-config.php」および「.htaccess」ファイルのバックアップを取った後、「/wp-content/ 」の中に blogs.dir ディレクトリを作成し、パーミッションを777に変更しました。
    # cd /var/www/html/wordpress.ohhappy.jp/
    # (cp wp-config.php wp-config.php.org)
    # (cp .htaccess .htaccess.org)
    # cd ./wp-content/
    # mkdir blogs.dir
    # chmod 777 ./blogs.dir/
    
  • 次に、サーバーの「wp-config.php」 ファイルの、/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */ という行より上に以下のコードを追加しました。
    # cd /var/www/html/wordpress.ohhappy.jp/
    # nano wp-config.php
    
    • 追加したコード
      define( 'MULTISITE', true );
      define( 'SUBDOMAIN_INSTALL', false );
      $base = '/';
      define( 'DOMAIN_CURRENT_SITE', 'wordpress.ohhappy.jp' );
      define( 'PATH_CURRENT_SITE', '/' );
      define( 'SITE_ID_CURRENT_SITE', 1 );
      define( 'BLOG_ID_CURRENT_SITE', 1 );
      
  • 続いて、サーバーの「.htaccess」ファイルを以下のコードに変更しました。
    [root@sakura wp-content]# cd ../
    [root@sakura home]# nano .htaccess
    
    • 追加したコード
      # BEGIN WordPress
      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.php$ - [L]
      
      # uploaded files
      RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]
      
      # add a trailing slash to /wp-admin
      RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
      
      RewriteCond %{REQUEST_FILENAME} -f [OR]
      RewriteCond %{REQUEST_FILENAME} -d
      RewriteRule ^ - [L]
      RewriteRule  ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*) $1 [L]
      RewriteRule  ^[_0-9a-zA-Z-]+/(.*\.php)$ $1 [L]
      RewriteRule . index.php [L]
      </IfModule>
      # END WordPress
      
  • 一度、WordPress 3.3の管理画面からログアウトし、再度、ダッシュボード(管理画面)にログインしました。
  • ダッシュボード(管理画面)のログイン画面にアクセスした際、「Internal Server Error」が出る場合は、作成した「.htaccess」に余分な空白や改行が入っている可能性が考えられます。
  • WordPress3.2では、ダッシュボード(管理画面)の右上に表示されている「こんにちは、(Wordpressのログインアカウント名)さん」をクリックするとプルダウンメニューの中に「サイトネットワーク管理者」という項目があったのですが、WordPress3.3では無くなっていました。WordPress3.3では、ダッシュボード(管理画面)の左上に「参加サイト」というプルダウンメニューが追加され、その中に「サイトネットワーク管理者」という項目がありました。
  • 「参加サイト」メニューから「サイトネットワーク管理者」-「サイト」をクリックすると、現在のサイトの一覧が表示されました。
  • サイト一覧の「サイト」という文字の横にある「新規追加」というリンクをクリックすると、「新規サイトを追加」画面になったので、「サイトのアドレス」「サイトのタイトル」「管理者メールアドレス」を入力した後、[サイトを追加]ボタンをクリックしました。
  • 「サイトを追加しました。ダッシュボードを表示するか、またはサイトを編集してください。」と表示されたので、「サイト」メニューから「サイト一覧」をクリックしてサイト一覧を表示し、サイトが新規に追加されたことを確認しました。
  • サイト一覧に新規に追加されたパスにマウスを合わせると、新規サイトの「編集 | ダッシュボード | 停止 | アーカイブ化 | スパム | 削除 | 表示」というリンクが表示されたので、「ダッシュボード」へのリンクから新規サイトのダッシュボード(管理画面)に入りました。
  • なぜだか、新規サイトの設定が英語になっていましたので、「Settings」メニューから「General Settings」を表示し、「Site language:」を「Japanese」に変更して[Save Changes]ボタンをクリックして、ダッシュボード(管理画面)を日本語表示に変更しました。
  • 一般設定で「キャッチフレーズ」の変更などを行い、インストールを終了しました。
  • テーマやプラグインの新規インストールは、「サイトネットワーク管理者」で行い、インストール終了後「インストール済みテーマ」一覧で「ネットワーク有効化」を行うと新規追加したサイトで使用出来るようになりました。

新規に作成したサイトは、以下のサイトです

DMSGuestbookプラグイン

当サイトにもゲストブックが有ったらいいなと思い、WordPress内にゲストブックを作成することが出来るWordPressプラグイン「DMSGuestbook」を導入してみました。皆さん、訪問記念に【ゲストブック】にひと言お願いいたします。

以下は、私が行った「DMSGuestbook」の設置手順です。

DMSGuestbookプラグインのインストール

  • DMSGuestbook」のインストールは、サイトネットワーク管理者になった後、プラグインのインストールから「DMSGuestbook」を検索して、「今すぐインストール」で簡単にインストールすることが出来ました。
  • プラグインを有効化すると、ダッシュボードメニューに「DMSGuestbook」のメニューが追加されていました。メニューをクリックすると、以下の設置方法が表示されました。

    • 1.) Create a page where you want to display the DMSGuestbook.
    • 2.) Save the page and assign it under “Guestbook settings” -> “Basic”.
    • 3.) Customize the guestbook to your desire!
  • 上記の説明に従い、最初に「ゲストブック」というタイトル名で、本文に何も書かれていない固定ページを作成しました。
  • 続いて、「DMSGuestbook」Dashboardの”Guestbook settings” -> “Basic”に行き、[Clear all]ボタンをクリックした後に、先に作成した固定ページ「ゲストブック」の「”Activate this guestbook as super guestbook*」ラジオボタンをチェックし、[Set]ボタンをクリックして「ゲストブック」を登録しました。
  • [Set]ボタンをクリックしただけでは設定が反映されないので、左上にある[Save] ボタンをクリックして、設定を保存しました。
  • 固定ページを表示させてみると、ゲストブックのフォームが表示されましたが、言語の設定を行わなかったので、デフォルトのアラビア語で表示されていました。
  • DMSGuestbook」は、他言語対応のようであり、”Guestbook settings” -> “Basic”にあるLanguageのプルダウンリストには、アラビア語の他、中国語、英語などの様々な言語の設定ファイル(hoge.txt)が表示されました。
  • “Language settings”に行き「english.txt」を表示させると、以下のテキストが表示されました。

    /* Daniel Schurter *** DMSGuestbook(at)DanielSchurter(dot)net */
    
    <name>Name</name>
    <email>Email</email>
    <url>Website</url>
    <message>Text</message>
    <antispam><b>Anti-spam measures</b><br />Please insert the letter and number combination into the text field before submitting the guestbook entry.</antispam>
    <mandatory>Required</mandatory>
    <submit>Submit</submit>
    <name_error>Name is too short!</name_error>
    <email_error>Invalid email address!</email_error>
    <url_error>Invalid website address!</url_error>
    <message_error>Text is too short!</message_error>
    <antispam_error>Wrong letter-number combination!</antispam_error>
    <success>Thank you for signing our Guestbook!</success>
    <admin_review>The administrator will review your entry before it goes live!<br />Thanks for your patience!</admin_review>
    <spam_detect>This entry contains probably Spam!<br />It was not submitted, but might be reviewed by an administrator for later inclusion.</spam_detect>
    
  • 上記の「english.txt」をコピーして、英語部分を翻訳して日本語に書き換え、名前を「japanese.txt」として
    「/wp-content/plugins/dmsguestbook/language/」フォルダ以下に設置しました。”Guestbook settings” -> “Basic”にあるLanguageのプルダウンリストから「japanese.txt」を選択して「ゲストブック」を再登録を行ったら、無事に日本語化出来ました。
  • 以下は、私が作成した「japanese.txt」です。Google翻訳で翻訳したものを修正しただけなので、日本語が少しおかしい点はご容赦願います。
    /* Daniel Schurter *** DMSGuestbook(at)DanielSchurter(dot)net */
    
    <name>名前</name>
    <email>メール</email>
    <url>ウェブサイトURL</url>
    <message>メッセージ</message>
    <antispam><b>アンチスパム対策</b><br />ゲストブックのエントリを投稿する前に、以下に表示されている<br />文字と数字の組み合わせをテキストフィールドに入力してください。</antispam>
    <mandatory>必須</mandatory>
    <submit>投稿</submit>
    <name_error>名前が短か過ぎます!</name_error>
    <email_error>無効なメールアドレスです!</email_error>
    <url_error>無効なウェブサイトURLです!</url_error>
    <message_error>メッセージが短か過ぎます!</message_error>
    <antispam_error>アンチスパム対策:間違った文字と数字の組み合わせです!</antispam_error>
    <success>ゲストブックへの書き込みありがとうございました♩</success>
    <admin_review>表示前に管理者がエントリをレビューいたします!<br />よろしくご理解のほどお願いいたします!</admin_review>
    <spam_detect>このエントリには、おそらくスパムが含まれています!<br />投稿が認められませんでしたが、後ほど管理者によって見直されるかもしれません。</spam_detect>