WordPress

WordPressのカスタマイズ方法 (101)

あなたは、WordPressを使ったウェブサイトのために、ウェブホスティングプランとドメイン名を選びました。そして、(おそらく)ワンクリックでWordPressをサーバーにインストールしたことでしょう。

これは簡単なことです。

あとは、WordPressウェブサイトの構築とカスタマイズを始めるだけです。

このWordPressカスタマイズガイドでは、デフォルトでインストールされているWordPressをカスタマイズする方法をご紹介します。

目次はこちら

WordPressの設定
新規ユーザーの追加
テーマの選択とカスタマイズ
必須プラグインの設定
SEO対策を行う
コンテンツの作成
お問い合わせフォームの作成
ウィジェットの追加
メニューの設定
Googleとの連携
ビデオチュートリアル

WordPressカスタマイズのステップバイステップガイド

この10ステップのチュートリアルを終える頃には、基本的でありながら完全にカスタマイズされたWordPressのウェブサイトが設定され、すぐに利用できるようになっています。

追伸:まだWordPressのウェブサイトを立ち上げていない方は、こちらのステップバイステップガイドに戻ってください。

ステップ1:WordPressの設定

WordPressの設定は、いくつかの異なる場所にあります。

1つ目の設定は、WordPress自体の外観をカスタマイズするためのものです。2つ目は、あなたのウェブサイトの外観をカスタマイズするためのものです。

画面オプションのカスタマイズ
初めてWordPressを起動したときに表示されるのが、この画面です。

 

 

これがWordPressのダッシュボードです。これだけのウィジェットが画面を埋め尽くしていると、なんだか気が散ってしまいますよね。

そこで、カスタマイズする最初の設定は「画面オプション」で、ここにあります。

WordPress画面オプションのカスタマイズ

画面オプション」をクリックして設定を開きます。

画面オプションの編集

チェックされているボックスは、ダッシュボードにウィジェットとして表示されるものです。

アクティビティでは、サイトに公開された新しいコンテンツの情報が一目でわかります。

At a Glance」は、公開したページや記事の数、受け取ったコメントの数を表示します。

クイックドラフトは、新しいブログ記事のために考えやメモを書き留める方法ですが、それ以上のことはできません。

ようこそ」は、初めて使う人のための単純化されたチェックリストにすぎません。

WordPress Events と News は、WordPress を使っている開発者でなければ、あまり役に立ちません。

これらのウィジェットを残しておきたい場合は、チェックを入れたままにしておいてください。残りのボックスのチェックを外せば、表示されなくなります。

ダッシュボードボックスの削除

残しておきたいボックスを選択したら、自由にドラッグ&ドロップしてください。上のスクリーンショットのように縦に重ねることも、両方の列を利用することもできます。

カスタムWordPressダッシュボード

ダッシュボードの表示も自由にカスタマイズできます。

注:ウェブサイトにプラグインを追加していくと、ダッシュボードに新しいボックスが表示されることがあります。便利だと思われる場合は、そのままにしておいてください。邪魔なので削除したい場合は、デフォルトのボックスを隠したのと同じ方法で隠してください。

WordPress設定のカスタマイズ
WordPress ウェブサイトの設定を変更するには、サイドバーにある「設定」メニューをご利用ください。

WordPress設定メニュー

それぞれのカテゴリーで設定をカスタマイズする必要はないかもしれませんが、それぞれの項目に目を通し、必要な情報が含まれているかどうかを確認することをお勧めします。

まずは「一般設定」から始めましょう。

一般設定

以下の点に注意してください。

ロゴを設定していない場合は、「サイトタイトル」を設定してください。これは、ロゴがない場合、サイトの上部に表示されます。これは、WordPress管理画面の左上に表示される名前でもあります。

WordPressアドレスとサイトアドレスが、購入したドメイン名と一致していることを確認してください。どちらかが間違っていると、エラーの原因になります。

ブログ記事の執筆やカテゴリー分けが始まるまでは、「執筆設定」は省略して構いません。

次は「読む」の設定です。

読み込み設定

サイトのコンテンツを作成したら、これらの設定に戻り、「ホームページの表示」を更新してください(以下に説明があります)。そうしないと、デフォルトではブログのフィードがホームページになるようになっています。

とりあえず、最後の2つの設定に注目してください。

"For each post in a feed, include "は、"Summary "に設定してください。この設定は、フィード内のブログトピックを素早くスクロールしたい訪問者にとって便利なだけでなく、ページの読み込み時間を短縮するのにも役立ちます。

変更を保存して次に進む前に、「Search Engine Visibility」がチェックされていないことを確認してください。Googleや他の検索エンジンがあなたのウェブサイトを見つけてインデックスしてくれることを望んでいます。

ブログを書く場合、次は「ディスカッションの設定」に進みましょう。

ディスカッション設定

このページでは、ほとんどの部分を自由にカスタマイズすることができます。ブログの読者が自分のコンテンツにコメントできるようにしたい場合は、それに合わせて設定を行います。

ただし、セキュリティ上の理由から、ここで修正しておくべき設定があります。

デフォルトの投稿設定」で、「新しい投稿で他のブログからのリンク通知(ピングバックとトラックバック)を許可する」のチェックを外します。

一言で言えば、ピンバックとトラックバックとは、誰かがあなたのブログにリンクを張ったときに、コメントのモデレートフィードに表示される通知です。

ピンバックやトラックバックを見ることに何の価値もありません。また、セキュリティ上のリスクもありますので、ハッカーやスパマーがあなたのサイトにアクセスできないようにするためには、これらの通知をオフにするのがベストです。

もしWordPressのデフォルトの画像サイズを調整したいと思ったら、メディア設定で行うことができます。今すぐにやる価値はないかもしれませんが。

次に、パーマリンクの設定に移ります。

パーマリンクとは、Webページのアドレスを構成するものです。WordPressにはいくつかのオプションが用意されていて、その中から選ぶことができます。

パーマリンク設定

デフォルトでは、「投稿名」がリンクの構造になっていますが、これは良い選択です。これは良い選択です。URLがシンプルな構造になり、再訪問者が思い出しやすくなります。

しかし、それはあなた次第です。ブログの記事を公開日ごとに構成することに意味がある場合は、これらのオプションのいずれかを有効にするとよいでしょう。しかし、それでは物事を複雑にしすぎてしまう可能性が高くなります。

プライバシー設定は、WordPressの設定に最近追加されました。

プライバシー設定

GDPRと、それが世界中のWordPressウェブサイトに及ぼした影響を考慮して、プライバシーはウェブサイト開発プロセスの重要な要素となっています。

あなたのサイトで厳格なプライバシー基準を実施するためにできること、すべきことは他にもあります。まず手始めに、プライバシーポリシーページ(WordPressが自動作成してくれます)を選択し、訪問者が質問や懸念がある場合に参照できるようにします。

 

 

ステップ2: 新しいユーザーの追加

WordPressの設定が終わったら、次は「ユーザー」メニューに目を向けてみましょう。

WordPress ユーザー

ここでは、新しいユーザーを作成したり、現在のユーザーのプロフィール、アクセス権、ログイン情報(自分のものも含む)を編集したりすることができます。

ユーザーの追加
新しいユーザーを追加するには、「新規ユーザーの追加」をクリックして、以下の項目を入力します。

新規WordPressユーザーの追加

必須項目は、ユーザー名(adminでないことを確認してください)とメールアドレスのみです。

システムに追加する前に、ユーザーの役割をカスタマイズしてください。

ユーザーロールのカスタマイズ

ユーザーの役割を設定することで、WordPress 管理画面のバックエンドをどれだけ見ることができるか、またどのような編集機能を持つかが決まります(ある場合)。

ユーザープロフィールの編集
このウェブサイトで作業しているのがあなただけだとしても、ユーザープロフィールを見て、最新の状態にしておくことは良いアイデアです。

自分のプロフィールを編集すると、このように表示されます。

ユーザープロフィールの編集

このセクションでカスタマイズしたいのは、WordPress管理エリアの配色だけです。それ以外は、下にスクロールして、プロフィールの詳細を入力し始めます。

WordPress ユーザープロフィール

今はあまり気にならないかもしれませんが、もしブログを書くことになった場合、ここからあなたの経歴情報が引き出されます(他のユーザーも同様です)。

最後に、「アカウント管理」の項目にも注目してください。

ユーザーアカウント管理

パスワードを変更したい場合は(少なくとも年に2、3回はしたほうがいいでしょう)、ここで変更します。

また、WordPressでは、より強力なパスワードの生成をサポートしています(他のユーザーにもパスワードの生成を促します)。

WordPress パスワードジェネレータ

このツールを使っても使わなくても、小文字、大文字、数字、記号を含む強力なパスワードを作成していることを確認してください。

 

ステップ3:テーマのカスタマイズ

テーマをカスタマイズする前に、まずは自分のウェブサイトに適したテーマを見つける必要があります。

このガイドでは、ベスト25以上のWordPressテーマをご紹介しています。

テーマを選択したら、「外観」→「テーマ」メニューに移動します。

WordPress のテーマ

デフォルトでは、WordPress には独自のテーマが自動的にインストールされています。別のテーマをインストールするには、まずそのテーマをインストールする必要があります。

無料テーマのインストール
OceanWPのようなWordPressリポジトリの無料テーマをお持ちの場合は、「新規追加」ボタンをクリックして、テーマ名を探します。

新しいテーマの追加

テーマカードにカーソルを合わせ、「インストール」をクリックします。青い「インストール」ボタンが、青い「有効化」ボタンに変わります。これが表示されたらクリックします。

これで、WordPressのデフォルトテーマがあなたのテーマに置き換わります。

プレミアムテーマをインストールする
プレミアムテーマをお持ちの方は、まずテーマのファイルをダウンロードする必要があります。サードパーティのプロバイダやThemeForestなどのテーママーケットプレイスから入手した場合は、自分のアカウントにファイルがあります。

ThemeForestダウンロードファイル

ファイルをダウンロードしてから、WordPressに戻ります。

新規追加」をクリックして、テーマを追加します。その後、画面上部の「テーマをアップロード」をクリックします。

プレミアムテーマの追加

ファイルアップローダが表示されるので、そこにWordPressのファイルをドロップします。

WordPressテーマアップローダ

アップローダーが自動的にテーマをインストールして有効化します。

テーマのカスタマイズ
テーマのインストールが完了したら、いよいよカスタマイズです。外観」メニューの「カスタマイズ」をクリックします。これで WordPress カスタマイザーが起動します。

WordPress カスタマイザー

このツールは、テーマごとに見た目が異なりますが、レイアウトは常に同じです。WordPress のカスタマイズオプションは、左側に表示され、右側にプレビューが表示されます。

ここでは、基本的なカスタマイズモジュールをご紹介します。

サイトアイデンティティ

すでに「一般設定」で「サイトタイトル」(または「キャッチフレーズ」)を更新している場合は、再度更新する必要はありません。ロゴを追加していない場合は、サイトタイトルはウェブサイトにのみ表示されます。

サイトアイデンティティ

このボックスのチェックを外すと、ロゴを入れるスペースができます(後で追加します)。

さて、「サイトアイコン」はロゴではありません。認識しやすいシンボルで、通常はロゴを小さくしたもので、ブラウザのタブに表示されます。

例えば、ここでは、websiteetup.org、WordPress.org、およびGoogleのサイトアイコンが表示されています。

サイトアイコン

それぞれのアイコンが、戻りたいページを簡単に見つけられるようになっていることに注目してください。ロゴのデザインができたら、それに合う特徴的なサイトアイコンを用意しましょう。そして、ここにアップロードしてください。

ロゴ

ヘッダー "セクションの下にあります。

ロゴのカスタマイズ

ロゴを追加するには、「ロゴを選択」をクリックして、デバイスからロゴをアップロードしてください。

ロゴの背景が透明であることを確認してください(つまり、PNGまたはWebPである必要があります)。そうすれば、どのような背景色の上に表示されても問題ありません。

ロゴの高さがスペースに対して大きすぎる場合は、スライダーを使って幅を調整してください。ロゴが大きすぎて、右のナビゲーションメニューの周りに余計なスペースができてしまうことは避けたいものです。

色彩に関する決定事項の多くは、使用するテーマやテンプレートによって決まります。しかし、ここではユニバーサルカラーの一部を変更することができます。

色のカスタマイズ

例えば、ヘッダーの色は、デフォルトの白以外を使用したい場合に更新できます。また、リンクやボタンのプライマリーカラーをブランドカラーに変更することもできます。

グローバル

他にもカスタマイズしたいグローバル設定があるかもしれません。

グローバル設定

ロゴ、カラーパレット、フォントなどのブランディングをすでに行っている場合は、ここで設定をカスタマイズすることができます。そうでない場合は、そのままにして、テーマのデフォルト設定をそのままにしておくとよいでしょう。

テーマがこれらの設定にアクセスできる場合は、基本的な色やフォントの選択だけではないことを知っておいてください。フォントのサイズ、ページのデフォルトレイアウト、テーマ要素の色などを変更することができます。

変更する必要があるかどうかわからない場合は、これらの設定を確認して、必要なものを網羅しておきましょう。

カスタマイザーで設定するその他の項目については、この後のステップで説明します。すべてに触れていなくてもご心配なく。後日、カスタマイズ方法のヒントをお伝えします。

プレミアムテーマのカスタマイズ
無料のテーマでも有料のテーマでも、まずはWordPressカスタマイザーを使います。しかし、フリーミアムテーマやプレミアムテーマの場合は、さらに設定が必要になります。

WordPress のサイドバーを見て、お使いのテーマの新しいメニュー項目があるかどうかを確認してください。もしあれば、そこに設定項目があります。

例えば、これは「Uncode」テーマのメインパネルです。

Uncodeの設定

実際には、カスタマイズできる設定はありません。しかし、このテーマは、意図した通りに動作するために必要ないくつかのプラグインのインストールをユーザーに促します。

無料テーマ「Astra」では、「外観」の下に新しいメニュータブが表示されます。

Astra オプション

無料の設定では、単にWordPressカスタマイザーに戻ります。しかし、プロにアップグレードすると、このリストからもわかるように、さらに多くのカスタマイズオプションを開くことができます。

結論から言うと WordPress は、デフォルトで特定のテーマカスタマイザー設定を提供します。選択したテーマによっては、さらに多くの作業が必要になるかもしれません。

しかし、気にする必要はありません。ページを作り始めれば、テーマの追加調整が必要かどうかがわかるようになりますし、いつでもこのメニューに戻ることができます。

 

 

ステップ4: 必要なプラグインの設定

WordPressのプラグインは必要なだけ追加することができますが、ここでは制限を設けます。

必要なプラグインを探す
プラグインは、コードを使わずにWebサイトの機能を拡張できる優れものですが、ホスティングサーバーに過度の負担をかけてしまいます。

そこで、まずは必要なものだけを設定するようにしましょう。必要に応じて他のWordPressプラグインを後から追加することができます。

セキュリティ
WordPress のログイン画面をブルートフォース攻撃から守り、Web サイト自体がスパムやマルウェアの温床にならないようにするには、Wordfence などのセキュリティプラグインの助けが必要です。

キャッシング
WordPress のウェブサイトは、キャッシングを追加しないと、動作が重くなる傾向があります。キャッシングとは、ウェブサーバーが訪問者のブラウザにあなたのウェブサイトをより効率的に配信するためのプロセスです。W3 Total CacheのようなWordPress用キャッシュプラグインには、Gzip圧縮やファイルの最小化など、パフォーマンスを最適化するための設定が含まれているのが魅力です。

これらの設定はすべて、ウェブサイトの読み込みを速くするためのものです。

画像の最適化
すべてのウェブサイトに必要なもうひとつのものは、Smushのような画像圧縮プラグインです。この方法では、あなたのウェブサイトを設計したり、製品を誇示するために高解像度の画像の束を使用することができます大規模なファイルサイズは、すべてを減速(このプラグインなしで発生する可能性があります)について心配することなく。

バックアップ
あなたのウェブホスティングプランは、無料のウェブサイトを含める必要があります。しかし, それは常にオリジナルに何かが起こる場合に備えて、どこか他の場所に保存されているバックアップの余分なセットを持っていることをお勧めします. 加えて, UpdraftPlusのようなバックアップ-プラグインを使用すると, あなたは、バックグラウンドで行われるようにバックアップを自動化してスケジュールすることができます.

ページビルダー
これはオプションですが、WordPressに用意されているブロックエディタよりも、ドラッグ&ドロップ式のページビルダープラグインの方が、より素早く作業ができることに気づくでしょう。たくさんの種類がありますので、目的に応じて最適なページビルダークラッグを選んでください。

無料のWordPressプラグインをインストールする
必要なプラグインのリストができたら、それらをインストールして有効化します。

これを行うには、「プラグイン」>「新規追加」に進みます。

WordPress 新規プラグインの追加

これは、無料の WordPress プラグインのリポジトリです。探しているプラグインを見つけるには、検索ボックスにプラグインの名前を入力するだけです。

プラグインのインストール

追加したいプラグインの「今すぐインストール」ボタンをクリックします。このボタンは、青い「アクティベート」ボタンに変わります。これをクリックすると、プラグインとその機能があなたのウェブサイトに追加されます。

必要なプラグインがすべてインストールされるまで、この手順を繰り返してください。

プレミアム・プラグインのインストール
サードパーティのプロバイダーやマーケットプレイスからプレミアムプラグインを購入した場合は、プレミアムテーマのインストールと同じ手順で行います。

プラグイン」→「新規追加」を選択します。プラグインのアップロード」をクリックします。

プラグインのアップロード

次に、ダウンロードしたファイルをアップロードします。インストーラーが自動的にプラグインをインストールし、有効化してくれます。

WordPressプラグインのカスタマイズ
WordPressのプラグインをインストールすると、通常はElementorの紹介文のように、準備ができているかどうかを尋ねるプロンプトが表示されます。

Elementor はじめに

ほとんどのWordPressプラグインは事前に設定されていますが、新しくインストールしたプラグインを確認し、カスタマイズしたい設定がないかどうかを確認する時間を取る必要があります。

新しいプラグインの設定を確認するには、まずサイドバーを見てください。それぞれのプラグインに新しいメニューが表示されます。

新しいプラグインのメニュー

メニューの名前はプラグインと一致しない場合があります(「パフォーマンス」はW3 Total Cacheプラグインのメニューです)。また、メニューの中には、上記の例のようにトップレベルにないものもあるかもしれません。

例えば、UpdraftPlusのメニューは「設定」の下に隠れています。

UpdraftPlusメニュー

プラグインの設定メニューが見つからない場合は、メインのプラグインページに移動して、そこにある設定ボタンをクリックしてください。

プラグイン設定

設定内容はプラグインごとに異なりますので、特に説明することはありません。繰り返しになりますが、Smushのセットアップ手順のように、与えられたセットアップ手順をゆっくりと実行してください。

Smushのセットアップ

また、プラグイン開発者が設定ページに記載した推奨事項にも注意を払ってください。これらのヒントは、プラグインのカスタマイズと最適化を適切に行うために役立ちます。

 

ステップ5: SEOを統合する

検索エンジン最適化(SEO)は複雑な問題です。そのため、今日はウェブサイトを最適化する方法の複雑さを全面的に掘り下げるつもりはありません。

しかし、ご紹介したいのは、WordPressにSEOツールを追加するための、迅速で簡単な方法です。

1.SEOプラグインのインストール
必要なプラグインは「Yoast SEO」というものです。

Yoast SEOプラグイン

このプラグインは、WordPressの中でもトップクラスの評価を受け、ダウンロードされているSEOプラグインです。また、検索エンジンの最適化を簡単に行ってもらいたい場合は、このプラグインを使うのが一番です。

セットアップとカスタマイズYoastのSEO
プラグインをインストールしたら、サイドバーにある新しいSEOメニューを探します。

Yoast SEO 設定

これで Yoast ダッシュボードが開きます。設定のカスタマイズには5~10分ほど必要ですが、設定ウィザードを使えばスピーディーに作業を進めることができます。

提示されたリンクをクリックしてプロセスを開始してください。

環境設定
Yoast SEOウィザード

オプションAを選択します。

Googleがウェブサイトをインデックス化するのに1週間ほどかかるので、完成前に検索で表示される心配はありません。どうせこのプロセスを完了させるには、これ以上のことはありません。

サイトタイプ
ヨースト - サイトタイプ

どのようなサイトを作るのかを選択します。Yoastが検索エンジンに知らせてくれるので、そのようなコンテンツを探している人にあなたのページや記事を表示することができます。

組織または個人
ヨースト - 組織タイプ

このページは必ず記入してください。ブランド名の認知度が上がってきたら、検索で探している人があなたの詳細をプレビューできるようにしましょう。

ここでは、そのような場合にナレッジグラフにあなたの詳細が表示される例を示します。

Google検索 - ナレッジグラフ

検索エンジンの視認性
Yoast - Visibility

ウェブ上の人に見られたくないプライベートなコンテンツがない限り、これらの値はすべて「はい」にしておきましょう。

複数の著者
Yoast - Authors

複数の著者が投稿しているブログでは、この設定を有効にしておくと、それらの個人を検索した人が検索で彼らのアーカイブページを見つけ、その結果としてあなたのウェブサイトを見つけることができます。あなただけがブログを書いている場合は、この値を「いいえ」にしてください。

タイトル設定
Yoast - タイトル

一般的にWebページが検索に表示される際には、ページ(または記事)のタイトルと、その後ろにWebサイトや企業名が表示されます。例えば、以下のようになります。

検索タイトルの区切り

しかし、タイトルがブランド名に走ってしまうのではなく、Yoastにはこれらの重要なデータの間に自動的に区切り線を入れることができます。ダッシュ(-)とパイプ(|)が一般的に使用されていますが、用意されているオプションの中から任意のものを選択することができます。

その他のYoastの設定

設定ウィザードでは、このプラグインに必要な設定のほとんどを行うことができます。

とはいえ、「検索の外観」や「ソーシャル」のサブメニューを覗いてみるのもいいかもしれません。ここでは、あなたのページやリンクがウェブサイトの外でどのように表示されるかをさらにカスタマイズできます。

これにより、WordPressで新しいページを作成するたびに、これらの詳細をカスタマイズする時間を節約することができます。

SEOプラグインを使う
最適化するコンテンツがない段階で、なぜSEOプラグインを設定する必要があるのでしょうか?それは、時間を節約するためです。

次のステップに進む際には、新しいコンテンツを作成するたびにYoastを使用してください。

作成した各ウェブページやブログ記事の下には、Yoast SEO ウィジェットがあります。

Yoast SEO ウィジェット

ここに、検索データ(ウェブ上であなたを見つけた人が目にするすべてのもの)を追加します。

Yoast SEOのカスタマイズ

必ずカスタムを作成してください。

フォーカスキーワード - 記事のメイントピックとキーワードです。
スラッグ - そのページへの具体的なリンクです。
メタディスクリプション - 検索結果のページタイトルの下に表示される簡単な説明です。
設定が完了すると、YoastはページのSEO最適化の度合いを「スコア」します。

SEOタブでは、ウェブサイトのランキング性を向上させるためのヒントを見つけることができます。

Yoast SEOのヒント

読みやすさ」タブには、ページを読みやすくするためのヒントが表示されます。

Yoast Readability

赤やオレンジの印がついているものは、できる限り推奨される変更を行ってください。これらのアドバイスは、あなたのウェブサイトが検索で上位に表示されるために役立ちます(訪問者がコンテンツを読むのに時間をかけたくなります)。

 

ステップ6:コンテンツの作成

ほとんどのWebサイトでは、基本的に同じページが用意されています。

  • ホーム:訪問者を迎えるページです。
  • About: あなたの会社のストーリーを伝えるページです。
  • サービス/製品。訪問者にサービスや製品を紹介するページです(販売する製品やコンテンツの量によっては、複数のページが必要な場合もあります)。
  • お問い合わせ 訪問者に連絡方法を知らせるページです。
  • プライバシーポリシー。ウェブサイトがどのようなデータを収集し、それをどのように扱うのかを説明するページです。

このほかにも、作成しておきたいページがあります。例えば、以下のようなものです。

  • ポートフォリオ。あなたの作品のサンプルを紹介するページです。
  • ブログ。あなたのブログや記事が表示されるニュースフィードです。
  • 価格 サービスの価格を表示するページで、「今すぐ購入」のオプションもあります。
    どのページが必要であっても、同じステップを踏んで作成・カスタマイズする必要があります。

新規ページの作成

ページ」メニューに移動します。

新しいページを追加する

デフォルトでは、WordPressはサンプルページとプライバシーページを作成します。サンプルページは削除することができます。プライバシーページは、他の作業が終わった後にコンテンツをカスタマイズして公開することができますので、そのままお持ちください。

最初のページを作成するには(通常はホームページから始めるのがベストです)、「新規追加」をクリックします。

また、メンテナンスモードにすることで、未完成のウェブサイトを他の人に見られないようにすることもできます。

これは、WordPressのブロックエディタとそれに関連する設定です。

新規WordPressページ

これを使ってウェブページを構築することもできますし、ページビルダーのプラグインを使うこともできます。ページへのコンテンツの追加は、どのオプションでも同じです。

ページに名前を付ける

まず、ページに名前を付けます。

WordPressページ名

Save Draft」をクリックすると、ページのURLが自動生成されます。(トップページにスラッグが付かないように修正する方法は、もう少し後にご紹介します)

デザイン・レイアウトの作成

ここでは、ページのデザインとレイアウトを一から作るか、テンプレートを使うかを選択できます。

最初から作る場合は、ブロックを使って各要素を一つずつ追加していきます。しかし、これはウェブサイトを構築する上で最も時間効率の良い方法ではありませんので、この方法を取る前にテンプレートの選択肢を検討するべきでしょう。

お使いのWordPressテーマが役に立つかどうか確認してみましょう。テーマの中には、あらかじめページテンプレートが用意されていて、サイトにインポートできるものもあります。

テーマが役に立たない場合は、ページビルダープラグインを使って、全ページまたはブロックのテンプレートを追加し、不足部分を補うことができます。

例えば、Elementorを使用している場合、新しいページを開くとこのように表示されます。

Elementorのホームページの例

このページをテンプレートで置き換えるには、フォルダをクリックしてテンプレートにアクセスします。

Elementor フォルダ テンプレート

使用したいテンプレートを探し、「挿入」をクリックしてページに追加します。

Elementorテンプレートの挿入

このテンプレートをページに追加すると、以下のようになります。

エレメンターページテンプレート

レイアウトのカスタマイズ

インポートしたテンプレートは気に入ったが、ページ上での配置に満足していないとします。

例えば、上の例では、「ホーム」ページのタイトルバナーとサイドバーを取り除きたいとします。しかし、これらはドラッグ&ドロップで配置できる要素ではないため、実際のページではできません。

代わりに、左のエディタにある「設定」ウィジェット(歯車のアイコン)を使ってください。

Elementorページ設定

Hide Title "をクリックすると、ページの上部からタイトルバーが削除されます。しかし、ウェブサイトのすべてのページでこのバーを隠すつもりであれば、テーマカスタマイザーからこの設定を行うのがベストです。そうすれば、一度設定するだけで済みます。

ページ上のスペースを有効に活用するために、Elementorでは「全角」や「キャンバス」といったデザインを引き伸ばすためのオプションが用意されています。これらの設定を駆使して、自分のニーズに合ったレイアウトやデザインを見つけてください。

また、テーマのデフォルト設定に満足できない場合は、カスタマイザーに戻って調整することができます。

コンテンツのカスタマイズ

ページのデザインに満足したら、次はコンテンツのカスタマイズです。これには、テキストと画像のすべてが含まれます。

この作業は、WordPress のブロックエディタやページビルダーのプラグインなどのエディタで、カスタマイズしたいブロックをクリックして更新します。

WordPress コンテンツの編集

エディタでコンテンツをカスタマイズすると、その変更がリアルタイムでウェブサイトのプレビューに反映されます。

メディアの更新も同様です。

メディアの編集

画像や動画を差し替えたり、新しいものを追加したりする際には、デバイスからメディアをアップロードするか、すでにライブラリにあるものから選択することができます。

メディアの挿入

新しいコンテンツの追加

テンプレートに何かが足りないと感じても、心配はいりません。あらかじめ用意されているデザインに、自分で作ったブロックを簡単に追加することができます。

ページビルダーのプラグインでは、新しいブロックを追加したいページの部分にプラス記号が表示されています。

新しいブロックを追加

そして、使用したいブロックタイプを見つけて、新しいスペースにドラッグ&ドロップします。

ブロックのドラッグ&ドロップ

WordPress エディターの場合も同様です。

ワードプレス・エディター・ブロック

プラス記号をクリックして新しいブロックを追加するか、左上の「ブロック」メニューから選択します。追加したいブロックをクリックして、カスタマイズを開始してください。

ページ設定の更新

ページの下部にYoastウィジェットが表示されています。このプラグインを有効にしている場合は、ページを公開する前にこれらの設定を行ってください。

また、ここではページの「ドキュメント」の設定をカスタマイズしてください。

WordPress ドキュメント設定

編集できる項目は以下の通りです。

  • パーマリンク(ページ固有のリンク)の設定
  • 特集画像(ブログのフィードサマリーやソーシャルメディアでのプロモーションに画像と説明の両方を提供するために、すべてのページに1つは必要です。
  • カテゴリーとタグ(ブログ記事の場合のみ

必要な情報の入力が終わったら、「プレビュー」ボタンをクリックして、新しいブラウザウィンドウでウェブサイトを確認します。

WordPressプレビュー

プレビューでは、Webページを公開する前に、その内容をリアルタイムで確認することができます(既存のページに変更を加えた場合も同様)。

問題がなければ、「公開」ボタンをクリックすると、Webページが公開されます。

注意:このページはまだメニューには追加されません。このプロセスが終了する前に、あなたがその処理を行います。

リンス・アンド・リピート

すべてのWebページが完成するまで、このプロセスを繰り返します。ページが公開されたら、次のステップに進むことができます。

ホーム画面の設定
最後にもう一つ。

ホームページは https://yourdomainname.com に設置してください。https://yourdomainname.com/home のような場所ではありません。

これを修正するには、「設定」>「読み込み」に進みます。

ホームページの表示」で、「静的なページ」を選択します。

読み上げ設定 - ホームページの設定

これで、公開ページのリストからホームページ(ブログページを作成した場合はブログページも)を選択できるようになります。

変更を保存します。これで、ホームページがウェブサイトのフロントページとして設定され、あなたが書いた記事がブログに反映されるようになります。

 

ステップ7:お問い合わせフォームの設置

主要なページができたら、次は訪問者や興味のある見込み客が連絡を取れるように、お問い合わせフォームを追加しましょう。

このチュートリアルでは Contact Form 7 プラグインを使って最初から最後までコンタクトフォームを作成する方法を紹介します。もし他のコンタクトフォームに目を向けているのであれば、記事の下までスクロールしておすすめのフォームをご覧ください。

WordPress にカスタムコンタクトフォームを追加する際のベストプラクティスとしては、以下のようなことが挙げられます。

隠してはいけません。

フォームは見つけやすい場所に設置しましょう。お問い合わせページには、必ずフォームが必要です。また、ブログのサイドバーやホームページの下部に設置するのもよいでしょう。

必要な項目だけを入力しましょう。

最近では、ウェブ上でのプライバシーの問題に誰もが気を配っているので、あなたの目的に関係のない情報を求めてしまうことは避けたいものです。

フォローアップメッセージを忘れずに。

コンタクトフォームに記入された後、2人の人がフォローアップメッセージを受け取ることになります。

フォームを入力した人には、確認メッセージが届きます。通常、このメッセージは、フォームが送信された後、フォームの代わりに表示されます。

デフォルトでは、あなたのフォームはあらかじめ書かれたメッセージをユーザーに送ります。

お問い合わせフォームのメッセージ

メッセージを自由にカスタマイズして、個人的な雰囲気を出してみましょう。

また、フォローアップとして受け取るメッセージも忘れないでください。あなたのメッセージはメールで送られます。

お問い合わせフォームのメール

あなたのドメイン名 '[ユーザーの件名]'」のような件名は、あまり良いものではなく、コンタクトフォームのメールがそのままスパムに送られてしまう可能性があります。このようなコンタクトフォームからの送信を確実に受け取りたい場合は、メッセージの本文だけでなく、件名の詳細をカスタマイズしてください。

コンタクトフォームを埋め込んだ後、あなたのウェブサイトにアクセスして、自分で入力してみてください。特に必須項目を設定している場合は、すべてが意図したとおりに動作することを確認してください。その後、サイト上のフォローアップメッセージとメールの受信箱を確認し、問題がないことを確認してください。

ステップ8: ウィジェットの追加

以前、カスタマイザーの設定を行った際に、「フッター」や「ウィジェット」の項目があることに気づかれたと思います。

その時は、そのままにしておいてくださいとお願いしました。というのも、これらの小さなコンテンツを埋めていくのは、ウェブサイトの残りの部分がまとまってからでないと意味がないからです。

そもそもウィジェットとは何かというと、ウェブサイトの雑多な部分を構成するブロックだと考えてください。主に、フッター、サイドバー、そしてトップページに表示されることがあります。

フッターを設定するためにカスタマイズに戻ることもできますが、一番のお勧めは「外観」>「ウィジェット」ですべての作業を行うことです。

WordPress ウィジェット

そうすれば、すべてのウィジェットを一度に設定することができます。また、ウェブサイト上にどのようなウィジェットのスペースがあるのか、より明確に把握することができます(ちなみに、これはテーマによって異なります)。

画面の左側には、利用可能なウィジェットが表示されています。

ウィジェット

画面の右側には、利用可能なウィジェットの配置が表示されています。

ウィジェットの配置

テーマによっては、これらのウィジェットにあらかじめコンテンツが配置されている場合があります(通常はフッターが該当します)。

現在配置されているウィジェットを確認してください。問題がなければそのままで構いません。

表示順をカスタマイズしたい場合、例えば「最近の投稿」のリストを「検索」バーの上に移動させたい場合などは、ウィジェットブロックを表示したい場所にドラッグ&ドロップするだけでOKです。

また、ウィジェットの内容をカスタマイズしたい場合は、ブロックをクリックします。

ウィジェットを編集

この例では、「最近の投稿」リストの上に表示されるタイトルを追加・変更することができます。また、一度に表示される投稿の数を更新することもできます。必要であれば、公開日を追加することもできます。

さて、これらのウィジェットを埋めたくない場合は、何もする必要はありません。しかし、WordPressが与えてくれる余分なスペースを活用したい場合は、先に進む前にすべてのウィジェットを埋めるようにしてください。

 

ステップ9:メニューの設定

コンテンツがすべてそろったので、あとはそれを表示するためのナビゲーションメニューを作るだけです。

メニューは「外観」→「メニュー」にあります。

WordPress メニュー

このページでは、ウェブサイトが必要とする数のメニューを作成することができます。ほとんどの方は、1つのメニューしか必要ないでしょう。

メニューの名前

メニューの名前を見るのはあなただけなので、あまり複雑にする必要はありません。メインメニュー」のような名前にしておきましょう。

メニューの作成

続いて「メニューの作成」をクリックします。

メニューの配置を決める

次に、メニューを配置する場所を決めます。

メニューの配置

フッター用のメニューを作成する場合(これはまれです)や、モバイル用に別のメニューを作成する場合(これは将来的に行うことになるかもしれません)は、ここでその設定を行います。ここでは、「メイン」を選択します。

新しいトップレベルのページを自動的にこのメニューに追加する」にはチェックを入れないでください。この部分を自動化したとしても、注文を更新するためにこのページに戻ってくる必要があります。ページをメニューに入れるのは、適切な場所を選べるようになってからの方がいいでしょう。

メニューにページを追加する

ページをメニューに追加するには、ページの横にあるチェックボックスをクリックします。そして、「メニューに追加」をクリックします。

ページをメニューに追加する

ページ以外にもメニューを追加することができます。ブログ記事やカテゴリー、商品などのリンクを追加したい場合は、ここで追加します。

ページはここに表示されます。

メニュー構成のカスタマイズ

メニューの表示順を変更するには、メニューをドラッグ&ドロップしてください。

ドラッグ&ドロップメニュー

すべてのページをナビゲーションのトップレベルに表示させたい場合は、左寄せにしてください。トップレベルのページにサブページを作成するには、以下のようにインデントを入れて下にドロップします。

サブメニューのドラッグドロップ

メニューとページのカスタマイズ

ページを作成したら、それぞれのページを開いて、すべての設定がお好みに合わせてカスタマイズされていることを確認します。

メニューのカスタマイズ

以下のことができます。

  • ページ名の変更。
  • トップレベルをクリックできないようにしたい場合は、リンクを無効にします。
  • 1つのページ名の下に複数の階層を持つ大きなメニューを配置したい場合は、メガメニューを有効にします。

ほとんどの場合、これらの設定を調整する必要はありません。しかし、もしもの時のために、これらの設定を知っておくと安心です。ここでは、メニューからページを削除することもできます。

ステップ10 Googleへの接続

ウェブサイトの構築とカスタマイズが完了したら、最後にすることは、Googleへの接続です。

Googleアナリティクスの設定

Google Analyticsに接続してもしなくても、Googleや他の検索エンジンはあなたのウェブサイトをクロールしてインデックスすることができます。そのため、Googleがあなたのウェブサイトから収集した、トラフィックやパフォーマンスに関するデータを確認することができます。

このチュートリアルでは、Google Analyticsのアカウントを作成し、それをウェブサイトに接続する手順を説明します。この作業は、WordPressのプラグインを使って行うこともできますし、コードを使って手動で行うこともできます。

Google Analyticsの準備ができたら、ウェブサイトのトラフィックパターンを監視し、ウェブサイトのデザイン、コンテンツ、目的などについてデータに基づいた判断を下すことができるようになります。

Googleアナリティクス

ウェブサイトが接続すべきGoogleツールは、これだけではありません。

Google Search Consoleを設定する

Google Analyticsは、訪問者がどのようにウェブサイトを利用しているかについてのデータを提供します。一方、Google Search Consoleは、ウェブ上のあらゆる場所で訪問者がどのようにあなたのウェブサイトに出会ったかについてのデータを提供します。

すでにGoogle Analyticsのアカウントをお持ちの方は、Search Consoleの設定は簡単です。
次のステップは、Google Search Consoleを接続することです。

Googleサーチコンソール

Search Consoleのウェブサイトにアクセスし、「今すぐ開始」をクリックします。クイックセットアップの手順が表示され、いくつかのオプションを使用してアカウントの所有権を確認するよう求められます。Google Analyticsは最も簡単な方法の1つなので、ご希望であればそのオプションをご利用ください。

Googleウェブマスター認証

Google Analytics側でこの接続を確立することも重要です。この設定は、「管理」→「プロパティ」→「プロパティ設定」にあります。

Google アナリティクス - Google Search Console

Search Consoleのアカウントがオプションとして表示されているはずです。これを選択してGoogle Analyticsに接続すると、取得レポートに検索データの一部を取り込むことができます。

Google Analytics 獲得レポート

また、Google Search Consoleにログインすることで、検索でのウェブサイトの状況をより深く知ることができます。

Google Search Console ダッシュボード

以下のようなことがわかります。

  • ウェブ検索、画像検索、動画検索において、ウェブサイトや各ページがGoogleでどれだけクリックされ、閲覧されているか。
  • デスクトップ、タブレット、モバイルのユーザーからのクリック数とビュー数。
  • サイト内の各ページの平均ランクは?
  • あなたのサイトのトップ検索クエリは何ですか。
  • モバイルでのユーザビリティ、セキュリティ、スピードに関する問題は何か(ある場合)。
  • どのウェブサイトからのリンクが多いか。
  • 自分のサイトの内部リンクがどのように処理されているか。

Google Search Consoleを知るために時間を割けば、WordPressでの検索最適化戦略に磨きをかけて、検索結果での表示を良くすることができるでしょう。

サイトマップをGoogleに送信する

Google Search Consoleでの最後の作業は、サイトマップのアップロードです。こうすることで、WordPressとGoogleの間に直接リンクが張られ、Googleにあなたのウェブサイトのコンテンツがどこにあるかを伝えることができます。

Yoast SEOプラグインを使用すると、XMLサイトマップが自動的に生成されるという良い点があります。一般」→「機能」にリンクがありますので、ご覧ください。

Yoast XML Sitemaps

クエスチョンマークをクリックすると、サイトマップへのリンクが表示されます。これで、Google Search Consoleに戻ることができます。

Sitemaps」タブを開きます。

サイトマップの追加

WordPressのウェブサイトから取得したサイトマップのリンクごとに、「新しいサイトマップを追加」バーに入力します。Google Search Consoleは、サイトマップとその中のすべてのページリンクを処理します。次にGoogleのボットがウェブをクロールしたときに、あなたのサイトのページがピックアップされます。

サイトマップは、サイトに新しいコンテンツを追加するたびに自動的に更新されるので、Search Consoleにサイトマップが登録されていることで、Googleが重要な更新を見逃す心配はありません。

まとめ

WordPressでウェブサイトを構築することの素晴らしい点の一つは、構築方法やカスタマイズの度合いを自分で完全にコントロールできることです。ご覧のように、WordPressには、テーマからナビゲーションのレイアウトまで、カスタマイズできるものがたくさんあります。Googleのトラフィックデータの表示方法や場所をカスタマイズすることもできます。

結論:せっかくWordPressを使うのであれば、WordPressが提供するすべての機能を活用しましょう。このコンテンツマネジメントシステムには、あなたが望んでいたユニークでパワフルなウェブサイトを作るためにできることがたくさんあります。

-WordPress