Help us understand the problem. What is going on with this article?

3日で構築し公開できるウェブサービスの作り方

More than 1 year has passed since last update.

先輩エンジニアサーチ_ヘッダー.PNG
2017年7月に転職支援系のウェブサービス「先輩エンジニアサーチ」というサービスを開発し2019年4月まで運営していました(詳細はQiitaの過去記事を参照)。

その結果「私も同じようなサービスを作りたいのでお話を聞かせてください」という声を複数いただきました。

このような声をかけていただけるのはとても嬉しいのですが、平日は仕事をしているので個別にお会いする時間がとりづらく悩ましく感じています……。

そこで、「先輩エンジニアサーチ」の事例をもとにウェブサービスの作り方を順番に解説します。

評判がよければ同人誌として技術書典で頒布しようと思います。

【注意】
このエントリーではWebサービスをWordPressで作る方法を紹介します。
WordPressはWebサービスのプロトタイプやβ版を作って仮説検証を繰り返すのに最適ですが脆弱性を突いたサイバー攻撃を受けやすいため、事業にするならセキュリティを強化する必要があります。

またWordPressに機能を実装する場合プラグインを使用しますが「長期間更新されていない場合セキュリティの問題を抱えている可能性がある」「WordPressのバージョンを更新すると動作しなくなる」などのリスクがあるため運用時は注意してください。

ウェブサービスの作り方

設計

要件

先輩エンジニアサーチは「IT業界未経験からエンジニアを目指しているが転職活動が上手くいかない人」が「(有料で)転職相談にのる現役エンジニア」が出会い転職相談を申し込めるサービスとして構築しました。

そのため、ここで紹介するのは主にCtoC(個人と個人)の取引を仲介するプラットフォームとして利用され、以下のようなことができるサービスにすることを想定しています。

  • 当該のウェブサービスを検索などで見つけた人(以下A)が登録を行う。
  • Aが登録を行うとマイページが生成される。
  • Aは自分が提供するサービスやその料金等をマイページに入力(または修正)する。
  • Aに依頼をしたい人(以下B)がユーザー登録後にフォームから申し込みを行う。
  • Bが申し込みをしたことがWebサービス運営者(以下あなた)にメールで連絡される。

それ以降は人力で以下の作業を行います。

  • あなたがBに連絡を取って決済方法の案内や希望日時などの聞き取りを行う。
  • あなたがAに連絡を取って調整を行う。
  • AがBにサービスを提供したらあなたがAに代金(手数料を徴収済み)を振り込む。

同人誌_2.PNG
今回ご紹介する方法でウェブサービスを構築すると「メンターを探したい人とメンターになりたい人」「取材相手を探すライターと取材されたい個人」「遊びのお誘いやモニターなどの募集を行う人とそれに応募したい人」「奢りたい人と奢られたい人」などを結び付けるサービスが作れます。

実装する機能

  • サービス内容や利用規約などの説明ページの作成、編集
  • ユーザー登録、解約
  • ログイン、ログアウト
  • プロフィールページの作成、変更、削除
  • 申し込みフォーム(申し込み後、Webサービス運営者にメールが送信される)

材料

必要な技術の選定

レンタルサーバを利用してWordPressで構築します。必要な機能はプラグインで実装します。
WordPressならデザインやDB周りの知識や工数も最低限で済みます。

なお、ウェブサービスのユーザーに課金する利用料の決済は、社外のオンライン決済サービスを利用するまたはサービス運営者が仲介して銀行振り込みにする(運用でカバー)ことで開発工数が最低限で済みます。

契約が必要なもの(有料)

  • XSERVER(エックスサーバー)X10プラン
    税込7,128円(初期費用3,000円+1,200円×3ヶ月+税)/3ヶ月~

  • お名前.com
    最安値で1円/1年~

使用するテーマ

無料のOnePressを使います。工数削減のためカスタマイズはしません。

使用するプラグイン

  • Pods - Custom Content Types and Fields
  • WP-Members
  • Contact Form 7

ここで解説している内容は以下のバージョンのものです。

プラグインなど バージョン
WordPress バージョン 5.1.1
OnePress バージョン 2.2.4
Pods バージョン 2.7.12
WP-Members バージョン 3.2.6.1
Contact Form 7 バージョン 5.1.1

使用する画像

ぱくたそ
足成
写真AC
フード・フォト
無料で商業利用OKでクレジット不要

必要なページ

同人誌_2-2.PNG

構築の手順

XSERVER(レンタルサーバー)の利用申し込み

1.サーバー無料お試し10日間の申し込みをする

XSERVER1-1.PNG
レンタルサーバーの利用申し込みを行いましょう。
XSERVERのサイトにアクセスしてお申し込みをクリックします。
XSERVER2-1.PNG
お申し込みフォームをクリックします。
XSERVER3.PNG
新規お申込み10日間無料お試しをクリックします。
XSERVER4-1.PNG
契約内容と会員情報を入力します。サーバIDはあなたが自由に決めてください。プランはWebサービス公開後しばらくはX10で十分だと思いますが、お好きなものを選んでください。
XSERVER4-5.PNG
規約等の「利用規約」「個人情報の取扱い」を読んで同意できるなら「利用規約」「個人情報の取扱いについて」に同意するのチェックボックスをクリックしましょう。

全ての必須項目を入力し終え、利用規約と個人情報の取り扱いに同意するチェックボックスをクリックするとお申し込み内容の確認がクリックできるようになるのでクリックします。
XSERVER5.PNG
本人確認を行います。SMS認証・電話認証をするをクリックしましょう。
XSERVER6-1.PNG
認証コードに電話番号が自動入力されています。SMSか音声電話かを選択し、認証コードを受信するをクリックします。
XSERVER7-1.PNG
(SMS認証の場合)認証コードを入力し認証するをクリックします。
XSERVER8.PNG
申し込みが完了しました。会員情報として入力したメールアドレス宛にsupport@xserver.ne.jpというアドレスから【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]という件名のメールが届くので確認しましょう。

2.利用料金の支払いを行う

XSERVER9.PNG
XSERVERの無料お試し期間は10日間です。期間内に料金を支払わないと契約が無効になりますので早めに支払いを済ませましょう。

まずはXSERVERのサイトにアクセスしてログインをクリックします。

インフォパネルとサーバーパネルという管理画面がありますが、それぞれでできることは以下の通りです。

インフォパネル
登録情報の確認・変更、料金の支払いなどを行う
サーバーパネル
ドメイン設定、WordPress自動インストールなどを行う

インフォパネルのログインに必要な会員IDとパスワード、サーバーパネルのログインに必要なサーバーIDとパスワードは【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]のメールに記載されているので確認しましょう。

今回はインフォパネルにログインします。
会員IDまたはメールアドレスとパスワードを入力してログインボタンをクリックしましょう。
XSERVER11.PNG
インフォパネルにログインできたら左側にある決済関連料金のお支払い/請求書発行をクリックします。
XSERVER12-1.PNG
サーバーのチェックボックスにチェックを入れ、更新期間を選択したら、お支払い方法を選択するをクリックします。
XSERVER13-1.PNG
金額を確認したら「銀行振込」「クレジットカード」「コンビニ」「ペイジー」の中から支払い方法を選択します。
XSERVER14-1.PNG
XSERVER15.PNG
あなたが決めた決済方法の決済画面へ進むをクリックして料金の支払い手続きを完了させましょう。

独自ドメインの利用申し込み

1.お名前.comのサイトにアクセスする

お名前1.PNG
お名前.comというサイトにアクセスして「独自ドメイン」の利用申し込みを行います。
ドメインはインターネット上での住所を表すものです。そして、独自ドメインとはあなたのWebサービス独自のドメインという意味です。
※無料サービスのドメインは独自ドメインではありません。例えば、はてなブログならxxxxx.hatenablog.comのようにxxxxxは自分で決められるがそれ以降の部分は各ユーザー共通になります。

先輩エンジニアサーチの独自ドメインはsenpai-engineer-search.tokyoです。

あなたが取得したい独自ドメインの文字列を入力し検索ボタンをクリックします。
ここでは例として「senpai-engineer-search」と入力しましたが、実際に操作するときはあなたが取得を希望する独自ドメインの文字列を入力してください。

2.ドメインにチェックを入れる。

お名前2.PNG
あなたの独自ドメインのトップレベルドメインを決めます。選んだトップレベルドメインによって価格が変わります(「ご希望のドメイン」の行に金額が表示されています)。

トップレベルドメインとは、.com.jpなどのあなたが1.で入力した文字列の後ろにつく部分です。詳しくは以下のサイトをご覧ください。

主要独自ドメイン取得サービス8つの特徴まとめ

お名前3.PNG
どのトップレベルドメインを選ぶか決めたら、チェックボックスをクリックしましょう。ここでは例として.workを選択しています。

3.登録年数/プラン/オプションを選ぶ

お名前4.PNG
独自ドメインの登録年数(年数によって価格が変わる)やプラン、オプションを選択する画面です。必要に応じてお好みで追加してください。

オプションの詳細は以下のページで確認できます。
whois情報公開代行メール転送オプション
ドメインプロテクション
お名前5.PNG
レンタルサーバーはXSERVERを使うので「利用しない」のままにします。
お名前6.PNG
メールアドレスとパスワードを入力して次へをクリックします。

4.会員情報を入力

お名前7-1.PNG
会員情報を入力します。入力後、次へ進むをクリックします。

5.お支払方法を入力

お名前8.PNG
お支払い方法を選択します。クレジットカード決済の場合はカード番号等を入力します。

クレジットカード決済以外を希望する場合、その他の支払方法はこちらをクリックすると「コンビニ」「銀行振込」「請求書」決済が選択できます。

必要な情報を入力または選択したら申込むをクリックします。
お名前9.PNG
お名前10.PNG
お名前11.PNG

お名前12.PNG
申込まないをクリックします。

6.購入完了

お名前13.PNG
購入が完了しました(クレジットカード決済)。
お名前14.PNG
ここに記載のアドレスと件名で届いたメールのURLをクリックして、忘れずに認証を完了させましょう。

WordPressに独自ドメインを設定する

1.ネームサーバーの変更(おなまえ.comの管理画面で設定)

お名前.comの管理画面で独自ドメインのネームサーバーをXSERVERのものに変更します。
それによってXSERVERで公開したWordPressにhttps://<独自ドメイン>/のURLでアクセスできるようになります。

ネームサーバーはサーバー(のIPアドレス)と独自ドメインを結び付ける役割を担っているもので、詳しくはお名前.comのヘルプページで解説されています。
XSERVER16.PNG
XSERVERのサイトにアクセスし、ログインタブをクリックします。
サーバーIDとパスワードを入力し、ログインボタンを押しましょう。
XSERVER26.PNG
アカウントサーバー情報をクリックします。
XSERVER27-1.PNG
下部にネームサーバー1~5の情報が表示されています。
この画面は開いたままにしておきましょう。
お名前15.PNG
続いてお名前.comのサイトにアクセスします。
右上のお名前.com Navi ログインをクリックしましょう。
お名前16.PNG
お名前IDとパスワードを入力してログインしましょう。
お名前IDは独自ドメイン取得後にお名前.comから届いたメールに記載されています。パスワードは独自ドメインの申し込み時に自分で決めたものを入力します。
お名前17-1.PNG
ログイン後、この画面が表示されるのでドメイン一覧をクリックします。
お名前18-1.PNG
ネームサーバーを変更する対象の独自ドメイン名を確認し、ネームサーバーと書かれた列の変更するをクリックします。
お名前19.PNG
他のネームサーバを利用をクリックします。
お名前20.PNG
先ほどXSERVERのサーバーパネルで確認したネームサーバー1~5を入力します。
(手入力ではなくコピー&ペーストを使うと簡単ですし間違いもなくなります)
入力完了後、確認画面へ進むをクリックします。
お名前21.PNG
設定するをクリックします。
お名前22.PNG
これでネームサーバーの変更が完了しました。

2.独自ドメインの追加(XSERVERの管理画面で設定)

XSERVER30.PNG
サーバーパネル左側の列に表示されているドメインドメイン設定をクリックします。
XSERVER18-1.PNG
ドメイン設定追加をクリックします。
XSERVER19.PNG
ドメイン名の欄に独自ドメインを入力し、確認画面へ進むをクリックします。
XSERVER28.PNG
追加するをクリックします。
XSERVER29-1.PNG
独自ドメインの追加が完了しました。ページ下部の戻るボタンを押しましょう。

WordPressを自動でインストールする

XSERVER31.PNG
サーバーパネルの設定対象ドメインデータに独自ドメインが表示されていることを確認します。
XSERVER32.PNG
WordPressWordPress簡単インストールをクリックします。
XSERVER33.PNG
WordPressインストールをクリックします。
XSERVER34.png
ブログ名、ユーザ名、パスワード、メールアドレスを入力します。
データベースは自動でデータベースを生成するを選んで確認画面へ進むをクリックします。
XSERVER35-2.png
入力内容の確認画面が出るのでインストールするをクリックします。
インストールを行うと、インストール先ディレクトリ内の「index.html」が削除されます。ご注意ください。というメッセージが出た場合、無視してかまいません。
XSERVER37-2.png
これでインストール完了です。表示されているURLにアクセスしましょう。
XSERVER38.png
インストール完了画面に記載されたIDとPASSWORDを入力しログインをクリックします。
XSERVER39.png
ログインするとダッシュボードが表示できます。
XSERVER40.png
左側の設定をクリックしたのち表示設定をクリックします。
検索エンジンがサイトをインデックスしないようにするのチェックボックスにチェックを入れ、変更を保存を押しましょう。これは公開直前に解除します。

WordPressの設定・プラグインインストール

1.固定ページの作成

WP1.PNG
WordPressのトップはインストール直後だとデフォルトのものになっています。
ここからトップや個別のページを作りこんでいきます。

まずは固定ページ(トップとは独立したページで、ブログ記事のように流れていくことがない)でサービスの使い方や利用規約、ユーザー登録、ログインなどのページを作成します。
WP2.PNG
WordPressにログインして、ダッシュボードを表示します。
固定ページをクリックしたのち新規追加をクリックします。
WP3.PNG
固定ページのタイトルと文章を入力します。
WP4.PNG
固定ページのタイトルと文章を入力すると公開するが押せるになります。
公開するを押して固定ページを公開しましょう。
WP5.PNG
公開を押します。
WP6.PNG
固定ページが公開されました。

各ページのタイトルと文章の例を用意しましたので、あなたのWebサービスにあわせてアレンジしてすべての固定ページを先ほど説明した手順で公開してください。
同人誌_2-2.PNG
同人誌_3-1-1.PNG
同人誌_3-2.PNG
同人誌_3-3.PNG
※文章が空欄の場合、文字を入力しないでください。

ユーザーA一覧ページとユーザーA個別ページはこの後の作業で作成しますので、ここでは飛ばします。

2.ユーザーAの一覧ページと個別ページを作成する

ユーザーA(有償でサービスを提供する人)になりたい人が「ユーザーA登録」のページを見て応募してきた場合、Webサービス運営者(あなた)が審査して合格なら、Webサービスに手動でユーザーAのプロフィールや自己紹介を登録し、各ユーザーAごとの個別ページを作成します。また、それにあわせてその個別ページが一覧表示されたページも作成します。

これはPodsというプラグインを使用することによりできるようになります。
WP7-1.PNG
右上の検索欄に「Pods」と入力するとプラグインの候補が表示されます。
「Pods - Custom Content Types and Fields」の今すぐインストールをクリックしましょう。
WP8-1.PNG
WP9.PNG
有効化をクリックします。
WP10-1.PNG
Pods Adminをクリックしたのち新規作成をクリックします。
WP11.PNG
コンテンツタイプカスタム投稿タイプ(投稿あるいは固定ページと類似)を選択します。
Singular LabelProfileと入力します。複数形のラベルプロフィールと入力します。
完了したらNext Stepをクリックしましょう。
WP12-1.PNG
右上のフィールドの追加をクリックします。
WP13-1.PNG
表示ラベル自己紹介と入力します。名前user_profileと入力します。
フィールド形式Plain Paragraph Textを選択します。
完了したらSave Fieldをクリックしましょう。
WP14-1.PNG
Save Podをクリックします。
例として自己紹介のフィールドを作成しましたが、あなたのWebサービスの内容に合わせてアレンジしてください。
WP15.PNG
続いて高度なオプションをクリックします。
WP16.PNG
Enable Archive Pageにチェックを入れます。ここにチェックを入れることでユーザーAの一覧ページが作成されます。
WP17.PNG
Supportsのアイキャッチ画像にチェックを入れます。
WP18.PNG
Save Podをクリックします。
WP19-1.PNG
プロフィールをクリックしたのち新規作成をクリックします。
WP20.PNG
画像を参考にして、タイトルの欄と文章の欄に文字を入力します。
(ここで入力するのは一つの例です。自由にアレンジしてください。)
WP21.PNG
先ほど文字を入力した画面をスクロールすると、下に自己紹介を入力する欄があります。
画像を参考にして、自己紹介の文章を入力します。
(ここで入力するのは一つの例です。自由にアレンジしてください。)

次の作業に移る前に、アイキャッチ用の画像を用意します。
ここでは練習用としていらすとやの画像を2つ使用しますのでダウンロードしてください。
先生のイラスト(男性)job_teacher_man.png
https://www.irasutoya.com/2016/02/blog-post_572.html
先生のイラスト(女性)job_teacher_woman.png
https://www.irasutoya.com/2016/02/blog-post_84.html
WP22.PNG
画面右側にアイキャッチ画像を設定と書かれたリンクがあるのでクリックします。
WP23.PNG
ファイルを選択をクリックします。パソコンの中にあるファイルが表示されるので、先ほどダウンロードした画像(job_teacher_man.png)を選択して開くをクリックします。
WP24-1.PNG
アイキャッチ画像を設定をクリックします。
WP25.PNG
公開をクリックします。
WP26-1.PNG
再度プロフィールをクリックし、新規作成をクリックします。
WP27.PNG
WP22.PNG
先ほどと同じ要領で、画像を参考にしてそれぞれの欄に文字を入力します。
WP28.PNG
ファイルをアップロードをクリックします。
WP23.PNG
ファイルを選択をクリックします。パソコンの中にあるファイルが表示されるので、先ほどダウンロードした画像(job_teacher_woman.png)を選択して開くをクリックします。
WP29-1.PNG
アイキャッチ画像を設定をクリックします。
WP30.PNG
公開をクリックします。
WP32.png
再びPods Adminをクリックし、Componentsをクリックします。
するとComponents 一覧という画面が表示されますが、その中にTemplatesという項目があります。そこにマウスカーソルを合わせたとき無効化と表示される(=有効化になっている)ことを確認しましょう。
有効化と表示されたときは有効化をクリックします。

それが完了したらTemplatesをクリックします。
WP34.PNG
新規作成をクリックします。
WP35.PNG
タイトル欄にuser_profile_templateと入力し、テンプレートの欄には以下の内容を入力します。

<h3>自己紹介</h3>
<p>{@user_profile}</p>

完了したら公開をクリックします。
WP36.PNG
Pods Adminをクリックし、プロフィールをクリックします。
WP37.PNG
Auto Template Optionsをクリックし、Enable Automatic Pods Templates for this Pod?のチェックボックスにチェックを入れます。
次にSingle item view templateのプルダウンでuser_profile_templateを選択し、Save Podをクリックします。
以上でPodsの設定は完了です。

ウェブブラウザに https://<独自ドメイン>/profile/ と入力してEnterを押すと、先ほど登録した(私の例文通りに入力したなら)AさんとBさんのページが一覧になって表示されているはずです。

ページのタイトル「Aさん」「Bさん」をクリックすると、AさんとBさん個別のページが表示されるはずです。

3.ユーザーBの登録機能を実装する

WP_Members1-1.PNG
プラグインをクリックしたのち新規追加をクリックします。
WP_Members2.PNG
右上の検索欄に「WP Members」と入力するとプラグインの候補が表示されます。
「WP Members」の今すぐインストールをクリックします。
WP_Members3.PNG
有効化をクリックします。
WP_Members4.PNG
設定をクリックしたのちWP-Membersをクリックします。
WP_Members5.PNG
内容をブロックのプルダウンをどちらもブロックしないに設定します。
WP_Members6.PNG
固定ページのプルダウンを上から順にログインユーザーB登録ユーザープロフィールに設定します。
WP_Members7.PNG
フィールドをクリックします。
WP_Members8.PNG
フィールド設定表示必須のチェックボックスにチェックが入っていますので、このチェックをすべて外します。
WP_Members9-1.PNG
ラベルを表示の左横のチェックボックスにチェックを入れ、その上のプルダウンで設定を保存を選択します。最後に適用をクリックしましょう。
WP_Members10.PNG
Phoneの行にある編集をクリックします。
WP_Members11.PNG
ラベルの欄にPhoneと入力されているのでそれを電話番号に修正します。
修正したらフィールドを更新をクリックしましょう。その後、項目一覧表へ戻るをクリックします。
WP_Members13.PNG
電話番号表示必須のチェックボックスにチェックを入れてください。
WP_Members9-1.PNG
ラベルを表示の左横のチェックボックスにチェックを入れ、その上のプルダウンで設定を保存を選択します。最後に適用をクリックしましょう。
WP_Members15.PNG
ダイアログをクリックします。
WP_Members16.PNG
WP_Members17.PNG
WP_Members18.PNG
登録やログインの時に表示されるメッセージを設定する画面ですが、最初から入力されているメッセージは英語です。そこで、以下の通りに日本語に修正します。
すべての項目を日本語に変更したら変更を保存をクリックします。
WP_Members19.PNG
メールをクリックします。
WP_Members20.PNG
送信者の名前(カスタム)の欄にWebサービス運営と入力します。
(あなたのWebサービスの名前が決まっている場合、それを入力します。)
WP_Members21.PNG
WP_Members22.PNG
WP_Members23.PNG
WP_Members24.PNG
登録やパスワード変更の時に送信されるメールの文章を設定する画面ですが、最初から入力されているメッセージは英語です。そこで、以下の通りに日本語に修正します。
すべての項目を日本語に変更したら変更を保存をクリックします。
WP_Members25.PNG
続いてはユーザーBがユーザープロフィールの固定ページを表示したときに登録情報の変更ができるように設定します。
固定ページをクリックしたのちユーザープロフィールをクリックしましょう。
WP_Members26.PNG
文章を入力する欄に[wpmem_profile]と入力します。
WP_Members27.PNG
更新をクリックします。
WP_Members28.PNG
最後に、ログインするためのウィジット(ユーザー名やパスワードを入力する欄やログインボタン)を表示させます。
外観をクリックしたのちウィジェットをクリックします。
WP_Members29.PNG
フッター欄にあるウィジェット(検索、最近の投稿など)をクリックすると削除の項目が表示されます。
削除をクリックするとウィジェットがフッター欄から消えるので、これを繰り返してすべてのウィジェットを削除します。
WP_Members30.PNG
ウィジェットがすべて削除されました。
WP_Members31.PNG
利用できるウィジェットの欄にWP-Members Loginがありますのでこれをクリックしたのちウィジェットを追加をクリックします。
WP_Members32.PNG
タイトルの欄に入ってる文字を削除して空にします。その後、保存をクリックします。
以上でWP-Membersの設定は完了です。

4.申し込み機能を実装する

ユーザーBがユーザーAにサービスを申し込むためのフォームを実装しましょう。
これはContact form 7というプラグインを使うとできます。
WP_CF7_1.PNG
プラグインをクリックしたのち新規追加をクリックします。
WP_CF7_2.PNG
右上の検索欄に「Contact Form 7」と入力するとプラグインの候補が表示されます。
「Contact Form 7」の今すぐインストールをクリックします。
WP_CF7_3.PNG
有効化をクリックします。
WP_CF7_4.PNG
お問い合わせをクリックしたのちコンタクトフォームをクリックします。
WP_CF7_5.PNG
コンタクトフォーム1をクリックします。
WP_CF7_7.PNG
フォームの内容を画像の通りに修正します。
WP_CF7_8.PNG
続いてメールをクリックします。
WP_CF7_9-1.PNG
フォームの内容を画像の内容に修正します。
WP_CF7_15.png
その他の設定をクリックし、subscribers_only: trueと入力します。
入力後、保存をクリックします。
WP_CF7_12.PNG
ショートコードをコピーしてメモ帳などに張り付けておきます。
WP_CF7_10.PNG
続いて外観をクリックしたのちウィジェットをクリックします。
WP_CF7_11.PNG
利用できるウィジェットの欄にテキストがありますのでこれをクリックしたのちウィジェットを追加をクリックします。
WP_CF7_13.PNGWP_テーマ_4.PNG

テキストをクリックし、先ほどコピーしたショートコードを入力したら保存を押します。
WP_CF7_14.png
フォームが正しく実装されたのかを確認しましょう。
ダッシュボードの左上にある家のマークのところにマウスカーソルをあわせます。
そうするとサイトを表示が出てきますので、右クリックして「新しいタブで開く」を押してWordPressのトップページを表示させます。
WP_CF7_16.png
フォームが実装されました。
ユーザーBがユーザー登録し、ログインしている状態でないとこのフォームは表示されません。

5.トップページを作成する

最後に、トップページのデザインを整えてWebサービスを完成させます。

まずは、トップページ(固定ページ)の設定を変更します。
WP_テーマ_0.PNG
固定ページをクリックしたのちトップページをクリックします。
WP_テーマ_0-1.PNG
ページ属性(右端の更新ボタンなどがある列にあります)のテンプレートをフロントページに変更します。
WP_テーマ_0-2.PNG
更新をクリックします。

続いて、テーマをOnePressに変更してデザインを整えていきます。
WP_テーマ_1-1.PNG
外観をクリックしたのち新規追加をクリックします。
WP_テーマ_2.PNG
右上の検索欄に「OnePress」と入力するとテーマの候補が表示されます。
WP_テーマ_3.PNG.png
テーマにマウスカーソルをあわせるとインストールが表示されるのでクリックします。
WP_テーマ_4.PNG
有効化をクリックします。
WP_テーマ_5.PNG
外観をクリックしたのちメニューをクリックします。
WP_テーマ_6-1.PNG
メニュー構造の各項目にある▼をクリックします。
そうすると以下の画面が表示されます。
WP_テーマ_7.PNG
削除をクリックし、サービス内容の説明ユーザーA登録ユーザーB登録利用規約プライバシーポリシー以外の項目を削除します。
WP_テーマ_8.PNG
メニューを作成をクリックします。
WP_テーマ_9.PNG
続いてカスタムリンクをクリックし、URL欄に「/profile」リンク文字列欄に「ユーザーAを探す」を入力し、メニューに追加をクリックします。
WP_テーマ_10.PNG
メニュー構造の各項目をドラッグして画像のように並び替え、メニューを保存をクリックします。
WP_テーマ_11.PNG
外観をクリックしたのちカスタマイズをクリックします。
WP_テーマ_12.PNG
メニューをクリックします。
WP_テーマ_13.PNG
Menu1をクリックします。
WP_テーマ_14.PNG
メインメニューのチェックボックスにチェックを入れます。
WP_テーマ_15.PNG
公開をクリックします。
WP_テーマ_16.PNG
<」をクリックします。
WP_テーマ_17.PNG
<」をクリックします。
WP_テーマ_18.PNG
ホームページ設定をクリックします。
WP_テーマ_19.PNG
ホームページの表示固定ページを選択し、ホームページトップページを選択します。
WP_テーマ_20.PNG
公開をクリックします。
WP_テーマ_21.PNG
<」をクリックします。
WP_テーマ_22.PNG
セクション:ヒーローをクリックします。
WP_テーマ_23.PNG
ヒーローコンテンツレイアウトをクリックします。
WP_テーマ_24-1.PNG
大きなテキストのオレンジ枠部分をクリックします。
すると文章が修正できるので元々入力されている文章を削除してWebサービスと入力します。
※ここで入力する文章はあなたのWebサービスにあわせてアレンジしてください。
WP_テーマ_24-2.PNG
入力した文章が正しく反映されています。
WP_テーマ_25-1.PNG
画面をスクロールすると小さなテキストの項目が見つかります。
小さなテキストのオレンジ枠部分をクリックします。
すると文章が修正できるので元々入力されている文章を削除してユーザーAがユーザーBにサービスしますと入力します。
※ここで入力する文章はあなたのWebサービスにあわせてアレンジしてください。
WP_テーマ_25-2.PNG
入力した文章が正しく反映されています。
WP_テーマ_26.PNG
画面をスクロールするとボタン #1の項目が見つかります。
テキストご利用方法リンク/サービス内容の説明に修正します。
WP_テーマ_27.PNG
画面をスクロールするとボタン #2の項目が見つかります。
テキストユーザーAを探すリンク/profileに修正します。
WP_テーマ_28.PNG
ここまでの設定でヘッダーがこのようになります。
ご利用方法ユーザーAを探すをクリックすると、指定したページに遷移するようになりました。
WP_テーマ_29.PNG
公開をクリックします。
WP_テーマ_30.PNG
<」をクリックします。
WP_テーマ_31.PNG
<」をクリックします。
WP_テーマ_32.PNG
セクション:私たちについてをクリックします。
WP_テーマ_33.PNG
セクションの設定をクリックします。
WP_テーマ_34.PNG
セクションの各項目を画像の通りに修正します。
WP_テーマ_35.PNG
セクション説明のオレンジ枠部分をクリックします。
すると文章が修正できるので元々入力されている文章を削除してユーザーBが登録されているユーザーAを見て、サービスの申し込みができます。と入力します。
※ここで入力する文章はあなたのWebサービスにあわせてアレンジしてください。
WP_テーマ_36.PNG
公開をクリックします。
WP_テーマ_37.PNG
<」をクリックします。
WP_テーマ_38.PNG
セクション内容をクリックします。
WP_テーマ_39.PNG
項目を追加をクリックします。
WP_テーマ_40.PNG
固定ページを選択をクリックします。
WP_テーマ_41.PNG
固定ページを選択トップページを選択し、項目のタイトルを非表示のチェックボックスにチェックを入れます。
WP_テーマ_42.PNG
公開をクリックします。
WP_テーマ_43.PNG
<」をクリックします。
WP_テーマ_44.PNG
<」をクリックします。
WP_テーマ_45.PNG
セクション:特集をクリックします。
WP_テーマ_46.PNG
セクションの設定をクリックします。
WP_テーマ_47.PNG
セクションを非表示にしますのチェックボックスにチェックを入れます。
WP_テーマ_48.PNG
公開をクリックします。
WP_テーマ_49.PNG
<」をクリックします。
WP_テーマ_50.PNG
<」をクリックします。
WP_テーマ_51.PNG
セクション:ニュースをクリックします。
WP_テーマ_52.PNG
セクションの設定をクリックします。
WP_テーマ_53.PNG
セクションを非表示にしますのチェックボックスにチェックを入れます。
WP_テーマ_54.PNG
公開をクリックします。
WP_テーマ_55.PNG
<」をクリックします。
WP_テーマ_56.PNG
<」をクリックします。
WP_テーマ_57.PNG
セクション:サービスをクリックします。
WP_テーマ_58.PNG
セクションの設定をクリックします。
WP_テーマ_59.PNG
全ての項目を空欄にします。
WP_テーマ_60.PNG
公開をクリックします。
WP_テーマ_61.PNG
<」をクリックします。
WP_テーマ_62.PNG
セクション内容をクリックします。
WP_テーマ_63.PNG
項目を追加をクリックします。
WP_テーマ_64.PNG
固定ページを選択をクリックします。
WP_テーマ_65.PNG
カスタムアイコンのプルダウンでアイコンを選択します。
アイコンの□枠をクリックすると使用できるアイコンの一覧が表示されるので好きなものを選択します。
固定ページのプルダウンでユーザーA登録を選択します。
個別ページへのリンクのチェックボックスにチェックを入れます。
すべて完了したら項目を追加をクリックします。
WP_テーマ_67.PNG
固定ページを選択をクリックします。
WP_テーマ_68.PNG
カスタムアイコンのプルダウンでアイコンを選択します。
アイコンの□枠をクリックすると使用できるアイコンの一覧が表示されるので好きなものを選択します。
固定ページのプルダウンでユーザーB登録を選択します。
個別ページへのリンクのチェックボックスにチェックを入れます。
WP_テーマ_69.PNG
公開をクリックします。
WP_テーマ_70.PNG
X」をクリックしてカスタマイズを終了します。

完成

これでWebサービスの作成は完了です。

curryperformer-kato
インフラエンジニア(5年目)。BOOTHでWebアプリ開発やセキュリティの同人誌を頒布中。
https://webservice.booth.pm/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした