オリジナルWordPressテーマが爆誕しました！🎉

みなさん、こんにちは！ななです！

前回のブログで「WordPressテーマを自作したらいいコトだらけだった♪」ってお話したの、覚えてますか〜？ 実はね、着々と制作を進めていて…ついに！オリジナルWordPressテーマが完成しましたー！ぱちぱちぱち👏

自分で言うのもなんだけど、これが本当に使いやすくて、見るたびにニヤニヤしちゃうんです。今日は、私がどんなテーマを作ったのか、ちょっとだけお披露目しちゃいますね！

テーマの名前は「7note Original Theme」！

はい、そのままですが（笑）、このブログ「7note」のために作った、世界に一つだけのオリジナルテーマです！ 自分だけの名前がついたテーマって、なんだか愛着が湧きまくりです♪

こだわりポイントをちょこっと紹介！

どんなところにこだわって作ったのか、いくつか紹介させてください！

1. シンプルisベスト！余計なものをそぎ落とした「軽さ」！

前の記事でも話したけど、サイトの表示速度ってすっごく大事！だから、このテーマはとにかく「シンプルさ」にこだわりました。できるだけプラグインに頼らず、本当に必要な機能だけをコードで書き込むようにしたんです。

functions.phpで、WordPressの基本設定から、パンくずリストやグローバルナビ、目次など必要な機能はきちんと実装しつつ、サイトが重くならないように心がけました。そのおかげで、サックサク動く快適なブログになったと自負してます！読者さんもストレスなく記事を読めるはず！

2. スッキリ見やすいデザイン！

ブログって、読みやすいデザインが一番ですよね。ごちゃごちゃした要素は極力排除して、記事の内容が一番引き立つようなスッキリとしたレイアウトにしました。

トップページや個別記事ページ、固定ページも、読者さんが記事を読み進めやすいように、配置やフォントサイズなんかを細かく調整しました。写真が大きく表示されたり、文章が読みやすいように行間を調整したり…地味だけど、こういうこだわりが大事なんです！

3. 基本機能はしっかり完備！

「自作テーマって、機能面で不便じゃないの？」って思う人もいるかもしれません。でも大丈夫！

「7note Original Theme」で作成したファイルはたったこれだけ！

おもな構成ファイル

css/editor-style.css記事を編集する画面に適用するスタイルシート。
css/style.cssテーマに適用するスタイルシート。
/jsテーマで使用する各種機能のJavaScriptファイルが格納されたフォルダ。いったんここでは中身は割愛。
style.cssテーマに関する概要を記載するファイル。
functions.phpテーマで使用する各種機能を実現するための処理が書かれたファイル。
index.phpトップページと記事一覧ページの表示内容が書かれたファイル。
header.phpヘッダの表示内容が書かれたファイル。
footer.phpフッターの表示内容が書かれたファイル。
single.php投稿記事の表示内容が書かれたファイル。
page.php固定記事の表示内容が書かれたファイル。
404.php「ページが見つかりません」のページの表示内容が書かれたファイル。

そして、以下の機能を実装しました！

機能一覧

ユーザビリティ1カラムレイアウトスマホ、パソコンでの見た目の違いが少なくなるよう、1カラムのシンプルレイアウトにしました。
ナビゲーションメニュースマホ、パソコンともメニューはハンバーガーメニュー内に配置し、操作性を統一しました。
ページネーション記事一覧ページが複数ページに増えたときのページング機能。スマホとパソコンでそれぞれ操作しやすいように表示を変えるようにしました。
パンくずリスト読者さんが今表示している記事のサイト内での位置が分かりやすいようにしました。
関連記事の表示記事の終わりに関連記事を表示するようにしました。
目次の自動挿入記事の構成を解析して目次を自動的に作成し、記事内に挿入するようにしました。
ブログカードの挿入記事の中でサイト内の別記事や外部サイトを紹介するときに、リンク先のアイキャッチやサムネイル付きのブログカードを表示するようにしました。
アイキャッチの自動挿入固定ページと投稿記事の冒頭に大きな画像でアイキャッチを表示するようにしました。記事一覧のサムネイルにもなります。
蛍光マーカーの挿入蛍光ペンでラインを引いたようなデザインで、記事内の文章の一部を目立たせます。投稿記事の編集画面で簡単に蛍光ペンでラインを引けるようにしました。
コードブロックの挿入HTMLやCSS、PHPやJavaScriptのコードを見やすく記事内で紹介できるようにしました。
投稿記事のソート順変更更新した記事を記事一覧ページで優先して上位表示されるようにしました。
レスポンスSVGファイル対応ベクター画像をWordPressのロゴ画像などに使うためアップロードできるようにしました。
画像タグにsrcsetとsizes属性を追加画面サイズに応じて適切なサイズの画像ファイルを読み込むようにしました。
不要アクションとスクリプトの削除WordPress標準で読み込まれるアクション処理やスクリプトのうち、テーマファイル内で使用しないものは読み込まないようにして表示を軽くしました。
画像の最適化(*)画像ファイルの見た目を損なわない程度に最適化してサイズを軽くしました。
キャッシュ機能(*)ページのキャッシュ機能を最適化し、ページの表示速度を向上しました。
読み込みファイルの結合・圧縮(*)HTMやCSSファイル、JSファイルを結合・圧縮してファイルの読み込みを効率化し、ページの表示速度を向上しました。
SEO関連OGPタグと標準metaタグ検索サイトの検索結果やSNSに共有されたときに表示される内容が意図したものになるように整備しました。
構造化データ出力検索サイトが正しくサイトの内容を理解できるように、構造化データを出力するようにしました。
タイトル表示変更ブラウザのタイトルに表示される内容をWordPress標準の内容からカスタマイズしました。
サイトマップ作成(*)検索サイトが参照するサイトマップを自動的に作成、送信します。
リダイレクト機能(*)パーマリンクを変更したときに変更先に自動でリダイレクトするようにしました。
管理者向け機能バージョンパラメータの置換WordPressのバージョンをソース上から秘匿しました。また、テーマファイルの更新時にキャッシュの影響で発生するトラブルが起きにくくしています。
本番サイト判定アクセス解析や広告表示用のスクリプトは本番サイトのみで有効化されるようにし、テストサイト上では読み込まないようにしました。
最終更新日時変更機能誤字の修正など軽微な更新で最終更新日時が変更されないようにできる機能を実装しました。
リビジョン削除機能新規投稿の公開時に自動保存されたリビジョンを削除する機能を実装しました。
自動保存の間隔変更自動保存の間隔をWordPress標準の設定から変更しました。
ログイン画面のロゴ変更管理者用のダッシュボードにログインする際に、サイトのロゴ画像を表示するようにしました。
画像の置換機能(*)投稿記事に使用した画像をファイル名そのまま他の画像に差し替えられるようにしました。
テーブル作成機能(*)投稿記事内に含まれるテーブルを柔軟に作成できるようにしました。
不正アクセス対策(*)不正ログインなどからサイトを守るための各種対策をしました。

(*)はプラグインを導入して実現しています。それ以外はプラグインを使わずにテーマの中で実現しています！

Webサイト制作の基本を学びながら、ちゃんと使えるテーマが作れて、私も大満足♪

まとめ

今回は私のオリジナルWordPressテーマ「7note Original Theme」のお披露目でした！

自分で手を動かしてコードを書くのは大変なこともあるけど、その分、完成した時の達成感は格別です！ そして何より、自分の理想を形にできるのが本当に楽しい！

WordPressを使っていて、「もっとこうしたい！」ってこだわりがある人は、ぜひテーマ自作に挑戦してみてくださいね！ ななもまだまだ勉強中だけど、これからもどんどんパワーアップさせていきたいな！

また次回のブログもお楽しみに〜！