【転職活動に有利!】サイト制作編 WordPressを使ってWEBサイトを作ってみよう!

こんにちは。グロウスギアの禄大朗です。

前回のWordPressでサイトを作ってみよう導入編!に引き続き、今回はサイト制作編ということで実際にサイトを作ってみましょう。

まずは、どんなサイトを作るかを決めてみましょう。私の場合、われらががグロウスギア代表の細井さんのブログをためしに作ってほしいということでしたのでさっそく製作していきます。

ちなみにサイトのリンクはこちらです→https://growth-gear.co.jp/ggblog/

1 最初の準備

実はこのWEBサイトはWordPressをインストールした時点で誰でも見ることができてしまうんです。ですので、このままだとまったく未完成のホームページが衆目にさらされることに…!

というわけで、ホームページが未完成の間は検索エンジンなどから見られることを防ぐために設定してしまいましょう。

「ダッシュボード」を開きその中から「設定」にカーソルを合わせ「表示設定」をクリックしましょう。

「検索エンジンがサイトをインデックスしないようにする」にチェックを入れ。ページ下部の「変更を保存する」をクリック。これで編集中のホームページが検索結果に表示されなくなり、サイトのURLを知らない人以外はサイトにアクセスすることができなくなります。当然ですが、サイトが完成したらチェックを外し、検索エンジンに表示されるよう設定しなおしましょう。

余計な機能を削除しよう

作ったサイトを見てみると横側に色々な機能がついているのがわかりますでしょうか。


すでにたくさん機能がついていますが、皆さんが制作するサイトにそぐわないと思う機能は削除してしまいましょう。
「ダッシュボード」から外観を選択し「ウィジェット」をクリック。

この画面がでてきますので、皆さんがいらないと思う機能は削除してしまいましょう。私は簡単なブログを作るつもりなので、「検索」「カテゴリー」「メタ情報」をそれぞれ選択して削除をクリック!

 

そしてサイトに戻ってみましょう。すると…

 

 

 

さっぱりしましたね!
さあ、これで最初の準備ははおしまいです。いよいよサイトを作っていきましょう。

 

2 文章を投稿してみよう

ではいつもの画面に行ってみましょう。


投稿という部分をクリックしましょう。


そうするとHello world!という記事が一つだけあると思いますので、邪魔なので消すか編集してしまいましょう。

さあみなさん好きな文章を入れてみましょう!言うまでもなく私の場合は、細井さんのLINEブログから直接文章を持ってきます。かなり前に書かれたブログですので時候の違いはご愛嬌。


文章を打ち込んだら、ページ右側にある「更新」もしくは「公開」ボタンをクリック。そうしたら「更新」ボタンの上にある「変更をプレビュー」という部分をクリックしてみましょう。


こんなかんじになりました。

おや…?「ちょっと殺風景で寂しすぎやしないかい」という皆さんの心の声が聞こえてきますね。おまかせください。そんなときは画像を挿入してみましょう。
編集ページにある「メディアを追加」をクリック。


「ファイルをアップロード」をクリックし、「ファイルを選択」からお好きな画像をアップロードしましょう。


「メディアライブラリから」先ほどアップロードした画像を選択して記事内の適当な部分に挿入しましょう。私の場合は文末に挿入してみます。

 

 

なんということでしょうか、さっきの荒涼とした大地を思わせるような殺風景なページから一転、おじさん二人が笑顔でピース。なんだかこっちまで楽しげな気持ちになってきましたね。
※ちなみに左が我らがグロウスギア代表の細井さんで右がグロウスギアのグループ会社であるソウルドアウト代表の荻原さんです。

さてさて、これで記事を一つ作ることができましたね。当然これだけではまだまだ、ブログとしては未完成です。固定ページメニューやプラグインなどを有効化することで、よりブログらしくしていきましょう。

3 固定ページを作ろう

固定ページとは投稿とは異なり、運営者情報や、問い合わせフォームを作るなど、サイトを運用していく上で重要なモノです。

今回はグロウスギア細井のブログということで、細井さんの自己紹介ページを簡単に作ってしまいます。

では「ダッシュボート」から「固定ページ」を選択します。サンプルページがありますので編集するか削除して、作り変えてしまいましょう。

 

ちゃちゃっと編集して「更新」または「公開」をクリック。

 

 

これで固定ページが出来上がりましたが、これで完成ではありません。ナビゲーションメニューを作って固定ページにアクセスできるようにしましょう。

4 ナビゲーションメニューを作ろう

ナビゲーションメニューがサイトにあるとユーザーは迷うことなく関連したコンテンツにアクセスすることができます。今回は簡単なブログなのでグロウスギア細井さんの自己紹介にアクセスできるメニューを作りましょう。

ダッシュボードから「外観」を選択し、「メニュー」をクリックします。こういった画面が表示されるので、メニューとでも名前を付けて「メニューを作成」をクリック。

 

固定ページを選び先ほど作成した、固定ページの「自己紹介」にチェックを入れ「メニューに追加」をクリックし、メニューを保存します。また、「メニュー設定」から「グローバルナビ(ページ上部)」か「フッターナビ(ページ下部)」にチェックを入れるとページ上部か下部にメニューが表示されるようになるのでやっておきましょう。

サイトを見てみると…はい、ページ上部に出てきましたね!

 

 

さあ、最後はプラグインについてです。

5 プラグインの使い方

プラグインとはデフォルトのWordPressにサイトを運用していくうえで便利な機能を追加することができるもので、これによりWebに関する知識がなくても、思い通りに記事を作ることができたり、プログラムがわからなくてもお問い合わせフォームが設置できたりするんです。この拡張性の高さもWordPressが世界で主流となった大きな理由の一つなわけです。

ではもうお馴染み「ダッシュボード」から「プラグイン」を選択します。いくつかすでにプラグインがありますが。皆さんが必要にチェックを入れ適用しておきましょう。

今回は、試しにお問い合わせフォームのプラグインを入れてみます。デフォルトで入っているプラグインにはないので「新規追加」のところをクリックし、「Contact Form 7」で検索してみると…

見つけました!「今すぐインストール」を押して、「インストールしました」とでるとそのまま「有効化」できますのでクリックしましょう。

 

プラグインの一覧に戻ると…

ありましたね、Contact Form 7にチェックを入れ、「設定」をクリック。

コンタクトフォーム01とあるのでそれをクリックします。

わかりづらいので名前を「お問い合わせ」に編集し、青くなっているショートコードをコピーします。

→先ほどのようにお問い合わせ用の固定ページを作り、そこにショートコードを貼り付け、メニューに追加してみます。

すると…

なんだかそれっぽくなりましたね!最後に「お問い合わせ」をクリックします。

こんな風になってます。

おわりに

以上でサイト制作編は終わりとさせていただきます!この記事で紹介した機能はWordPressでサイトを制作する上での基礎中の基礎なので、まだまだ紹介してない機能がたくさんありますが、WEBサイト制作においては実際に作ってみたほうがはるかにわかりやすいと思いますので、「習うより慣れろ!」の精神でWordPressを片っ端からいじくり倒しましょう!