ブログサイトを構築する手順

ブラウザ WordPress

サイトの移動をしようと思ったら、私の環境ではどうやら難しいようで、また一から環境の構築をすることになりました。

せっかくなので構築手順をそのまま記事にしておきます。

利用しているレンタルサーバーは「onamae.com」です。動作環境は「Windows10」になります。

Windows11などでもできるとは思いますが、実際の確認はできていません。

レンタルサーバーの契約とドメインの取得は既に完了している前提で進みます。

レンタルサーバーコントロールパネルにアクセス

コントロールパネルにアクセスしたら、基本設定からWordPressを新規作成します。料金などはかかりません。

SSLの設定

SSLとは、サイトのセキュリティー保護をするための証明です

これをすることによってhttpからhttpsになります。

無料のものもありますので、最低限これはつけておきましょう。

セキュリティ>SSL証明書 から申し込みをします。

管理画面にアクセス

席ほどの完了画面の下に管理画面につながるURLが発行されますのでこちらから管理画面へログインします。

その後、自身で設定したユーザー名(もしくはメールアドレス)とパスワードを入力します。

WordPressの設定を整える

不要な投稿を削除する

左側の「投稿」をクリックして、すでに作成されている投稿のチェックボックスにチェックを入れ、ごみ箱に移動してください。

パーマリンク構造の指定

画像のように設定をして、「変更を保存」をクリックしてください。

パーマリンクトは記事一つ一つに割り当てられるURLのことです。投稿名などになっていると、URLに日本語が入ってしまい、あまり美しいものではなくなってしまします。

手動で変更することもできますが、毎記事変更するのは大変なので、しっかりと設定しておきましょう。

この設定は途中で変えられないと思っておいてください。

(厳密には変えられますが、今までの記事をいったんすべて削除する必要があります。)

テーマのダウンロードと新規追加

まずはこちらを参考にしてテーマをダウンロードしていきます

解凍する必要はありません。Zip形式のままにしておいてください。

ダウンロードできたら管理画面に戻り、 外観>テーマ>新規追加 をクリック

次に、「テーマのアップロード」をクリックし、先ほどインストールしたzip形式のファイルをドラックアンドドロップしてファイルをアップロードします。

完了したら有効化をクリックします。

設定を順次変更していく

設定の中の 一般設定・表示設定・ディスカッション を変更します。

設定項目は日本語なので特に解説は不要かと思います。

ご自身の裁量でご自由に設定してください。

また、各項目で一番下にある「変更を保存」を忘れずにクリックしてください。

カテゴリーの追加

最初からカテゴリーが1つ既に設定されていますこれはカテゴリーの親玉のようなものになりますのでわかりやすいように名前を編集で「一覧」に変更しておきました。このカテゴリーだけは削除などできません。

どんなカテゴリー編成にするかを考えるにはMiroというツールを使うと便利です。

New boardで新しいボードを作成してそこで作っていきます。実際に作成したものが下記です。

皆さんは皆さんなりのものを作ってみてください。保存は自動で行われるため、URLだけコピーして管理しておきましょう。

一つ上につながっているのが「親カテゴリー」になります。

作るカテゴリーが決まったら、どんどん追加していきましょう

後からも追加や削除ができます

ウィジェットの設定

外観の中にあるウィジェットから設定していきます。

私の場合は投稿本文下にプロフィールを設置し、コンテンツ上部に記事を検索するためのテキストを設置しています。それ以外の要素は中身をすべて削除して見やすくなるようにしています。

テキストには下記の簡単なプログラムを使用しています。

下記プログラムを使う方は一番最後に「]」を追記してお使いください(当ブログで完全なものを記載すると実際の絞り込み検索の欄が表示されてしまうため)

[searchandfilter fields=”search,category,post” search_placeholder=”キーワードで絞り込む” submit_label=”検索” hierarchical=”,1″ show_count=”,1,1″

この後に設定するプラグインの「Search & Filter」を入れることで正しく動作しますので、現段階ではテキストがそのまま表示されますが、ひとまずこのままでOKです。

メニューの設定

まずはメニュー構造を2つ作成していきます。

ひとまずはこれでOK

Cocoon の設定

スキンの設定

左側のCocoon設定をクリックし、そのままスキンを決めましょう。私は画像のものを現在は利用しています。ポチポチしていい感じのものを見つけたら、下の変更をまとめて保存を忘れずにクリックしてください。

全体の設定

次に全体を変更しましょう。

私が使っている設定は下記のとおりです。

サイトキーカラー      c9c9c9

サイトキーテキストカラー  0a0a0a

サイトフォント 文字サイズ 20px

モバイルサイトフォント   18px

文字の太さ         500

サイト背景色        adadad

サイトリンク色       0076dd

サイト選択文字色      ffffff

サイト選択背景色      0a0a0a

サイドバーの表示状態    投稿ページで非表示

上記記載のない部分は特に変更していません

ヘッダーの設定

私はヘッダーロゴヘッダーロゴサイズを画像のように設定しました。それ以外は特に変更していません。

投稿の設定

表示タイプをミニカードに、表示数を12に、ページ送りナビ設定の表示位置を本文下に変更しました。

目次の設定

表示ページの固定ページのチェックボックスを外し、目次切り替えの文字を変更しました。

SNSシェアの設定

表示切替ボタンカラーをそれぞれ(トップシェアボタンとボトムシェアボタン)画像のように変更しました。

SNSフォローの設定

私はこのサイトを複数名で共有しているわけではなく、個人で記事を書いていくのでフォローボタンの表示のチェックボックスを外しました。

コードの設定

ソースコードをハイライト表示と、行番号表示のチェックボックスにチェックを入れておきます。

コメントの設定

コメント入力案内メッセージに下記の文章を追記しました。

こちらに質問や記事の内容への補足をご記入ください。
ほかの方の助けにもなります。
また、利用規約に違反する不適切な内容のものは随時削除していきます。

アピールエリアについて

アピールエリアは、書籍を出版したときや、Youtubeを始めた時など、何かしら自分のことについて宣伝をしたいときに利用します。今は特に設定することはありませんが頭の片隅に入れておきましょう。

ボタンの設定

ボタンの種類を画像のものに変更しました。

まぁ、好みの問題ですね。

404ページの設定

404ページメッセージに下記の文章を記載しました。

お探しのページは見つかりませんでした。可能性は下記のとおりです。
・管理者によりページが削除された可能性があります
・管理者によりページが非公開に設定された可能性があります。
・URLが変更となった可能性があります。
・検索の際のURLが間違えている可能性があります。
上記はあくまで可能性であり、他に原因がある場合もあります。

お疲れさまでした。Cocoonの設定はひとまず終了です。

次はプラグインを入れていきましょう。

プラグインの設定

追加するプラグインと簡単な説明を記載します。

プラグインは追加すればするほど便利にしやすいですが、動作が遅くなりがちです。必要なものだけを導入しましょう。

Advanced Editor Tools

記事の編集時の編集ツールを増やせます。

以前のサイトでは導入していたものの、今回は導入を見送っています。

Akismet Anti-Spam

スパムコメントを自動でブロックしてくれます。コメント機能を利用する場合には割と必須かと思います。

bbPress

WordPressで掲示板やフォーラムを簡単に作成できます。

今回は掲示板を作る予定はないため導入を見送ります。

BuddyPress

会員制のサイトを作成することができます。

当サイトではこのプラグインを使って無料会員登録をしていただいた方のみコメントができるようにしています(記事現在)

FileBird

メディアライブラリで画像をフォルダーに整理して保存できるようになります。

私のサイトでも導入しています。

GD bbPress Attachments

上記の「BuddyPress」で画像を添付できるようにするためのプラグインです。

今回は画像を利用する予定はないため導入を見送ります。

Google XML Sitemaps

サイトマップを作成することができます。

広告収入などを目指す場合にはほぼ必ず必要になります。

MailPoet

ニュースレターとメールを送信できるようになります。

特に利用予定がないため現段階では導入を見送ります。

Multiple Themes

複数のテーマのデザインをページによって適用させることができるようになります。

現段階では導入を見送ります。

Search & Filter

記事を絞り込み検索できるようになります。

当サイトでも導入しています。

Site Kit by Google

Google公式ツールとWordPressを簡単に連携できるようになります。

とりあえずでもいいので入れておくといいでしょう。

SiteGuard WP Plugin

不正アクセスからWordPressを守るプラグインです。

絶対に入れましょう。

Table of Contents Plus

目次をより洗練されたものとすることができます。

今回は導入を見送ります。

Ultimate Member

本格的な会員サイトを作ることができるようになります。

今回は導入を見送ります。

WordPress Popular Posts

人気記事ランキングを作成できるようになります。

Ad Auto Insert H

広告収入を得たい場合にはAdSenseを利用することが多いかと思います。この際にページのタグにプログラムをコピペするように求められます。これを利用すれば簡単にコピペができます。

当サイトでも導入しています。

固定ページの作成

利用規約・プライバシーポリシー・免責事項

固定ページに各項目を記載して公開します。

固定ページを実際に表示する

では、一番上の部分から設定していきましょう。左側から 外観>メニュー を選択して、上部のメニュー選択から選択をします。

左側から追加したいものを選択してメニューに追加をクリックします。

次に右側のインデントをマウスで画像のようにすることで、プルダウン選択ができる入れ子状態にできます。

最後にメニューの保存を忘れずにクリックします。

一番下の部分も同じように作成しましょう。

おわりに

お疲れさまでした。

この設定は基本的には1回しかやらないので、あきらめてやりましょう。

まぁ、私は2回目なわけですが。。。はぁ・・・

では、またの機会に

コメント

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