専門学校の授業で、WordPressの自作テーマ(シミズのデザインブログ)を作りました。
かなり日数がかかり、大変だったので感想を書こうと思います。
目次
夏休みにHTML/CSSでコーディング
あらかじめ作成しておいたデザインを元に、夏休みにHTML/CSSでコーディングをしました。
日数は、1週間もかからなかったと思います。
CSSの::selection（選択したテキストの色を変える）や:hover(ボタンなどホバーした要素の色を変える)という疑似要素や擬似クラスを使い、細部までこだわりました。
また、なるべくきれいなコードになるようにコメントを追加して分かりやすくしたり、div(グループ分けをするタグ)を無駄に使いすぎない等工夫をしました。
9月の集中授業でWordPress化
9月中旬〜下旬にかけて、HTML/CSSのWordPress化を行いました。
分からない部分も多くありましたが、先生に聞くなどし解決することができました。自力で調べて解決できたときは達成感が凄かったです。
PHPを初めて触ったのですが、本格的なプログラミングのコードという感じで難しかったです。コードの意味が理解できたときは嬉しかったです。
実装に時間がかかった箇所はサイドバーのプロフィールです。（スマホ版だと一番下にあるやつです）最初はPHPでプロフィール情報を取得する方法でやっていたのですが、アバターの取得がうまくいかなかったため、PHPでウィジェットを有効化してダッシュボード上で編集、CSSで装飾するという方法に落ち着きました。ウィジェットの追加方法はGoogleで「WordPress ウィジェット テンプレート」等で検索すれば出てくると思います。
ページ上部のナビ(メインカテゴリー)実装も大変でした。こちらもPHPをいじってメニューを有効化しました。Googleで「WordPress メニュー PHP」等と検索して出てきた記事を参考に実装しました。インターネットには感謝しかないです…🙏
使用したプラグイン
Table of Contents Plus
目次を生成するプラグインです。初期デザインは左寄りなのとデザインもシンプルなので、CSSで装飾することをおすすめします。
私は「ダッシュボード」→「設定」→「TOC+」(Table of Contents Plusを追加しないと出てきません)からプレゼンテーションをカスタムにして、CSSで「div #toc_container.no_bullets」を指定して目次にCSSを反映させました。タグ、ID、クラス名全部書かないと上書きされず反映されないです。
記事ページ下にシェアボタンを追加するプラグインです。下記の画像のように、入れたいサービスのシェアボタンを一覧から自由に選ぶことができます。
アイコンスタイルからbackgroundやforegroundをcustomに変更して、アイコンのサイズや色も変えることができます。あまり変な色にするとアイコンの役目を果たさなくなるのでご注意ください。
Akismet
サイトをスパムから守ってくれるプラグインです。本当に守ってくれるのか見ものです。
パンくずリスト(記事上部のナビゲーション)を追加するプラグインです。
WordPress化を終えた感想
最初は授業についていくのに必死でした。置いていかれたらどうしようと不安でしたが納得のいくブログを完成させることができてよかったです。
これから投稿する記事の内容についてですが、学校やデザインの記事だけでなく、イラストなど趣味についての記事も執筆していこうと思います。
ここまで見てくださりありがとうございました！
コメント
テスト