PC作業するゴリラ
Pocket

【WordPress】_sを使ってテーマを作りました(公式ディレクトリ申請中)という記事から、そろそろ5ヶ月…。

申請しながらバージョンアップを繰り返し、やっとテーマ申請列の1ページ目まで来ることができました。(先頭は9ヶ月待ち…!)

申請時からだいぶ見た目や機能も変わってきたので、再度記事にしてみました。「Modernize」というテーマ名で、今まさに見ているこのブログがそのテーマです。

そういえば、WordCamp Tokyo 2016盛り上がってますね、楽しそうですね。去年の今頃もWCTに行けず、こうやってテーマ作ってブログ書いてた気がする…。来年こそは…!

ブログ向けテーマ

このModernizeはブログに特化したテーマとして作っています。

デザインや動きの面ではモダンなブログサービスである「Medium」や「note」、またいろんなブログを参考にしてみました。

また、Modernizeという名前の通り、新しいものを積極的に取り入れてみてます。新しいものというのは、今風のデザインや新し目の技術的なもの、また個人的にやったことがないものなど。作ってて楽しいと思えるようにしています。

デザインや機能的なこと

試行錯誤しつつ作ってきました。。。

フォント

Appleの「San Francisco」というフォントを使っています。

見やすいフォントってどれだろうと悩みつつ、いろんな方に聞いたり、綺麗なブログのフォント指定を見てみたり、いろいろしながらこのフォントにたどり着きました。

San Franciscoすごく綺麗ですね。日本語と英語が混じっても綺麗です。あと、新しく作られたので使ってみたいという。

ただ、Mac限定ですが。

Apple の新フォント San Francisco の秘密

Medium @Akinori Machino

完全ワンカラム

記事ページだけでなく、一覧ページもサイドメニューを下に落としワンカラムにしています。

最近、ブログサービスの一覧とかでもサイドメニューがなくなってきてるように思います。noteはてぶの一覧もサイドメニューないですし、Prottのブログもワンカラムです。

記事ページは以前からワンカラムにしていましたが、記事一覧でもサイドメニューで人気記事とかカテゴリなどいろいろ見せるよりも新着記事一覧を見せるほうがスッキリしてていいかなと思い完全ワンカラムにしてみました。

ドロワーメニュー

メニューに関してはいろいろやりたいこともあったんですが、結局ドロワーメニューにしました。

ドロワーメニューにも思うことがあって、メニューが開いてる間は画面固定して、スクロールはメニューのところだけにしたほうがいいと思ってます。メニューを開いてスクロールしてるのに、背景のコンテンツまでスクロールするとおかしいですよね。

このあたりの実装方法は何種類かあるんですが、今回は公式テーマ申請ということで、誰がどんな使い方をしても綺麗に動くようにiScrollというライブラリを使っています。

メニューが開いてる間はスクロールを固定し、メニュー項目が増えても、メニューのエリアはスクロールできるようにしています。

ヘッダーをスクロールによって出し入れ

これも最近よく見ます。下にスクロールしているときはコンテンツを読んでいると判断し何も表示しない、上にスクロールしたときは何かを探していると判断し表示する、という理にかなった動きかなと思っています。

Mediumの個別記事ページでも取り入れられてますし、PhotoshopVIPでも同じような仕様になっています。

ヘッダー画像

カスタマイザーでヘッダー画像の指定ができます。表示位置は新着記事一覧ページのヘッダー下のみです。

テーマの元にしている_sにカスタムヘッダーのコードはありますが、そのままでは使えないので若干コードをいじって使えるようにしました。

Social Links Menu

Twenty Sixteenであるような機能です。SNSのURLを指定したら、そのSNSのロゴを表示したリンクリストを表示してくれるものです。表示位置はフッターです。

対応しているサービスは以下です。

  • 500px
  • Codepen
  • Dribbble
  • Facebook
  • Flickr
  • Google
  • GitHub
  • Instagram
  • Linkedin
  • npm
  • Pinterest
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube
  • feed

アイコンの表示はSVGスプライトを使っています。参考にしたテーマはアイコンフォントをよく使っていたので、使ったことないSVGスプライトにしてみました。

更新日表示

細かいですが、ブログでは重要な更新日。いつまでも古い記事のまま放置しておくのはあまり良くないです。定期的に記事を見直しておけば記事の鮮度も保たれて、その更新日を表示することで閲覧している人も安心して記事を読めますよね。

この更新日表示ですが、もともと_sに含まれた機能です。

が、_sのコードでは「get_the_modified_time()」で判定していて、公開時間と編集時間を比較しています。そのため、公開してから気づいた誤字を数秒後に直すだけでも、更新日が表示されてしまいます。

そこで、「get_the_modified_date()」に変更して、時間ではなく公開日と編集日で比較するようにしました。同じ日に編集した場合は更新日は表示されません。

技術的なこと

ソースコードはGitHubで公開しています。

wp-theme-modernize

プルリクもらったりして、今まで触ったことないものを取り入れたりできました。一人じゃ知りえなかったことを知ることができて、ホントにプルリクありがたい!!詳しくはGitHubリポジトリで。

冒頭でも書いたように、使ったことないような新しいものや面白いと思ったものは取り入れたいと思ってます。なんか面白いものあればプルリクお願いします!もちろんダメなところを直してくれるプルリク(マサカリ)も大歓迎です!

さいごに

申請から待ち続けてようやく申請列の一ページ目に来ることができました(まだまだ長いと思いますが)。

ほぼほぼ完成に近づいてはいるので、細かい調整やコードの見直しをしつつ待っておきます。できれば盛り込みたいことはまだあります。

(テーマ申請待ち長いとか愚痴ったら、じゃあお前がレビューやれよって言われそうだから言わない)

Pocket