シンプルかつレスポンシブなWordPressテーマを作ってみた

WordPressテーマを初めて作ってみました。

ずっとワンカラムでシンプルなテーマがないかなと思いLessなどのテーマを使用していましたが、一念発起でオリジナルのテーマを作りました。

reontheme

作り方などは別の記事にして、
こだわった点は

  • ワンカラムであること
  • レスポンシブに対応していること

です。

レスポンシブ対応について

レスポンシブ対応は、SkeletonというCSSフレームワークを使っています。
比べてみると分かりますが、ほとんど変更せず使用しています。

Google Map の埋め込み時は、div で囲み、クラス名ggmapを付けてください。

SNSアイコンについて

SNSのアイコンについては、Perfect Iconsというもので作っています。

申し訳ないのですが、facebookはogpの設定をしていないので、ページではなくサイト全体がシェアされてしまう状態です、

Twitterは、single.phpファイルののyour-twitter-idの箇所を変更して使用してください(functions.phpに書くことで対応できればと考えます‥。でもテーマファイルアップデートするときどうしよ)

注意したところについて

  • SES対策
    今回の目標として、テーマを作ることがあったので、SEO対策などはあまり気にせず作りました。
  • テーマを公開するために
    WordPressテーマ検査基準のユニットテストを使用して見た目がおかしいところがないかどうか対応しています。

    他にもテーマファイルを適用する前にテストするプラグイン、Theme Checkなども使用しています。
    (余談ですが、テーマを公式で配布したい場合は、必須のcssクラス名などあることを今回初めて知りました‥)

    ユニットテストも、テーマチェックプラグインも公式でテーマファイルを配布するときに使用するものですが、今回はあえて使用しました。

    参考 : 信頼性の高いWordPressテーマを作るためのTheme-Checkのすすめ

  • 既存のテーマを参考にした
    WordPressにデフォルトにインストールされているもの、今まで使用していたものを参考にしました。
    タイトルタグの書き方、条件分岐の仕方などテーマファイルによって違いがあり非常に参考になりました。

これから対応したい点は

  • table要素のデザイン
  • ページ下部にあるタグのデザイン
  • トップページのナビゲーション
  • バンくずリストの実装
  • フォントサイズの調整
  • twitter cardの実装
  • facebook ogpの実装
  • google analytics コードの実装
  • 独自レスポンシブ対応の実装

になります。
まだ、実装が足りてない部分があるのが対応して行きたいと思います。
google analytics をテンプレートファイルとして分離し、functins.php にアナリディクスのコードを書くだけで実装出来るようにしたいですね。

もっとこうした方が良いなどあったら、教えてください