今回は、WordPressを導入したら知りたい設定を7つ紹介します。
読者像
今回の内容は全く知識がない初心者でも分かるようなものとなっています。「他のページを見てもわからない」そんな人は是非見ていってください!
その前に、管理画面へのログイン方法を説明します。
WordPressをインストールしたドメイン(一般的にはサイトドメイン=○○○○○.comのようなもの)に/wp-login.phpをくっつけたリンクにアクセスします。すると、このような画面が出てきます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-24.png)
ここで設定したユーザー名とパスワードでログインします。「ログイン状態を保存します」を押すと次回からログインする必要がなくなります。ログインすると、次のような画面が出てきます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-25-1024x576.png)
これでログインは完了です。
おすすめ設定
テーマを適用
見た目はとても重要な要素です。テーマを変更するだけでイメージは大きく変わります。
今回はこのページでも使用しているテーマ「Cocoon」を導入する方法を紹介します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-26-1024x722.png)
Cocoonテーマのダウンロード | Cocoon (wp-cocoon.com)
ここからCocoonの親テーマと子テーマをダウンロードします。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-31.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-32.png)
その次に、テーマを導入します。「外観」ページに飛びます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-30.png)
新規追加からテーマのアップロードに飛びます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-33.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-34.png)
ファイルを選択を押して、ダウンロードしたzipファイルを選択します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-35.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-36.png)
選択できたら、「今すぐインストール」インストールを押します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-37.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-38.png)
次に、子テーマをインストールします。
先ほどと同じ手順で子テーマのzipファイルを選択して、インストールします。
再び外観を選ぶと、親テーマと子テーマが両方入っていると思います。Cocoonの親テーマの画像にマウスポインターを持っていくと「有効化」が出てくるのでクリックします。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-39.png)
これで設定は完了です。
再びサイトにアクセスすると、見た目が大きく変化していると思います。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-40-1024x555.png)
皆さんもこのようなレイアウトのサイトを見たこと見たことがあると思います。利用者が多いのでわからないことがあっても検索したら出てきます。
パーマリンクの設定
パーマリンクの設定を変更するだけでページのURLがわかりやすくなります。
設定の中にあるパーマリンクをクリック。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-61.png)
この中にある、「投稿名」を選択します。これでOKです。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-62-1024x501.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-63.png)
こんなに分かりずらかったURLが….
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-64.png)
わかりやすく!
問い合わせフォームの作成
問い合わせフォームはGoogle AdSenseの審査の前提条件になっているとよく言われています。必ず作成しておきましょう。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-41.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-42.png)
プラグインをクリックした後、プラグイン横の新規追加をクリックします。
「プラグインの検索」にContact Form 7と入力します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-43.png)
その後、下のようなものが出てきたら、その中にある「今すぐインストール」をクリックします。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-44.png)
「有効化」ボタンが表示されたら、それをクリックします。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-46.png)
すると、サイドバーに「お問い合わせ」という欄が現れます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-47.png)
コンタクトフォーム1を選択します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-48-1024x89.png)
すると、このような画面が出てきます。この文章を編集することによって、お問い合わせフォームの構成を変更することができます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-49-1024x491.png)
今回は最低限の設定なので、説明は省略します。
次は、ショートコードをコピーします。コンタクトフォーム1の横にあるショートコードをコピーしましょう。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-50-1024x89.png)
その後、固定ページを新たに作成します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-51.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-52.png)
固定ページをクリックした後に、新規追加をクリックします。
すると、このような画面が出てきます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-53-1024x576.png)
このポップアップは閉じて、作業に移ります。
![](https://smartphone-note.com/wp-content/uploads/2021/12/無題-edited.png)
題名と表示させたい文章を入力します。文字を太くしたい場合などは、表示されるメニューからオプションを選択します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-54.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-55.png)
その後、ショートコードを埋め込みます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-57.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-56.png)
そして、「ショートコードをここに入力」のところに先ほどコピーしたコードを入力します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-58.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-59.png)
後は 下にスクロールすると出てくる設定の中にあるnoindexにチェックを入れて、
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-60.png)
パーマリンクをわかりやすくしたら、
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-65.png)
後は、フッターメニューにでも設置しましょう。カスタマイズをクリックして…
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-69.png)
メニューを開いて…
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-67.png)
新規作成して…
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-68.png)
メニュー名をつけてフッターメニューをクリックして..
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-70.png)
項目にお問合せフォームを追加して…
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-71.png)
公開ボタンをクリックすると完成です!
ここから見ることが可能です。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-72.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-66.png)
実際に見てみたい方はこのページを開いてください!
お問合せフォーム | Sample Page (conohawing.com)
サイドバーの設定
次にサイドバーの設定をしていきます。カスタマイズを開きます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-74.png)
ウィジェットを開き..
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-75.png)
サイドバーを開きます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-76.png)
このメニューからサイドバーを変更できます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-77.png)
削除することも可能ですし、
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-78.png)
要素を追加することもできます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-79.png)
私は人気記事を追加しておきました。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-80.png)
公開ボタンを押せば設定完了です。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-81.png)
スキンの変更
ページのスキンもサイトのイメージに大きく関係します。今回はCocoonの設定を変更していきます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-82.png)
スキンを選択して、
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-83.png)
スキン一覧から好きなものを選びます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-84.png)
選択したら、変更をまとめて保存を押します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-85.png)
しかし、このようなエラーが出る場合もあります。セキュリティ機能が働いているためです。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-86-1024x148.png)
そういうときは、WAFを無効化すればOKです。今回はConoHa wing での方法を紹介します。
ConoHa WINGから…
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-87.png)
ここのチェックボックスを外します。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-88.png)
その後もう一度試すと、成功するはずです。
※セキュリティ機能なので、無効化した後はすぐに有効化しましょう。
サイトカラーの変更
サイトのカラーを変更します。
※スキンによってはこのように表示されて変更できない場合があります。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-93.png)
全体をクリックして、
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-89.png)
サイトキーカラーを変更します。サイトキーテキストカラーも変更できますが、文字色が変わってしまうので慎重に変更しましょう。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-90.png)
フォントの変更
サイトフォントメニューからフォントを変更できます。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-91.png)
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-92.png)
ちなみに私はNoto Sans JPを使用しています。
これで完了です!
まとめ
初期設定から…
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-26-1024x722.png)
このようになりました。
![](https://smartphone-note.com/wp-content/uploads/2021/12/image-94-1024x546.png)
コメント