俺、オリジナルのWordPressテーマを自作します１

よこのじ（@yokonoji_work）です。

この記事は「俺、オリジナルのWordPressテーマを自作します」シリーズの第１回です。タイトルのとおりWordPressのテーマを作りますが、テーマを作った経験がないところからのスタートです。テーマを作成するための環境構築やデザインのことなど、周辺知識を取り込みながら進めていきたいと思います。

テーマ名は「Jonoky Blog（ジョノキーブログ）」となる予定です。yokonojiをひっくり返してijonokoy、ちょっとイジってJonoky（ジョノキー）と安易な感じで特に意味はないですが。

スタート時点のレベル感
実装したい機能・技術・デザイン
参考にするサイト

スタート時点のレベル感

HTML／CSSでサイトを作ったことがある
JavaScript／jQueryは調べれば機能実装できる
PHPはPaizaラーニングで入門編を学んだ
WordPressの運営経験があり、プラグイン導入などはできる
「wordpress テーマ作成」で検索して、たぶんいけると思った

実装したい機能・技術・デザイン

実現できるかは別として、現時点で実現したいことの一覧を書き出します。全体的な方針としては、シンプル、スタイリッシュ、高速、書くことに集中できることを大切にしていきます。

読みやすい美しいフォント
標準フォントか？Webフォントか？
プログラムのソースコードが書きやすく、見やすい
ソースコード用のフォントは等幅なものが良い。
Qiitaはrougeでシンタックスハイライトさせているようです。元はPygments.rb
フォントアイコンの使用
簡単な動きも取り入れて、目立たせたい箇所をポイント的に装飾する。
高速なページ表示
非同期読み込み（defer, async）、画像やCSSの遅延読み込み、ファーストビューとその他CSSの分割、CDN、Base64などの技術を駆使する（サーバー側ではgzip圧縮してほしい）。
SEO対策
まだこの分野の知識はないので調査を行います。内部リンク（最近の投稿、人気記事）、タイトル・ディスクリプションなどの適切な設定を行う。不人気記事とかも表示させてみたい。
SNS連携
シェアボタンや自身のアカウントへのアクセスボタンを設置する。
問い合わせフォーム
標準搭載して、プラグインなしで使えるようにする。
Rinker、WPアソシエイトのようなAmazon・楽天の商品リンクを表示
標準機能にできるのであれば、個人的にはあるとうれしい。
画像の自動縮小
画像をアップロードしたときに元のサイズとは別に、テーマで表示させるのに必要な最小サイズに縮小した画像もアップロードしてそちらを使うようにできたらページ表示が速くなって良さそうです。
なめらかなマウススクロール
マウススクロールの始動と停止に少しのラグを持たせると、ちょっとだけリッチな使用感になる。
リンクカード
URLを貼るだけでリンクカードが表示されるが、標準のリンクカードは大きすぎて使いたくない。スマートなリンクカードが表示されるようにしたい。
目次の表示
プラグインなしで目次を表示させる。
画像のaltに自動で画像ファイル名を入れる
altはSEO対策として意味があるもののようですので、アップロードすると「代替テキスト」に「タイトル」を自動でコピーして入力できたらと考えています。alt属性に直接タイトルを記述する方法でも良いでしょう。
検索ボックスの位置
検索ボックスはヘッダー部分にあると使い勝手が良さそう（参考）。しかし、デザイン上避けたい場合もあるかもしれないので、サイドバーへの設置も行えるように。
広告スペースの設置
記事上・下への広告挿入、ダブルレクタングルなどを簡単に行えるようにしたい。
カテゴリー選択は１つ
SEO対策としてはカテゴリー設定は１記事に１つであるべきなので、複数選択できないようにする。
コメント機能
個人的には記事へのコメント機能はなくても良いと考えていますので、コメント機能なしを前提としたデザインとしたい。
各記事でcssやjsを効かせる
レスポンシブ対応
固定サイドバー
「リンクを新しいタブで開く」がデフォルト

その他、「素人がPythonでWebスクレイピングを実装する８」でWebスクレイピングができるようになりましたので、Jonoky Blogを使ってくれて投稿された記事をスクレイピングして、各ブログから集まった記事を外部サイトで紹介することもできそうです。スクレイピング対象サイトのURLが必要なので登録みたいなことが必要になりそうですが。テーマが同じだとスクレイピングしやすいので、こういうサービスもありかなという考えもあります。