30分で出来る！WordPress簡単カスタマイズ方法 Part.4（全5回）～ウィジェット整理 / アクセスカウンター設置編～

みなさま、こんにちは。
さくらインターネットの元秘書です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「利用できるウィジェット」より、「メインサイドバー」へ「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表示 / バナー設置編～

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

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

特集：30分で出来る！シリーズ（全5回）

おしらせ

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

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