STORKカスタム!コメント欄を移動させたり広告自動挿入にしたり。


スポンサーリンク

ブログのカスタマイズ知識は皆無です。

どうも、ちゃぴ(@chapilog)です。

前回の記事を書いてから、「諦めずに何とか改善出来ないか」と思い、久しぶりにPHPやCSSを弄ってみました。

STORKは本当に使いやすいテーマで、凄くお気に入りなので何とかこのまま使っていきたかったんです。

で、何とか理想通りの形になったので、自分用のメモとして記載しておきたいと思います。

私のブログ環境

  • 使用テーマ:STORK
  • WordPress ver.4.6.1-ja
知識が無いので、無理矢理変更している部分もあるかも知れません。一応これでも変更出来たよ!というレベルですので悪しからず…。

今回STORKのカスタマイズをしたところ

今回メインでカスタマイズしたのはこの3点です。

  • コメント欄の位置を関連記事の下に変更する
  • 下部のSNSシェアボタンを上部と同じ小さいものにする
  • 記事の下の広告の位置を変える

コードをコピー&ペーストするだけで同じ状態にすることが出来ます。

今回は、前回の記事で触れていた、コメント欄と関連記事の位置を変更したいと思います。

あとは、それに伴って広告の表示位置の変更やSNSボタンの大きさを変更しました。

今まで記事内の広告はプラグイン「AdSense Manager」を使用して手動挿入していたんですが、ついでなのでこれも自動化して、コメント欄から不要な項目も削除してみました。

スポンサーリンク

STORKでコメント欄の位置を関連記事の下に変更

まず、STORKをデフォルトのまま使っていると、記事本文の下は以下の順番で表示されているはずです。

  1. 記事コンテンツ下ウィジェット(広告)
  2. Facebookページへのいいねリンク
  3. SNSシェアボタン大
  4. コメント欄
  5. 前後記事へのリンク
  6. 関連記事
STROK

とにかく記事の終わりから関連記事まで遠いのが残念です。

パソコンからの閲覧でも1ページ以内に表示出来ないので、当然スマホからの閲覧はもっと効率が悪いです。

私のブログはスマホからの閲覧が9割以上。

ブログを見に来てくれた人に他の記事も読んでもらうためには、少しでも色んな選択肢を表示する必要があります。

そのために関連記事を少しでも目に止めてもらえるように、表示位置を変更したいと思います。

編集するphpファイル

関連記事とコメント欄の位置を変更するには「個別投稿(single.php)」を編集する必要があります。

STORKの子テーマの中にはsingle.phpが無いので、利用サーバーのFTPファイルなどから親テーマのsingle.phpをダウンロードして、そのまま子テーマの中にアップロードしておきます。

d実際に変更していくのは、子テーマにアップロードしたsingle.phpです。

まず、子テーマにアップロードしたsingle.phpを開いて、下から14行目に以下のコードがあることを確認します。

<?php comments_template(); ?>

次に、このコードをカットして下から10行目の以下のコードの下に貼り付けます。

<?php get_template_part( 'parts_singlefoot' ); ?>

そうすると、編集前と編集後ではこんな風に変わります。

編集前

<?php if ( is_active_sidebar( 'cta' ) ) : ?></p>

<div class="cta-wrap wow animated fadeIn" data-wow-delay="0.7s">
<?php dynamic_sidebar( 'cta' ); ?>
</div>

<p><?php endif; ?></p>

<p><?php comments_template(); ?></p>

<p></article></p>

<p><?php get_template_part( 'parts_singlefoot' ); ?></p>

<p><?php endwhile; ?><br />
<?php endif; ?>
編集後

<?php if ( is_active_sidebar( 'cta' ) ) : ?></p>

<div class="cta-wrap wow animated fadeIn" data-wow-delay="0.7s">
<?php dynamic_sidebar( 'cta' ); ?>
</div>

<p><?php endif; ?></p>

<p></article></p>

<p><?php get_template_part( 'parts_singlefoot' ); ?><br />
<?php comments_template(); ?><br />
<?php endwhile; ?><br />
<?php endif; ?>

これで、記事本文下の表示順番はこうなったはずです。

  1. 記事コンテンツ下ウィジェット(広告)
  2. Facebookページへのいいねリンク
  3. SNSシェアボタン大
  4. 前後記事へのリンク
  5. 関連記事
  6. コメント欄

コメント欄が、関連記事より下に表示されるようになりました。

STORKではphpで複数のブログパーツが用意されています。

ここで入れ替えたのは「parts_singlefoot.php」の内容と「コメント欄」です。

「partssinglefoot.php」には、関連記事の他にも前後の記事へのリンクも含まれているので、この順番を変更するには「partssinglefoot.php」を編集する必要があります。

SNSシェアボタンを上部と同じ小さいものにする

次に、SNSシェアボタンのサイズを変更します。

本文下部のSNSボタンは上部のものに比べて大きいから、これを上部のボタンと統一します。

編集するphpファイル

さっきと同じく、single.phpファイルを編集します。

下から25行目くらいにある以下のコードを書き換えます。

編集前

<?php get_template_part( 'parts_sns' ); ?>
編集後

<?php get_template_part( 'parts_sns_short' ); ?>

ddsこれで下部のSNSシェアボタンが、上部のものと同じ小さいサイズのものに変わりました。

パソコンからの閲覧だとたった一行の違いですが、スマホから見ると大きな差がありますね。

ここまでで、表示はこの順番になっています。

  1. 記事コンテンツ下ウィジェット(広告)
  2. Facebookページへのいいねリンク
  3. SNSシェアボタン小
  4. 前後記事へのリンク
  5. 関連記事
  6. コメント欄

STORKではブログパーツとして、2種類のSNSボタンが用意されています。

「partssns.php」と「partssnsshort.php」があり、標準では上部に「partssnsshort.php」、下部に「partssns.php」の内容が表示されるようになっています。

この項目では、その表示を変更しただけです。

デザインそのものを変更するには「partssns.php」と「partssns_short.php」を編集する必要があります。

スポンサーリンク

記事下の広告の位置を変える

rfe次は、本文の下の広告の位置の変更を行います。

STORKは記事の終わりに広告を貼るためのウィジェットスペースも用意されているので凄く便利なんですが、その位置に広告があると、関連記事に目を通す前に離れられてしまうかも知れません。

この位置に広告を貼ってしまうと、まだスマホからの閲覧時に関連記事まで1ページで表示されないんです。

収益のことを考えると、その位置はベストかも知れませんが、ブログは何よりも読者ファーストでないといけません。

人気ブロガーのかん吉さんも、ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座の中で収益よりも、読者さんのことを考えたブログを作るべきだって言っていましたね。

ということで、広告は関連記事の下でコメント欄の上にあたる部分に挿入するように設定します。

編集するphpファイル

またまたsingle.phpを編集していきます。

先に紹介した2項目の編集を行っていると、下から10行目あたりからこんな風になっているはずです。

編集前

<?php get_template_part( 'parts_singlefoot' ); ?><br />
<?php comments_template(); ?><br />
<?php endwhile; ?><br />
<?php endif; ?>

これを以下のように編集します。

編集後

<?php get_template_part( 'parts_singlefoot' ); ?><br />
<?php if(wp_is_mobile()): ?><br />
// スマホ用アドセンスコード //<br />
<?php else: ?><br />
// PC用アドセンスコード //<br />
<?php endif; ?><br />
<?php comments_template(); ?><br />
<?php endwhile; ?><br />
<?php endif; ?>

スマホとPCで、それぞれ別の広告が表示出来るようにしてあります。

「// スマホ用アドセンスコード //」に、スマホで表示させたい広告コードを入力して、「// PC用アドセンスコード //」にPCで表示させたい広告コードを入力すればOKです。

元々ウィジェットで広告表示していた場合は、ウィジェットを削除しておきましょう。

これで表示順番はこうなりました。

  1. Facebookページへのいいねリンク
  2. SNSシェアボタン小
  3. 前後記事へのリンク
  4. 関連記事
  5. アドセンス広告
  6. コメント欄

記事本文から関連記事まで1ページで表示

3これで、記事本文の終わりから関連記事まで1ページで表示出来るようになったはずです。

image1スマホからの閲覧でも、ちゃんと1ページで表示出来るようになりました!

スポンサーリンク

おまけ1:コメント欄の項目非表示

commentデフォルトのコメント欄って、入力の必要は無くてもウェブサイトの入力欄があります。

あれって、ウェブサイト持ってないからってコメントを辞めちゃう人もいると思うんです。

そこで、ウェブサイトの入力欄を非表示にしてしまおうと思います。

編集するcss

comments.phpを編集して非表示にするという方法もありますが、今回は簡単なstyle.cssに追記する形で非表示にしたいと思います。

コメント欄からウェブサイトの入力欄を削除するには、style.cssに以下の記述をすればOKです。

/* コメントのウェブサイト入力欄を非表示 */<br />
.comment-form-url {display: none;}

これで、コメントの入力欄から「ウェブサイト」の項目が消えました。

ちなみに、メールアドレスの入力欄を非表示にするには、以下のコードをstyle.cssに入力すればOKです。

/* コメントのメールアドレス入力欄を非表示 */<br />
.comment-form-email {display: none;}

image1-1

メールアドレス欄を非表示にする場合は、設定のディスカッションから「コメントの投稿者の名前とメールアドレスの入力を必須にする」欄のチェックを外すのを忘れずに。

参考にさせて頂いたブログ様はコチラ。ありがとうございます。

参考:WordPressコメント欄のカスタマイズ/アフィリエイトで稼ぐ方法を全部話そうと思う

おまけ2:h2タグの前に広告を自動挿入

プラグイン「AdSense Manager」を使ってショートコードを入れて、記事の本文内に広告を挿入していましたが、それすら面倒で。

GoogleAdSenseの広告上限数は撤廃されましたが、内容のないコンテンツに広告を貼りすぎるのは良くないので、今回は2つ目、4つ目、6つ目のh2タグの前に自動挿入されるように設定することにしました。

編集するphpファイル

広告を自動挿入にするためには、子ページの「テーマのための関数(functions.php)」に以下の追記をします。

function add<em>ad</em>before<em>h2</em>for<em>3times($the</em>content) {<br />
//広告を自動挿入する<br />
$ad = &lt;&lt;&lt; EOF<br />
// 広告コードを入力 //<br />
EOF;</p>

<p>if ( is<em>single() ) {//投稿ページ<br />
    $h2 = '/^<h2.*?>.+?&lt;\/h2>$/im';//H2見出しのパターン<br />
    if ( preg</em>match<em>all( $h2, $the</em>content, $h2s )) {//H2見出しが本文中にあるかどうか<br />
      if ( $h2s[0] ) {//チェックは不要と思うけど一応<br />
        if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入<br />
          $the<em>content  = str</em>replace($h2s[0][1], $ad.$h2s[0][1], $the<em>content);<br />
        }<br />
        if ( $h2s[0][3] ) {//4番目のH2見出し手前に広告を挿入<br />
          $the</em>content  = str<em>replace($h2s[0][3], $ad.$h2s[0][3], $the</em>content);<br />
        }<br />
if ( $h2s[0][5] ) {//6番目のH2見出し手前に広告を挿入<br />
          $the<em>content  = str</em>replace($h2s[0][5], $ad.$h2s[0][5], $the<em>content);<br />
        }<br />
      }<br />
    }<br />
  }<br />
  return $the</em>content;<br />
}<br />
add<em>filter('the</em>content','add<em>ad</em>before<em>h2</em>for_3times');

「// 広告コードを入力 //」のところに、自分の広告コードを入力すればOK。

これで、2番目・4番目・6番目のh2タグの前に自動的に広告が挿入されるようになりました。

ちなみに、今まで使っていたショートコードは、プラグイン「Search Regex」を使って一括削除すると楽です。

参考にさせて頂いたブログ様はこちら。ありがとうございます。

参考:本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法/寝ログ

終わりに

久しぶりに重い腰を上げて、ブログのカスタマイズに手を出しました。

これを全部のブログでやるのはやっぱり面倒です…。めんどくさがりすぎなのはわかっているんですけどね。

これからも少しずつ勉強して、なるべくこのブログだけで直帰率を下げられるように頑張ってみたいと思います。

最後まで閲覧ありがとうございました。おしまい。

スポンサーリンク
スポンサーリンク

コメントを残す

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