ビギナーが始めるワードプレス

Wordpress-icon

ウェブ制作 初心者でも できる WordPress

WordPress は世界的に人気がある オープンソースのブログプラットフォームで、WordPress のシステム要件を満たしたサーバであれば インストールして使用できる。

アメブロ , JUGEM , FC2 , Blogger などの 多くのブログサービス は アカウントを作成するだけで使用できる ビギナーにも優しい作りになっているが、WordPress は ブログを立ち上げるサーバから 用意する必要があり、ウェブ制作初心者には WordPress 5.7 の動作環境 ( PHP バージョン 7.4 以上 ,  MySQL バージョン 5.6 以上 ) を理解するだけでも難しい。

サーバ の用意

WordPress を始める際には WordPress の動作環境 をサポートした サーバが必要で、当面は WordPress に対応している「 WordPress 簡易インストール機能 」が付いた 無料レンタルサーバ の利用を推奨。

X FREE

以前は xdomain が展開していた 無料のレンタルサーバ で、現在は 無料レンタルサーバが X FREE として独立、Xdomain は ドメインの取得サービス , 有料のレンタルサーバを Xserverが運営している。

X FREE 公式サイト

start-wordpress-001

トップページの「 無料レンタルサーバ ご利用お申し込み 」から メールアドレスを入力して「 確認メール 」を送信し 受信したメールに記載の URL をクリックして 必要事項を入力 という流れになる。

メールアドレス と パスワード は XFREE へのログインに使用。

start-wordpress-002

XFREE のログイン情報を入力して 管理パネルにログイン。

start-wordpress-003

WordPressの「 利用を開始する 」をクリックすると 初期設定 は実行される。

start-wordpress-004

初期設定が完了したら 左ナビゲーションバー の「 無料レンタルサーバー 」をクリックして 表示される サーバー から「 WordPress 」の「 管理パネルログイン 」をクリック。

start-wordpress-005

WordPress を セットアップするため「 新規インストール 」をクリック。

start-wordpress-006

サイトアドレスの空欄は サブドメイン用なので 新規インストール時は 空白にして WordPressID と ブログタイトル , メールアドレス を入力して「 次へ進む 」で 内容を確認したら「 確定 ( WordPressをインストール )」で WordPress のセットアップが実行される。

Start WordPress -6

インストール完了時に 表示される URL , 管理ユーザー , パスワード は WordPress の 管理画面にログインするための情報なので必ず控えておく。

Start WordPress -34

WordPress のセットアップが完了したら FTPアカウント の設定を行うため 左ナビゲーションバーの「 無料レンタルサーバ 」から「 WordPress の管理パネルログイン 」で WordPressの管理パネルを開き「 設定 」をクリック。

Start WordPress -35

各種管理設定の「 FTPアカウント設定 」をクリック。

Start WordPress -36

「 全てのファイル・フォルダにアクセスする 」にチェックを入れて「 設定変更 」をクリックし「 設定編集 ( 確定 )」で FTPアカウントの情報が表示され 設定完了。

表示された FTPパスワードは後から確認することができないので必ずメモをとっておく。

コンテンツ作成の準備

サーバの設定 と WordPress のインストールが終了したので フォーマットをカスタマイズしていく。

Start WordPress -7

取得した サイトの URL をクリックすると テストページ ( 現在公開されている自分のブログ ) が表示されるので 左サイドバーの「 メタ情報 」にある「 ログイン 」をクリック。

Start WordPress -8

WordPress の管理画面へログインするため 取得した「 管理ユーザー名 」と「 パスワード 」を入力。

Start WordPress -9

WordPress の管理画面 が開き「 更新 」の項目に数字が表示されている場合は「 更新 」を選択。

WordPress の管理画面 は ブックマークに追加しておく。

start-wordpress-007

「 更新 」には「 WordPress 」「 プラグイン 」「 テーマ 」があるので「 WordPress 」のみ 更新しておく。

「 WordPress 」に「 WordPress x.x – ja 」と「 WordPress x.x – en US 」がある場合は ローカライズされた「 WordPress x.x – ja 」の「 今すぐ更新 」をクリック。

テーマを決める

WordPress には WordPress オリジナル のものから 個人、企業が作成したものまで 様々な デザインが提供されており、WordPress の管理画面から簡単に追加できる。

Start WordPress -11

管理ページの左ナビゲーションバーにある「 外観 」では インストール済みのテーマが表示される。

デフォルトで インストールされているのは WordPress オリジナル のテーマで、使用しているユーザーが多く テーマに関する情報量が豊富なため ビギナーでも扱いやすい。

Start WordPress -12

インストールされているテーマが イメージと異なる場合は「 新しいテーマを追加 」から 使用するテーマを「 インストール 」する。

テーマの検索は「 特徴フィルター 」を使用して 希望の条件にチェックを入れると 対象を絞ることができ、テーマのデザインは「 ライブビュー 」で実際のイメージを確認できる。

xdomain13

テーマのインストールが終了したら「 有効化 」で テーマを反映。

テーマのカスタマイズ

WordPress の オリジナルテーマで CSS を編集せずに 設定できるのは「 外観 」にある「 カスタマイズ 」の項目のみで 表示される項目は テーマによって異なる。

xdomain14

編集できる項目は限定されるが CSS などの知識がなくても 設定できる。

ヘッダー画像の追加と編集

ヘッダー画像は サイトのイメージ付けに大きな影響を与える箇所で テーマ毎に 推奨サイズがある。

xdomain15

「 カスタマイズ 」から「 ヘッダー画像 」を選択すると 推奨サイズを確認できる。

xdomain19

「 新規画像を追加 」で ヘッダーに表示する画像を アップロードして トリミングなどを行い 設定する。

xdomain20

ヘッダー画像は 横幅をベースにリサイズされるため 推奨サイズより小さなサイズの画像は使用を避ける。
固定フロントページ

固定フロントページでは トップに表示される ページ や 投稿 を設定する。

WordPress は「 投稿 」と「 固定ページ 」があり「 投稿 」は カテゴリー や タグを設定できるが 「 固定ページ 」では設定できないなどの違いがあり 一般的に「 投稿が動的 」「 固定ページは静的 」と表現され システムでの取り扱いも違ってくるが 見た目に違いはない。

xdomain22

デフォルトでは「 最新の投稿 」が設定されており ホームページ にアクセスすると ブログの最新記事が表示される。

「 固定ページ 」の ラジオボタンにチェックを入れて 任意のフロントページ ( 固定ページ ) や 投稿 を指定することもできる。
ウィジェット

ウィジェトは単独で動作するプログラムで「 カレンダー 」や「 最近のコメント 」など サイドバー や フッダーに配置して使用する。

xdomain23

ウィジェトの追加/ 削除 は「 カスタマイズ 」のメニューではなく「 外観 」の「 ウィジェト 」で設定を行う。

ウィジェット は デフォルトでインストールされてるが プラグイン をインストールことで 追加することが可能。

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

WordPress は 多くのプラグイン (  拡張機能 ) が公開されており プログラミングの知識がなくても プラグインを使用することで 様々な機能を追加できる。

xdomain27

左メニューバーから「 プラグイン 」を選択すると デフォルトでインストールされている プラグインが表示されるので「 Akismet 」と「 WP Multibyte Patch 」を有効化する。

start-wordpress-009

Akismet は スパムをブロックするプラグインで、有効化するだけでなく アカウントを有効化する必要があるため「 Akismet アカウントを有効化 」→「 APIキーを取得 」→「 GET AN AKISMET API KEY 」を選択して「 Personal 」の「 Get Personal 」をクリック。

Personal プランは 非商業用のサイトのみ 無料で利用可。( 広告を配置する場合は有料 )

start-wordpress-010

広告 や アフィリエイトを使用しないサイトの場合は スライドバーを左端に動かして無料プランに変更。

商用サイトの場合 Personal プラン は 1500円 / 年 から利用可能。

start-wordpress-011

無料プランに変更すると クレジットカードの入力画面が 氏名 と サイトURL の入力フォームに切り替わり 無料プランの使用条件が表示されるので 各項目を確認してチェックを入れ「 CONTINUE WITH PERSONAL SUBSCRIPTION 」をクリック。

xdomain31

APIキーが表示されたら「 手動でAPIキーを入力 」のテキストボックスに入力し「 このキーを使用 」で Akismet が有効になる。

主なプラグイン

プラグイン は 自身のサイトに必要と思われるものを随時インストールしていけば良いのだが、プラグインの影響で サイトが重くなったり 不具合が発生する可能性もあるため 注意が必要。

xdomain32

新しいプラグインは 左ナビゲーションバーの「 プラグイン 」→「 新規追加 」で プラグインのタイトルを入力して検索。

TinyMCE Advanced
ビジュアルエディタを強化するプラグイン。
Shortcodes Ultimate
ショートコードによってサイトの表現力を強化するプラグイン。
Classic Editor
WordPress の旧エディター と TinyMCE を有効化するプラグイン。
Google XML Sitemaps
Google ,Bing ,Yahooなど検索エンジンのインデックス用 サイトマップを作成するプラグイン。

コンテンツの作成

サイトの外観が整ったら コンテンツを作成する。

xdomain24

「 投稿 」「 固定ページ 」は 左ナビゲーションバーの「 投稿 」「 固定ページ 」の「 新規追加 」を選択。

start-wordpress-012

タイトル と 本文を 入力後 公開せずに保存する場合は 右サイドバーにある「 公開 」のメニューで  「下書き保存」, 公開する場合は「 公開 」をクリック。

カテゴリー

投稿 を カテゴリー分類するには 右サイドバーの「 カテゴリー 」のメニューから「 新規カテゴリーを追加 」をクリックして 任意のカテゴリー名を入力後に「 新規カテゴリーを追加 」のボタンで確定。

タグも同様の操作で編集できる。

xdomain25

カテゴリー や タグは「 投稿 」メニューから事前に登録することもできる。

「 スラッグ 」は URL に表示されるもので デフォルトでは タイトルが スラッグに割り当てられる。

xdomain26

投稿 や 固定ページ は 初期設定で コメント や トラックバックが許可 されているので、許可しない場合は 上部にある「 表示オプション 」から「 ディスカッション 」にチェックを入れ 「 コメントの許可 」と「トラックバックとピンバックの許可 」のチェックを外す。

メニューの作成

サイトの構成 や 投稿 のカテゴリーなどが決まったら ユーザビリティを向上させるために メニューを作成する。

メニューには「 ページ 」のほか「 カテゴリー 」と「 カスタムリンク 」があり 任意で「 メニューに追加 」する。

xdomain33

「 外観 」→「 メニュー 」で設定画面を開、初めて設定する場合は メニューの名前を入力して「 メニューを作成 」。

メニューは ネスト ( 入れ子 ) に対応しており 複数作成することができるので ヘッダー用 と サイドバー用など 表示させる箇所によってメニューを切り替えることも可能。

SEOについて

検索での上位表示を意識するなら Google でガイドラインが公表されている。

ウエブマスター向けガイドライン
検索エンジン最適化スターターガイド

・検索エンジンではなく ユーザーの利便性を最優先に考慮してページを作成する。
・ユーザーをだますようなことをしない。
・検索エンジンでの掲載位置を上げるための不正行為をしない。
・自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。

関連記事

Ad-Inserter-Pro-icon

Ad Inserter の設定と使い方

柔軟な表示設定ができるWordPress 用の広告管理プラグイン Ad Inserter は WordPress 用の広告管理プラグインで、無料版でも 広告を表示するデバイス の指定 や 見出し・コンテンツ・コメントなど […]

AICP-icon

Ad Invalid Click Protector の使い方

広告の不正クリック防止プラグイン Ad Invalid Click Protector ( AICP ) は 広告の異常クリックを無効化する オープンソースの WordPress のプラグインで、アドセンス狩り 対策とし […]

Wordpress-icon

ビギナーが始めるワードプレス

ウェブ制作 初心者でも できる WordPress WordPress は世界的に人気がある オープンソースのブログプラットフォームで、WordPress のシステム要件を満たしたサーバであれば インストールして使用でき […]

Wordpress-icon

WordPress の 子テーマ作成とカスタマイズ

子テーマを作してして WordPress のオリジナルテーマをカスタマイズ WordPress のオリジナルテーマ では テーマのカラー や フォント などは CSS の編集が必要で、カスタマイズの内容によっては PHP […]