takahirosuzuki.com

地域おこし協力隊、田舎暮らし、漫画、ボードゲーム、謎解き、自転車世界一周について書いています

wordpress

wordpressのテーマstinger3で始めに行った7つのカスタマイズ

投稿日:

2013年8月にwordpressのテーマをstinger2に変更し、始めの1ヶ月はSEOに強いと言われるstingerの実力を試した。そのためにほとんどカスタマイズなしで利用したところ、1ヶ月でページビューが1.5倍となった。

wordpressのテーマをSEOに強いと評判の「stinger」に変更
wordpressのテーマstinger2の効果:1ヶ月でPVが1.5倍に!

結果が出たのでstingerを使い続けることにした。その1ヶ月の間にstinger3がリリースされていたので、stinger3にテーマを変更。そしてカスタマイズを開始した。

ソーシャル拡散のためOGPの設定

OGP(Open Graph Protocol)を設定しておくと、ソーシャルで拡散したときに情報がしっかりと表示されるようになる。wordpressでstinger使ってブログやるくらいのモチベーションならば、当然設定しておいた方がいい。今回参考にさせてもらったのは以下の記事。

【ブログ術】FacebookのOGP設定をプラグインなしで設置する方法

記事にあるコードをそのまま使わせてもらった。以下のコードをstingerのheaderファイルのheadの間にコピペ。

<!–OGP開始–>
<meta property="fb:admins" content="【fb:adminsの15桁ID】" />
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="blog">
<?php
if (is_single()){// 投稿記事
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋から
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//投稿記事タイトル
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//投稿記事パーマリンク
} else {//投稿記事以外(ホーム、カテゴリーなど)
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」で入力したブログの説明文
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」で入力したブログのタイトル
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」で入力したブログのURL
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
if (is_single() or is_page()){//投稿記事か固定ページの場合
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合(ホーム、カテゴリーなど)
echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";
}
?>
<!–OGP完了–>

さらにツイッターでつぶやかれたときにリンクの詳細(説明文や画像)が表示されるようにしたかったので、それも設定。以下のような状態である。

通常は「概要を表示」という文が挿入され、それをクリックするとリンクの詳細が出てくるのだ。そのためにはさきほどコピペしたコードの中の<!–OGP完了–>の手前に以下のメタタグを書く。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@viatortaka">

そしてツイッターのディベロッパーページにてTwitter Cardの申請を行う。

Twitter Card

Validate & Apply に自分のブログのurlを入れてGoをクリックし、緑の丸が出たらOK!

ツイッターカード

申請したら数時間で承認された。

OGP設定は一番始めにやっておくべし!

ツイッター、フェイスブックページ、google+、Feedlyボタンの設置

ブログの更新情報を知りたい方が現れたときに、その更新案内を届けたい。そのためにツイッター、フェイスブックページ、google+、Feedlyのボタンを記事の下部とサイドバーに設置した。以下のような感じ。google+はこれを機に始めてみたので良かったらフォローしてください。


follow us in feedly

コードはそれぞれの公式サイトから取得する。

ツイッターフォローコード取得
フェイスブックいいねコード取得
グーグルプラスフォローコード取得
Feedlyボタンコード取得

取得したコードを表示したい場所にコピペすればいいんだけど、連続して貼ると間隔がない。僕は以下のようなdivタグで囲ったので、そのコードを紹介しておく。

<div style="padding:12px 8px;">

<a href="https://twitter.com/viatortaka" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large">@viatortakaさんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

</div>

<div style="padding:12px 0px;">

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakahirosuzukicom&amp;width=292&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=425771714141220" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true"></iframe>

</div>

<div style="padding:12px 8px;">

<!– ウィジェット を表示したい位置に次のタグを貼り付けてください。 –>
<div class="g-person" data-width="273" data-href="//plus.google.com/101212734967732106828" data-layout="landscape" data-rel="author"></div>

</div>

<div style="padding:12px 8px;">

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ftakahirosuzuki.com%2F' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>

</div>

google analyticsコードの挿入

アクセス解析にanalyticsを使っているので、analyticsのトラッキングコードをheaderファイルのheadの間にコピペ。analyticsの管理画面右上のアナリティクス設定をクリックし、トラッキングコードをクリックすれば自分のコードを知ることができる。

<!—analytics—>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', '【自分のアカウントコード】']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

zenbackの設定

zenbackとは、当ブログ記事の末尾に表示されている関連記事。以下の画像のようなやつである。

stingerカスタマイズ3

以前にzenbackの効果について書いた。効果は少なからずあったので、stinger3にも設置することにした。

zenbackの効果測定

zenbackのコードは公式HPにて取得できる。

zenback公式HP

stingerではデフォルトでツイートボタン、いいねボタン、google+1ボタン、はてなブックマークボタンが付いているので、zenbackの設定ではLINEボタン、mixiチェックボタン、evernoteクリップボタン、pocketボタンを追加した。

以前に作ったテーマのときにpocketボタンが意外なほど使われていたので、絶対に付けたかったのよね。

フェイスブックコメントと関連する記事も付ける。関連する記事はstingerでも表示されるけれど、全然違う種類が出てくるので面白い。

stingerカスタマイズ2

サイドバーにプロフィールを書く

アクセス解析をしていると気づくのは、想像以上にプロフィールが読まれている。書いている人が気になるのだろう。サイドバーにも写真とメッセージで簡単に紹介しておくことにした。その下にツイッター、フェイスブックページ、google+、Feedlyボタンの設置しておく。

stingerカスタマイズ4

stingerのsidebar.phpファイルに以下のコードを直接書き込んだ。

<h4 class="menu_underh2">プロフィール</h4>
<img src="<?php bloginfo('template_directory'); ?>/images/profile.jpg" alt="プロフィール写真" />
<div class="sidebarinfo">
2009年から2012年まで自転車で世界一周していました。世界一周の講演会を希望される方は<a href="https://takahirosuzuki.com/inquiry">お問い合わせ</a>より連絡下さい。→<a href="https://takahirosuzuki.com/page-7394">詳しいプロフィール</a>

<div style="padding:12px 8px;">
<a href="https://twitter.com/viatortaka" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large">@viatortakaさんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style="padding:12px 0px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftakahirosuzukicom&amp;width=292&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=425771714141220" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true"></iframe>
</div>

<div style="padding:12px 8px;">
<!– ウィジェット を表示したい位置に次のタグを貼り付けてください。 –>
<div class="g-person" data-width="273" data-href="//plus.google.com/101212734967732106828" data-layout="landscape" data-rel="author"></div>
</div>

<div style="padding:12px 8px;">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ftakahirosuzuki.com%2F' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>
</div>
</div>

(※ソーシャルの部分は僕のものになっているので、コードは自分が取得したものに書き換える必要がある。)

stingerのイメージフォルダにprofile.jpgというプロフィール写真をアップすると表示される。横幅を336pxにするとサイドバーぴったりの大きさ。

文章を表示する場所の幅を画像より狭めたかったので、sidebarinfoというdivタグを設定。sitngerのstyle.cssファイルに以下のコードを書きこんだ。使いたい人はコピペすればOK。

/*———————————
付けたし
——————————–*/
.sidebarinfo {
margin:5px 10px;
font-size:90%;
}

サイドバーに人気記事の表示

wordpress popular postsというプラグインがある。

wordpress popular posts

それを使ってサイドバーに人気記事を表示した。

管理画面のプラグインからダウンロードして有効化する。ウィジェット画面に行くと追加されているので、サイドバーに入れれば良し。そうすると設定できる。

stingerカスタマイズ5

デザインが崩れるので、style.cssファイルに以下のコードを追記した。

/*———————————
wpp
——————————–*/
ul.wpp {
overflow:hidden;
margin:0px 0px 0px;
}
ul.wpp li {
height: 100px;
margin: 0 0 0 5px;
padding:15px 0 0 0;
border-bottom:1px solid #fff;
}
.wpp-post-title {
width: 190px;
display: inline-block;
vertical-align:top;
font-size:90%;
margin: 0 0px 0 10px;
}
.wpp-thumbnail {
padding-top:6px;
}

一日、一週間、一ヵ月、すべての期間を設定できるけれど、一週間を選択。タイトルは今週の人気記事。

stingerカスタマイズ6

タイトルと日付の色を変更

大好評のstinger。使っている人も増えてきている。少々見栄えを変えようと多い、色を入れることにした。タイトルと公開日の部分を、以前に作ったオリジナルテーマのコンセプトカラーに変更。

stingeカスタマイズ7

変更したのはstyle.css。

ブログタイトルは「基本のhタグ」の「ブログタイトル」のところにあるコード。

#container #header #header-in #h-l .sitename a {
color: #ffffff; ←ココで色を変更、ちなみにffffffは白ね。
text-decoration: none;
font-weight: bold;
}

公開日の背景色は「タイトル下」のところにあるコード。

.kizi .blogbox p .kdate {
background-color: #000000;←ココで色を変更、ちなみに000000は黒。
margin-right: 10px;
padding: 5px;
color: #FFF;
}

まとめ

以上がstinger3にテーマを変えて僕が一番始めに行った7つのカスタマイズ。特にソーシャル拡散のためOGP設定はやっておくべし。

ブログ運営のおすすめ本はやはり以下の2冊。

ブログやwordpressに関する記事を紹介。

ブログで生活できるくらい稼いでいる人たち(芸能人ブロガー、プロブロガー)
ネットで話題になる記事と現実で話題になる記事
アフィリエイトは儲からない?市場調査2013のデータ参照
イケダハヤト氏曰く、ブログで月10万PVあれば5万円は稼げるらしい
はてなブックマークが500usersになったときのアクセスアップについて
はてブ人気記事ウィジェットをcssでカスタマイズ
このブログはwordpressなり。そのメリットとデメリットについて。
無料ブログのリスク

336×280

336×280

-wordpress

執筆者:


  1. 似顔絵 より:

    いつも大変参考になる記事を読ませていただき、お世話になっております。
    似顔絵を描きながら自転車で世界を旅をしている、水口晃一と申します。

    僕もブログを書くのが好きで、楽しく書いているのですが、コンピュータ関連の知識はゼロで、パソコンにも触り慣れていないような状況です。旅に関しても、ズブの素人でした。そこでtakahiroさんの記事を参考に準備やテクニックなど学んできました。
    なので大変お世話になってます!

    今度、これまで描いてきた似顔絵をホームページ兼ブログのような形で皆さんに楽しんでいただけるようにブログの引越しを考えてまして、wardpressを僕も使っていこうかなと、記事を読ませていただいて思っているところです。

    これからも、Takahiroさんのブログ、楽しみにしています。

    • Taka より:

      水口さん

      はじめまして。嬉しいコメントありがとうございます。

      自転車旅をしていると聞くと仲間意識を持ってしまいます。そして似顔絵を書きながらなんてすごいですね。現地の人々とふれあう特技を持っていることを羨ましく思います。

      当ブログに書いてある通り、これからもブログを自分の発信ツールとして使っていくなら、独自ドメインをとってwordpressに引っ越すことはおすすめです。勉強すればかなりカスタマイズできますし。

      これからもよろしくお願いします。

comment

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

関連記事

wordpressのテーマをSEOに強いと評判の「stinger」に変更

2012年年末から2013年頭くらいまで、wordpressのテーマを自作していじっていた。 ・wordpressのテーマを作成して、ブログのデザインを変えてみたよ! ・メディアクエリーを使って、テー …

おすすめレンタルサーバーのミニバードがキャンペーンしているよ!

当ブログのレンタルサーバーはネットオウル社のミニバードである。先月のアクセス数は46000PVほどで、過去には月10万PVを超えたときもあったが、サーバー落ち等のトラブルは起こっていない。月額263円 …

wordpressとは?ブログ初心者に伝えたい独自ドメインとレンタルサーバーについて

「ブログは何で作っているの??」 という質問を割と定期的に受けるので、それについて書いておく。アメブロとかライブドアブログではなく、wordpressで作っている。 WordPress(ワードプレス) …

wordpressのテーマを自作して、ブログのデザインをオリジナルに変更!

ワードプレスのテーマは、カスタマイズに自由が効いたsuffusionを使っていた。細かいところまで設定できるので便利だったけれど、自分でテーマを制作できるようになったので、ブログのデザインも作りなおす …

メディアクエリーブレークポイントとレスポンシブwebデザインテンプレートの作り方

レスポンシブwebデザインとはなんぞや? ブラウザ(IE・firefox・safari・google chromeなど)の表示環境に合わせてレイアウトや横幅を調整するウェブデザインのこと。このブログを …

メールアドレスを記入して購読すれば、更新をメールで受信できます。