サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート XAMPPとWordPressのインストールと使い方

XAMPPとWordPressのインストールと使い方

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

レッスンお疲れさまでした!

本日はPrepropsでの初期フォルダーの設定と、
WordPressを動かすためのXAMPPのインストール、
WordPressの初期設定を行いました。

まずはWordPressの管理画面に慣れて頂くために、
WordPressの投稿・固定ページの
入れ込みや新規作成・修正・削除をしていただいて、
WordPressでどのように表示されるか
見てみてください。

次にWordPressのテーマの変更や
(外観 > テーマ)
カスタマイズにも挑戦してみてください。



【Sassでのサイト制作について】

Sassファイルは、そのままの状態ですと
ブラウザでは認識することはできないので
CSSファイルに変換(コンパイル)する必要があります。

今回は変換(コンパイル)するために、
Prepropsのソフトを利用します。


まずは実際に作業する前に
フォルダー構成を作ってから、
Prepropsを起動させます。

次に+を押してプロジェクトを追加し、
ファイルを監視させるようにします。

それからScss形式でファイルを作り、
保存するごとに自動的に
コンパイルしていくようになります。


ただ初期の状態のコンパイルですと
ちょっと特殊な形になりますので。
Output StyleをExpandedにしましょう。

左のApp menuの中にある
Project Defaults > Compiler Settingsにいき、
Sassの項目のOutput Styleの部分を
「Expanded」に変えておきます。

また、今動いているプロジェクトも
scssの中に保存しているscssファイルを選択して、
Output Styleの部分を「Expanded」に変えておきます。



【XAMPPのインストール】

WordPressは、
サーバの機能やデータベースを利用した
CMSのプログラムです。

ですので、
基本的にサーバでのみ動くように
PHPファイルになっています。

そこでローカルでもPHPが動くように、
XAMPPというソフトをインストールして
Wordpressを動かします。

この作業は1回のみ
インストールすれば終わるので、
方法については省略しますね。


次にXAMPPを起動し、
「Apache」と「MySQL」をStartします。

XAMPPはCドライブ直下に
基本的にインストールされています。

ですので、
C:\xampp\htdocsの中に入ってるものが、
ブラウザーでlocalhostと入れると表示されます。



【WordpPressのインストール】

先ほども言ったように、
WordPressはデータベースを利用します。

ですので、
XAMPPに対してもデータベースを作成しますが、
この作業も最初の1回で大丈夫です。

この際に作成した、
「User name」「パスワード」は必要なので、
覚えておいてくださいね。


次に、
WordPressをインストールします。

C:\xampp\htdocsのところに、
分かりやすいようにフォルダーを作り
WordPress本体のデータをコピーします。

あとはそのフォルダーをブラウザーで見ると
WordPressのインストール画面に行きます。

例)
C:\xampp\htdocs\cyta にWordPressを入れた場合

localhost\cyta


次に下記の設定を入れて、
WordPressの初期設定を完了させます。

データベース名:作成したユーザー名
ユーザ名:作成したユーザー名
パスワード:設定したパスワード

サイトタイトル:サイト名
メールアドレス:メールアドレス
検索エンジンでの表示:ローカルではいれない



【WordPressの動的ページと静的ページ】

WordPressは、WEBサイトでいう
動的ページ・静的ページを
それぞれ違うタイプで入力していきます。

例えば、
会社概要・サービス案内・サクセスマップなどは
基本的に1回作ればほぼ更新は少ないので、
静的ページという扱いになり、
「固定ページ」として使います。

次に、
新着情報・お知らせ・製品情報などは
よく追加・更新される情報ですので、
できるだけ自動的にできるように動的ページとして、
「投稿」(カスタムポストも含む)として使います。

まずはこの違いを知ることが最初ですので、
何個も投稿してみたり、
固定ページを増やしてみたりして見て下さい。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

新着レッスンノート

体験レッスンお疲れさまでした。 本日はWordPressで作るサイトについて システムにおいてできることなどを お話しさせていただきました。 その他にも、 Webコピーライティングについてですとか、 Webの仕事を営業などについてお話いたしました。 最近の本屋を見てみ...

レッスンお疲れさまでした! 本日は前回作成しました レスポンシブウェブデザインのデザインから、 マークアップした分を チェックさせていただきました。 基本的には ほぼほぼ完成してましたね! あとは デザインに照らし合わせて 細かいところを微修正していきましょう。 ...

レッスンお疲れさまでした! 本日は、 前回にお出ししたデザイン課題について、 特にスマートフォンに関しまして 修正を行いました。 また、 デザインから書き出しをおこなって マークアップする準備をしました。 まずはスマートフォンから作りこみ、 出来上がりましたらデス...

レッスンお疲れさまでした! 本日は、 前回にお出しした課題について 改善したいポイントを中心に お教えいたしました。 レスポンシブウェブデザイン化する際に、 下記の2つの方法があります。 ・デスクトップから先に作る ・スマートフォンから先に作る 実は難易度として高...

レッスンお疲れさまでした! 本日は、 ローカルでWordPressを使って作成したWebサイトを 本番サーバに上げる方法や、 お客様とのディレクションについて お話しさせていただきました。 【Webサイトを本番サーバに上げる方法】 基本的に、 データを上げる...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta