WordPressのテーマを変える前に、アルバトロスで行ったカスタマイズのCSSコードを忘れないようにメモしておく！

どうもNon太(＠LoveWifeLives)です。

僕はWordPressのテーマをアルバトロスにしています。

そのテーマを作っているOPEN CAGEから新たに新作が発表されましたね。

近々このテーマに変更する予定ですが、良い機会なので今までに自分が行ったカスタマイズで、スタイルシート（style.css）やfunction.phpなどに記述したCSSコードを忘れないようにメモしておこうと思いました。（2016年6月、ストークに変更しました！）

完全に個人的な記事になりますが、同じような設定にされたい場合は参考になる人もいるかもしれませんので書いて残しておくことにします。

では早速どうぞ！

1.カエレバ・ヨメレバ・トマレバのカスタマイズ+ポチレバも！

Amazonや楽天のリンクを簡単に且つ、綺麗に表示させてくれる素晴らしい機能を持つカエレバ・ヨメレバ・トマレバ&ポチレバ。

これをカスタマイズしたCSSが以下です。

/*---------------------------------
  カエレバ
--------------------------------*/
.kaerebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
  background-color: #FFFFF0;
}
.kaerebalink-image {
  margin-right: 18px;
  float:left;
}
.kaerebalink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.kaerebalink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.kaerebalink-name {
  font-size: 17px;
  margin-top: 2px;
}
.kaerebalink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.kaerebalink-link1 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkamazon a{
  color: #565656;
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkamazon a, .shoplinkrakuten a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}

/*---------------------------------
  ヨメレバ
--------------------------------*/
.booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
  background-color: #FFFFF0;
}
.booklink-image {
  margin-right: 18px;
  float:left;
}
.booklink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.booklink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.booklink-name {
  font-size: 17px;
  margin-top: 2px;
}
.booklink-detail {
  margin-top: 5px;
}
.booklink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.booklink-link1 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkamazon a{
  color: #565656;
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkkindle a{
  color: #0000FF;
}
.shoplinkamazon a, .shoplinkrakuten, .shoplinkkindle a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}

/*---------------------------------
  トマレバ
--------------------------------*/
.tomarebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
  background-color: #FFFFF0;
}
.tomarebalink-image {
  margin-right: 18px;
  float:left;
}
.tomarebalink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.tomarebalink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.tomarebalink-name {
  font-size: 17px;
  margin-top: 2px;
}
.tomarebalink-detail {
  margin-top: 5px;
}
.tomarebalink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.tomarebalink-link1 {
  font-size: 16px;
}
.shoplinkrakuten, .shoplinkjalan, .shoplinkjtb, .shoplinkrurubu {
  float: left;
  width: 44%;
  text-align: center;
  margin: 17px 10px 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkjalan a{
  color: #FF8C00;
}
.shoplinkjtb a{
  color: #565656;
}
.shoplinkrurubu a{
  color: #0000FF;
}
.shoplinkrakuten, .shoplinkjalan, .shoplinkjtb, .shoplinkrurubu a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}

/*---------------------------------
スマホ用カエレバ・ヨメレバ・トマレバ
--------------------------------*/
@media only screen and (max-width: 480px) {
.kaerebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.kaerebalink-image {
  margin: 0 0 10px 0;
  float: none;
}
.kaerebalink-image img {
  margin: 0 auto;
  display: block;
}
.kaerebalink-info {
  font-size: 12px;
  margin: 0;
}
.kaerebalink-name {
  font-size: 15px;
  margin-top: 2px;
}
.kaerebalink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.kaerebalink-link1 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten {
  float: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
}

.booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.booklink-image {
  margin: 0 0 10px 0;
  float: none;
}
.booklink-image img {
  margin: 0 auto;
  display: block;
}
.booklink-info {
  font-size: 12px;
  margin: 0;
}
.booklink-name {
  font-size: 15px;
  margin-top: 2px;
}
.booklink-detail {
  margin-top: 5px;
}
.booklink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.booklink-link1 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle {
  float: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
}

.tomarebalink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.tomarebalink-image {
  margin: 0 0 10px 0;
  float: none;
}
.tomarebalink-image img {
  margin: 0 auto;
  display: block;
}
.tomarebalink-info {
  font-size: 12px;
  margin: 0;
}
.tomarebalink-name {
  font-size: 15px;
  margin-top: 2px;
}
.tomarebalink-detail {
  margin-top: 5px;
}
.tomarebalink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.tomarebalink-link1 {
  font-size: 14px;
}
.shoplinkrakuten, .shoplinkjalan, .shoplinkjtb, .shoplinkrurubu {
  float: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px 0;
 }
}

このコードでPC表示もスマホ表示もうまくまとまってます。

▼カエレバ（最近買ったパオｗ）

▼ヨメレバ（もっとExcel勉強したいかも）

▼トマレバ（石垣島に行きたい！！）

と言った感じに表示が出来るようになりました。

ここではやってませんが、ポチレバのカスタマイズも以下に。

テーマを変えたらコードは記述する予定をしています。

/*---------------------------------
  ポチレバ
--------------------------------*/
.pochireba {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 1px 1px 3px 1px #ddd;
    padding: 20px 20px 1px!important;
    overflow: hidden; /* float解除用 */
    margin-bottom: 20px;
    background-color: #FFFFF0;
}

.pochireba p {
    margin: 0;
}

.pochi_name {
    font-size: medium;
}

.pochi_seller {
    display: inline-block;
    margin-left: 15px;
}

これもカエレバなどと同じような背景になります。

LWL_記事内広告_レスポンシブ_PC用2つめのH2前

2.固定ページに新着記事を表示させる

固定ページを使用している時のトップページに新着記事を表示させるカスタマイズです。

以下の記事でも書いていますね。

完璧なカスタマイズとは言い難いものでしたが、それなりに良い感じにはなってたんじゃないかと。

ストークにすれば固定ページにサムネイル付きで表示させるカスタマイズが、ウィジットあたりで簡単に出来るので、このカスタマイズはリンク先を見てもらえればと思います。

3.Google Mapをスマホでも綺麗にさせる

アルバトロステーマを使用していたら、Google Mapを記事内に貼り付けても、スマホ表示の時も自動でリサイズされて表示されるはずだったのですが、いつしか表示されなくなってしまいました。

（多分自分でカスタマイズしておかしくなった？のかもしれない…）

なので、以下のコードをスタイルシート（style.css）に記述しておきました。

/*---------------------------------
グーグルマップの表示用
--------------------------------*/
.google-maps {
position: relative;
padding-bottom: 75%; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

上記のコードを記述した上に、記事内でGoogle Mapを貼り付ける際にGoogle Mapのコードを

<div class="google-maps">Google Mapコード</div>

こんな風に囲ってあげてました。

こうすることでPC表示もスマホ表示も綺麗に整いました。

これもストークにしたら必要なくなりましたが。

4.アドセンス広告をh2見出しの前に表示する

アルバトロスの場合、記事本文を見るとサムネイル画像の下にシェアボタンが表示され、その下に広告などを表示させるためのウィジットは用意されていたのですが、僕は記事本文内にもアドセンス広告を表示させたかったんです。

行いたかったのは一つ目のh2見出しの前にアドセンスを1つ、2つ目のh2見出しの前に2つめのアドセンスといった感じ。

そのカスタマイズの方法です。以下のコードをfunction.phpに記述します。※function.phpは適当にいじると危ないファイルなので、自己責任でやってください！

function add_ad_before_h2_for_3times($the_content) {
//1つ目の広告タグを挿入
$ad1 = <<< EOF
//ここにアドセンスを挿入//
EOF;
//2つ目の広告タグを挿入
$ad2 = <<< EOF
//ここにアドセンスを挿入//
EOF;
//3つ目の広告タグを挿入
$ad3 = <<< EOF
//ここにアドセンスを挿入//
EOF;

  if ( is_single() ) {//投稿ページ
    $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      if ( $h2s[0] ) {//チェックは不要と思うけど一応
        if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][0], $ad1.$h2s[0][0], $the_content);
        }
        if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][1], $ad2.$h2s[0][1], $the_content);
        }
        if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][2], $ad3.$h2s[0][2], $the_content);
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times');

【//ここにアドセンスを挿入//】と表示されているところを自分のアドセンスコードに変更すれば、それぞれのh2の見出しの前にアドセンス広告が表示されるようになります。

アドセンスの前に【スポンサーリンク】の文言を表示させておきたかったのと、広告表示が左寄せではなく中央表示にしたかったので、アドセンス挿入のところは以下のように書きました。

<div align="center">スポンサーリンク</div>
<div align="center">アドセンスのコード</div>

これで広告前に【スポンサーリンク】も表示されるし、中央に広告が表示されるようになっています。

そもそも記事本文内や、h2見出しの前に広告が何個も出てくるのは読む人によってはうっとうしく思われる場合があるので、そのあたりも注意して判断する必要があると思います。

僕の場合はさすがに3つめのh2見出し前にまで広告を表示するのはうざいかなと思ったので、3つめには何もコードを入れてません。

このコードは以下の記事を参考にさせてもらっています。

5.ショートコード一発でアドセンスを呼び出す

これはおそらくほとんど使うことがないままになるかもしれませんが、直接記事内にアドセンスを表示させたい場合などにショートコードを書くだけでアドセンスが表示されるためのCSSです。

これもどこかの誰かの記事を参考にしたはずなのに、はてブやブックマークせずに素通りしてしまったので、引用元がどこかわからなくなってしまいました。

判明したら追記することにしますが、コードは以下です。

function showads() {
    return 'ここにアドセンスコードを貼り付け';
}

add_shortcode('adsense', 'showads');

【ここにアドセンスコードを貼り付け】と書かれているところをアドセンスに変えるだけです。

後は記事本文に［adsense］と書けば、そこにアドセンス広告が表示されます。

［］←これは全角なので、利用する時は半角で書くようにしてください。

僕もこのCSSを記述しているため半角で書くとホントにアドセンスが表示されてしまうので、ここでは全角で表示させています。

6.アイキャッチ画像にキャプションを表示させる

このカスタマイズはアルバトロステーマを提供しているOpen Cageのページでも書かれています。

キャプションって何やねんという人は下記の画像を。画像の下に文字が表示されています。

画像のしたに表示されている文字がキャプションと呼ばれるものです。

写真と一緒に説明文も付け加えられるので、有効に利用できる場合がありますね。

自分が実際に撮影した写真を本文のトップに表示させるだけなら必要ないかもしれません。

でももし、引用リンクを表示すれば画像利用OKの写真を使用する場合、画像の下にキャプションでリンク元を表示させたいですよね。

アルバトロスではアイキャッチ画像にはキャプションを書いても表示されない仕様になっていたので、アイキャッチ画像に引用画像は使いにくかったんです。

それを表示できるようにするカスタマイズの方法です。

single.phpを子テーマに移動させる

コードを書き換えるファイルが【single.php】というファイルになりますが、これが親テーマにしかないのでまずはファイルを子テーマにコピーします。

親テーマのままでもカスタマイズは出来ますが、できるならば子テーマにした方がいいです。

ロリポップを使用している場合の、ファイルのコピー方法や理由は以下のページを参考にして下さい。

移動させたらsingle.phpを開き、以下のコードを見つけます。わりかし上部にあるはずです。

<?php the_post_thumbnail('single-thum'); ?>

上記のコードをそっくりそのまま以下のコードに書き換えます。

<?php 
if(has_post_thumbnail()){
 echo '<div class="eyecatch-caption">';
 the_post_thumbnail('single-thum');
 if($pt_caption = get_post(get_post_thumbnail_id())->post_excerpt) { //キャプションがあれば出力
 echo '<div class="eyecatch-caption-text" style="font-size:.8em; padding:.2em;">'.$pt_caption.'</div>';
 }
 echo '</div>';
}
?>

カスタマイズはこれだけ。と言ってもOpen Cageで書かれているコードをコピーしただけですが…。ｗ

問題なければこれでアイキャッチ画像にもキャプションが表示されるようになるはずです。

アイキャッチ画像を探す時、こちらのページ（Photo Pin）なんかで使いたい画像が見つかったりしますが、利用するには引用元の表示が必須だったりします。

今まではアイキャッチ画像には使えませんでしたが、これで利用できるようになるというわけですね。

7.最終更新日を表示させる

これはテーマをストークにした場合、機能としてはデフォルトで表示させられるように最初から設定が可能のようですね。

なので、もはや最終更新日を表示させるためのカスタマイズの必要はなくなりそうですが、アルバトロスで行う方は以下の記事を参考にしてもらえればと思います。

と言いながら、こちらのサイト（リンカジmac）もアルバトロスをテーマにしていらっしゃるようですが、この最終更新日の表示のされ方が格好良いなぁと前々から思ってて、どうやってカスタマイズしたんだろうと気になったりならなかったり。

自分がストークにしたらあんまり関係なくなりますが、。

8.トップページに表示する固定ページのタイトルを非表示にする

固定ページをトップページに設定する場合（このサイトもそうです）、タイトルを表示させるとトップページなのに何となく違和感があったりします。

じゃあタイトルを書かなければいいんじゃないかという話しになりそうですが、そうするとアルバトロスの仕様なのか、タイトルが表示されるであろう場所にうっすら線が表示されたままになってるんです。

それがどうしても嫌だったので、トップページに表示させる予定の固定ページのタイトルだけ一切非表示にするカスタマイズです。

ここで行うのは【page.php】というファイルです。

これも親テーマにしかないので、頑張って子ページにコピーしてきた方がいいですね。

で、そのファイルを開いて大体20行目ぐらいに以下のコードがあります。

<h1 class="page-title entry-title" itemprop="headline"><?php the_title(); ?></h1>

上記のコードが見つかったら、これをそっくりそのまま以下のコードに書き換えてしまいます。

<?php if(!is_home() && !is_front_page()): ?>
<h1 class="entry-title"><?php echo get_the_title(); ?></h1>
<?php endif; ?>

これでトップページに設定した場合の固定ページのタイトルは表示されません。（他の固定ページのタイトルはちゃんと表示されたままです。）

記事を書くときには構造上の観点からタイトルは記載しておいた方が良いみたいです。

僕の場合で言えば、トップぺージに設定している固定ページのタイトルは【LoveWifeLife】と付けてます。

でも、上記のコードを入れているおかげでトップページにタイトルが表示されることはありません。

これもストークにしたら不要になるカスタマイズなのかもしれませんね。

2018年追記

2018年1月現在は、上記のことをするのではなく、下記のCSSをstylesheetに追記させているだけで非表示にしています。

/*==================================================================
post-xx の指定固定ページ記事タイトル非表示
====================================================================*/
#post-*****
.entry-title {
  display:none;
}

*****のところは、自分の投稿IDです。

このカスタマイズでタイトルは書いているのに非表示になります。

手軽さでみても、こっちの方が楽だし間違いがないので良いですよね。

自分で行ったカスタマイズ / まとめ

思ったら大してカスタマイズはしてない方かもしれません。

今だからサラッと書けますが、このカスタマイズを行うまでに何日ぐらい要したのかは覚えていないし、とにかく時間がかかりまくったことだけは確かです。

そうやってカスタマイズしていくうちに、自然と知識になっているんですね。

ちゃんと知っている人と比べるとまだまだ足元にも及びませんが…。

WordPressのテーマを変更した時に、今まで行ってきたコードが全て消えたー！みたいになっては困るので一応まとめてみました。

テーマによってはうまくカスタマイズ出来ない場合があるかもしれませんが、ぜひ参考にしてもらえればと思います。

※くれぐれもファイルを変更やカスタマイズする時は、バックアップを取るなり、慎重に行うことをおすすめします！