WEBサイトを一から作るための解説ブログ

虎尾打亜頭(コーダーズ)のサイト作成編へようこそ!
  • お問い合わせ
  • プライバシー、ポリシー
  • 虎尾打亜頭(コーダーズ)のサイト作成編へようこそ
menu
WEBサイトを一から作るための解説ブログ > WordPressサイトを作るための解説 > 8、お問い合わせページを作ればサイト作成は終了です

8、お問い合わせページを作ればサイト作成は終了です

wordpressでサイトを作る解説8回目、お問い合わせページの作り方

目次

  • 1 8回目の解説の目標
  • 2 お問い合わせページの作り方
  • 3 追加CSS
  • 4 テーマが入っているファイルは圧縮して使う
  • 5 WordPressでポートフォリオサイトを作ろう
    • 5.1 ポートフォリオサイトの作り方

8回目の解説の目標

7回目の解説の目標はお問い合わせページの作成ですがこれでサイトの作成が完了するのでドメイン契約したwordpressサイトに作ったオリジナルテーマを入れる所までを解説します。

 

お問い合わせページの作り方

まずプラグインのCONTACT FORM7をインストールします。

赤枠の中が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だったと思います。

コーディングする前にしないといけないですが私がポートフォリオサイトを作った時にどうやって作ったかを解説しているのでよかったら見てください。

私の作り方はここから見れます。

WordPressサイト
関連記事
    5、サイドバーを作るのはコピペ祭りかも
    wordpressでサイトを作る解説3回目、メインページの作り方
    3、メインページを作るのは最初は覚えることが多い
    wordpressでサイトを作る解説6回目、固定ページの作り方
    6、固定ページの作り方は今までの復習かな
    wordpressでサイトを作る解説7回目、404とアーカイブとカテゴリー
    7、あと少し、404とアーカイブとカテゴリーの作り方
    プロフィール
             
    このサイトは無料コミュニティ虎尾打亜頭のサイト作成編です。
    実務未経験のあなたがWordPressを使ったサイトを作ることができるようにするのが目的のサイトです。



検索
新着記事

SEO対策でnofollowとsponsoredとUGCを使おう

収入を得たい場合YouTubeとブログなら絶対ブログ

ブログ初心者がやるべきこと(PV数、アクセス数アップ含む)を説明

超初心者にWordPressレッスンブックは最適の参考書

検索以外でブログの記事のPVを上げるなら私はこうする

月刊アーカイブ
  • 2021年2月
  • 2020年8月
  • 2020年7月
カテゴリー
  • wordpressサイトのカスタム
  • WordPressサイトを作るための解説
  • ブログの運営
  • 参考書
  • 実務
©︎2020〜 jonio All rights reserved.