STINGERっぽさ脱却!自称最強のWordPressテーマがついに始動しました。

たらハコ最強のWordPressテーマ始動!

先週公開した、「ブログのテーマに自分らしさ込めてるぅ?」という記事の最後で「来週には新テーマがお披露目出来るかも」と言いましたが、宣言どおりお披露目できました!

ホントに1年半前は「CSS」って言葉を知らなかったのか自分でも疑いたくなるほど成長できたと思っています。よっひー(@yosiakatsuki)です。

「自称最強」のテーマの作成が一段落しまして、ようやく公開にこぎつけたので、今回のテーマ改善のポイントを紹介していきます。

7人のブログ侍4thシーズン

「自称最強」の訳

自称最強のWordPressテーマとは!

タイトルからして「『自称最強』ってなんだよふざけてるのか」という感じですが…

「自称最強」の理由はただひとつ。今までで一番、最強に頑張って作ったテーマということです。

相対的な「最強」ではないです。何か期待されていたら申し訳ないです。

出来の善し悪しではなくて、「最強に背伸びして作ったよ!」ってことですので、「おおそうか!このレベルまで成長してきたか!関心関心!」という感じに温かい目で見守っていただけるとありがたいです。

中身の薄い「自称最強」の話はこれくらいにして、今回作ったテーマのこだわりポイントを紹介したいと思います。

今回のテーマカスタマイズのこだわりポイント!

たらハコ最強のWordPressテーマ始動!

もしかしたら何か参考になるかもしれない今回のテーマカスタマイズのポイントはこちら!

  1. ベタ塗りを減らしてスッキリした印象に
  2. 「グリッド」を意識した記事一覧に
  3. SNS Count Cacheでページの表示高速化
  4. カスタムフィールドを使った人気記事一覧
  5. 関連記事に兄弟カテゴリも表示
  6. Facebook LikeBoxをPagePluginに変更
  7. その他いろいろとカスタムフィールドでごちゃごちゃやってます

1.ベタ塗りを減らしてスッキリした印象に

べた塗りを減らしてスッキリとシンプルなデザインになったWordPressテーマ

今回のテーマカスタマイズのおおきなテーマは「スッキリ・シンプル」です!

今までは背景色をベタッと塗ってその上に白抜きの文字を書いたリンクや見出しを使っていましたが、うっとおしいのでやめました

なので、SNSボタンもよくある「バイラルメディアのボタン」的なデザインではなくて、背景にアイコンをうっすら表示したスッキリ・クールなSNSボタンに仕上げてみました。

ページャーなど一部ベタ塗りを残している部分もありますが、全体的にスッキリした印象になったんじゃないかなぁと思っています。

2.「グリッド」を意識した記事一覧に

グリッドデザインを意識してみた今回のWordPressテーマ

スマホで見ている場合はぜひPCもしくはタブレットからも見ていただきたいのですが、今回、記事一覧はグリッドデザインを意識してみました。

まぁ。僕はデザイナーではないので、「なんちゃってグリッドデザイン」なのかもしれませんが、ボックスのサイズ感とかいろいろ調整して今の形に収まってます。

こういうグリッドを意識したデザインは「余白の統一感」が大事だと思うのですが、たらハコでは余白が4pxの倍数になるようにしています。(主に使ってるのは16pxと32px)

3.SNS Count Cacheでページの表示高速化

ブログのページ表示高速化

結構前からインストールはしてあった「SNS Count Cache」というプラグイン。

このプラグインを使うと、各SNSのシェア数をカスタムフィールドに保存してくれます。

そのカスタムフィールドの値をページ表示の時に使えば各SNSのスクリプトを読み込む必要がなくなって表示高速化出来る!

というものです。

「ちょっとは変わるかな?」くらいに思っていましたが。たらハコでは劇的に表示速度が変わったようです。結構感動的。

phpをいじるので実装はややハードル高いですが、カスタマイズ例を記事にしたいとも思っています。乞うご期待。

ページ高速化に関して、テーマを変えてからGoogleのPageSpeed Insightsで「ココ直せよ」と言われてるのが画像中心なので、よくアクセスされるページから順に対応していきます。

4.カスタムフィールドを使った人気記事

WordPressのカスタムフィールドを使ったランキング

いままでたらハコではWordPress Popular Postを使っていましたが、どうも僕の作るテーマと相性が悪いのか旧バージョンを使わざるを得ない状況でした。

「コレじゃぁいかん!」と半年前くらいから記事の表示回数をカスタムフィールドに保存するようなカスタマイズをしてWPP廃止の準備をしてきました。

ある程度データが溜まったので今回WPPは廃止してWordPressの関数でランキング表示するようにしました。

今のところ、全期間のランキングと日別ランキングは作れるようにしてありますが、週別もなんとか出来そうなのでそのうち改造します。

5.関連記事に兄弟カテゴリも表示

兄弟カテゴリも表示

これはSTINGERのカスタマイズの部類にはいるかもしれません(一応今回のテーマもベースはSTINGER5です)

個別記事の下の方に「関連記事」として、同じカテゴリの記事をランダム表示するようになっているのですが、その表示対象のカテゴリに兄弟カテゴリも含めました。

カテゴリの設定の仕方によってはこのカスタマイズが役に立つかもしれません。

Facebook LikeBoxをPagePluginに変更

Facebook LikeBoxをPagePluginに変更

FacebookのLike Boxは2015年6月23日以降は動かなくなるのをご存知ですか?

僕も上の記事を読んで知ったのですが、期日も迫っているので「えいやぁっ」っと入れ替えました。

ただ、レスポンシブ表示が思うようにいかなくてモヤモヤしてるんですよね…

対処方法があったら教えて欲しいです…

まだLike Boxを使っている場合は早めに交換を!

7.その他いろいろとカスタムフィールドでごちゃごちゃやってます

WordPressのカスタムフィールドを使って色々カスタマイズ

その他、目に見えない裏側の改造をいろいろカスタムフィールドを使ってやってます。

カスタムフィールドを使ってnoindex,followのメタタグを制御したり。

カスタムフィールドで「その記事だけCSSを読み込ませる」カスタマイズをしたり。

こちらも徐々に記事に起こしていきますので気になる方はぜひたらハコを購読しておいて下さい。

たらハコ過去のアップデート

ちなみに、たらハコは過去に大きなテーマ改善を3回ほど行っていて、今回が4回目のメジャーアップデートになります。過去の変更点はこちら↓

どうでもいいことですが、今回のテーマの名前は「tarahako_stinger5_v2_x」となりました。

やる気出ます!

これからもたらハコをよろしくお願いします!

たらハコ最強のWordPressテーマ始動!

ガツッとテーマをカスタマイズして公開までしましたが、まだまだやりたいことは残してあるので、マイナーアップデートを繰り返していきたいと思います!

もしたらハコに興味を持っていただけましたら、ぜひ購読をお願いします!

よっしーのひとこと

よっひー

まぁ、こういう記事って最後に参考書籍のリンクを張ったりするもんですけど、僕はカスタマイズ系の書籍買ってないので何が参考になるかよくわからんです。

という苦労自慢です。

いやいや、一応伝えたいこととしては、「本なんか読まなくたってWEBを検索し漁ってればなんとかカスタマイズ出来るようになるよ」ってことです。

ただ、ものすごい「やる気」と「コード慣れ」が必要になるので、「無理だ!」と思ったら人に聞くなり本を買ったほうがスタートしやすいと思います。

ではまた。

明日のブログ侍は?

明日の七人のブログ侍は木曜日担当、NORY* NOTEのノリハナ(@infnity_87_)さんです!お楽しみに!

七人のブログ侍とは

「七人のブログ侍」とは、七人のブロガーが担当曜日を決め、日替わりで更新していくリレー企画!

他の侍の記事も是非読んでみてください!

七人のブログ侍NAVERまとめができました!

よっしーの他の「七人のブログ侍」記事も見てね!

7人のブログ侍4thシーズン