サイトの移動をしようと思ったら、私の環境ではどうやら難しいようで、また一から環境の構築をすることになりました。
せっかくなので構築手順をそのまま記事にしておきます。
利用しているレンタルサーバーは「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回目なわけですが。。。はぁ・・・
では、またの機会に
コメント