はじめてのWordPress(STINGER3のカスタマイズその2)

アフィリエイト 初心者のためのwordpress講座

超初心者による超初心者のためのWordPress講座第6回。
今までの記事は↓

はじめてのWordPress(レンタルサーバー契約&ドメイン取得編)
アフィリエイトに力を入れる宣言をした後、私はその前提としてWordPressの勉強を始めた。 ブログサービスと違い、WordPre...
はじめてのWordPress(独自ドメイン登録&WordPressインストール編)
webに疎い超初心者がWordPressを使いこなせるかどうか、検証記録の第2回。 前回記事はコチラ 今回は前回取得した...
はじめてのWordPress(セキュリティ対策編)
超初心者による超初心者のためのWordPress講座第2.5回。 今までの記事は↓ 前回...
はじめてのWordPress(記事の書き方・テーマの選択)
超初心者による超初心者のためのWordPress講座 第3回。 前回ようやくWordPressのインストールが終わり、今回からはい...
はじめてのWordPress(STINGER3のカスタマイズその1)
超初心者による超初心者のためのWordPress講座第4回。 今までの記事は↓ 前回までで既に記...

前々回Stinger3のヘッダー部分のカスタマイズを少しやりましたが、今回はサイドバーを中心にカスタマイズをしていこうと思う。

スポンサーリンク

ウィジェットの追加・削除

まずはサイドバーに表示する項目を自分のブログに合ったものに変更することにする。
この辺りはfc2ブログでいう「プラグインの設定」とそう大きく変わることはないので簡単。
まずはWordPressのメイン画面でサイドバーの外観 → ウィジェットをクリック。

テーマカスタマイズ5

すると上のような画面が現れる。
利用できるウィジェットの中から利用したい項目をドラッグし、サイドバー1など好きなところに移動すれば、そこにウィジェットが追加される。

ブラグインで新たなウィジェットを追加する

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

最初から入っていないウィジェットが欲しいと思ったら、プラグインを追加する必要がある。
私の場合、人気記事を表示するウィジェットが欲しかったので、「WordPress Popular Posts」というプラグインを追加した。
プラグインを追加する手順は以下の通り。

テーマカスタマイズ6

WordPressメイン画面のサイドバープラグイン → 新規追加をクリック。
すると上のような画面が現れるので、検索ボックスに「WordPress Popular Posts」と入力し、Entarキーを押す。
同名のプラグインが表示さえたら「今すぐインストール」をクリックし、インストール終了後に「有効化する」をクリックすれば、ウィジェットに「WordPress Popular Posts」という新しいウィジェットが追加される。

この「WordPress Popular Posts」のカスタマイズについては上記の参考サイトに詳しく書かれているので、参考にしながらカスタマイズすると好みの形にできると思う。

SNSボックスの削除

サイドバーではないがStinger3には左下に追従するSNSボックスが設置されている。
読み手からすれば非常に鬱陶しいので、外してしまおう。
WordPressのメイン画面から外観 → テーマ編集をクリック。
右のサイドバーにあるフッター(footer.php)をクリック。
以下の記述を全て削除する。

<?php if (is_home()) { ?>
<div id="snsbox">
<div class="sns">
<ul class="snsb clearfix">
<li> <a href="https://twitter.com/share" class="twitter-share-button" data-count
="vertical" data-via="viatortaka" data-url="<?php echo home_url(); ?>"
data-text="<?php bloginfo('name'); ?>">Tweet</a><script type=\"text/
javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo home_url();
?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like
&amp;colorscheme=light&amp;height=62\" scrolling=\"no\" frameborder=
"0" style=\"border:none; overflow:hidden; width:70px; height:62px;" allow
Transparency="true"></iframe>
</li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js
"></script>
<g:plusone size="tall" href="<?php echo home_url(); ?>"></g:plusone>
</li>
<li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class=
"hatena-bookmark-button" data-hatena-bookmark-title="<?php bloginfo('name');
?>" data-hatena-bookmark-layout="vertical" title="
このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/
entry-button/button-only.gif" alt=\"このエントリーをはてなブックマークに追加"
width="20" height="20" style="border: none;" /></a><script
type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8" async="async"></script>
</li>
</ul>
</div>
</div>
<?php } else { ?>
<div id="snsbox">
<div class="sns">
<ul class="snsb clearfix">
<li> <a href="https://twitter.com/share" class="twitter-share-button"
data-count="vertical" data-via="viatortaka" data-url="<?php the_permalink
(); ?>" data-text="<?php the_title(); ?>\">Tweet</a><script type
="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink();
?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action
=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder=
"0" style="border:none; overflow:hidden; width:70px; height:62px;"
allowTransparency="true"></iframe>
</li>
<li><script type="text/javascript" src="https://apis.google.com/
js/plusone.js"></script>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
</li>
<li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink();
?>" class="hatena-bookmark-button" data-hatena-bookmark-title=
"<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout
="vertical" title="このエントリーをはてなブックマークに追加"><img src=
"http://b.st-hatena.com/images/entry-button/button-only.gif" alt="
このエントリーをはてなブックマークに追加" width="20" height="20" style
="border: none;" /></a><script type="text/javascript" src=
"http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async
="async"></script>
</li>
</ul>
</div>
</div>
<?php } ?>

サイドバーのタイトルを変更する

参考サイト:【stinger3】見出し画像変更など!サイドバーをカスタマイズしてみた きちデン

サイドバーのタイトルの色・背景などを変更する方法。
補足の必要もないくらい上の記事で丁寧に書かれているのでここで書く事は特にない(決してめんどくさくなった訳じゃないぞ!)。
参考にしながら、自分好みのサイドバーにしてみよう。

私のブログはその他にも色々なところを弄っているのだが、既に結構な時間が経って忘れている部分も多いので、今回でWordPress講座は一旦終了となる。
STINGER3デフォルトのデザインっぽさをなくすなら、まずカスタマイズしたいCSSセレクタ 「寝ログ」 など様々なブログでカスタマイズ記事が書かれており、こういう記事を参照しながらいじっていけば、CSSやhtmlの知識がなくてもなんとかなったりする。
いじればいじるほど愛着が沸いてくるものなので、是非色々なカスタマイズに挑戦してみて欲しい。

ニトの話し相手サービス営業中!
ネットの隅の居酒屋さん バナー
にほんブログ村 その他日記ブログ 無職日記へ
スポンサーリンク

フォローする