どうもNon太(＠LoveWifeLives)です。
僕はWordPressのテーマをアルバトロスにしています。
そのテーマを作っているOPEN CAGEから新たに新作が発表されましたね。
近々このテーマに変更する予定ですが、良い機会なので今までに自分が行ったカスタマイズで、スタイルシート（style.css）やfunction.phpなどに記述したCSSコードを忘れないようにメモしておこうと思いました。（2016年6月、ストークに変更しました！）
完全に個人的な記事になりますが、同じような設定にされたい場合は参考になる人もいるかもしれませんので書いて残しておくことにします。
では早速どうぞ！
1.カエレバ・ヨメレバ・トマレバのカスタマイズ+ポチレバも！
Amazonや楽天のリンクを簡単に且つ、綺麗に表示させてくれる素晴らしい機能を持つカエレバ・ヨメレバ・トマレバ&ポチレバ。
これをカスタマイズしたCSSが以下です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 |
/*--------------------------------- カエレバ --------------------------------*/ .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勉強したいかも）
▼トマレバ（石垣島に行きたい！！）
と言った感じに表示が出来るようになりました。
ここではやってませんが、ポチレバのカスタマイズも以下に。
テーマを変えたらコードは記述する予定をしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*--------------------------------- ポチレバ --------------------------------*/ .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; } |
これもカエレバなどと同じような背景になります。
2.固定ページに新着記事を表示させる
固定ページを使用している時のトップページに新着記事を表示させるカスタマイズです。
以下の記事でも書いていますね。
完璧なカスタマイズとは言い難いものでしたが、それなりに良い感じにはなってたんじゃないかと。
ストークにすれば固定ページにサムネイル付きで表示させるカスタマイズが、ウィジットあたりで簡単に出来るので、このカスタマイズはリンク先を見てもらえればと思います。
3.Google Mapをスマホでも綺麗にさせる
アルバトロステーマを使用していたら、Google Mapを記事内に貼り付けても、スマホ表示の時も自動でリサイズされて表示されるはずだったのですが、いつしか表示されなくなってしまいました。
（多分自分でカスタマイズしておかしくなった？のかもしれない…）
なので、以下のコードをスタイルシート（style.css）に記述しておきました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*--------------------------------- グーグルマップの表示用 --------------------------------*/ .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のコードを
|
1 |
<div class="google-maps">Google Mapコード</div> |
こんな風に囲ってあげてました。
こうすることでPC表示もスマホ表示も綺麗に整いました。
これもストークにしたら必要なくなりましたが。
4.アドセンス広告をh2見出しの前に表示する
アルバトロスの場合、記事本文を見るとサムネイル画像の下にシェアボタンが表示され、その下に広告などを表示させるためのウィジットは用意されていたのですが、僕は記事本文内にもアドセンス広告を表示させたかったんです。
行いたかったのは一つ目のh2見出しの前にアドセンスを1つ、2つ目のh2見出しの前に2つめのアドセンスといった感じ。
そのカスタマイズの方法です。以下のコードをfunction.phpに記述します。※function.phpは適当にいじると危ないファイルなので、自己責任でやってください！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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の見出しの前にアドセンス広告が表示されるようになります。
アドセンスの前に【スポンサーリンク】の文言を表示させておきたかったのと、広告表示が左寄せではなく中央表示にしたかったので、アドセンス挿入のところは以下のように書きました。
|
1 2 |
<div align="center">スポンサーリンク</div> <div align="center">アドセンスのコード</div> |
これで広告前に【スポンサーリンク】も表示されるし、中央に広告が表示されるようになっています。
そもそも記事本文内や、h2見出しの前に広告が何個も出てくるのは読む人によってはうっとうしく思われる場合があるので、そのあたりも注意して判断する必要があると思います。
僕の場合はさすがに3つめのh2見出し前にまで広告を表示するのはうざいかなと思ったので、3つめには何もコードを入れてません。
このコードは以下の記事を参考にさせてもらっています。
5.ショートコード一発でアドセンスを呼び出す
これはおそらくほとんど使うことがないままになるかもしれませんが、直接記事内にアドセンスを表示させたい場合などにショートコードを書くだけでアドセンスが表示されるためのCSSです。
これもどこかの誰かの記事を参考にしたはずなのに、はてブやブックマークせずに素通りしてしまったので、引用元がどこかわからなくなってしまいました。
判明したら追記することにしますが、コードは以下です。
|
1 2 3 4 5 |
function showads() { return 'ここにアドセンスコードを貼り付け'; } add_shortcode('adsense', 'showads'); |
【ここにアドセンスコードを貼り付け】と書かれているところをアドセンスに変えるだけです。
後は記事本文に［adsense］と書けば、そこにアドセンス広告が表示されます。
［］←これは全角なので、利用する時は半角で書くようにしてください。
僕もこのCSSを記述しているため半角で書くとホントにアドセンスが表示されてしまうので、ここでは全角で表示させています。
6.アイキャッチ画像にキャプションを表示させる
このカスタマイズはアルバトロステーマを提供しているOpen Cageのページでも書かれています。
キャプションって何やねんという人は下記の画像を。画像の下に文字が表示されています。
このサイトで一番読まれている南京町の食べ歩きの記事です⇒こちらから
画像のしたに表示されている文字がキャプションと呼ばれるものです。
写真と一緒に説明文も付け加えられるので、有効に利用できる場合がありますね。
自分が実際に撮影した写真を本文のトップに表示させるだけなら必要ないかもしれません。
でももし、引用リンクを表示すれば画像利用OKの写真を使用する場合、画像の下にキャプションでリンク元を表示させたいですよね。
アルバトロスではアイキャッチ画像にはキャプションを書いても表示されない仕様になっていたので、アイキャッチ画像に引用画像は使いにくかったんです。
それを表示できるようにするカスタマイズの方法です。
single.phpを子テーマに移動させる
コードを書き換えるファイルが【single.php】というファイルになりますが、これが親テーマにしかないのでまずはファイルを子テーマにコピーします。
親テーマのままでもカスタマイズは出来ますが、できるならば子テーマにした方がいいです。
ロリポップを使用している場合の、ファイルのコピー方法や理由は以下のページを参考にして下さい。
移動させたらsingle.phpを開き、以下のコードを見つけます。わりかし上部にあるはずです。
|
1 |
<?php the_post_thumbnail('single-thum'); ?> |
上記のコードをそっくりそのまま以下のコードに書き換えます。
|
1 2 3 4 5 6 7 8 9 10 |
<?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行目ぐらいに以下のコードがあります。
|
1 |
<h1 class="page-title entry-title" itemprop="headline"><?php the_title(); ?></h1> |
上記のコードが見つかったら、これをそっくりそのまま以下のコードに書き換えてしまいます。
|
1 2 3 |
<?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に追記させているだけで非表示にしています。
|
1 2 3 4 5 6 7 |
/*================================================================== post-xx の指定固定ページ記事タイトル非表示 ====================================================================*/ #post-***** .entry-title { display:none; } |
*****のところは、自分の投稿IDです。
このカスタマイズでタイトルは書いているのに非表示になります。
手軽さでみても、こっちの方が楽だし間違いがないので良いですよね。
自分で行ったカスタマイズ / まとめ
思ったら大してカスタマイズはしてない方かもしれません。
今だからサラッと書けますが、このカスタマイズを行うまでに何日ぐらい要したのかは覚えていないし、とにかく時間がかかりまくったことだけは確かです。
そうやってカスタマイズしていくうちに、自然と知識になっているんですね。
ちゃんと知っている人と比べるとまだまだ足元にも及びませんが…。
WordPressのテーマを変更した時に、今まで行ってきたコードが全て消えたー！みたいになっては困るので一応まとめてみました。
テーマによってはうまくカスタマイズ出来ない場合があるかもしれませんが、ぜひ参考にしてもらえればと思います。
※くれぐれもファイルを変更やカスタマイズする時は、バックアップを取るなり、慎重に行うことをおすすめします！
現在のテーマ⇒WordPressテーマ「ストーク」
色々と探していたらこのページにたどり着きました。
とても参考になったのですが、アルバトロスでフォントの形式を変更するのはどうやっているのでしょうか？
font-familyで設定をしても中々変更されません・・・。
ゆうさん
テーマの編集のスタイルシートのページを開いて、ctrl+Fで検索窓を出して【GENERAL STYLES】を検索してみてください。
すると、【GENERAL STYLES】の下に【body{】があり、その中に【font-family:】が続いていると思います。
そこに自分の希望のフォントファミリーを記述すれば、本文内の文字が変更できます。
これだけだと本文のみが変更になり、ブログのタイトル含め、h1～h5の文字は変更になっていないはずです。
なので、そこからさらに60行ぐらい下がったところ、【h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {】の中にも【font-family:】があると思います。
そこも希望のフォントファミリーの記述に変えてあげれば変更出来るはずです。
これはあくまで記事内のフォント形式を変更する時に使えますが、ヘッダーのカテゴリーの表示だけ変わらないみたいです。
僕も調べてみたものの、そこだけが分からず…。
また、これや親テーマでの記述の場所を書いてます。
本来なら子テーマでやりたいところですが、なぜか【!important】を入れてもうまく反応してくれませんでしたので…。
僕もプロではないのでわかるのはこれぐらいですが、上記の場所に記述をしてみたところフォントの形式は変わったので、一応変更は出来るみたいです。
あまり参考にもならないかもしれませんが…ご参考までに。
ご丁寧にありがとうございます。
子テーマで!importantをつけて設定していましたが、親テーマで変更ができるのですね。
とても参考になりました。わざわざ調べていただきありがとうございました！
ありがとう！参考になったよ！