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

今回は「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]


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

  15. 「利用できるウィジェット」より、「メインサイドバー」へ「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_ワードプレス