スポンサーリンク

【かんたん】ワードプレスを立ち上げる詳しい方法

ワードプレス立ち上げ Webノウハウ
スポンサーリンク

ワードプレスを立ち上げる方法

あなた独自のドメインで、ブログを作ることができます。アメブロやnoteのように、広告やデザインのしばりがなく、自由にWebサイトを作れます。

具体的には、このページのような独自のサイトを立ち上げることができるんです。

サーバー契約&ドメイン取得

サーバー契約とドメイン取得は必須です。

サーバー契約

まずは、サーバー契約をします。

こちらからXサーバーのページにいきます。

Xサーバー

「お申し込みはこちら」を押します。

Xサーバー

「新規お申込み」を押します。

Xサーバー

サーバーIDがすでに記入されていますが、自分で決めることもできます。

次にプランを決めます。

私は「X10」というプランです。

たくさん画像を使ってますが、まだまだ空き容量はあります。

ですので、「X10」で十分かと思います。

「クイックスタート」という機能が追加されたようですが、ここでは「クイックスタート」ではない方法をご紹介します。

Xサーバー

Xサーバー

個人情報を入力します。パスワードなどは忘れないように必ずメモしておきましょう。

Xサーバー

入力内容を確認して、「お申込みをする」を押します。

Xサーバー

このような画面になりますので、メールボックスを確認しましょう。

Xサーバー

このメールにはIDやパスワードが記載されいますので、大切に保管しておきましょう。

Xサーバー

Xサーバーに戻り、「Xserverアカウント」にいきます。

Xサーバー

ログインします。

Xサーバー

「料金お支払い」を押します。

Xサーバー

契約期間を選択します。期間が長いほど、1ヶ月当たりの料金が安くなります。

支払い方法を選択し、決済しましょう。

これでサーバー契約ができました。

ドメイン取得

次はドメイン取得です。

その前に、ドメインって何?という方のために、解説しますね。

たとえば、これは私のメルマガ登録ページです。
↓ ↓ ↓ ↓ ↓

https://kumikosalon.com/mail-magazine/

kumikosalon.comというのがドメインになり、どのページのリンクにも表示されます。

私達のサイトは、comになりますが、お好みで大丈夫です。

comやnetが無難です。

では、取得方法をご紹介します。

Xサーバー

「Xserverアカウント」から「ドメイン取得」を押します。

Xサーバー

取得したいドメインを入力します。

Xサーバー

取得できるドメインが表示されたら、希望のドメインと契約年数を選択します。

お支払いを済ませましょう。

サーバーとドメインの紐付け

サーバー契約とドメイン取得ができましたら、サーバーとドメインの紐付けをします。

「Xserverアカウント」に戻ります。

Xサーバー

「サーバー管理」を押します。

Xサーバー

「ドメイン設定」を押します。

Xサーバー

「ドメイン設定追加」を押します。

Xサーバー

紐付けしたいドメインを入力します。私の場合ですと「kumikosalon.com」と入力しました。

ワードプレスのインストール

サーバーとドメインの紐付けができたら、次はワードプレスをインストールします。

Xサーバー

「簡単インストール」を押します。

Xサーバー

インストールしたいドメインを選択し、「WordPressのインストール」を押します。

Xサーバー

Xサーバー

ブログ名などを入力し、「インストール」を押します。

Xサーバー

すると、上のように表示されますので、URLを押します。

Xサーバー

インストールした直後だと、このように「無効なURLです」と表示されます。

2時間ほど待ちましょう。

Xサーバー

すると、このような表示になります。

今後は、ここからワードプレスのダッシュボードにアクセスします。

ダッシュボード(編集画面)に入るには?

ダッシュボードっていうのは、ワードプレスの管理画面です。
↓ ↓ ↓ ↓ ↓

https://●●●●●/wp-admin

↑●●●●●にあなたのドメインを挿入してログインできます。

以降は、この画面からの作業になります。

テーマのインストール

親テーマと子テーマをそれぞれインストールします。

私はCOCOON(コクーン)というのを使っています。

コクーンを使えば、私のサポートを受けて頂けますので、以下のように設定しましょう。

COCOON(コクーン)のダウンロード

こちらより、ダウンロードページにいきます。

ワードプレステーマ

親テーマをダウンロードします。

ワードプレステーマ

同様に、子テーマもダウンロードします。

ワードプレステーマ

COCOON(コクーン)のアップロード

ワードプレスのダッシュボードにいき、「外観」→「テーマ」→「新規追加」と進みます。

ワードプレステーマ

「テーマのアップロード」を押します。

ワードプレステーマ

先程ダウンロードしたzipファイルを貼り付けます。

ワードプレステーマ

「今すぐインストール」を押します。

「親テーマ」「子テーマ」ともにインストールします。

COCOON(コクーン)の有効化

子テーマを有効化します。

ワードプレステーマ

親テーマではなく子テーマを有効化しましょう。

SSL化

SSL化をすることで「http」が「https」に変わります。

「http」のままだと、「危険なサイトです」のような表示が出てしまい、離脱してしまうきっかけになってしまいます。

こちらを参考に、必ずSSL化をしましょう。

ワードプレスインストール時に、自動SSL化をONにしていた場合は、既にSSL化になっています。

ワードプレスの詳細設定

以上で、最低限のワードプレスの設定はできました。

あとは、詳細設定になります。

私がワードプレスを立ち上げた際に設定した項目は次になります。

プラグインのインストール&有効化

私は次のプラグインをインストールしています。

◎Akismet Anti-Spam
◎EWWW Image Optimizer
◎XML Sitemaps
◎WebSub/PubSubHubbub
◎WP-Optimize
・Classic Editor
・Contact Form 7
・AddQuicktag
・Category Order and Taxonomy Terms Order
・Shortcodes Ultimate
・Advanced Editor Tools
・WP-PostViews
・pTypeConverter

「◎」は最低限インストールしておいたほうがよいでしょう。

「・」は必要に応じてインストールすればOKです。

インストールだけではなく、必ず有効化までしておきましょう。

一番上の「Akismet Anti-Spam」は有効化の方法が少し違うので解説します。

ワードプレス:「Akismet Anti-Spam」の有効化

Akismet Anti-Spamの有効化の方法です。

Akismet Anti-Spamの有効化

「有効化」を押します。

Akismet Anti-Spamの有効化

「Akismet アカウントを設定」を押します。

Akismet Anti-Spamの有効化

「Get Personal」を押します。

Akismet Anti-Spamの有効化

「\4500」を左にスライドさせて「\0」にします。

Akismet Anti-Spamの有効化

個人情報を入力し、3つのボックスにチェックを入れます。

Akismet Anti-Spamの有効化

メールにコードが届きますので、コピーして貼り付けます。

Akismet Anti-Spamの有効化

同様に、APIキーも貼り付けます。

Akismet Anti-Spamの有効化

以上で、Akismet Anti-Spamの有効化ができました。

ワードプレス:「設定」欄

「設定」欄から各種設定をしましょう。

ワードプレス設定

メディア設定は上記のようにしておくと、無駄な画像データがアップロードされないのでオススメです。

ワードプレス設定

パーマリンクは「投稿名」にします。

ワードプレス:ウィジェット

「外観」欄のウィジェットの設定です。

ワードプレスウィジェット

私のサイトではサイドバーは上のようにしています。

ワードプレス:ファビコン

ファビコンとはタブやブックマーク欄に表示される画像のことです。

ワードプレスファビコン

「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコンを選択」と進むと、ファビコンの画像が設定できます。

ワードプレスのダッシュボードのファビコンも変えたい場合は、次のようにします。

ダッシュボードのファビコン

「外観」→「テーマエディター」→「テーマのための関数」と進み、以下を貼り付けます。

/* 管理画面にファビコンを設定 */
function admin_favicon() {
echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”画像のURL” />’;
}
add_action(‘admin_head’, ‘admin_favicon’);

画像のURLをコピーすると、「http」になっていますが、ここでは「https」にする必要があります。

ワードプレス:プロフィール画像

プロフィール画像の追加をします。

ワードプレスプロフィール

右上の「プロフィールを編集」というところから設定できます。

ワードプレス:Cocoon設定

「Cocoon設定」→「Cocoon設定」と進むと、サイトのデザインなどが変えられますので、自分好みにカスタマイズしましょう。

ワードプレス:吹き出しの設定

久美子
久美子

これが「吹き出し」だよ♪

上のような吹き出しの設定をしましょう。

「Cocoon設定」→「吹き出し」→「新規追加」と進みます。

ワードプレス吹き出し

私は、上のように設定しています。

ワードプレス:マウスホバー設定

マウスカーソルが上にいくと色が変わるようにできます。

ワードプレスマウスホバー

例えば、上のようにマウスカーソルをおいた所が、ピンクになっていますよね。

この設定をします。

「外観」→「テーマエディター」→「スタイルシート」と進み、以下を貼り付けます。

/************************************
** ■ホバー時の背景色設定
************************************/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
background-color: #ffddee; /*背景色*/
transition: all 0.8s ease; /*アニメーション*/
color: #333; /*フォントカラー*/
}

カラーコードはお好みで変更して下さいね。

ワードプレス:グローバルメニューの設定

グローバルメニューの設定をしましょう。

ワードプレスグローバルメニュー

グローバルメニューとは、ヘッダー画像の下の部分のことですね。

「外観」→「メニュー」のところから設定できます。

ワードプレスグローバルメニュー

スマホ表示のことを考慮して、メニュー数は偶数個がオススメです。

ワードプレス:グーグルアナリティクスとサーチコンソールの設定

最後に、グーグルアナリティクスとサーチコンソールの設定をしましょう。

ワードプレス:グーグルアナリティクスの設定

まずは、グーグルアナリティクスの設定からです。

グーグルアナリティクスとサーチコンソールの設定

「管理」を押します。

グーグルアナリティクスとサーチコンソールの設定

「プロパティを作成」を押します。

グーグルアナリティクスとサーチコンソールの設定

上記の箇所の設定をします。

グーグルアナリティクスとサーチコンソールの設定

ここは未記入でも大丈夫なようです。

グーグルアナリティクスとサーチコンソールの設定

「ウェブ」を選択します。

グーグルアナリティクスとサーチコンソールの設定

URLなどを記入し「ストリームを作成」を押します。

グーグルアナリティクスとサーチコンソールの設定

「測定ID」をコピーします。

グーグルアナリティクスとサーチコンソールの設定

「Cocoon設定」「Cocoon設定」「アクセス解析・認証」と進み、上記に「測定ID」を貼り付けます。

以上で、グーグルアナリティクスの設定ができました。

ワードプレス:サーチコンソールの設定

次に、サーチコンソールの設定をします。

グーグルアナリティクスとサーチコンソールの設定

「プロパティを追加」を押します。

グーグルアナリティクスとサーチコンソールの設定

「URLプレフィックス」の欄にサイトURLを入力します。

グーグルアナリティクスとサーチコンソールの設定

グーグルアナリティクスの設定が済んでいる場合、自動的にサーチコンソールの設定も完了します。

サーチコンソール:サイトマップの追加

サーチコンソールにサイトマップを追加します。

ワードプレスのダッシュボードから「設定」→「XML-Sitemap」と進みます。

ワードプレス:サイトマップ

上の方に、サイトマップのURLがあるのでコピーしておきます。

ワードプレス:サイトマップ

ついでに下の方にいき、「優先順位を自動的に計算しない」にチェックを入れておきましょう。

ワードプレス:サイトマップ

サーチコンソールの画面にいき、新しいサイトマップの追加に、上のように入力します。

グーグルアドセンスの審査

こちらの記事で詳しく説明しています。【準備中】

ワードプレスの移行方法

こちらの記事で詳しく説明しています。【準備中】

よくある間違い

wordpress.com(ワードプレスコム)と、私の言ってるwordpress(ワードプレス)は、別物です。

まとめ

以上を参考にして、ワードプレスを立ち上げてみましょう。

コメント

タイトルとURLをコピーしました