よく見るワードプレス。私のようなIT初心者で、「ホームページを作成したいけど、操作がわからない」「LAMP等サーバ構築入門でたどり着いたが、この先ちょっと興味あるけど、どうすんの？」という方を対象にしています。
自分のLINUXPCやレンタルサーバーにwordpressをインストールしたあとの説明です。
初期画面
インストール＆ログイン後、最初に表示されているダッシュボードの画面を見てみましょう。
左のメニューバーを見ると
・ダッシュボード
・投稿
・メディア
・固定ページ
・コメント
・外観
・プラグイン
等があると思います。これらを組み合わせて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」のカスタマイズを説明するのでテーマを有効にします。
次に「カスタマイズ」ボタンをクリック
カスタマイズ画面になりました。
「サイト基本情報」を押します
今回は「ロゴ」と「キャッチフレーズ」を変えましょう
「ロゴを選択」を押下するとダッシュボードにあった「メディア」が表示されます。
今回は適当にペイントで作成したした画像をアップロードし、「選択」します。無料で使用できるロゴは「フリー素材 ロゴ」などでググってみてください。
次にカスタマイズ画面「色」を選択します。
メインカラーが「デフォルト」になってるので「カスタム」で青色にします
すると、下部の「検索ボタン」等の色が変わってますね
→ その他の色の変更は次回
「メニューの位置」は「メイン」にチェックをします。
「フッターメニュー」はページ下部表示用
「ソーシャルリンクメニュー」はこういった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」で説明しましたが、ほかのテーマでは、レイアウト全体はもちろんのこと、「ウィジェット」カスタマイズ画面では、今回は「フッター」（ページ下部）しかありませんでしたが、「サイドバー」やフッターを左右で分けるテーマなど様々なものがありますので、試してみてください。
本番作成する場合は、ワイヤーフレームという設計を用いてからテーマを選ぶとよいでしょう。
次回は今回割愛した細かい設定、プラグイン、内部構造等の記事を上げる予定です。
このページは、メモ用として行った設定は、投稿記事として反映していきます。
コメント
[…] 前回はインストール後、WordPressってどうすんの？という記事を書きました。 […]
[…] 以前の記事では適当にカスタムHTMLのリストタグで作成しましたが、もっと見やすくします。 […]
[…] 前回記事で作成したメニューは固定ページによって構成しています。 […]
[…] まず、テーマのカスタマイズ画面に移動します […]