【WordPress】スワローを導入してカスタマイズしたこと

3月の記事をリライトです。

アルバトロスで運営していたサイトに新しいWordPressテーマ「スワロー」を導入したときの記録です。



スワローの雑感

OPENCAGEさんのテーマが好きで、全て持っています。

ハミングバードをカスタムしていることが多く、ストークはあまり使っていません。

ストークはカッコイイのですが、見ただけでストーク使ってることがわかってしまうのと、重かったからです。

さて今回のスワローはといいますと~

いいところ

  1. とにかくスマホで見るとカッコイイ
  2. ショートコードのボックスコードが増えた
  3. 前作のストークよりも動きが軽い

導入してみてちょっと気になるところ

  1. YARPP(関連記事プラグイン)がデモサイトのようにうまく表示されない
  2. アルバトロスと互換性が少しあるせいで、スワローにしてから戻るとアルバトロスが崩れることがある
  3. 自分のサイトで見ると本文のフォントが大きすぎるように感じる

スワローの関連記事の見た目をなんとかしたい

事件が起きるまでの流れ

インストール

子テーマを導入

ウィジェットで関連記事を配置しようとする

関連記事(YARPP)のテンプレートが6種類もあることに気付く

デモにあったような外見(カード型?)がないことに気付く

ストークの関連記事を真似ることにした

実は、アルバトロス・ハミングバード・ストークにはYARPPのテンプレートが1つだけで、名前が「yarpp-template-relative.php」。

アルバトロス・ハミングバード・ストークにて相性のいいプラグインをご紹介いたします。Yet Another Related Posts Plugin (以下、YARPP)のカスタムテンプレートの設定方法をご紹介します。 実...

今回はなんと

  1. yarpp-template-example.php
  2. yarpp-template-list.php
  3. yarpp-template-multilingual.php
  4. yarpp-template-photoblog.php
  5. yarpp-template-random.php
  6. yarpp-template-thumbnail.php

6種類もありますが、relativeがあ……

relativeがありません……?!!

ええ、「テーマの編集」から「swallow」を覗いてみると、「yarpp-template-relative.php」がありませんでした。

というわけで、前作ストークの関連記事のテンプレートを借りてくることにします。


FTPソフトでスワローの子テーマへ「yarpp-template-relative.php」をアップロード。

これでストークと同じ外見になりましたが、CSS的にあちこち問題が残るので、marginなどを調整して終了です。

(RECOMMENDと下の一行が綺麗に表示されないなど。)

私の場合は、後述の通り、関連記事をYARPPのウィジェットを使って「記事コンテンツの下」に入れており、

h2やliなど色々entry-contentの影響が出てしまうので調整しています。

YARPPウィジェットを記事コンテンツの下に入れるときのCSS

/* Related(YARPP) */

.single .related-box .h_ttl{font-size: 12px;text-align: left;margin: 0;padding: 1em 1em;}
.single .related-box .h_ttl span{font-size: 1.8em;margin-right: 0.5em;position:relative;bottom:-2px;font-weight:normal;}
.related-post ul li:before{ content: none;}
.related-box h2{ background-color: #FFFFFF; color: #3E3E3E;}

コレをカスタマイズ>追加CSSへ入れる。

とりあえずこれだけ入れておけば、スワロー本文の影響を受けてしまったh2とliの点を直すことができます。

もっと全部直したい場合はもっと書く必要がありますが、私は別に記事タイトルの部分が赤線で目立ってもいいかな、むしろカワイイかも?と思ったのでそのままにしてあります。

その他 気になる点の調整

アルバトロスと互換性が少しあるせいで、スワローにしてから戻るとアルバトロスが崩れることがある

スマホのグローバルナビゲーションの問題です。

アルバトロスではスマホにグローバルナビゲーションがなかったのですが、スワローではむしろコレが魅力の一つです。

で、スワローでスマホ用のナビゲーションをセットして戻ると、アルバトロスの右上のハンバーガーメニューのあたりがゴチャゴチャして大変なことになっているではありませんか。

スマホ用のグローバルナビゲーションを無しにしたらすっきりと綺麗になりましたが、スワローに戻るとまたセットしなければいけません。

同じopencageのテーマだからこそ共通設定が使われるのですが、こういうこともあるようです。


自分のサイトで見ると本文のフォントが大きすぎるように感じる

デモサイトで見た時はあまり気にならなかったけど、

自分のサイト(ここじゃなくて違うところ)は文字情報量が多いので、フォントが大きくて読みづらく感じました。

そこで、フォントサイズを確認すると、スワローは103%ではありませんか~。

/*********************
GENERAL STYLES
*********************/
body {
(中略)
font-size: 103%;

アルバトロスくらいの本文の文字サイズが好みなので、適当に目で見てサイズを小さくしていきました。

body { font-size: 98%;}

これで納得です。

おわりに

YARPPのテンプレートの件は私の気のせいだったりするのだろうか…?

とりあえず解決したのでよしとします!