ワードプレス実践講座

埼玉県 草加市
スクール虹

About me

明間 ゆり（あけま ゆり）

所属：求職者支援訓練校 スクール虹

職業：プログラマー、プログラミング講師

社会人年数：８年目

血液型：A型

好きなもの：ハムスター、星のカービィ

好きなアプリ：Amazon Kindle Unlimited

資格：PHP技術者、Java SE、HTML5 Professional​

この講座のゴール

時間割

ワードプレス　おさらい

サーバー　＝　エックスフリー

皆さんは授業でWordPressに触れたと思います。

サーバーはエックスフリーで借りましたね。
エックスフリーのサーバーには以下の機能があります。

・HTMLサーバー機能
・PHP、MySQLサーバー機能
・WordPress機能

ワードプレス　おさらい

「WordPress」 は「PHP」というプログラミング言語と、「MySQL」というデータベースによって構成されるソフトウェアです。

「PHP」ファイルはサーバーの中にファイルを配置しないと動きません！なのでWordPressもエックスサーバー上でないと動かすことができないのです。

「HTML」ファイルは

サーバーが無くても

動きます！

ワードプレスの開発手法

WordPress はサーバーが無いと動かせないなら

PCで開発するときはどうするの。。。？

サーバーをPCにインストールするとXFREEを使わなくても、

WordPressを動かすことができます！

XAMPP（ザンプ）

PHPを動かす

「Apache」サーバーと「MySQL」データベースがセットの便利ソフト

英語ばかりで、初心者が

扱うにのはちょっと勉強が必要です。。

ワードプレスの開発手法

PCでWordPressを開発して、公開する場合はXFREEにファイルをアップロードする必要があります。さらに、XFREEのデータベース名とパスワードを確認してWordPressの設定ファイルを書き換えたり。。とりあえずいろいろ設定しなくてはいけません。。（要勉強）

ワードプレスの開発手法

WordPress管理パネル＞

データベース管理＞

phpMyAdmin＞

からデータベースの中身を

確認することができます。

表示しているのは

WordPressの

固定ページの文字が

入っているテーブル

ワードプレスの開発手法

いま、見てもらった通り自身のPCにサーバーをインストールしてWordPressを開発していく方法は、勉強コストと時間がかかります。

今日は、時間が限られているので

エックスサーバー上のみで、WordPress開発を進めていきます！

FTPソフトや、ドリームウィーバーは使いません！

上記が無くても、HTML、CSS、JSを編集することが

可能ですのでそちらの方法で開発していきます！

XFREEで複数のWordPressをインストール

PHP・MySQLの利用を開始する

XFREEで複数のWordPressをインストール

初期設定が完了するまですこし待ちます。
「初期設定の完了」画面になったら再度左メニューの「無料レンタルサーバー」をクリック。

XFREEで複数のWordPressをインストール

PHP・MySQLの「管理パネルログイン」をクリックします。

XFREEで複数のWordPressをインストール

サーバー管理画面が開きます。「自動インストール」をクリック。

XFREEで複数のWordPressをインストール

「追加インストール」タブをクリック。

XFREEで複数のWordPressをインストール

免責事項を確認したら

「インストール設定」をクリック。

XFREEで複数のWordPressをインストール

• データベース…「自動でデータベースを生成する」にチェック
• インストール先…フォルダ名を入れます。ここでインストールするWordPressが「http://アドレス/フォルダ」にインストールされます。
• ブログ名（後で変更可）
• ユーザ名
• パスワード（後で変更可）
• メールアドレス（後で変更可）

下記の設定を行います。

ここでは

「.xdomain.jp」のURLを指定します。

XFREEで複数のWordPressをインストール

表示される内容で問題なければ

「確定する」をクリック。

XFREEで複数のWordPressをインストール

この画面で表示される情報は写真を撮影したり、メモをして控えてましょう。

二つ目以降のWordpressインストール

同じ手順で、二つ目以降のWordPressをインストールできます。

既に使用した「wp01」

の場合は上書き新規インストールされます。

リセットしたいときに

使えます。

「wp02」にすると追加で作成できます。

受注したお客様のドメインと同じフォルダ名にすると管理しやすいです。

二つ目以降のWordpressインストール

独自ドメインを追加済の場合は「対象ドメイン選択」

が表示されURL単位でもWordPressをインストールすることができます。

見積・請求の流れ

仕事を受けたときにお客様に出す

見積書と請求書のサンプルフォーマットです。

ご自由にお使いください。（Excel形式）

https://akemay.com/wp-content/uploads/2023/06/a4f9c53856bdf52a13ec414feac77615.xlsx

請求書サンプル

https://akemay.com/wp-content/uploads/2023/06/819b58fb2127dc98d612ba0f94560d7e.xlsx

見積書サンプル

https://akemay.com/wp-content/uploads/2023/07/6351cb5e9f07285e3fc10ef896f24a8b.pdf

https://akemay.com/wp-content/uploads/2023/07/14c1c15e021585a45b90b3b64dcdc0cf.pdf

見積・請求の流れ

私が仕事を受けるときのフロー

１）お客様の要望確認

　・画面数、サイトの用途

　・希望のデザイン

　・ドメインの文字列

２）Canvaでロゴや画像を作る

３）サンプルのWordPress作成

４）見積送付、サンプル公開

５）必要な画像やテキストをお客様から取得

６）料金の支払い確認

７）SEO対策用GMail取得

８）ドメインを取得

９）サンプルをエクスポート（WP機能）

10）本ドメインにインポート（WP機能）

11）SEO対策（WP機能）

12）公開連絡

WordPress作成

実際に画面を作成していきましょう！

以下のページに手順を記載しています。

https://akemay.com/wordpresspracticeedition/

パスワード：当日連携します。

このスライドの後ろのページにおまけで

お名前.comでの独自ドメインの設定方法

と、お名前.comのドメイン代をお客様に請求する

方法があります

独自ドメインの設定　お名前ドットコム

こちらはドメイン会社によって設定が異なります！

お名前ドットコムの場合２つ設定するものがあります。

XFREEの「コンテンツ」に記載されている数字をコピー

ドメインのDNS設定 ＞ ドメイン選択 ＞ 次へ ＞ 

設定するをクリック

独自ドメインの設定　お名前ドットコム

VALUEにXFREEのコンテンツの数値を入力し

追加をクリック​​

追加されたことを確認

独自ドメインの設定　お名前ドットコム

チェックをONにして、確認画面へ進む

独自ドメインの設定　お名前ドットコム

チェックをONにして、確認画面へ進む

独自ドメインの設定　お名前ドットコム

続けて下の方のネームサーバー変更＞「設定する」

ボタンをクリックする

独自ドメインの設定　お名前ドットコム

設定完了

独自ドメインの設定　お名前ドットコム

独自ドメインの設定　XFREEでの設定

ドメイン名を入力後、「Aレコード認証」を選択し

「ドメイン設定を追加する」をクリック。

独自ドメインの設定　XFREEでの設定

「確定する」をクリック。

独自ドメインの設定　XFREEでの設定

設定完了

お名前.comで支払いをコンビニにする方法

ドメイン契約更新>その他のお支払方法はこちら

お名前.comで支払いをコンビニにする方法

任意のコンビニを選択し次へ

お名前.comで支払いをコンビニにする方法

申し込むを押下すると支払いバーコードが出力されます

こちらをお客様に送付して決済してもらいます