WordPress テーマ「ストーク(STORK)」のおすすめのカスタマイズ方法


WordPress テーマ「ストーク(STORK)」をカスタマイズしてえな!

ブロガーの間で人気のワードプレステーマとして知られるWordPressテーマ「ストーク」

こちらはOPENCAGE(オープンケージ)さんが作っている WordPressテーマ の1つ。

僕も気に入っていて、いくつかのサイトで採用させてもらっていて、機能だけでなく見栄えもおしゃれなので大変満足しています。

しかしながら、このストークと呼ばれるテーマをデフォルトの状態で使うのはちょっと気がひける。。

デフォルトで使うとまず他のブロガーたちと被ってしまいますし、自分の好みには合っていないデザインや機能もあるので、

ある程度カスタマイズして使うようにしています。

 

 

ストーク(STORK)のおすすめのカスタマイズ方法

人によって色々なカスタマイズの方法があると思いますが、僕は次のようにカスタマイズをするようにしています。

カスタマイズする際は元ファイルの内容をバックアップ取っておきましょう。特にphpファイルの編集は一歩間違うとWordPressが機能しなくなってしまうので注意です

 

アイキャッチ画像を非表示にする

まず記事の冒頭のアイキャッチ画像を非表示にするようにしています。

確かにアイキャッチ画像があった方が、記事を読む前に内容をイメージしやすく、読者にとって嬉しいかもしれません。

しかしながら、アイキャッチ画像を記事中に表示していると、次のようなデメリットがあります。

  • アイキャッチ画像を記事ごとに毎回必ず作らなければならない
  • 記事を読み込むスピードが遅くなる

そのため、僕は記事ごとにアイキャッチ画像を設定するものの、記事中にはアイキャッチ画像を表示しないようにしています。

このように設定したいときは、個別記事のPHP ファイルに当たる single.phpのこの部分を削除してやるといいですね。

 

 

リストを太字にする

僕は個人的に箇条書きの文字は太字でコントラストをつけたい派です。

箇条書きを記事の中でアクセントとして使っているので、普通の段落の文字とは区別するようなデザインを好んでいます。

ストークのデフォルトデザインでは、箇条書きの文字も段落の文字と同じ太さになっているので、若干見づらい。。。

そのため、僕はリストの 箇条書きの2種類(ul とolのli要素)の文字のフォントスタイルをボールドに設定しています。

CSS で書くと次のような感じですね↓

こいつをstyle.cssの一番下に追加しておきます。

 

冒頭の SNS シェアを削除

またアイキャッチ画像に加えて、記事の冒頭に SNS のシェアボタンがデフォルトで用意されています。

デフォルトのデザインでは SNS のシェアボタンは、

  1. 記事の冒頭
  2. 記事の終わり

の2箇所にあるので、1記事あたりに2箇所シェアボタンが設置されています。

僕の記事は残念ながらあまりシェアされないので、冒頭のシェアボタンは意味がないと考えております笑

まあ、記事下にシェアボタンあればいいっしょ、っていう。

ということで、ぼくがおすすめなカスタマイズは冒頭の SNS ボタンは削除するスタイル。

single.phpの冒頭の

という記述を削除してやれば SNS ボタンは消えると思います。

 

カエレバ・ヨメレバのデザイン

これはむちゃくちゃ個人的な事なんですが、アフィリエイト Amazon や楽天のアフィリエイトリンクを貼る時はカエレバヨメレバというツールを使っています。

そのツールを使ってリンクを貼る時にお洒落に見えるようなデザインを予めストークにカスタマイズするようにしていますよ。

僕は次のCSS コードを追加でstyle.cssに書いてますね、下の方に。

 

 

コメントフォームをカスタマイズ

また、僕はコメントフォームをカスタマイズしています。

デフォルトのコメントフォームでは記入項目が

  • 名前
  • メールアドレス
  • URL
  • コメント内容

となっていて若干記入項目が多く、読者の方からするとコメントをするハードルがちょっと高い。

そのため、僕はコメントをするための記入項目を減らして

  1. 名前
  2. コメント内容

という2つに絞っているので、そんなにコメントされることがないんですが、コメントしやすい雰囲気を作り出すようにしています。

ということで、ぼくはfunctions.phpに次のような記述を追加しています。

詳しくはこちらの「WordPressのコメントフォームのカスタマイズ方法」を読んでみてくださいね。

 

著者情報を記事真下に移動する

あとストークで残念なのが、

著者情報が記事終了ポイントからちょっと離れて掲載されてしまっているという点です。

そのため、著者情報を確認する前に離脱してしまう読者が増えてしまう恐れもあります。

 

そこで、ぼくは記事コンテンツの直後に著者情報を表示させるようにしていますよ。

single.phpの、

の直後に記載してあるといいですよ。

そして、あとはparts-singlefoot.phpの編集。authorboxというクラスのdiv要素を冒頭に持っていきます。

うん、こんな感じ。

 

前後の記事のリンク廃止

あとはぼくは個人的にブログ記事の更新の順番なんてどうでもいいと思っているので、

その記事の前後に投稿された記事へのリンクを廃止しています笑

こいつもさっきでてきたparts-singlefoot.phpのファイルを編集していきます。

という記述をごっそり削除というかコメントアウトして完了です。

 

補足情報のデザイン

後は補足情報のデザインですね。

こちらは詳しくはこちらの記事を参考にしていただきたいのですが、このデザインを加えておくと、

記事中に普通の段落とは異なるデザインを持つ要素

を加えられます。

これにより、視覚的にわかりやすい記事を作ることができます。

具体的に言うと僕は

  1. 補足情報(infoマーク)
  2. 背景がグレー

という2つの CSS 情報を加えますね。

詳しくはこちらの「WordPressの記事中に補足情報を入れる方法」を読んでみてください。

 

 

ストークをカスタマイズするときは子テーマを使おう

以上がWordPressテーマ「ストーク」のカスタマイズ方法でした。

WordPress のテーマをカスタマイズする時は、子テーマを編集するようにするといいですよ。

さもなくばテーマがバージョンアップした時にアップデートしてしまうと、カスタマイズ情報が全て消えてしまうという悲劇が起こってしまいますからね。

子テーマを設定しておけば、親テーマのデータを変更しても子テーマのカスタマイズ情報を保ったままにできます。

WordPressの子テーマの作り方はこの記事を読んでみてくださいね。

 

「えっ、子テーマとか作るのめんどくさい・・・!」

という方もご安心ください。

今日この記事で紹介したストークのカスタマイズを反映させた子テーマをこちらのリンクからダウンロードできるようにしておきました。

「ストークのカスタマイズをしたいとしたいけどどうやったらいいかわからない」

という方はこちらの子テーマを使ってみてくださいね。

 

それでは!

Lin


コメントはこちらからお願いします!



もう1本読んでみる