読者です 読者をやめる 読者になる 読者になる

やったこと

webサービスを作るときに考えたことを垂れ流します

simplicityのテーマでタイトルロゴ直下部分にブログパーツを挿入したよ

ワードプレス「simplicity」のテーマで、サイトタイトル直下の位置(タイトルロゴやナビメニューの下・記事の上の部分ね)にブログパーツ(忍者レコメンド)を挿入したかったんだけど、なかなかできなくて手こずった。

以下のようにしてできたので、手順書いておきます。

①「function.phpの修正」
function.phpに以下のような関数を追記する。ブログパーツのコードをPC用とスマホ用で場合分けしてプリントする関数です。

//忍者レコメンドの表示
function print_ninja_top(){
  if (wp_is_mobile()){
    //モバイルの場合
$str = <<< EOM
<div class="mycentering">
<hr>
<p>他サイトおすすめ動画!</p>
★ここにパーツの貼り付けコードを書く(スマホ表示用)
<hr>
</div>
EOM;
  }else{
    //PCの場合
$str = <<< EOM
<div class="mycentering">
<p>他サイトおすすめ動画!</p>
★ここにパーツの貼り付けコードを書く(PC表示用)
</div>
EOM;
  }
  echo $str;
}


②「header.phpの修正」
header.phpの60行目あたりを以下のように修正する(ブログパーツのコード出力させる)。

      <?php if (is_navi_visible())://ナビゲーションが表示のとき
        get_template_part('navi');//グローバルナビのためのテンプレート
      endif; ?>

      <?php  print_ninja_top();//タイトル下部分にパーツ表示?>

      <!-- 本体部分 -->
      <div id="body">
        <div id="body-in">

③「style.cssの修正」

style.cssに以下を追記する(中央寄せでかっこいい感じに表示)。

/* タイトル直下部分のパーツ */
.mycentering{
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #888888;
}

④「mobile.cssの修正」
mobile.cssに以下を追記する(位置とか横線とか微調整)。

/* タイトル直下部分のパーツ */
.mycentering{
  padding-bottom: 0px;
}
.mycentering > hr{
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.mycentering > p{
  margin-top: 0px;
  margin-bottom: 0px;
}


以上です。ブログパーツだけじゃなくて広告とかもこれと同じ方法で表示できるはずです。
細かいcssのデザインのとことかは自分で微調整してみてね。