現在WordPessテーマを作成中ですが、手順としては以下となります。
- まずはコーディング（HTML/CSS+jQuery）でサイトを作る。
- それにPHPのプログラムを書いてワードプレスのテーマ化する（管理画面から画像やテキストを変えられたり、投稿をできるようにする）。
そしてコーディングが完了しました。
それがこちらです↓
以前WordPressテーマ「Lightning」で作ったカフェサイトをベースに作りました。
そして「GitHub Pages」というもので無料で公開したものです。
サーバーを借りなくても、GitHubでは無料でサイトを複数公開できるんです。
ただしHTML、CSS、JavaScript（jQuery）ファイルのみ。PHPファイルはできません。
みなさんもぜひ活用してみてください。
やり方はこちら↓
さて、どんな感じで作ったのかを書いていきます。
メインビジュアルは画面いっぱいに広がる、画像がフワッと切り替わるスライダー。
見てもらえばわかりますが、メインビジュアルは画面いっぱいに広がる、画像がフワッと切り替わるスライダーになっています。
こういうサイト、以前から作ってみたかったんですよね。
画面いっぱいの高さにするにはCSSでheight:vh;とするとできます。vhとはveiwport heightの略です。
スライダーはCSSだけで作ってます。CSSすごいですよね。
参考にしたサイト↓
このコードをすこしいじってます。
モバイルファーストのレスポンシブデザイン。
レスポンシブデザインなのはもちろんですが、スマホ画面を先に作ったいわゆる「モバイルファースト」となっています。
スマホ画面を先に作り後でパソコン画面を作るので、読み込まれるCSSがスマホ画面のほうが少なく、スマホ画面にやさしい作りです。
レスポンシブデザインを作るコツ。
レスポンシブデザインをコーディングで作るコツは、
スマホ画面を全て作ってからパソコン画面を作る（もしくはその逆）のではなく、各セクションごとにスマホ画面→パソコン画面と、こまめに作っていくことです。
なぜ一気にスマホ画面（もしくはパソコン画面）を作ってはいけないかというと、先にすべて作ってしまうと、後で修正点があったときに修正箇所をみつけるのが大変だからです。
例えば横幅がはみだしていたりしたら、「いったいどこの要素がはみ出しているんだろう？」とすべてのセクションをチェックすることになってしまいます。
WordPressテーマ制作でもリセットCSSは必要？
最初につまずいたのは、「WordPressテーマ制作においてもリセットCSSって必要なのかな？」という点です。
普通のコーディンにおいては必要ですが、ワードプレステーマ制作においても必要なのでしょうか？
結論からいうと、必要なようです。
ということでCSSはこんな感じで読み込んでいます↓
まず最初にリセットCSSを読み込んで、そのあとにスマホ画面用のメインCSS、最後にパソコン画面用のレスポンシブCSS。
固定ヘッダー、ハンバーガーメニュー。
グローバルナビは下にスクロールしてスライダーを超えると、中央寄せになり背景色が付くようにしています。
参考にしたサイト↓
【jQuery】特定の位置までスクロールしたら固定ヘッダーの色やサイズを変更する方法【サンプル付きで解説】 | じゅんぺいブログ
【jQuery】一定の高さまでスクロールしたらヘッダー背景色を変更する方法 | ゴリゴリコード
スマホ画面ではハンバーガーメニューになります。これは以前私が記事でご紹介したこものを使いました↓
【jQuery】ハンバーガーメニュー・アコーディオン・ページTOPボタンを実装するうえで、参考にすべきおすすめサイトまとめ。
画像が下からフワッと現れる。
コンセプト部分とメニュー部分の画像は、下からフワッと現れます。
これは私が以前つくったポートフォリオサイトでも使ったjQueryです↓
こんな感じで、ワードプレステーマ制作では今まで学んだことが多く活きてます。
固定背景。
「コーヒー豆へのこだわり」部分はスクロールしても背景画像が動かない固定背景になっています。
これはCSSのbackground-attachment:fixed;とするとできます。
悩んだ点。
悩んだ点は、ページによってCSSを分けるかどうかです。
例えばトップページのh2見出しの最初の文字の色を変えたくて、h2:first-letter{color:#〇〇〇}とすると、他のページのh2にも適用されてしまいます。
他にも投稿一覧ページで画像とテキストを横並びにしたくてarticle{display:flex;}とすると、個別投稿ページのarticleも横並びになってしまいます。
悩んだ末、CSSは分けずに一つにし、クラス名をつけてそれにCSSを当てることで解決しました。
例えばトップページのh2にはtop-h2、投稿ページのh2にはpost-h2という感じ。
よく考えたらいままで複数ページのウェブサイトをコーディングで作ったことがあまりなかった。
複数ページのウェブサイトを作る場合は、タグそのものにCSSを書くのではなく、クラス名に付けたほうがいいことを学びました。
今後について。
今後はこれにPHPのコードを書いてワードプレスのテーマ化し、管理画面から画像やテキストを変えられたり、投稿をできるようにしてきます。
そしてまだまだ試作段階ですが、今後洗練してより良いテーマにしていこうと思ってます。
自分で何か作るって楽しいですね。
