みなさま、こんにちは。
さくらインターネット株式会社にて社長秘書を担当しております加藤です。

本日も”さくナレ”にアクセスくださいまして、ありがとうございます！

今回は「美人秘書直伝！30分で出来る!?WordPress簡単カスタマイズ方法 Part.3」の
最後でご案内いたしました通り、サイドバー（Webサイトの本文とは別に左側や右側に縦長に
表示されている領域のこと）のカスタマイズを方法をご案内致します！！

STEP13　ウィジェットを整理しよう！

WordPressには、サイドバーにいろんな情報を表示するための
ウィジェット（サイドバーの部品みたいなもの）という機能があります。

デフォルトで様々なウィジェットが設置されていますので、
まずはそれを整理する方法をご案内したいと思います。

1. WordPressに管理者権限でログインします。
   




2. 左側のメインメニューの「外観＞ウィジェット」をクリックします。
   




3. 「メインサイドバー」に配置されているウィジェットを「利用できるウィジェット」にドラックして戻し、ウィジェットを整理しましょう。
   （サンプルサイト：”さくナレ” 美人秘書直伝シリーズのテストでは、「検索」以外の全てのウィジェットを不要としました。）
   

STEP14　アクセスカウンターを設置しよう！

アクセスカウンター（閲覧された回数を表示する機能）を設置するかどうかについては、
管理画面からアクセス数を確認することができるので、かなり意見が分かれるところだと思います。

私個人としては、デザインのアクセントとして設置するのが好きですし、
お問い合わせ頂くことも多いので、ブログのデザインの一部としてアクセスカウンターを
設置する方法をご案内したいと思います。

1. 左側のメインメニューの「プラグイン＞新規追加」をクリックします。
   




2. 検索窓に「Counterize II」と入力し、「プラグインの検索」ボタンを押下します。
   
   • 「Counterize II」はアクセス解析用のプラグインですが、今回はアクセスカウンター用途としてインストールします。

   




3. Counterize IIの「いますぐインストール」をクリックします。
   （必要に応じて、説明もご参照くださいね。）
   




4. Counterize IIのインストールが完了したことを確認し、「プラグインインストーラーに戻る」をクリックします。
   




5. 検索窓に「PHP Code Widget」と入力し、「プラグインの検索」ボタンを押下します。
   
   • 「Counterize II」を使って、アクセスカウンターをサイドバーに表示するには、PHP（スクリプト言語）を解析する必要がありますが、デフォルトの状態ではPHPが動きませんので「PHP Code Widget」を用いたいと思います。

   




6. PHP Code Widgetの「いますぐインストール」をクリックします。
   （必要に応じて、説明もご参照くださいね。）
   




7. 左側のメインメニューの「インストール済みプラグイン」を押下します。
   




8. インストールしたプラグインの「有効化」をクリックします。
   




9. インストールしたプラグインの有効化が完了しました。
   




10. アクセスカウンター用の数字画像（0～9）を用意し、左側のメインメニューの「メディア＞新規追加」をクリックします。
    




11. 数字の画像ファイル用意しデータファイルを赤枠内にドロップして、アップロードします。
    
    • 画像のファイル名は「01.png」のように画像内容の数字が含まれるよう設定ください。
    • 画像ファイル名には、下記のような規則性を設けてください。
          OK例 / 0の画像ファイルは「white_00.gif」、1の画像ファイルは「white_01.png」
          NG例 / 0の画像ファイルは「white_00.png」、1の画像ファイルは「green_01.gif」
12. 各画像の画像ファイルのURLの下記赤字以外の部分が異なるようであれば、画像ファイル名を統一性のあるものに変更し、再度アップロードください。
    （URLは画像右横の「編集」をクリックすることで確認頂くことができます。）
        http://knowledge.skr.jp/test/wp-content/uploads/2013/08/09.png






13. 左側のメインメニューの「ウィジェット」をクリックします。
    




14. 「利用できるウィジェット」より、「メインサイドバー」へ「PHP Code」をドラックし、お好みでタイトルを入力し、以下のソースを転記のうえ「保存」ボタンをクリックします。
    実際に設置すると、サンプルサイト：”さくナレ” 美人秘書直伝シリーズのテストのようになります。今回は数字毎に色を変えて作成したので、POPな仕上がりになりました。
    
    • 7行目の「http://（省略）.png」は、アップロードした画像のURLに上書きしてください。
    • 7行目の「{$num}」の部分は、画像ファイルの数字の内容を示します。上書きしたURLの画像ファイルの数字の内容を表現した部分を「{$num}」に書き変えてください。

    

<?php
function createCounter($counter) {
    $count = strlen($counter);
    $buff= '';
    for ($i = 0 ; $i < $count ; $i++) {
        $num = substr($counter, $i,1);
        $buff .= "<td><img src=\"http://knowledge.skr.jp/test/wp-content/uploads/2013/08/0{$num}.png\"></td>";
    }
    return $buff;
}
$counter =  counterize_getamount();
$num = createCounter($counter);
$html =<<< EOL
 {$num}
EOL;
echo $html;
?>

もうたぶん30分たってしまいましたね ( ﾟдﾟ)ﾊｯ!

もっともっとご案内したいところですが、
「美人秘書直伝！30分で出来る!?WordPress簡単カスタマイズ方法 Part.4」
本日はおしまいとさせて頂きます。

で・・・、次回はいよいよ最終回。
お見逃しなく！！

本日も最後まで御覧くださいまして、ありがとうございました！
See you next time (´∀｀*)!

特集：美人秘書直伝！30分で出来る!?シリーズ（全5回）

WordPress簡単カスタマイズ方法 Part.1 ～整理と準備編～
WordPress簡単カスタマイズ方法 Part.2 ～基本設定 / 問合せフォーム作成編～
WordPress簡単カスタマイズ方法 Part.3 ～カテゴリー登録 / メニューバー設定 / 記事投稿編～
WordPress簡単カスタマイズ方法 Part.4 ～ウィジェット整理 / アクセスカウンター設置編～
WordPress簡単カスタマイズ方法 Part.5 ～RSS表示 / バナー設置編～