WKJCoderはポートフォリオ用に作成したWebサイトです。
URL : https://wkjcoder.com/
WordPress
WKJCoderはWordPressを利用して作成しています。テーマはデザイン・機能共にオリジナルで1から作成しています。
デザイン
デザイン作成はPhotoshopを利用しています。過度な装飾をせず、シンプルで見やすく整ったデザインを目指しました。メインカラーは緑がかったターコイズ色を選択。トップページのキャッチコピーであるDESIGN & CODINGは仕事の分野を分かりやすく端的に表しています。
コーディング
コーディングはVSCodeを使用しました。CSSは効率的かつ保守性の高いSASSを利用して書いています。JavaScriptはCSSアニメーションやボタン機能の補助として使っています。
JavaScriptを用いたフィルター機能
作品一覧ページではJavaScriptとCSSを用いて作品検索用のフィルター機能を実装しています。フィルターはカテゴリーごとに分かれており、ボタンをクリックすると選択したカテゴリに該当する作品が表示されます。
スキル紹介にカスタム投稿タイプを利用
自己紹介ページではスキルデータの設定にWordPressの「カスタム投稿タイプ」を利用しました。必要な情報をWordPressのエディタ側で入力しておくと、自動で整形されたHTMLが出力れます。こうすることでコーディングの知識がない人でもサイトの編集が可能になります。
カスタム投稿タイプは以下のような状況で役立ちます。
- ブログやお知らせ等の記事と種類(投稿タイプ)を分けたいとき
- 検索にかからない投稿データとして扱いたいとき
- 独自項目を大量に設定する必要があるとき
今回の例では検索に引っかかる必要のない「スキル情報」をカスタム投稿タイプで作成しています。「年数」の更新が面倒なので、予め設定した「開始年」から自動計算するようにして更新の手間を省いています。
テーマの機能
見た目では分かりませんが、WKJCoderの内部には様々な機能を実装しています。
- WordPressが自動生成する画像サイズの制御
- SEO関連(title, noindex, meta description等のメタタグの出力)
- テーマ独自の管理画面
- WordPress管理画面の拡張
- 独自のパターンブロック・スタイルの追加
- 独自ウィジェットの追加
- Resource Hints(dns-prefetch, preconnect)の出力
これらはプラグインではなく自前の機能です。過去の資産(以前に作成したWordPressテーマの機能)を利用しているので実装にそれほど時間はかかっていません。目的に合った機能を効率的に再利用しています。