サイトをリニューアルした記録

4月にリニューアルしたサイトの制作過程を記録として残すことにします。

この記事自体は、もくじの「やること3」のときに頭の整理のために書いた文章に加筆修正したものです。

完全に自分用なので、他の人が読んでも面白いのかはわかりませんが…

やること1:デザインをする

AdobeXDでデザインをつくりました。前回までのサイト制作の反省として「おおまかなレイアウトだけ決めて、細かいところはCSSを書きながら考える」というのがあるので、みっちり全ページはじめにデザインを決めておきました。

(すごく当たり前のことなのですが…)

パソコンのとき
モバイルのとき

基本的にパソコンとモバイルで切り替わるようにして、タブレットのことは後で考えることにしました。

やること2:ワードプレスに反映することを考える

デザインをちゃんとすることで、やらないといけないことが明確になったので、作り方の計画を練ります。

具体的には、ワードプレスでのページのタイプと使用するテンプレートの名前、スラッグを整理しました。

スプレッドシートで整理

やること3:仕様をチェック

使うプラグインやJQery、css(PCとスマホの切り替えなど)をなんとなく決めました。

なるべく無駄のないコードを書きてえという強い気持ちでデザインをチェックしてメモします。

自分でデザインして自分で実装するのにこのメモいる?というところもあるけど、自分でも驚くほどすぐ忘れてしまうので役に立ちました。

やること4:ワードプレス実装

ワードプレスをいじっていると夢中になって(「こんな便利なタグが…!すごい!ちょっと試してみよ〜!」ってなる)全然作業が進んでいないということが多々あるので、計画手順に沿ってなるべくさくさく進めていきます。

手順1:最低限のファイルが入っているテーマを適用する

index.php、function.php、style.cssの最低限のファイルが入っているテーマを作ってアップロードします。

手順2:使用するプラグインを入れる

  • Breadcrumb NavXT(パンくずリストを作る)
  • LuckyWP Table of Contents(目次を作る)
  • Custom Post Type UI(カスタムポストタイプを追加する)
  • Smart Custom Fields(カスタムフィールドを追加する)
  • Genesis Custom Blocks(カスタムブロックを追加する)
  • Contact Form 7(お問い合わせフォーム)
  • Contact Form 7 Multi-Step Forms(Contact Form 7を拡張する)
  • Flamingo(Contact Form 7を拡張する)

前回までのテーマ作りの時はなるべくプラグインを使わないようにしようと思って(よくわかっていなかったし)、contactform7くらいしか入れていなかった気がするけど、カスタム投稿とかカスタムフィールドはプラグインで管理した方がめちゃめちゃ楽。

パンくずリストに至っては自分で書くと長いしうまく機能してない(原因を見つけるのがめんどくさい)こともあるのでプラグインを知れてよかった。

手順3:index.php(基礎)を作る

今回の場合はデフォルト投稿の「WORKS」の投稿一覧が「index.php」として表示されるので、そこから作ります。

ヘッダー

  • スマホでハンバーガーメニューを表示
  • PCでは横並びメニュー
  • 下にスクロールしていくと固定ヘッダーが消えて、上にスクロールすると現れる
  • 下層ページを選択しているときもメニュー選択状態にしておきたい

パンくずリスト

プラグインを使うので一瞬です。

ページのタイトルと説明まわり

管理画面で全部編集できるようにしたいので、ページタイトル(WORKS)以外の

  • 装飾の絵
  • タイトル下の補足分(worksでは非表示だけど、アーカイブページでは使う)
  • 説明文

はカスタムフィールドで入力します。

カテゴリー切り替え

唯一の難所だ。クリックでカテゴリーごとに記事が並び替えられます。

フッター

  • 検索窓
  • メニューのSNSが並んでいる部分、ボーダーを消す

手順4:archive.phpを作る

デフォルト投稿のタグアーカイブ用。(カテゴリーは一覧で切り替えて表示できるのでアーカイブしない。)
index.phpとほぼ一緒なのでつくります。

手順5:single.phpを作る

できたindex.phpをコピーして記事詳細ページを作ります。

画像コンテンツがあるので、むずかしいのはそこだけ。

  • スライドショーにする(サムネをクリックして選択)
  • クリックするとモーダルで拡大
  • テキスト部分に追従

テキスト部分はデフォルトのコンテンツとして読み込むので、画像はカスタムフィールドのループで追加します。
画像が多すぎてサムネイルが2段以上になる場合は、横にスライドして1列で表示できるように。

また、コンテンツのクレジット部分(クライアントとかほかのクリエイターとか)の部分もカスタムフィールドで記入できるようにします。

手順6:single-2clm.phpを作る

single.phpとほぼ一緒なのですが、いちおうカスタムテンプレートとして作っておきます。(日付とクレジットの部分がびみょうに違う)

手順7:single-1clm.phpを作る

画像コンテンツいらないなーってときのために本文のみのテンプレートも作っておきます。

見出しの装飾と、目次をつけることもあるかと思うので、ここで一緒に設定しておきます。

手順8:page.phpを作る

index.phpをコピーして固定ページを作ります。

グーテンベルクに標準でなさそうなブロックをプラグイン「Genesis Custom Blocks」で、カスタムブロックとして生成しました。

  • 見出し+補足分のブロック
  • 全幅のお仕事リンク
  • お仕事のナビボタン
  • 見出し+補足+コンテンツ
  • 商品リンク
  • flowカラム(間に矢印入れる)
  • 記事リスト読み込み(カテゴリー出力)

以下はカスタムブロックではなく、カスタムスタイルの追加で。

  • 画像とテキストを横並び
  • 画像とテキストを縦並び
  • お仕事のナビボタン
  • 背景コンテンツ幅の白+より狭いテキスト
  • 背景幅広の白+コンテンツ幅のテキスト
  • より狭いテキスト
  • 記事リスト読み込み(四角)
  • 個別記事カード
  • リスト
  • コード

手順9:archive-notes.phpをつくる

カスタム投稿タイプの記事一覧ページです。

1個目のテーマ制作のとき以来使っていなくて「カスタム投稿はめんどくさい」という記憶しかなかったけど、投稿ひとつで3種類のコンテンツを管理するのもめんどくさかったので、リベンジ。

とはいえ「index.php」をコピーしてちょっといじるだけだと思う。

手順10:archive-notes-tags.php

archive-notes.phpとほぼ一緒。

手順11:front-page.phpをつくる

ほぼpage.phpだけど、メインビジュアルがあるのでそこだけ追加。

メインビジュアル

デザインの段階では

  • 白枠がふよふよ動く(svgアニメーション)
  • 白枠の中に絵
  • スクロール記号が動く

というようなことを考えていたのですが、実際作ると動く枠の中に動く絵があるのは「動きすぎてうざい」ってなったので、動く枠を取りました。

手順12:serch.phpを作る

手順13:404.phpを作る

手順14:パーマリンクを整える

現状サイトが動いてしまっているのでほぼ変えられないのですが、カスタム投稿を追加したのでそこだけ確認します。

● ● ●

っていう感じでリニューアルしたのでした。完