Tips

WordPressテーマJINの子テーマでのカスタマイズ方法

WordPressテーマJINは大変綺麗で使いやすいのですが、融通の効かない点も多いです。子テーマを利用し、柔軟にカスタマイズする方法をご紹介します。

基本は「外観」>「カスタマイズ」から

ダッシュボードから「外観」>「カスタマイズ」を押します。

ここで色々なカスタマイズができます。

でも、ここだけでは変えられないことも多いです。例えば、次の記事に書いたJINの悪い点です。

WordPressテーマJINの評判!専業ブロガーが辛口レビュー!有料ワードプレステーマのJINを購入したので、ブログアフィリエイトで4年食べている私がガチレビューをします。 ⇒JIN公式サイト ...

その中の以下のものは、子テーマを利用すれば対処可能になります。

  • 「あわせて読みたい」自動変換機能を相対パスで指定できない
  • 自動生成されるdescriptionが60文字と短い
  • 良い点、悪い点、おすすめしたい人、おすすめしない人ボックスが無い
  • ショートコードでの装飾がエディタでわかりづらい

JINの子テーマを適用する

まずは、JINが適用されている状態にします。

次に以下から子テーマをダウンロードします。

JIN【子テーマ】のダウンロード

そして、子テーマを適用します。

もちろんこのままだと何の変化もないので、子テーマに対して追記したり、ファイルを追加したりします。

「あわせて読みたい」自動変換機能を相対パスで指定できるようにする

子テーマのfunctions.phpに以下を追記します。

これで次のようにショートコードで相対パスで「あわせて読みたい」を表示できるようになります。

[card name=techacademy-review]

と記載すると、次のように表示されるようになります。

テックアカデミー評判口コミ|30代OL初心者が真剣受講した結果。。。プログラミング初心者の事務職OLが、TechAcademyのRuby on Railsのコースを受講したので体験レビューをお送りします。...

逆に

https://proggy.jp/techacademy-review/

と絶対パスで記載しても、変換されなくなります。この書き方でも変換されるようにしたい方は、上記のコードの最後の4行の以下を削除してください。

自動生成されるdescriptionを長くする

まず、functions.phpに以下を追記します。

160という部分を好きな数字に変えてください。

次にJINの本体(親テーマ)から、header.phpとogp.phpをコピーして、 jin-childディレクトリの下に貼り付けます。

そして、jin-childの下のheader.phpの29行目を修正します。次のようにjin_auto_desc_func()をjin_auto_desc_func_custom()に変更します。

次に、jin-childの下のogp.phpの47行目を修正します。次のようにjin_auto_desc_func()をjin_auto_desc_func_custom()に変更します。

これで、記事のdescription設定を空欄にした際に自動生成されるdescriptionの文字数を長くできます。

良い点、悪い点、おすすめしたい人、おすすめしない人ボックスを作る

style.cssに以下を追記します。

これでdivの開始タグに、次のようにpointというclassを追加すると、文字の部分が変わります。

良い点になります。

悪い点、になります。

divの開始タグに、次のようにrecommendというclassを追加すると、文字の部分が変わります。

こんな人にオススメ、になります。

こんな人はヤメておこう、になります。

ただ、これだとユーザから見た見え方には反映されますが、エディター側には反映されないので分かりづらいです。

なので、エディター用のCSSも用意します。jin-childの直下にeditor-style.cssというファイルを作り、以下を記載します。

そして、functions.phpに以下を追記します。

これで、エディターでも同じような見え方になります。

この状態だと、いちいちエディターで「テキスト」モードにして手入力でclassを追加する必要がありますが、AddQuicktagというプラグインを使うと次のようにプルダウンから指定して、スタイルを反映させることが簡単にできます。

AddQuicktag設定画面で以下のように追加します。「順番」欄はプルダウンにどういう順番で表示させるかなので自由に決めてください。

ボタンのラベル 開始タグ 終了タグ
良い点 <div class="concept-box3 point"><p> </p></div>
悪い点 <div class="concept-box4 point"><p> </p></div>
こんな人にオススメ <div class="concept-box3 recommend"><p> </p></div>
こんな人にはオススメしない <div class="concept-box4 recommend"><p> </p></div>

ちなみに、一番上の行は「カード」とありますが、これは、上述した「あわせて読みたい」のショートコードを作るためのものです。相対パスを記載してそれを選択してクリックすると、ショートコードにしてくれます。

ボタンのラベル 開始タグ 終了タグ
カード [card name= ]

画像につける影をショートコードでなくエディターで見やすくする

悪い点として「ショートコードでの装飾がエディタでわかりづらい」と挙げましたが、これは全て対処はできませんが、一部対処できるものがあります。

一つには画像に影をつけるショートコードです。JINでは次のようにショートコードで画像を囲う必要があります。

これは、記事の文字数も無駄に多くなるし、直感的に分かりづらいです。なので、次のようにエディター上でも影がつくようにしました。

これを実現するためには、style.cssに以下を

editor-style.cssに以下を追記します。

そして、投稿時には、エディター上の画像を選択して、「編集」ボタンを押し、

「画像CSSクラス」欄にshadowと入力します。

すると、エディター上でも以下のように影がついた画像となります。

まとめ

今回、私が使っている子テーマをそのままダウンロードして使って頂いても良かったのですが、カスタマイズの手順を一つ一つなぞって頂くことにより、あなた自身が「こうしたい」と思った点についても応用しやすくなるのでは、と考えてこのような記事にしています。