WordPressの使い方

管理画面

うまくログインできるとWPの管理画面が表示されます。

ダッシュボード

最初に表示されるのは「ダッシュボード」と呼ばれるホーム画面で、WPの更新情報やイベント・ニュースの案内、などが記載されています。

ホームはWPサイト運営上、それほど使わないので興味がったら触ってみてください。

管理バー

上のメニューは管理バーと呼ばれるものです。

ログイン状態ならば、ダッシュボードの他に、WPサイトでも上に固定で表示されます。

一番左にあるWのアイコンはWPについての情報が記載されています。

Macなら「りんごのアイコン」の中の「このMacについて」に該当します。

ここもWPサイトを運営上、使うことはほとんどないので無視して構いません。

Wのアイコンの横に設定した「サイト名」があります。これは必ず使いますので覚えておきましょう。

サイト名をクリックしてみましょう。

WPサイトが表示されます。

もう一度クリックすると、ダッシュボードに戻ります。

メニュー

続いてダッシュボードの左側にあるメニューはWPサイトを管理するためのツールパネルです。

上から順に簡単に解説していきます。

投稿

投稿は記事の編集画面です。

ブログなら記事タイトル、本文や画像などを編集して投稿するといった感じですね。

メディア

メディアは、画像や動画、音声ファイルなどを管理画面です。

アップロードしたファイルの一覧が表示されます。

今は何も表示されていませんが、画像や動画などをアップロードしていくと、次のように一覧として表示されます。

固定ページ

固定ページは投稿ページと似てますが、投稿ページと比べて更新頻度が低いページのことを意味します。

また、グローバルナビゲーションなどに固定しておくためのページでもあります。

例えば企業ページなら、会社情報、サービス情報、お問い合わせ、などにあたります。

コメント

記事に閲覧者が書いたコメント見ることができます。

また、コメントを記事内に表示するかどうかもここで管理します。

外観

外観、WPのテーマや、デザイン、レイアウト、メニューなどのサイトの見た目やパーツを変えたりできます。

プラグイン

「SEO対策ツール」や「お問い合わせフォーム」などの拡張機能を追加できます。

ユーザ

ユーザ　WPを使用するユーザを追加したり編集したりなどの管理できます。

ツール

ツール　WPのデータを扱います。WPサイト運営上あまり使うことはありません。

設定

設定　WPの基本的な設定ができます。サイトタイトル、キャッチフレーズ、表示する記事の数、パーマリンクなどを設定できます。

WordPressの設定

一般設定

パーマリンク設定

ここは一番重要です！
パーマリンク設定では、サイト内のURLの表示方法を変えられます。
WordPressをインストールしたら、まず初めにパーマリンク設定を行いましょう。

サイトを運営して記事がたくさん投稿されて、アクセス数が集まって段階でパーマリンク設定でURLの表示方法を変えると、SEO的に初期段階に戻ってしまいます。

まずは最初にパーマリンク設定を行いましょう。

おすすめは「投稿名」です。

テーマの変更

次にテーマを変えてみましょう。

デフォルトのテーマはこんな感じですが、このテーマから別のテーマに変えます。

外観の中にテーマという項目がありますので、クリックして移動しましょう。

テーマの一覧が表示されます。

現在適応されているテーマには、「有効：○○○○○」とテーマの横に表記されています。

他に２つテーマが用意されているので、他のテーマに変えてみましょう。

有効化をクリックすると、そのテーマが適応されます。

もし、テーマを変える前にどんな見た目になるかを確認したければ、「ライブプレビュー」をクリックしましょう。

今のテーマを変えずに、見た目を確認しながらカスタマイズできる画面になります。

また、あらかじめ用意されているテーマ以外のテーマも検索して使うこともできます。

新しくテーマを入れる方法は３つありますので、それぞれ紹介していきます。

方法１：検索から探す

テーマの画面の上にある「新規追加」をクリックしましょう。

するとテーマの一覧が表示されます。

最初に表示されるのは人気のテーマです。

他にもニュースサイト向け、ポートフォリオサイト向けのテーマなどたくさんあります。

好きなものを探して「インストール」をクリックしてみましょう。

するとテーマの画面に新しくテーマが追加されます。

追加されたテーマを有効化してみましょう。

方法２：ネット上から探す

また、この一覧にはないテーマも世の中に存在します。

ネット上を検索すれば自作のテーマを公開しているサイトがいくつか存在します。

それでは、ネットでテーマを探してみましょう。

Fukasawa

https://andersnoren.se/teman/fukasawa-wordpress-theme/

Fukasawaはポートフォリオサイトに適したWordPressテーマです。

ダウンロードしてみましょう。

ダウンロードしたらZIPファイルは解凍しなくていいです。

テーマの画面に戻って、上の「テーマのアップロード」をクリックしましょう。

ダウンロードしたZIPファイルを選択し「今すぐインストール」をクリックしましょう。

うまくアップロードできたら、テーマの中に「Fukasawa」が追加されているはずです。

有効化してみましょう。

もう一つテーマを追加してみましょう。

Cocoon（コクーン）

https://wp-cocoon.com/

Cocoonはブロガーに人気のテーマです。

メニューのダウンロードから、「親テーマのダウンロード」という見出しのしたにある「”Cocconテーマ”をダウンロード」をクリックしてダウンロードしましょう。

Fukasawaテーマと同じようにアップロードしてみましょう。

「辿ったリンクは期限が切れています。」というメッセージが表示されて、うまくアップロードされませんよね。

このような場合は、別の方法でテーマを追加します。

方法３：直接テーマフォルダーに入れる

今度はZIPファイルを解凍して入れます。

htdocs/wp/wp-content/themes/の中に、解凍した「cocoon-master」というフォルダを入れましょう。

ちなみに、このフォルダはテーマを入れておくための場所で、「テーマフォルダー」と言います。

先ほど追加した「Fukasawa」も入っていますよね。

フォルダに入れたら、テーマの画面に戻りましょう。

更新するとCooconテーマが追加されているはずです。

ここでテーマの追加方法についてまとめますね。

テーマのカスタマイズ

この先は、このCooconを使ってWPサイトのカスタマイズしていきます。

そしたら、まずはデザインを変えていきましょう。

外観のカスタマイズを選びます。
サイト基本情報
サイトのアイコンを変えましょう。
「サイトアイコンを選択」をクリックするとメディアライブラリに移ります。
ここで、アイコンにしたい画像をアップロードして選択しましょう。

左矢印で戻ってもらって、今度は背景画像を変えてみましょう。
「画像を選択」をクリックし、アイコンと同じようにメディアライブラリに画像をアップロードして背景画像を選択しましょう。
背景の位置とかサイズも変えられますので、お好みで調整しましょう。

他に、メニュー、ウィジェット、ホームページ設定などがありますが、これは後でいじりますので、今は触らなくていいです。
デザインが変えられたら、上にある「公開」ヴォタンをクリックしましょう。
これをクリックせずに別のページに移動したり、ブラウザを閉じてしまうと設定が反映されませんので注意しましょう。
反映されていない場合は警告が出るので、確認しましょう。

ちなみに、このカスタマイズはテーマによって内容が変わってくるので、その都度テーマに沿ったカスタマイズ方法を覚えましょう。

プラグイン

プラグインとは拡張機能のことですが、WordPressにも拡張機能がたくさんあります。

インストールしておいたほうがいプラグインがありますので、まずそれをイントールしましょう。

Classic Editor

Classic Widgets

記事の作成

次は、７つほど記事を作っていきましょう。
「投稿」をクリックすると「投稿一覧」が表示されます。
サンプルページがありますね。
このページを編集して見ましょう。タイトル部分をクリックします。
すると、記事の編集画面に移ります。

比較的新しいWPだと、このようにな編集画面になっていますが、昔からWPを使っている人にとっては大変使いづらいそうです。
このままでもいいのですが、見た目を統一したいので、昔の編集画面に戻しましょう。
プラグイン画面を開きましょう。
今入っているプラグインの一覧が表示されます。
この画面では今入っているプラグインの有効や無効、設定などができます。

「新規追加」「プラグインの検索…」「Classic Editor」というキーワードでプラグインを検索しましょう。
「今すぐインストール」をクリックすると、プラグインがインストールされます。
そして「有効化」ボタンに変わるので、そのボタンをクリックしましょう。

プラグインの一覧に戻ると、「Classic Editor」が追加されています。
ちゃんと有効化されているか確認しましょう。

ここで先ほどの「投稿画面」に戻ります。

すると見た目が変わっていますよね。

今度はプラグインを無効化すると、最初の見た目に戻ります。もう一度有効化しましょう。

そしたら、早速記事を編集していきます。
タイトル
本文
を入力しましょう。
また「メディアを追加」からメディアライブラリにある画像を追加することもできます。

見た目を確認するには右上の「プレビュー」から編集途中の見た目が確認できます。
※実際に投稿されたわけではありません。

記事が書けたら、タイトルしたのパーマリンクを編集しましょう。
タイトルを日本語にしてた場合は、URLに日本語が混ざったものになります。
日本語はよろしうないので、半角英数字に変えましょう。
単語を区切る場合には「_（アンダースコア）」「-（ハイフン）」も使えます。
世の中のサイトを見てみると、「-（ハイフン）」で区切ってる場合がほとんどなので、単語の区切りにはハイフンを使いましょう。

また、アイキャッチ画像も設定しましょう。

内容を入力し終わったら、右上にある「公開」ボタンをクリックしましょう。

記事がちゃんと投稿されているか確認するには、タイトル下のパーマリンクをクリックするか。
管理バーの「投稿を表示」でも確認できます。

また、TOPページをみると、上に今書いた記事が投稿されています。

同じ感じでもう６つ記事を書いていきます。

新しく記事を作るには上の「新規追加」をクリックします。

カテゴリーの設定

７つの記事ができましたので、ここで記事のカテゴリ分けをしたいと思います。

「投稿」から「カテゴリー」を選びましょう。
名前にカテゴリー名を
スラッグ にはカテゴリのローマ字表記を入れましょう。

「新規カテゴリーを追加」をクリックして、カテゴリーを追加します。
後から右側のエリアで編集ができます。

カテゴリーが追加できたら、投稿一覧を開きましょう。
個別に「投稿を編集」からカテゴリーを設定することもできますが、めんどくさいし時間もかかりますので、投稿一覧からカテゴリーを変えたいともいます。

「クイック編集」から簡単に記事の設定を変更できます。ここでカテゴリーにチェックを入れて、右の「更新」ボタンをクリックしましょう。

カテゴリーを追加して、各記事をカテゴリー分けしましたが、こうすることで、閲覧者は記事を見つけやすくなります。

例えば、記事の下にある関連記事に同じカテゴリの記事が表示されたり、さらに下にあるパンくずリストから同じカテゴリーの記事を探せます。

タグも同じような感じですので、説明は省略します。
タグに関してスラッグはそこまでローマ字表記こだわる必要はないでしょう。日本語のまま使っているサイトもあります。
できるかぎりスラッグはローマ字表記の方が望ましいですのは事実です。

固定ページ

次は固定ページを作成していきましょう。３つ作ります。
会社概要、サービス、お問い合わせ

「固定ページ」をクリックすると、固定ページの一覧が表示されます。
「投稿」と同様に、サンプルページがあるだけですね。
このサンプルページを編集しましょう。
やり方は、投稿と同じですね。ただカテゴリやタグがなかったりと、見た目が少し変わっています。
ですが、基本的には操作は同じです。

タイトルを「企業情報」に、本文は原稿をコピペしましょう。
スラッグはcompanyとしましょう。

新しく固定ページを作成する場合も上にある「新規追加」をクリックします。

お問い合わせページを作る

このページにお問い合わせフォームを追加しましょう。
プラグインから「Contact Form 7」というキーワードでプラグインを検索しましょう。
インストールしたら有効化しましょう。
有効化したら左のメニューに「お問い合わせ」が追加されます。
「お問い合わせ」をクリックするとコンタクトフォームの一覧が表示されます。

あらかじめ「コンタクトフォーム１」というタイトルがありますが、これを編集しましょう。

編集画面が表示されると、あらかじめコードが入力されています。

「題名」の下に「ご依頼内容」のチェックボックスを追加しましょう。

必須項目にチェックを入れると必須項目になります。

オプションに

と入れてみましょう。

「ラベルを前に、チェックボックスを後に配置する」にチェックを入れましょう。

最後に「タグを挿入」をすると、タグが挿入されます。

お問い合わせの内容は最初にWPの設定で登録したメールアドレスに届きます。
届くメールアドレスと変えるには、「メール」から変えられます。
また、ユーザーへのメッセーシを編集するには「メッセージ」で編集できます。

「保存」をクリックしましょう。

保存できたら、コンタクトフォーム一覧に戻りましょう。

タイトルの右にショートコードという項目がありますが。
そのコードをコピーしましょう。

コピーできたら、「固定ページ」の「お問い合わせ」の本文に貼り付けましょう。

記事を更新してお問い合わせページを表示するとフォームが表示されます。

ちなみにショートコードは、例えば長い文章や、使いまわしたい文章などを他の場所に保管しておいて、それに関連付いたコードを入力することで、その文章が表示される便利なものです。

メニューを変更

はい、ここまで投稿ぺーじを７つ、固定ページを４つ、合計で11個できましたね。

そしたら今度はサイトの上の方にグローバルナビゲーションを追加したいと思います。
「外観」「メニュー」
「新しくメニューを作成しましょう。」でメニューを追加します。
メニュー名は「グローバルナビゲーション」
メニュー設定は「ヘッダーメニュー (現在の設定: グローバルナビゲーション)」にチェックを入れましょう。
右下の「メニューを作成」をクリックしましょう。

メニューの追加から
カスタムリンクでこのサイトのURL「http://localhost:8888/wp/」と入れましょう。
固定ページの、企業情報、サービス、制作実績、お問い合わせを追加しましょう。

メニューの構造で順番や階層が調整できます。

編集が終わったら「メニューを保存」をクリックしましょう。

WPサイトをみると上にグローバルナビゲーションが追加されていますね。

固定ページ以外にも、投稿やカテゴリーも追加できます。

ウィジェット

最後にウィジェットについて解説します。

ウィジェットは別名ブログパーツとも言いますが、
ウィジェット画面でサイドバーやフッターなどに、パーツを追加していくことができます。
「外観」「ウィジェット」を開きましょう。

これも記事エディターと同様に、新しいWPではウィジェット画面の見た目が変わっています。
これも昔のデザインに戻しましょう。
プラグインに「Classic Widgets」を追加しましょう。

有効化したらウィジェット画面に戻りましょう。

左側が「利用できるウィジェット」で、いろんなウィジェットが用意されています。
右側が、ウィジェットを入れる場所を指定できます。
試しにサイドバーに追加して見ましょう。

カテゴリー
アーカイブ
最近の投稿
カレンダー

また削除もできます。
「メタ情報」を削除しましょう。
した三角をクリックするとウィジェットの編集ができますが、下にある「削除」をクリックしましょう。

メタ情報は、ログインなどが表示されますが、表示されているとセキリティ的に危ないので、消した方が無難です。

はい、これで基本的なWPの操作の解説は終わりです。

今日はCooconというテーマを使いましたが、自分でオリジナルのテーマを作って見たいと思いませんでしたか？

ちなみにWebデザインができてWPでテーマが作れるようになると1案件で20〜30万円は稼げます。

コピーできました！