HTML CSS作成した架空のサイトをWordPress化【1】

Wordpress

先日、HTML CSS作成した架空のサイトをWordpress化します。

WordPress化までの流れ

  1. シングルページのデザイン
  2. シングルページコーディング
  3. 無料サーバーを立ち上げwordpressインストール
  4. header 、footer 、main切り分け
  5. カスタム投稿設置
  6. index.phpにnews設置

他余力があれば

  1. AIOSEO
  2. コンタクトフォーム7 (コーディング)

 

シングルページのデザイン

富士ベッド工業株式会社デザイン

シンプルバージョン

シンプルなbass.htmlデザインでしたら、直でコーディングしても良いと思います。
メモ帳に手書きでも良いです!

逆にその方が効率が良いと思います。

シングルページのコーディング

Header,Footer部分は共通ですので、コピペします。
mainのid名がtopページと重ならないように、工夫しましょう!

無料のサーバーを立ち上げ、Wordpressをインストールする

まずは、ご自身がサーバーをお持ちでしたら、ポートフォリオサイトのサブディレクトリーもしくは、サブアカウントを作成して、WordPressをインストールします。

下記のサイトも参考ください。

WordPressが使える!おすすめ無料レンタルサーバーは3つだけ
https://www.hiroyukisuzuki.com/entry/wordpress-free-rental-server/

 

6/3 授業の予定

  1. HTML CSSのサイトをレスポンシブまで完成させる
  2. WordPressをインストール
  3. ポートフォリオ
  4. ポートフォリオ
  5. ポートフォリオ

HTML CSS完成見本

STEP05 |TOPボタン・ドロワーメニュー実装

 

XFREEでWordpressをインストール

ドメインを5個まで作成できますが、Wordpressの練習なので、新規でgmailを作成して、WordPressをインストールしましょう!

WordPress インストール

そのまま手順にしたがって、Wordpressをインストールします。

FTPアカウントの設定をします

WordPress インストール

FTPの設定

WordPress インストール

WordPress インストール

表示確認してみましょう!

WordPress インストール

コメント

  1. […] HTML CSS作成した架空のサイトをWordPress化の続きになります。 […]

タイトルとURLをコピーしました