0
0

More than 3 years have passed since last update.

MAMPを使ったWordpressでのWEB制作方法2 初心者向け

Last updated at Posted at 2020-04-28

MAMPを使ったWordpressでのWEB制作方法2 初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法1 初心者向け

今回制作するのは以下のようなコーポレートサイトです
画像や文章などは簡略化してhtmlとcssでマークアップしています

作成ページ概要

トップページ(index.html)
いわゆるトップページです。
Image from Gyazo

記事一覧ページ(archive.html)
投稿のアーカイブ(一覧)ページです。
レイアウトは以下にします
infomation・・・リリース業務に関するお知らせのセクション
blog・・・ブログの投稿に関するセクション
※好みに合わせてカスタマイズが可能です

Image from Gyazo

お問い合わせページ(contact.html)
ユーザーからのお問い合わせページです
受信方法としてメールアドレスを設定します
Image from Gyazo

会社概要ページ(company.html)
固定ページです
会社の概要ページです。
Image from Gyazo

サービス紹介ページ(service.html)
固定ページです
サービス内容のページです。
Image from Gyazo

投稿結果ページ(single.html)
リリース、業務に関するお知らせ、ブログは
同じレイアウトにして管理を簡単にします
投稿はwordpressの管理者画面からできるようにします
Image from Gyazo

ディレクトリ構成

ディレクトリ構成は以下のとおりです
CSSはstyle.cssに記述をしています。今回JSは使用しません
Image from Gyazo

制作の段階で共通化する部分は同じレイアウトにしておきます
今回の場合はヘッダー、フッター、サイドバーは共通レイアウトです

このようにマークアップしたファイルをwordpressのテーマ化をすることで
プログラミングがわからない方でもWEBの管理ができるよう制作します

次回はMAMP内にwordpressに必要なファイルを作成していきます。

MAMPを使ったWordpressでのWEB制作方法3 初心者向け

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0