ワードプレスでWEB制作

ワードプレスとは

WordPress(ワードプレス)は初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。HTMLやCSSといったプログラムを書かなくても視覚的にある程度のサイトを構築できます。

今回はビジネスサイトのトップページを作りながらワードプレスの機能にふれてみましょう。


step1.ワードプレスを使えるように環境を整える

MAMP※とWordPressをインストールする

※MAMP→擬似的にローカル環境にWordPressなどのソフトウェア・プログラムを動作させるソフト。
(これがないとワードプレスが作動しません。)

複雑な設定はありませんので、下記の動画を参考に作業してみてください。

まとめ


step2.ワードプレスを使ってみる

WordPressのツールバーをざっくりと見てみる

ワードプレスでサイトデザインをする上で最低限知っておくツールを紹介します。

まとめ


step3.ワードプレスでトップページを作ってみる

1.トップページをつくる前に下準備を行う

トップページにはメニューやニュースなど様々な要素がはいってくるため、投稿や固定ページに空のダミー項目を作ってリンク先のページを作っておきます。

2.Gutenbergエディタを使ってトップページを制作する

Gutenberg(グーテンベルグ)といういろいろな機能をもったブロックを組み合わせることで簡単にトップページを作ることができます。

2.1 ヘッダー、フッターのメニュー項目を追加

「外観>メニュー>新しいメニューを作成しましょう」から新規メニューを立ち上げ、メニュー名(分かればなんでも良い)を作成し、「メニューを作成」ボタンをクリック。
「メニュー項目を追加」欄から必要項目にチェックを入れて「メニューに追加」ボタンで追加。
メニュー構造に追加されたら任意の順番にD&Dで並び替えをし、「メニューの保存」ボタンをクリック。

※注意:今回のメニュー項目はそれぞれ独立した項目として設定するため、D&Dのときに項目の先頭が揃うように配置します。(上項目より一段下がった状態になると子要素になるので、メニュー表示では1つ上の項目のプルダウンメニューになります。設定はいつでも変更できるので一度試してみてもいいと思います。)


メニューを保存したら「サイト表示>カスタマイズ>メニュー」へ移動します。移動先に先ほど制作したメニューが表示されているはずなので、クリックしヘッダーとフッターに設定します。設定すると画面に反映されるので確認してみましょう。
確認できたら公開ボタンを押して内容を更新したらメニュー追加完了です。

メニュー制作動画