【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

      2776文字

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っている)を、ほぼ同じデザインでリニューアルした件』についてお話しします。WordPressには良い感じのテーマがいっぱいありますが、『昔のデザインを担当者・お客さんも気に入っている』というケースがあるかもしれません。さっそく、『同じデザインで静的HTML→WordPressリニューアルするときの注意ポイント』を確認していきましょう。

今回のWPリニューアル内容~2カラム静的HTMLサイトを、ほぼ同じデザインでWPに移行(同じサーバー内)

今回のWPリニューアル内容
今回、取引先の企業さまに頼まれたサイトはこんな感じです(社名・業種は出ませんが、こんな雰囲気で~という感じで読んでください)。クラシックな左メニューの2カラム(レスポンシブ有)、『なるべく同じデザイン(旧バージョンのCSSを適応)がいい』といったような要望

サラッと見た感じですと『Twenty Twenty-Oneは使わないほうがよさそう』『htmlつきのurlがインデックスされている可能性』『サーバーの移転などは無し(旧バージョンと同じurlで表示または転送などができると良い)』など、ポイントになりそうでしょうか。

ポイント1~なるべく一から開発orブランク・スターターテーマを使う

WordPressに高機能・お洒落テーマがいっぱいありますが、『元のデザインのままWordPressに』という場合、ネックになることが多いです。『テーマのCSSをベースにすると、CSSのサイズが大きいので(8000~10000行あるものがあります)、エディットが大変』というところです。

スターターテーマ例
そういうときはブランク・スターターテーマから作ったほうが早いかもしれません。『BlankSlate』みたいな、まっさら状態テーマのことです。スターターテーマについては、当サイトの過去記事でも述べていますので、チェックしてみてください。

良く使われるCSSクラス命名パターンや、ネイティブCSSについて押さえる

CSSでは『制作会社ごと・プラットフォームごと・フレームワークごとに、クラス命名パターン』があります。制作会社によってはこれを命名規則とします(『記事メインコンテンツ部分は絶対entry-contentにする』みたいなのが法律で決まっているわけではありません)。また、WordPress公式テーマ向けのガイドラインもあるようです。

使われがちなCSSクラス名

命名規則というほどではないんですが(テーマによっても細かく異なります)、WordPressにも、よく使われるクラス名はあります。例えば・・

  • site-navigation(id)やmain-navigation(class)→メニュー
  • site-title(idまたはclass)→タイトル部分(h1も併用されることが多い)
  • entry-header(class)→記事タイトルやメタ情報
  • entry-content(class)→たいてい記事本文が出るメインカラム
  • widget-area(class)→ウィジェットエリア

他にもありますが、だいたいこの手のものが多いです。なお、自分で一から作るときは、『ある程度命名規則を決めて自分でつくる』という形に。手間はかかるかもしれませんが、『どこに何があるか』は、把握しやすいといえるでしょう。

なお、今回のケースでは横にwidget-areaを配置するわけではないので、単純に『aside』を使いました。機能と命名が合っている、みたいなコーディングも良いでしょう。

ネイティブCSSも押さえておく

WordPressにはエディタ入力項目について、画像alignment(aligncenter・alignleft・alignright)と キャプション(wp-caption ・wp-caption img・wp-caption-text)のクラスがあり、『WPネイティブCSS』と呼ばれています。

キャプションは状況によって使うかもしれません(今回のケースでは使用しませんでした)。画像alignmentは配置が手早くできるので使います。スターターテーマによっては『ネイティブCSSがリセットされている』場合があるので、復元して使います

固定ページで作る場合、前のページurlと同じになるように・『~.html』で終わる形式も、統一・リダイレクト

固定ページで作る場合、前のページurlと同じになるように
WordPressの固定ページにはスラッグを設定することができるので、『(同一サーバー・同一ディレクトリ・同一ドメインなので)前のurlと同じに設定』ということが可能です。こうすると、取引に必要なページの固定ページは『urlが変わらない』ということになります

スラッグにドットを打つとハイフンに変換
ただし、『~.html』で終わる形式のurlを使っていた場合は注意です。固定ページでスラッグにドットを打つとハイフンに変換されてしまうので、完全に同じにはなりません。この状況には『スラッグの形式でカノニカルurl(正規url)を出力』『~.html形式でアクセスされた場合は、転送などでスラッグの形式urlのほうに転送』とすると、旧urlで入ってきた人が見れないというリスクは避けられます。

あとがき・まとめ

  • 静的HTMLサイトを、ほぼ同じデザインでWPに移行するときは、スターターテーマなどがおすすめ
  • CSSクラス命名パターンや、ネイティブCSSを押さえつつ、旧サイトのCSSを適応させていく
  • 固定ページで作る場合、前のページurlと同じになるように・違う場合は転送

このような形で対応いたしました。ある程度手順がわかってきていたので、そこまで制作期間は長くなりませんでした。『デザインはなるべく変えたくないけど、WordPressを使って更新しやすいサイトにしたい』という場合は、ぜひチェックしてください。


【カテゴリ】 - wpサイト制作事例
【タグ】 -

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント
サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)
サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)
【WordPress】複数、任意のフィールド取得、記事出力する方法(foreach回し/get_post_custom/記事内出力)
ワードプレスサイト・スマホ対応・SSL事例~『仙台国分町の馬刺し・馬肉料理店 馬いものきふくさま』
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
WPカスタムフィールド~記事にthe_metaでフィールド出力&評価つける・get_post_metaとの違い
別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)
WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説
WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる
WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう
WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト