【wordpress超入門】インストール後

よく見るワードプレス。私のようなIT初心者で、「ホームページを作成したいけど、操作がわからない」「LAMP等サーバ構築入門でたどり着いたが、この先ちょっと興味あるけど、どうすんの？」という方を対象にしています。

自分のLINUXPCやレンタルサーバーにwordpressをインストールしたあとの説明です。

1. 初期画面
   • ダッシュボード
   • サイト画面
2. 表示項目
   • テーマ
   • 投稿
   • ウィジェット
3. カスタマイズする
   • テーマ切り替え
   • テーマ「Twenty Nineteen」をカスタマイズしてみる

初期画面

インストール＆ログイン後、最初に表示されているダッシュボードの画面を見てみましょう。
左のメニューバーを見ると
・ダッシュボード
・投稿
・メディア
・固定ページ
・コメント
・外観
・プラグイン
等があると思います。これらを組み合わせてWebページを作成していきます。

次に、自分のサイトにアクセスしてみましょう。
WebブラウザのURL入力欄にサイトの以下のいずれかを入力
・IPアドレス
・FQDN（http://www.beyoufree.com/）　※ドメインを取得済みの人
・localhost:8080　※自分のパソコンをWebサーバーとして構築した場合
・現在表示されているダッシュボードのURLから「wp-admin/index.php」を消す

すると以下のような画面が表示されると思います。

表示項目

１．サイトタイトル　-　キャッチコピー
→　インストール時に設定したタイトル
２． Hello World！のデカ文字～1件のコメント
→　デフォルトで投稿されている記事
３． 検索のテキストボックス～
→　デフォルトで用意されたウィジェット
４． 最下部「Proudly powered by WordPress.」
→　デフォルトで用意されているwordpressで作ってますよのやつ

これらはすべて編集可能です。

　

カスタマイズする

テーマをいじってみよう
テーマとはレイアウトや機能のフレームワークで、家でいうモデルルームのようなものです。

ダッシュボード画面に戻り、「外観」をクリックします。

デフォルトテーマが３つあり、「Twenty Nineteen」が有効になっていると思います。
テーマを体感するため、となりの「Twenty Seventeen」を有効にしてみましょう。
有効になったら、再び自分のサイトを表示してみましょう

上部がスタイリッシュな画像になり、先ほど下部にあったウィジェットが右サイドバーに移動し、おしゃれなサイトになりました！
これだけでも、テーマの重要性がわかると思います。ほかにもテーマはたくさんあるので、「新規追加」から「こんなサイトにしたい！」というテーマをインストールしてみてください。

テーマ「Twenty Nineteen」をカスタマイズしてみる

今回はデフォルトの「Twenty Nineteen」のカスタマイズを説明するのでテーマを有効にします。

次に「カスタマイズ」ボタンをクリック

カスタマイズ画面になりました。
「サイト基本情報」を押します
今回は「ロゴ」と「キャッチフレーズ」を変えましょう
「ロゴを選択」を押下するとダッシュボードにあった「メディア」が表示されます。
今回は適当にペイントで作成したした画像をアップロードし、「選択」します。無料で使用できるロゴは「フリー素材　ロゴ」などでググってみてください。

次にカスタマイズ画面「色」を選択します。
メインカラーが「デフォルト」になってるので「カスタム」で青色にします
すると、下部の「検索ボタン」等の色が変わってますね
　→　その他の色の変更は次回

次にカスタマイズ画面「メニュー」を選択します。
サイトにメニューバーを設置する人が多いと思うので、メニューのカスタマイズは必須だと思います
まず、「メニューに新規作成」を押下
「メニュー名」を入力します。今回は「Menu」にしました。

「メニューの位置」は「メイン」にチェックをします。
「フッターメニュー」はページ下部表示用
「ソーシャルリンクメニュー」はこういったSNS用のメニュー作成時に使用します。
→　次回説明

「次へ」を押下します。
次は今作成した「Menu」のカスタマイズ画面です
どのようなメニュー構造にするか考え、「項目を追加」を押します。

自分は今後、学習系、趣味、仕事系のブログを載せていきたいのでメニューの構造を以下のようにします
HOME
BLOG(STUDY/HOBBY/JOB)
About me(Contact me)

今回はデフォルトで作成されている固定ページの「ホーム」の「＋」を押して追加し、「固定ページ」の「新規固定ページの追加」BOXに「BLOG」と記載し「追加」押下、「STUDY」と記載し「追加」押下をメニュー分追加していきます。

追加が完了しました。
しかし、「STUDY」メニューは「BLOG」メニューの子メニューとしたいので、その場合は「STUDY」を掴んで親メニュー「BLOG」のやや右下へドラッグすることで、子メニューとなります
他も同様に子メニュー化させます

そして、右のプレビュー画面を見て、「BLOG」メニューにカーソルを合わせると

子メニューになっていることがわかります。
以上でメニューのカスタマイズは完了です

次にカスタマイズ画面「ウィジェット」を選択します 。

デフォルトで「検索」「最近の投稿」などがあります。これらはページ下部（フッター）に表示されているものたちです。
不要な項目は「▼」を押して、削除しましょう。
また、他に下部に追加したい項目がある場合（画像や動画、メニューやカレンダー等）、「ウィジェットの追加」を押すことでカスタマイズできます。
→　ウィジェットの追加は次回

最後に「ホームページ設定」です。

「ホームページの表示」は現在「最新の投稿」にチェックがあり、サイトのTOPページにはHello Worldと書かれたデフォルトの「投稿」が表示されています。なので「ダッシュボード」の「投稿」を選択し、新規の投稿を上げると、その新規記事がサイトのTOPに表示されることになります。
また企業サイト等、TOPページは固定のページにしたい場合、「固定ページ」にチェックを入れ、作成した固定ページを表示することができます。
今回は「固定ページ」にチェックを入れ、デフォルトで用意されている「サンプルページ」を選択します。

するとTOPページが変わりました。
固定TOPページを編集する場合は、「ダッシュボード」画面の「固定ページ」から今設定したページ（今回はサンプルページ）を編集することで、自分色にカスタマイズできます。

他にカスタマイズ画面「追加CSS」がありますが、割愛します。ページ全体の色、サイズ等カスタマイズできます。もちろん個別の固定ページで修正することもできます。

さて、以上で【wordpress超入門】インストール後を終了します。
今回はテーマ「Twenty Nineteen」で説明しましたが、ほかのテーマでは、レイアウト全体はもちろんのこと、「ウィジェット」カスタマイズ画面では、今回は「フッター」（ページ下部）しかありませんでしたが、「サイドバー」やフッターを左右で分けるテーマなど様々なものがありますので、試してみてください。
本番作成する場合は、ワイヤーフレームという設計を用いてからテーマを選ぶとよいでしょう。

次回は今回割愛した細かい設定、プラグイン、内部構造等の記事を上げる予定です。
このページは、メモ用として行った設定は、投稿記事として反映していきます。