WordPressの公式テーマディレクトリでmodernizeが公開されました。


_sベースのmodernizeというWordPressのテーマが公式ディレクトリで公開されました。今見ているこのブログがそのテーマを使っています。

以前作ったWillowというテーマに続き二つ目です。5月頃に申請を出し、約半年で登録となりました。Live状態になってから、テーマディレクトリに表示されるまで一週間ほどかかりましたが、アプデ申請した分も取り込んで表示してくれたのでよかったです。

もくじ
  1. コンセプトなど
  2. 特徴
  3. 作った動機
  4. 作った感想
  5. 今後やりたいこと

コンセプトなど

テーマ名は「modernize」で日本語訳したら「現代風にする」とかそんな感じで、要するに今風のテーマが作りたくてこの名前にしました（注:後付けの理由だったりする）。Mediumやnote、g.o.a.tなど最近流行りのブログサービスを参考にしつつ作りました。

また、作ってる自分が楽しいと思えるように、新し目の技術や個人的に使ったことない技術などをどんどん取り入れるようにしてます。例えば、flexbox使ったり、SassじゃなくてPostCSSを使ってみたり、webpackやTravisを取り入れてみたり。普段の仕事ではいろいろ制限されていたところも好き勝手やりました。

特徴

後々、このブログでまとめたいと思ってますが、ざっとこんな感じです。

ブログ向けテーマ

最近、多いワンカラムにしています。記事に集中できていいですよね。記事一覧ページでもサイドメニューは下に落としてワンカラムにしました。また、カスタマイズ前提で、装飾はほとんどやってません。

テーマカスタマイザー

カスタマイザーでメインビジュアルを設定したり、ソーシャルリンクメニューを追加できます。今後もちょいちょい増やしていきたい。

レスポンシブデザイン

レスポンシブデザインで、当然ですがいろんな画面サイズにも対応しています。

テンプレート

固定ページのテンプレートを2つだけ用意しています。

Social Links Menu

SNSアカウントのURLを指定すとフッターにSNSメニューを追加してくれます。Twentysixteenとかにあるやつです。

対応サービスはこちら

  • 500px

  • CODEPEN

  • dribbble

  • Facebook

  • flickr

  • Google+

  • GitHub

  • Instagram

  • Linkedin

  • npm

  • Pintarest

  • Tumblr

  • Twitter

  • vimeo

  • WordPress

  • YouTube

  • feed

SVG スプライト

SNSのロゴやアイコンはSVGスプライトを使っています。SVGなので拡大しても綺麗。

更新日表示

ブログで重要な公開日と更新日。記事を書いた日付と異なる日付に記事を更新すると、記事タイトル直下に公開日と共に更新日も表示します。

ヘッダーの動き

Mediumなどで使われている上下スクロールに応じてヘッダーを出し入れする動きを取り入れています。

ドロワーメニュー

メニューが開いている間はコンテンツのスクロールが固定されるようにしています。メニューが多い場合は、メニューのエリアだけスクロールします。

San Francisco

フォントはApple社が作った、San Franciscoを使っています。Mac限定ですが。

作った動機

作った動機はすっごいしょうもない理由で、発表の最後が締まらないからどうにかしたいなと思ったからです。

どういうことかというと今年のWordCamp Kansaiで「これからWordPressを頑張りたい人へ。子テーマを作って公式テーマディレクトリに登録しよう！」というタイトルで登壇させてもらったときの話で、「去年子テーマで公式テーマディレクトリに登録されました」というのと、「これからWordPress頑張りたい人は子テーマからやるといいよ」という内容で話をしてきました。

その発表内容考えてる時に、最後の締めで初心者は子テーマからやるといいですよで終わると、なんか上から目線というか何というか自分もそんな語れるほどすごい人じゃないしとかいろいろ考えた結果、次のステップとして_sでテーマ作って申請してますみたいな締め方したら、まだ自分も頑張ってるところでみなさんと同じですよ的ないい感じの終わり方になるかなと思って、実際に_sベースでテーマを作り始めて申請しました。

そのせいか、WordCampの発表が終わると目的達成したので力が抜けて、しばらく放置してしまいましたが、プルリクもらったりするうちにモチベーションを取り戻し何とか公開までできました（まだ直したいとこはある

作った感想

作ってる途中でモチベーション下がってましたが、環境周りで自分が使ったことない技術のプルリクいただいたりアドバイスもらったりして、そこからまたモチベーション上がって行きました。プルリクもらえるって非常にありがたいです。そのおかげで、一人じゃまだまだ到底手を出せていなかったものなどを使えるようになりました。

最初はだた発表のために作り始めて、そのあとも惰性でWordPressのテーマを作っている状況でしたが、プルリクもらううちにWordPress以外のいろんな技術を学ぶことができて、結果的に作ってよかったなと思ってます。

今までプルリクもらうことはほとんどありませんでしたが、コードを公開するってすごくいいことだなと感じることができました。コードを公開してると、ぐいっとレベルを上げてくれる誰かがいるかもしれないですよ。

今後やりたいこと

今後はテーマの修正はするのはもちろん、機能追加もやっていきたいです。

機能追加についてですが、どんな機能追加したらいいかを考えたとき、最初は自分で考えるより誰かのテーマのコードを見ていいところを取り入れるのがいいのかなと思いました。このテーマを作ってる最中もいろんなテーマを見て、コードを参考にしました。特に公式ディレクトリですでに公開されてる or 公開しようとしてるテーマはすごく参考になります。

なので、その機能追加やコードの勉強一貫で、今後テーマレビューもやってみようかなと考えてます。いろいろ落ち着いてからですが。

いろんなテーマをみてると、「こんな機能入れてるんだ」とか「こういう書き方もあるんだ」など勉強になるし、おもしろいアイディアのテーマがあってけっこう楽しいです。

そういえば、ちょうどいいタイミングでGoogle先生の翻訳機能がめちゃくちゃ性能上がったという話題がありましたね。

ただ、

という話もありますが、このツイートのリプライを見ていると、日→英、英→日どちらも性能あがっているようです。英語ができない人にとっては、レビューするときの英語のハードルが高かったりするので、このタイミングでGoogle翻訳の性能があがったのはすごく嬉しい。（テーマの特徴もちゃんと書こう…）

レビューは「Theme Review Team」ページの右メニューの下の方にある「Review a Theme」から誰でもできます。（押したら確認なしで即レビュー参加になるのはそのままなのかな…。今は確認ページが表示されるようになってるそうです！）

さいごに

よかったらテーマ使ってみてください、プルリクも待っております。冒頭で書いたように作ってて楽しかったらいいなと思ってる以外たいしたこだわりないので、こうやったらもっといいぞ・おもろいぞっていうのをプルリクくれるとありがたいです。あと、WordPress、GitHubどちらでもスターもらえると嬉しいです（媚

Download
GitHub