8、お問い合わせページを作ればサイト作成は終了です
目次
8回目の解説の目標
7回目の解説の目標はお問い合わせページの作成ですがこれでサイトの作成が完了するのでドメイン契約したwordpressサイトに作ったオリジナルテーマを入れる所までを解説します。
お問い合わせページの作り方
まずプラグインのCONTACT FORM7をインストールします。
赤枠の中がCONTACT FORM7です。
管理画面(ダッシュボードと言います)でプラグイン > インストール済みプラグインをクリックします。
CONTACT FORM7の設定をします。
そうすると↓の画面になるので編集をクリックします。
そして↓の画面になるので赤枠をクリックします。
そうすると↓の画面になるので「フォームのタブ」を赤枠の中を編集します。
赤枠の中ですが↓をそのままコピペでいいです、気になるなら調べてもいいし慣れてから調べるでもいいと思います。
「普段は仕事をしているので返信は基本的に夜にさせて頂きます。」は好きに変えて下さい。
メールのタブは↓にして下さい、変えた方がいい部分は全て「 」を付けています。
そして画面の下の方にスクロールすると「メール(2)」が出てくるのでクリックします。
さらに書き込む所が出てくるので↓の「 」の中を変えて下さい。
「メッセージ本文」は↓をコピペして下さい。
変えたら画面一番下の「保存」をして下さい。
できたらコンタクトフォームの編集画面の一番上にある青枠の中をコピペして下さい。
コピペしたら管理画面の固定ページの中にあるお問い合わせページの編集画面に入ります。
そしてコピペした内容を本文を書く所に貼り付けます。
そして内容の保存をしてお問い合わせページを見ると↓になります。
追加CSS
お問い合わせページですが今のままだとレイアウトの感じに違和感があります。
だからCSSで調節しますが管理画面で外観 > テーマエディターでできるけどwordpressはテーマの更新があると追加して書いた内容がリセットします。
だから通常は子テーマを使いますがもっと簡単にできる方法があり「追加CSS」を使います。
追加CSSはWordPressテーマのアップロードがあってもCSSのリセットは起きません。
どこにあるかというと管理画面で外観 > カスタマイズから追加CSSがある画面に入れます。
追加CSSの画面に入ったら矢印のコードをコピペして下さい。
できたら保存してお問い合わせページに入り↓になっていたら設定が完了です。
これでサイトの作成は完了です。
テーマが入っているファイルは圧縮して使う
ここまでできたらあとは簡単です。
コーディングデータを右クリックすると圧縮できるのでして下さい。
圧縮したデータをwordpressで使う時はまずサーバーとドメイン契約をしないといけないです。
私も使っていておすすめはxserverです、ドメイン永久無料キャンペーンとかもあるし2年位使ってるけど今の所サーバーのトラブルもないです。
絶対にやめた方がいいのは「お名前.com」です、勧める人が結構いますがググると評判の悪さが分かります。
みんな何でオススメするかというとアフィリエイトをしてるからです。
アフィリエイトはAさんが貼ったリンクからBさんが契約するとAさんにお金が入る仕組みです。
xserverがリンクになっていますがアフィリエイトじゃないのでご安心を。
私は人を騙してお金を貰うのが大嫌いなんですよ。
サーバーとドメインを取得したら自分が作ったテーマを追加するのですが管理画面の外観 > テーマに入ります。
そしたらテーマを選択する画面になるので↓の赤枠をクリックして青枠をクリックすると圧縮したテーマを追加できます。
圧縮したテーマを追加したらテーマを使うことができます。
これでサイト作成は終わりです、新しいことがいっぱい出てきて訳が分からなくなっていると思うので何度も同じサイトを作って慣れていって下さい。(私も最初はあなたと同じでした)
次の説明で実務経験を積むために私がどんな勉強をしたかとどんな会社に応募した方がいいかについて説明していますのでぜひそれも見て下さい。
WordPressでポートフォリオサイトを作ろう
このサイトを作ったらWordPressを使ってポートフォリオサイトを作りましょう。
私がコーダーの面接を受けた時はポートフォリオサイトは作っていませんでした、まだWordPressサイトは作れなかったのでしょうがないですが。
代わりに旅サイトのPAS-POLを模写した物を見せました。
ここから見ることができますが面接を受けた時はこんなにちゃんとしてないですしレイアウト感は結構悪かったと思います。
そして見せたのはPCページだけです、今思い返して「よく通ったな〜」って感じです。
そして実務を始めてからWordPressで一応サイトを作れるようになってポートフォリオサイトを作りました。
ここから見ることができます。
左右からフェードインしますが「パララックス」という実装内容を使っています。
ここからやり方を見ることができてポートフォリオにも同じ内容を使っています。
ポートフォリオサイトの作り方
ちなみにポートフォリオサイトを作るのはWordPressサイトを作るよりも遥かに楽ですよ。
私が使ったファイルはindex.php、single.php、header.php、footer.php、page.phpだったと思います。
コーディングする前にしないといけないですが私がポートフォリオサイトを作った時にどうやって作ったかを解説しているのでよかったら見てください。
私の作り方はここから見れます。
