WordPress テーマ「ストーク（STORK）」をカスタマイズしてえな！
ブロガーに人気のWordPressテーマ「ストーク」
。
OPENCAGE（オープンケージ）
さんが作っている WordPressテーマ の1つですね。
僕も気に入っていて、いくつかのサイトで採用させてもらっています。
機能だけでなく見栄えもおしゃれなので大変満足していますね。
しかしながら、このストークを
デフォルトの状態で使うのはちょっと気がひける。。
利用者が多いので被ってしまいますし、自分の好みには合っていないデザインや機能もあるので、
ある程度カスタマイズして使うようにしています。
ストーク（STORK）のおすすめのカスタマイズ方法
僕は次のようにカスタマイズしています。
カスタマイズする際は元ファイルの内容をバックアップ取っておきましょう。特にphpファイルの編集は一歩間違うとサイトが死ぬ可能性があるので注意です
アイキャッチ画像を非表示にする
記事の冒頭のアイキャッチ画像を非表示にするようにしています。
アイキャッチ画像があると、記事を読む前に内容をイメージしやすく、読者にとって嬉しいかもしれません。
しかしながら、アイキャッチ画像を記事中に表示していると、次のようなデメリットがあります。
- アイキャッチ画像を記事ごとに毎回作らなければならない
- 記事を読み込むスピードが遅くなる
僕は記事ごとにアイキャッチ画像を設定するものの、記事中にはアイキャッチ画像を表示しないようにしています。
このように設定したいときは、個別記事のPHP ファイルに当たる single.phpのこの部分を削除してやるといいですね。
|
1 2 3 4 5 |
<?php if ( has_post_thumbnail() && !get_option( 'post_options_eyecatch' ) ) :?> <figure class="eyecatch"> <?php the_post_thumbnail(); ?> </figure> <?php endif; ?> |
リストを太字にする
僕は箇条書きの文字は太字でコントラストをつけたい派です。
箇条書きを記事中のアクセントとして使っているので、普通の文字とは区別するようなデザインを好んでいます。
そのため、リストの 箇条書きの2種類（ul とolのli要素）の文字のフォントスタイルをボールドに設定しています。
CSS で書くと次のような感じですね↓
|
1 2 3 4 5 6 7 8 |
.entry-content ol li{ font-weight: bold; } .entry-content ul li{ font-weight: bold; } |
こいつをstyle.cssの一番下に追加しておきます。
冒頭の SNS シェアを削除
また、記事の冒頭に SNS のシェアボタンがデフォルトで用意されています。
デフォルトでSNS のシェアボタンは、
- 記事の冒頭
- 記事の終わり
の2箇所にあり、1記事あたりに2箇所シェアボタンが設置されています。
僕の記事はあまりシェアされないので、冒頭のシェアボタンは意味がないと考えております笑
まあ、記事下にシェアボタンあればいいっしょ、っていう。
ということで、おすすめは冒頭の SNS ボタンは削除するスタイル。
single.phpの冒頭の
|
1 2 3 |
<?php if ( !get_option( 'sns_options_hide' ) ) : ?> <?php get_template_part( 'parts_sns_short' ); ?> <?php endif; ?> |
を削除してやれば SNS ボタンは消えると思います。
カエレバ・ヨメレバのデザイン
アフィリエイト Amazon や楽天のアフィリエイトリンクを貼る時はカエレバ・ヨメレバというツールを使っています。
そのツールを使ってリンクを貼る時にお洒落に見えるようにカスタマイズするようにしていますよ。
僕は次のCSS コードを追加でstyle.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 |
/*================================================================================= カエレバ・ヨメレバ・トマレバ =================================================================================*/ .cstmreba { width:98%; height:auto; margin:36px auto; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif; line-height: 1.5; word-wrap: break-word; box-sizing: border-box; display: block; } .cstmreba a { transition: 0.8s ; color:#285EFF; /* テキストリンクカラー */ } .cstmreba a:hover { color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */ } .cstmreba .booklink-box, .cstmreba .kaerebalink-box, .cstmreba .tomarebalink-box { width: 100%; background-color: #fafafa; /* 全体の背景カラー */ overflow: hidden; border-radius: 0px; box-sizing: border-box; padding: 12px 8px; box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26); } /* サムネイル画像ボックス */ .cstmreba .booklink-image, .cstmreba .kaerebalink-image, .cstmreba .tomarebalink-image { width:150px; float:left; margin:0 14px 0 0; text-align: center; background: #fff; } .cstmreba .booklink-image a, .cstmreba .kaerebalink-image a, .cstmreba .tomarebalink-image a { width:100%; display:block; } .cstmreba .booklink-image a img, .cstmreba .kaerebalink-image a img, .cstmreba .tomarebalink-image a img { margin:0 ; padding: 0; text-align:center; background: #fff; } .cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info { overflow:hidden; line-height:170%; color: #333; } /* infoボックス内リンク下線非表示 */ .cstmreba .booklink-info a, .cstmreba .kaerebalink-info a, .cstmreba .tomarebalink-info a { text-decoration: none; } /* 作品・商品・ホテル名 リンク */ .cstmreba .booklink-name>a, .cstmreba .kaerebalink-name>a, .cstmreba .tomarebalink-name>a { border-bottom: 1px solid ; font-size:16px; } /* タイトル下にPタグ自動挿入された際の余白を小さく */ .cstmreba .kaerebalink-name p, .cstmreba .booklink-name p, .cstmreba .tomarebalink-name p { margin: 0; } /* powered by */ .cstmreba .booklink-powered-date, .cstmreba .kaerebalink-powered-date, .cstmreba .tomarebalink-powered-date { font-size:10px; line-height:150%; } .cstmreba .booklink-powered-date a, .cstmreba .kaerebalink-powered-date a, .cstmreba .tomarebalink-powered-date a { color:#333; border-bottom: none ; } .cstmreba .booklink-powered-date a:hover, .cstmreba .kaerebalink-powered-date a:hover, .cstmreba .tomarebalink-powered-date a:hover { color:#333; border-bottom: 1px solid #333 ; } /* 著者・住所 */ .cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address { font-size:12px; } .cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img { display:none !important; } .cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 { display: inline-block; width: 100%; margin-top: 5px; } .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div, .cstmreba .tomarebalink-link1>div { float:left; width:24%; min-width:128px; margin:0.5%; } /***** ボタンデザインここから ******/ .cstmreba .booklink-link2 a, .cstmreba .kaerebalink-link1 a, .cstmreba .tomarebalink-link1 a { width: 100%; display: inline-block; text-align: center; box-sizing: border-box; margin: 1px 0; padding:3% 0.5%; border-radius: 8px; font-size: 13px; font-weight: bold; line-height: 180%; color: #fff; box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); } /* トマレバ */ .cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */ .cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */ .cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */ .cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */ .cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */ .cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */ .cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */ .cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/ /* カエレバ */ .cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */ .cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;} /* ベルメゾン */ .cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */ .cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */ /* ヨメレバ */ .cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */ .cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */ .cstmreba .booklink-link2 .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */ .cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */ .cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */ .cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */ /* カエレバ・ヨメレバ共通 */ .cstmreba .kaerebalink-link1 .shoplinkamazon a, .cstmreba .booklink-link2 .shoplinkamazon a { background:#FF9901; border: 2px solid #ff9901; } /* Amazon */ .cstmreba .kaerebalink-link1 .shoplinkrakuten a, .cstmreba .booklink-link2 .shoplinkrakuten a { background: #bf0000; border: 2px solid #bf0000; } /* 楽天 */ .cstmreba .kaerebalink-link1 .shoplinkseven a, .cstmreba .booklink-link2 .shoplinkseven a { background:#225496; border: 2px solid #225496; } /* 7net */ /****** ボタンカラー ここまで *****/ /***** ボタンデザイン マウスオーバー時ここから *****/ .cstmreba .booklink-link2 a:hover, .cstmreba .kaerebalink-link1 a:hover, .cstmreba .tomarebalink-link1 a:hover { background: #fff; } /* トマレバ */ .cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */ .cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */ .cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */ .cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */ .cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */ .cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */ .cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */ .cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/ /* カエレバ */ .cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */ .cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; } /* ベルメゾン */ .cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */ .cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */ /* ヨメレバ */ .cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */ .cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */ .cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */ .cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */ .cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */ .cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */ /* カエレバ・ヨメレバ共通 */ .cstmreba .kaerebalink-link1 .shoplinkamazon a:hover, .cstmreba .booklink-link2 .shoplinkamazon a:hover { color:#FF9901; } /* Amazon */ .cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover, .cstmreba .booklink-link2 .shoplinkrakuten a:hover { color: #bf0000; } /* 楽天 */ .cstmreba .kaerebalink-link1 .shoplinkseven a:hover, .cstmreba .booklink-link2 .shoplinkseven a:hover { color:#225496;} /* 7net */ /***** ボタンデザイン マウスオーバー時ここまで *****/ .cstmreba .booklink-footer { clear:both; } /***** 解像度768px以下のスタイル *****/ @media screen and (max-width:768px){ .cstmreba .booklink-image, .cstmreba .kaerebalink-image, .cstmreba .tomarebalink-image { width:100%; float:none; } .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div, .cstmreba .tomarebalink-link1>div { width: 32.33%; margin: 0.5%; } .cstmreba .booklink-info, .cstmreba .kaerebalink-info, .cstmreba .tomarebalink-info { text-align:center; padding-bottom: 1px; } } /***** 解像度480px以下のスタイル *****/ @media screen and (max-width:480px){ .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div, .cstmreba .tomarebalink-link1>div { width: 49%; margin: 0.5%; } } |
コメントフォームをカスタマイズ
また、僕はコメントフォームをカスタマイズしています。
デフォルトのコメントフォームでは記入項目が
- 名前
- メールアドレス
- URL
- コメント内容
となっていて記入項目が多く、コメントするハードルがちょっと高い。
そのため、僕は記入項目を減らして
- 名前
- コメント内容
に絞って、コメントしやすい雰囲気を作り出すようにしています。
ということで、ぼくはfunctions.phpに次のような記述を追加しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 子テーマのstyle.cssを後から読み込む add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('style') ); } //コメントからEmailとウェブサイトを削除 function my_comment_form_remove($arg) { $arg['email'] = ''; $arg['url'] = ''; return $arg; } add_filter('comment_form_default_fields', 'my_comment_form_remove'); |
詳しくはこちらの「WordPressのコメントフォームのカスタマイズ方法」を読んでみてくださいね。
著者情報を記事真下に移動する
あとストークで残念なのが、
著者情報が記事コンテンツから離れて掲載されている点です。
著者情報を確認する前に離脱してしまう恐れもあります。
そこで、ぼくは記事コンテンツの直後に著者情報を表示させるようにしていますね。
single.phpの、
|
1 |
<?php get_template_part( 'parts_singlefoot' ); ?> |
を
|
1 2 3 4 5 6 7 8 |
<?php if ( !get_option( 'sns_options_hide' ) ) : ?> <div class="sharewrap wow animated fadeIn" data-wow-delay="0.5s"> <?php if ( get_option( 'sns_options_text' ) ) : ?> <h3><?php echo get_option( 'sns_options_text' ); ?></h3> <?php endif; ?> <?php get_template_part( 'parts_sns' ); ?> </div> <?php endif; ?> |
の直後に記載してやるといいですよ。
そして、あとはparts-singlefoot.phpの編集。authorboxというクラスのdiv要素を冒頭に持っていきます。
前後の記事のリンク廃止
ぼくは個人的に、ブログ記事の更新の順番なんてどうでもいいと思っているので、
前後に投稿された記事へのリンクを廃止しています。
さっきでてきたparts-singlefoot.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 |
<div class="np-post"> <div class="navigation"> <div class="prev np-post-list"> <?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?> <a href="<?php echo get_permalink($nextpost->ID); ?>" class="cf"> <figure class="eyecatch"><?php echo get_the_post_thumbnail($nextpost->ID,'thumbnail'); ?></figure> <span class="ttl"><?php echo esc_attr($nextpost->post_title); ?></span> </a> <?php else:?> <div class="home_link"> <a href="<?php echo esc_url(home_url()); ?>"><figure class="eyecatch"><i class="fa fa-home"></i></figure><span class="ttl">トップページへ</span></a> </div> <?php endif; ?> </div> <div class="next np-post-list"> <?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?> <a href="<?php echo get_permalink($prevpost->ID); ?>" class="cf"> <span class="ttl"><?php echo esc_attr($prevpost->post_title); ?></span> <figure class="eyecatch"><?php echo get_the_post_thumbnail($prevpost->ID,'thumbnail'); ?></figure> </a> <?php else:?> <div class="home_link"> <a href="<?php echo esc_url(home_url()); ?>"><span class="ttl">トップページへ</span><figure class="eyecatch"><i class="fa fa-home"></i></figure></a> </div> <?php endif; ?> </div> </div> </div> |
という記述をごっそり削除というかコメントアウトして完了です。
補足情報のデザイン
後は補足情報のデザインですね。
詳しくは「CSSで補足情報を入れる方法」を参考にしていただきたいのですが、このデザインを加えておくと、
記事中に普通の段落とは異なるデザインを持つ要素
を加えられます。
これにより、視覚的にわかりやすい記事を作れます。
具体的に言うと僕は
- 補足情報（infoマーク）
- 背景がグレー
という2つの 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 |
.information{ background-color: #F4F3EB; padding: 20px 20px 20px 72px; border-radius: 4px; position: relative; display: block; margin-top: 1em; margin-bottom: 1em; } .information::before { font-family: "FontAwesome"; font-size: 50px; position: absolute; top: 30px; left: 13px; color: #EAE3B4; } .information::before{ content: '\f05a'; } .gray{ padding: 16px; background-color: #f7f7f7; margin-top: 30px; margin-bottom: 30px; } |
ストークをカスタマイズするときは子テーマを使おう
以上がWordPressテーマ「ストーク」のカスタマイズ方法でした。
WordPress のテーマをカスタマイズする時は、
子テーマを編集するといいですよ。
さもなくばテーマをアップデートした時に、カスタマイズ情報が消えてしまう悲劇が起こってしまいますからね。
WordPressの子テーマの作り方はこの記事を読んでみてくださいね。
「えっ、子テーマとか作るのめんどくさい・・・！」
という方もご安心ください。
この記事で紹介したストークのカスタマイズを反映させた子テーマをこちらのリンクからダウンロードできるようにしておきました。
「ストークのカスタマイズ方法がわからない」
という方は使ってみてくださいね。
それでは！
Lin
自称、学習系ブロガー。自ら学び、学んだことをわかりやすく楽しくアウトプットすることを心がけています。本ブログではプログラミング、フリーランスの税金、Webマーケティング、副業を勉強していきます。
好きな映画は「メリーに首ったけ」
>>Twitterをフォローする
