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

公開日
更新日

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

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


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


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

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

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


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


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



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


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

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

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


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

    [Get Picture]


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


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


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

    [Get Picture]


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


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


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


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


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


  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. [Get Picture]


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


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

    [Get Picture]



<?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表示 / バナー設置編～

おしらせ

banner_ワードプレス