WordPressを使用したWEBサイト作成の記録です。

 

レンタルサーバの準備

自分のWEBサイトを作成するにあたり、まずサーバーを用意する必要があります。
自分で購入すると初期費用がかかるし、準備やメンテナンス等がかなり大変なので、レンタルするのが一番手っ取り早く楽に取り掛かることができます。

インターネットとかで調べてみましたが、今回は「エックスサーバー」さんを選択させていただきました。選択した理由は、独自ドメイン永久無料特典が付いていてWordPressクイックスタート（WordPressの一括設定無料オプション）もあり、独自SSLも無料で付いていたので契約後すぐにホームページを開設することができるためです。
国内シェアもNo.1でサポートも充実していそうだったのも選択した理由です。

WEBサイトの概略作成

WEBサイトを作成するのは初めてだったので、株式会社インプレスさんの「いちばんやさしいWordPressの教本 第5版」をAMAZONで購入し参考にさせていただきました。
WordPressを使用して、WEBサイトの概略を以下の手順で作成しました。

  1. タイトル決め
    これはレンタルサーバーを契約する際に「ブログ名」を入力する必要があったので、その時に「フミフミの気まま日記」としました。

  2. 使用する「テーマ」決め
    参考書が「Lightninig」を使用していたので、わかりやすさを考慮してまずはこれを使用することにしました。

  3. ロゴの作成とキーカラーの設定
    ロゴを自作すべくインターネットで検索してフリーソフト「Canva」を見つけ、インストールしテンプレートを利用して作ってみました。
    作成したロゴを設定し、キーカラーを明るい紫色に設定しました。

  4. メニュー構成
    まずはブログを主体とした最低限の構成としました。
    今後コンテンツが増えてきたら追加しようと考えています。

  5. 「ブログ」画面設定
    不要なものを非表示にしてシンプルにしました。

  6. 「サイト管理者プロフィール」画面設定
    最初「会社概要」だったのを不要なため「サイト管理者プロフィール」に修正して内容を変更しました。

  7. 「ホームページ」画面設定
    ブログをカテゴリーで分類し、カテゴリーごとにまとめて表示するページを作成するように考えています。
    今は構成だけで、今後ブログのコンテンツが増えてから固定ページを作成します。

投稿（ブログ）の作成

WEBページの概略が作成できたらあとはひたすら投稿を作成していきます。投稿あるいは固定ページを作成する際の注意点としては、「レスポンシブwebデザイン」を意識することです。「レスポンシブwebデザイン」とは様々なデバイス（スマートフォン・タブレット・PCなど）の画面サイズでWebサイトのレイアウト表示を自動的に調整してくれる機能で、「Lightninig」には標準で対応しています。このため、PCで見やすくするのにやたら改行を入れるとスマホでは見にくくなってしまうことがあるので注意が必要です。各デバイスのプレビュー、あるいは実際にスマホなどで確認すると良いでしょう。

固定ページの作成

新しいことに挑戦したその足跡を残すべく、それぞれの記録をまとめるための固定ページを作成しました。今後記憶力が落ちるのを想定し、これにより学習や経験したことを後ですぐに思い出せるようにしたいと考えています。
なお、ホームページからそれぞれの固定ページにアクセスできるようにリンクを設定しています。

表示設定

プログラミング学習の記録を書くにあたり、ページを見やすくするためにインデント（字下げ）と枠の追加が必要になってきました。しかし、WordPressのデフォルトでは入力しづらかったので、そこでプラグインのClassic Editorをインストールしました。その結果、インデントはできましたが自分の思うように表示することができず、枠も表示できませんでした。

そこで、インタネットで調べたところ「ビジュアル」モードでは限界があることがわかり「テキスト」モードのHTMLで記述することにより自分の思うようにインデントと枠を表示できるようになりました。

以下に「テキスト」モードのHTMLでの表示設定の例を紹介します。

インデント

<p style="padding-left: 40px;">文章をここに入れます。</p>
40pxが左側の空白分になります。

枠

<div style="border: 1px solid #000; padding: 10px; border-radius: 5px;">文章をここに入れます。</div>
1pxが枠の太さ、#000が枠の色、10pxが枠の余白分、5pxが枠の角Rになります。

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

少しずつブログの数も増え、サイト自体の体裁も整ってきたところで、さらに良いサイトにすべく、セキュリティやメンテナンス、使い勝手改善のためにインストールしたプラグインを紹介したいと思います。

セキュリティに関するものとして以下をインストールし有効化しています。

  • Akismet Anti-Spam (アンチスパム)
  • WP-Doctor Malware Scanner & Security Pro

メンテナンスに関するものとして以下をインストールし有効化しています。

  • Broken Link Checker
  • WP Multibyte Patch
  • UpdraftPlus - バックアップ/復元
  • WP-Optimize - クリーン、圧縮、キャッシュ

パフォーマンスに関するものとして以下をインストールし有効化しています。

  • Jetpack Boost
  • WP Super Cache

使い勝手改善に関するものとして以下をインストールし有効化しています。

  • Classic Editor
  • Advanced Editor Tools
  • VK All in One Expansion Unit
  • VK Blocks
  • Table of Contents Plus

SEO対策として以下をインストールし有効化しています。

  • Jetpack

個々の詳細な説明まではしませんが、ネットで調べて良さそうなものをピックアップしました。設定が必要なものもありますが、実際に操作してみたり、わからなければネットで調べたりしました。プラグインはやたらめったにインストールすると重たくなるとのことで、必要最低限にするのが良いとのことです。

お問い合わせの作成

「お問い合わせ」ページの作成には「Contact Form 7」というプラグインを利用しました。

作成手順は、以下の通りです。

  1. プラグインのインストールと有効化
  2. メニュー「お問い合わせ」「コンタクトフォーム」で問い合わせフォームを設定（フォームコードをコピーしておく）
  3. 固定ページで「お問い合わせ」ページを編集（フォームコードを貼り付け）
  4. 「外観」「メニュー」に追加
  5. お問い合わせメールの送信テスト

「お問い合わせ」ページを作成したら、必ずメール送信テストを実施しましょう。

ここまででWEBサイトの体裁は整ったので、あとはコンテンツを増やしていきます。

固定ページに目次を追加

固定ページで見出しが増えてきたので、何が書いてあるかをわかりやすくするために目次を追加しました。目次の追加には「Table of Contents Plus」というプラグインを利用しました。
追加の手順は非常に簡単で、このプラグインをインストールし有効化した後、簡単な設定をするだけで目次が固定ページに表示されます。