WordPressのテーマをレスポンシブ対応の「Pinboard」に変更したので備忘録（追記あり）

2014/4/12 wordpress

スポンサーリンク

Pinboard | Just another WordPress site 1

8年間使っていたテーマ「vicuna」にサヨナラを告げた後、色々と見てまわってようやく出会えたこのテーマ。レスポンシブ対応のフリーテーマ「Pinboard」です。

Sponsored

“Pinboard”を選んだ理由

まずは、ぱっと見てデザインがシンプルで、可愛らし過ぎもなく、派手すぎることもなく、クール過ぎることもなく、記事の邪魔をしなさそうだったこと。

それから、レスポンシブ対応デザインだったこと。以前のvicunaテーマでは、スマートフォン用にWP touchというプラグインを使ってスマホ対応していましたがカテゴリが表示されなかったり、サイトの雰囲気がまったく別だったりで、あまり満足していませんでした。

なので、もしテーマを変えるのであれば絶対レスポンシブ対応テーマにしようと思っていたので、その点もこの「Pinboard」はクリア。

レイアウトデザインやフォントも管理画面からカスタマイズでき、ウイジェットも豊富。ずっとつけたかったフッターも楽々。トップページのグリッド表示も綺麗で見やすい。

そしてSEO対策もされているコード。

記事の写真サイズも今までよりずっと大きく見せられます。

実は、一時期話題になった日本語テーマ「Stinger」というのも前にちょっとだけ気になっていたんですが、製作者の方のブログが苦手なのでやめました（笑）

実際「Pinboard」を入れてみたら色々修正しないといけないとこがあったので、自分の備忘録としてここからはただのメモです。

Pinboardを入れてからやったこと

まずは役だった記事。

管理画面は英語なのですが、上記の記事に詳しく説明されていたので助かりました。

Facebook Like Boxをレスポンシブ対応に

Like Boxで作る。iFrameでコードを取得し、幅のところを100%に変更。

参考）Like Boxを可変に対応させたい | Tips Note

Facebook のOGP設定は「WP Facebook Open Graph protocol」に変更

以前は「Open Graph Pro」というプラグインを使用していましたが、エラーが出るようになったので「WP Facebook Open Graph protocol」を使うことにしました。

設置後、デバッガを使って確認してみると、下記と同様のエラーが出ました。

参考）「WP Facebook Open Graph protocol」のFacebookのOGP設定の誤りを修正する方法 | kira-ism

上記に従って修正したら、ちゃんと動くようになりました。Facebook Developersでは、アプリケーションIDや、App IDを入れただけではなくサイトのURLもきちんと入れることを忘れずに。

Yet Another Related Posts Plugin(YARPP)で関連記事を表示

以前、関連記事の表示に使用していたSimilar Postですが、バージョンアップに伴いエラーが出るようになったのでこちらに変更。

参考）Yet Another Related Posts Pluginプラグイン(関連記事の表示) – WordPressプラグインの一覧

設定に関しては上記を参考に。

ただしデフォルト表示だと、タイトル文字がはみだしたりと見苦しかったのとレスポンシブ対応ではなかったので修正が必要。

参考）関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com
参考）はみ出し回避！関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化 | Web | あきらWeb（スマホ&タブレット対応）

yarpp-template-linkwithin.phpというファイルを作ってテンプレートフォルダの中に入れます。

<?php if(have_posts()):?>
<hr style="border-top:1px dotter #666">
<h3 class="linkwithin-title">こちらの記事もオススメです</h3>
<div class="related-post">
<?php while(have_posts()) : the_post(); ?>
<?php if(has_post_thumbnail()):?>
<div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div>
<?php endif; ?>
<?php endwhile; ?>
</div>
<?php else: ?>
<!– 関連記事がないときのHTMLをここに書く–>
<?php endif; ?>

まぁ、悪くはない感じに。

自分で任意の位置にレイアウトしたい場合は、

<?php related_posts(); ?>

をsingle.phpなどに直接記入します。

タイトルなどが太字になってしまうのを修正する場合は、プラグインフォルダの中のYARPP>style>related.cssをいじります。boldの部分を削り、line-heightを追加して調整。

Newpost Catchプラグインの最近の投稿をサムネイル付きでサイドバーに

Newpost Catchという日本語プラグインを導入。ウイジェットが追加されます。投稿件数や日付表示、画像サイズなどは調整可能。W160px,H80pxに設定しました。

サイドバー上部にプロフィール掲載

Aboutページがあるからいいや、と思っていたのですが、最近はどのブログを見てもサイドバートップにプロフィールを一部掲載している人が多いですよね。そして、私自身、どういう人がその記事を書いているのかやっぱり気になるのです。

googleも著者情報を重要視していますし、「誰が書いているのか」は大事。

なので画像と自己紹介をほんのすこしのせて、twitterのフォローボタンもつけてみました。

Feedburner（マイドメイン）のフィードをheaderに記述

参考）WordPressがはき出すRSSフィードを制御する方法 | CreaMo!-クリーモ!-クリエイティブをMotto!集めるブログ
参考）WordPress Feeds – WordPress Codex 日本語版

sorariumのRSS feedはgoogleのfeedburnerを使用しています。日本語版はサービス終了してしまったので、いつ英語版が終わってもおかしくはないのですが、とりあえずまだ継続使用中。

このfeedburnerをマイドメインで使用しているのですが、テーマ変更をすると元のfeedがheaderに記述されてしまうので、上記記事を参考にしてfeedburnerのRSS feedを表示されるようにしました。

functions.phpに

remove_action('wp_head', 'feed_links', 2); /* サイト全体のフィード */
remove_action('wp_head', 'feed_links_extra', 3); /* その他のフィード */

を追加。

header.phpに

<link rel="alternate" type="text/xml" title="RSS .92" href="http://feeds.sky-s.net/sorarium">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.sky-s.net/sorarium">

を追加。

（追記）MarsEditを使用している場合は、アイキャッチ画像を自動挿入してくれる「Auto Post Thumbnail」を入れるべし

私はブログ更新にMarsEditというアプリを使用しています。もうこれが無いとブログ更新が出来ないというぐらい便利なアプリ。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more. App
カテゴリ: ソーシャルネットワーキング
価格: ￥4,000

ただ、このアプリではWordpressのアイキャッチ画像を設定できないので、トップページで各記事の画像が表示されないという問題が…！

するぷろ for iOS（ブログエディタ） App
カテゴリ: ソーシャルネットワーキング
価格: ￥500

するぷろというiPhoneアプリで更新する時は入るので、最初理由がわかりにくかった！

というわけで、自動的に記事の一番最初の画像をアイキャッチ画像として生成してくれるプラグイン「Auto Post Thumbnail」を入れました。これは過去記事の画像も生成してくれるので助かります。

これを入れてアイキャッチ画像を作ったら、無事にトップページにも表示されるようになりました。

Adsenseをレスポンシブ対応に

いつの間にか出来ていた「レスポンシブ広告ユニット」を試してみることにしました。これだと一つのコードの中で、PC用の大きなサイズ、モバイル用の小さなサイズに自動的に切り替えてくれます。

参考）端末に応じて広告サイズが切り替わるレスポンシブ・アドセンスの導入と、iPhone 向けの CSS 調整 | Simple Living
参考）レスポンシブ広告ユニットを作成する – AdSense ヘルプ

上記を参考にして

.sorarium-single-top-responsible { width: 250px; height: 250px; }
@media(min-width: 500px) { .sorarium-single-top-responsible { width: 336px; height: 280px; } }

画面が500pxサイズ以上なら336px/280pxの広告ユニット、それ以下なら250px/250pxの広告ユニットを表示させるようにしました。これをテーマのsingle.phpに書き込みます。

サイドバーはウイジェットのテキストを使って同様に入力。

ちなみにadsenseコードは＜div class=”ad-box”＞＜/div＞で囲って、上記参考記事と同様にCSSで調整しています。

基本的にadsenseコードは修正不可ですが、レスポンシブ広告ユニットに関しては上記参考記事にも書かれているように認められています。

特定記事のアドセンスを表示させないようにする

ついでに前からやっておかなくてはと思っていたことを。

参考）WordPressで記事ごとにアドセンス表示/非表示を切り替える方法

カスタムフィールド（Advanced Custom Fieldというプラグインを使う）で、アドセンスの表示の切替を行う方法。

アドセンスには禁止コンテンツがいくつかあります。

参考）禁止コンテンツ – AdSense ヘルプ

例えば、薬物、アルコール、タバコ、薬物関連商品、違法薬物や処方箋医薬品、そしてビール、ハードリカー、リキュールを販売または宣伝するページでの広告掲載もアウトです。※ちなみにワインやシャンパン、ビールの蒸留や醸造の方法に関する情報はOK。

特にAmazonでのお酒直販がスタートしているので、ここは注意しないと危険ですよね。私自身はビールは飲まないし、アルコール類の紹介もワインぐらいでほとんどしてないので大丈夫だとは思うのですが、念のため設定はしておくことにしました。

参考）Amazon お酒の直販開始で、Adsenseユーザーが気をつけるべきこと | PLUS1WORLD.com
参考）Google AdSense広告をいきなり停止されまして | No Second Life
参考）[箱] Googleアドセンスと”お酒”・”ノンアルコールビール”の関係を調べた #tbmu | [箱]ものくろぼっくす
参考）AdSense広告の掲載が禁止されているコンテンツ | アフィリエイト野郎

ところが、サイドバーのウイジェット内ではphpが使えないので、php code widgetを入れてみたのですが、どうしてもエラーが出てサイドバーの広告だけ消えない。。single.phpに直接書き込んだのと同じコードなのになぜ〜。

Notice: Undefined variable: post in /◯◯◯/plugins/php-code-widget/execphp.php(27) : eval()’d code on line 1

Notice: Trying to get property of non-object in /◯◯◯/plugins/php-code-widget/execphp.php(27) : eval()’d code on line 1

って出るんです。

これだけどうしても解決できなくて、結局ビール記事は1つだけだったので今は非表示にしてあります。誰か解決策をご存知でしたら教えてください〜。

（追記）→結局色々問題が出てくるので、このコードは外しました。

（追記）アドセンスを「more」タグ直下に表示する

当初、アドセンスはタイトル下、記事下、サイドバーに表示させていました。ただ、このPinboardはレスポンシブ対応のテーマ。モバイルで見た時も同じ場所に表示されます。

アドセンスの規約には、PCでもモバイルでも以下のようなポリシーが記載されています。

スクロールしなければ見えない位置にコンテンツを押しやるサイト レイアウト 下のサイト レイアウトは、スクロールしなければ見えない位置にコンテンツが押しやられ、コンテンツと Google 広告を区別しにくい例です。

広告の配置に関するポリシー – AdSense ヘルプ

またページ上部に多くの広告を配置することでgoogleの検索順位が下がるページレイアウトアルゴリズムもありますし、できればモバイルでもPCでもあまりファーストビューに広告を入れすぎたくはないな、という思いがありました。

WordPressスマフォページの「記事中」にアドセンスを表示する方法とメリット

よって、以前のテーマでも採用していた「Master Post Advert」というプラグインを使ってmoreタグ以降にアドセンスを表示させようとしたところ、何やらエラーが。というわけで仕方がないので、function.phpに直接記載する方法をとりました。上記記事に書かれているコードがそのまま使えます。

ただし、記事中にアドセンスを表示させる場合、記事なのか広告なのか紛らわしいため規約違反となる可能性があります。

ですので、私の場合は

/**
 * moreの前の広告
 */
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {    

$adTags = <<< EOF

<hr style="border-top:1px dotter #666">
<h3 class="sponsored-title">Sponsored</h3>
<div class="ad-box">

アドセンスコード

</div>
<hr style="border-top:1px dotter #666">

<!--adsense end-->
 
EOF;
 
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);   
 
    return $contentData;
}

とfunctions.phpに新しく追記。hrタグとsponsoredという文字を大きく入れて、広告であることをきちんと明示するようにしています。

.sponsored-title {
	color:#e0e0e0;
	font-size:18px;
}

CSSの方の記述はこちら。

Adsense

実際はこんな風に表示されます。

パンくずリストを設置

single.phpに以下のように記述してパンくずリストを表示。

<!--パンくずリスト-->
<div class="breadcrumbs">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> &gt; 
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' &gt; '); ?>
</div>

ソーシャルブックマークをカスタマイズする

そのままだと目立たないですし、Pinterestボタンとかはいらないのでちょっとカスタマイズ。いじるのは、function.phpです。

facebook

2195行目以下に data-layout=”button_count” というところがあるので、data-layout=”box_count” にし、widthの指定を外す。

style.cssを開き

.facebook-like {
	width:110px;
}

ここを、width:60px;　にサイズ変更。

twitter

<a href="<?php echo esc_url( 'https://twitter.com/share' ); ?>" class="twitter-share-button" data-url="<?php the_permalink(); ?>">Tweet</a>

とあるので、data-count=”vertical”という部分を追加する。

.twitter-button {
	width:80px;
}

追加。

<a href="<?php echo esc_url( 'https://twitter.com/share' ); ?>" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-count="vertical">Tweet</a>

google+

<div class="g-plusone" data-size="medium" data-href="<?php the_permalink(); ?>"></div>

mediumをtallに変更。

.google-plusone {
	width:60px;
}

追加

はてなブックマーク

<?php if( pinboard_get_option( 'hatena' ) ) : ?>
<div class="hatena-button">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" 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>
</div><!-- .hatena -->
<?php endif; ?>

をfunction.phpに追加。

334行目

'hatena_link' => '',

追加。

357行目

'hatena' => true,

追加

928行目

== pinboard_get_option( 'hatena_link' ) && ''

追加。

cssには

.hatena-button {
    width:90px;


と


.facebook-like,
.twitter-button,
.google-plusone,
.pinterest-button,
.hatena-button {
	float:left;
}

を追加。

Feedlyボタンを追加

feedly. your news. delivered.でボタンを作り、functions.phpの2222行目（ソーシャルブックマークボタンのところ）に追加。

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.sky-s.net%2Fsorarium'  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>

ウイジェット部分のテキストcssを調整

style.cssに追加。

.profile{
color:#999;
font-size: 13px;
line-height : 1.7em;
margin-top : 10px; 
}

Pinboard、今のところ気に入ってます

とりあえず、急に以前のが使えなくなって慌ててテーマ変更したので、まだまだ修正するところはたくさんありますが、少しずつやっていこうと思います。

今のところ、結構気に入っています！

スポンサーリンク
この記事をお届けした
sorariumの最新ニュース情報を、
いいねしてチェックしよう！

シェアする

@sorarium