株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER3のサイドバー(sidebar.php)をカスタマイズ

      2014/05/31

シスアナコム社長の杉山です。

STINGER3のカスタマイズもあと少し。

今回は画面右側のサイドバー部分をカスタマイズします。

前回のフッターの時と同様に、まずはSTINGER3の「sidebar.php」を子テーマにコピーして中身を確認してみました。

  • PCの時は広告を表示
  • 検索窓を表示
  • 最近のエントリを表示
  • 「もっと見る」ボタンを表示
  • ウィジェットのサイドバーで設定した内容の表示
  • ウィジェットのスクロール広告用で設定した内容の表示

それほどカスタマイズしなくても十分だと思うのですが、いくつかのサイトを参考にカスタマイズしてみます。

もっと見るボタンを削除

標準でもっと見るというボタンが表示されていますが、これは単なるトップページへのリンク。

必要ないと思いましたので、下記コードの2行目を削除しました。

<?php wp_reset_postdata(); ?>
      <p class="motto"> <a href="<?php echo home_url(); ?>/">→もっと見る</a></p>
      </div>
    </div>
    <!--/最近のエントリ-->

ウィジェットの設定変更

弊社のサイトはTwentyThirteenからSTINGER3へ移行したので、スクロール広告用の方にカレンダーやカテゴリーや最近のコメントなどのウィジェットが入っていました。

これらを全て固定サイドバーの方へ移動しました。

WordPress Popular Postsを導入

さらに、固定サイドバーに人気記事を表示することにしました。

参考にしたサイトはこちら(リンク集に追加します)

黒色ワナビーの住処Stinger3のサイドバーに人気記事一覧を違和感なく追加する方法

プラグイン「WordPress Popular Posts」を追加。

設定は「閲覧数でランキング」、投稿タイプは「post」、 表示する数は「5」としました。

外観→ウィジェットで「Wordpress Popular Posts」を固定サイドバーに追加。

場所は何となくカレンダーの下にしてみました。

タイトルを「人気記事(1か月)」、表示する数を「5」、時間間隔を「1か月」、「並べ替え順」を「累積閲覧数」としました。

フィルタは投稿タイプを「post」

サムネール設定は表示するにチェックして、大きさは幅「100」ピクセル、高さ「100」ピクセルに設定。

統計タグ設定は「閲覧数を表示する」と「日付を表示する」にチェック。

日付フォーマットは「YYYY/MM/DD」の形にしました。

「カスタムHTMLマークアップを使う」にチェック。

参考にさせて頂いたサイトに記入されているとおり、下記のように設定しました。

タイトルの前:<h4 class=”menu_underh2″>

タイトルの後:</h4>

投稿の前:<div id=”topnews”><div>

投稿の後:</div></div>

投稿用HTMLマークアップ:

<dl>
<dt>{thumb}</dt>
<dd> {title} <br />{stats}</dd>
<p class="clear"></p>
</dl>

NEW ENTRYの表示を変更

これでOKかと思ったのですが、NEW ENTRYの表示と人気記事の表示が少し違うので何か変な感じがします。

よって、NEW ENTRYの方を人気記事の表示に合わせて、タイトル+投稿年月日に変更しました。

<p><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 35 ) . ''; ?></p>

この行を下記のように変更。

<br>投稿日付 <?php echo get_post_time('Y/m/d'); ?>

これでNEW ENTRYと人気記事の見た目は同じになります。

スクロール広告に入れる広告

あとはスクロール広告の部分。

かなりスクロールしないと表示されないので、あまり広告の効果はないように思います。

でも、せっかくスクロール広告を表示するために用意されているので使うことにしました。

すでに弊社のウェブサイトにはグーグルアドセンスの広告を表示しています。

アドセンスは1ページに3個までという制限がありますし、スクロール広告にアドセンスを入れるのは規約違反。

なので、アドセンス以外で何か良い広告があるか探してみました。

グーグルアナリティクスで調査した所、弊社のウェブサイトへのアクセスは、やはりワードプレスやSTINGER3などのキーワードが多いみたい。

そこで、さくらのレンタルサーバお名前.comの広告を掲載することにしました。

最後は見た目を少し

最後はサイドバーの見た目を少しだけ。

参考にしたサイトはこちら(リンク集に追加します)

Ryun’s Web Note【Stinger3カスタマイズ】Ryun’s Web Noteと同じ様にサイドバーの間を開けたいです!【質問コーナー】

このページを参考にして、「style.css」に以下のcssを追加しました。

#wrap #wrap-in #side #topnews div dl {
  padding: 10px;
  background: white;
  margin-bottom: 10px;
  height: 100px;
  border: 1px solid royalblue;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

これで、NEW ENTRYと人気記事が背景白で青色の枠に囲われて影がつきます。

最後に、サイドバー全体の背景を設定。

#wrap #wrap-in #side {
  border: 1px solid royalblue;
  border-radius: 4px;
  background: rgba(255,255,255,0.5);
}

枠線を付けて、少し角を丸めて、半透明にしてみました。

これで完成です!

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です