無料サーバ xdomainでWordPressを始めてみた

WordPressはオープンソースのブログプラットフォーム。
世界的に人気があるのだが、知っているのはWEB関連の情報に詳しい人で、一般的にはそれほど知られていないと思われる。
ブログを始める時に思い付くのは、アメブロ、JUGEM、FC2、Bloggerなどの無料ブログサービスで、いずれもビギナーにも優しい作りになっており、大抵はアカウントを作成するだけで使用できる。
その点、WordPressは一筋縄ではいかない。

WordPressそのものはオープンソースのプログラムなので、WordPressのシステム要件を満たしたサーバであれば、インストールすることで使用できる。
WordPress4.1.1日本語版の動作環境は、PHP バージョン 5.2.4 以上、MySQL バージョン 5.0 以上になっている。
が、この時点でビギナーには相当きつい。
条件がきついわけではなく、何が書いてあるのか分からないし、どうすれば良いのかも分からない。フリーソフトと同じで、便利で豊富な機能が無償で提供されていても、その機能を使いこなせるか否かはユーザー次第になる。

ただ、WordPressは奥が深いだけで、ちょっと頑張ればビギナーでも十分に利用できるし、一般的なブログサイトを使用するより、確実にWebコンテンツのスキルは向上するので、チャレンジする価値は十分にあると思う。

まずはサーバの用意から

WordPressを始める！と決意したら、次のアクションはサーバの確保。
有料・無料と世の中には多くのレンタルサーバが存在するが、WordPressがどういったものなのか勉強するなら、初めから有料のサーバを契約し、背水の陣で臨むのも一計だが、ここは無難に無料サーバがオススメ。

WordPressに対応している無料サーバもググれば結構あるが、人気なのはxdomain。
WordPress専用のレンタルサーバを運営しているXSERVERが展開しているサービスで、ドメインを取得しなくても無料でサーバを利用することができる。

無料の場合、サーバの容量は1GBで、広告の表示があり、その他にも有料のXserverと比較するといろいろと制限がある。
詳細はこちらのページを参照

制限があるとは言え、これだけの容量があれば十分。しかもWordPressの自動インストール機能付き。

申し込みは左サイドバーにある上図赤枠部分から行う。
「初めてのご利用」→「メールアドレス入力」→「確認メール送信」→「受信したメールに記載のお申込URLをクリック」→「必要事項を入力」という流れで、最後に「ログイン」。

ここで設定したメールアドレスとパスワードは、xdomainの管理パネルへログインするためのものなので必ず控えておく。

管理パネルに移行するので、左サイドバーの「無料レンタルサーバー」をクリック。

任意のサーバーIDを登録したら、再び左サイドバーの「無料レンタルサーバー」をクリック。

WordPressの「利用を開始する」をクリックし、左サイドバーの「無料レンタルサーバー」をクリックすると、WordPressの箇所に「管理パネルログイン」と表示されるので、クリックしてログイン。

WordPressの管理画面に入っているが、まだWordPressはセットアップされていないので、「新規インストール」をクリック。

サイトアドレスの空欄はサブドメイン用なので新規インストール時は空白にし、後はWordPressIDとブログタイトル、メールアドレスを入力して「次へ進む」。

確認画面で内容を確認したら「確定（WordPressをインストール）をクリック。

これでWordPressのセットアップが完了。
表示されているURL・管理ユーザー・パスワードはWordPressの管理画面にログインするための情報なので必ず控えておく。
セットアップそのものは非常に簡単。データベースの設定がなく、入力箇所も必要最小限になっているので、ビギナーも安心。

WordPressのセットアップが完了したら、次にFTPアカウントの設定を行う。
xdomainの管理パネルから「無料レンタルサーバ」→「WordPress　管理パネルログイン」でWordPressの管理パネルを開き、上図赤枠部分の「設定」をクリック。

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

「全てのファイル・フォルダにアクセスする」にチェックを入れて「設定変更」をクリックし、「設定編集（確定）」を更にクリックすると、FTPアカウントの情報が表示され設定完了。
表示されたパスワードは後から確認することができないので必ずメモをとっておく。

次はコンテンツ作成の準備

サーバの設定とWordPressのインストールが終了したので、これで第一段階の準備完了。
他のブログサービスでいうなら、アカウントを取得した状態と同じ。これから白紙のブログをカスタマイズしていく。

取得したブログURLをクリックすると、上図のようなページが表示されるので、左サイドバーの「メタ情報」にある「ログイン」をクリック。
ちなみにこれがいま公開されている自分のブログ。

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

WordPressの管理画面に到着。ここまで来たら、もう一息。
「更新」の項目に数字が表示されている場合は更新を選択。

更新には「WordPress」「プラグイン」「テーマ」の3通りあるが、取り敢えず更新するのはWordPressだけでOK。
「WordPressの新しいバージョンがあります。」と表示されている箇所の「いますぐ更新」をクリックする。
更新は自動で行われ、完了すると「WordPress◯◯へようこそ」のような画面が表示されるので、左サイドバーの「外観」をクリック。

テーマを決める

WordPressには多くのテーマが用意されている。
WordPressオリジナルのものから個人、企業が作成したものまで、様々なデザインが提供されており、WordPressの管理画面から追加できるものは全て無料。
アフィリエイトに特化したテーマなど一般サイトで販売されているものもあり、「WordPress　テーマ」で検索すればいろいろ出てくる。

「外観」をクリックすると、上図のようにすでにインストール済みのテーマが表示される。
現在のテーマは「有効」になっているもので、上図ではWordPressオリジナルのTwentyFifteen（2015）が選択されている。

Twenty Fourteen（2014）、TwentyThirteen（2013）もインストールされており、各テーマをクリックするとテーマの特徴が表示される。

ここで「気に入ったのがねぇ！」という場合は、「新しいテーマを追加」をクリック。

山ほどテーマが出てくるが、多すぎて選ぶのが大変なので、「特徴フィルター」をクリック。
希望の条件にチェックを入れて検索すれば、少しは対象が絞られる。
テーマのデザインは「ライブビュー」で実際のイメージを確認できる。
気に入ったテーマが見つかったら「インストール」をクリック。

インストールが終了したら上図の画面になるのでテーマを「有効化」すればOK。

各テーマのデザインは画像の差し替えなど、ある程度のカスタマイズは簡単に行えるが、余白やフォントの変更をはじめ、デザインそのものの設定を変更したい場合は、情報量が圧倒的に多いWordPressオリジナルのテーマを選択したほうが賢明。
ちなみに当サイトはTwenty Eleven を使用している。

カスタマイズする

テーマが決まったら次は基本デザインを設定。
左サイドバーの「外観」→「カスタマイズ」を選択。

WordPressオリジナルテーマで、CSSをいじらずに設定できるのは、このカスタマイズの項目のみで、表示される項目は各テーマによって異なってくる。
編集できる項目は限定されるが、各項目は何度でも自由に編集可能で、変更した後に「保存」をクリックすると、右側に表示されているページに反映されるので、確認しながら作業を行える。

余白が広すぎるとか、フォントが大きすぎるとか、ヘッダー画像の幅が気に入らないとか、検索窓が鬱陶しいとか、細かなデザインを変更したければ、CSSの編集が必要になってくる。

画像の追加と編集

サイトのイメージに大きな影響を与えるのがヘッダー画像。
画像が無しもシンプルで良いのだが、この部分を変更するとオリジナル感と達成感が得られるので、取り敢えず変更する。
「外観」→「カスタマイズ」から「ヘッダー画像」をクリック。

ヘッダー画像には推奨サイズは表示されおり、設定する画像を「リサイズ」か「トリミング」することになる。
百聞は一見にしかずなので、取り敢えず「新規画像を追加」をクリック。

メディアライブラリが開いたら、「ファイルを選択」をクリックしてヘッダーに表示したい任意の画像を選択するか、その画像をドラッグ・アンド・ドロップする。

画像をメディアライブラリの上にドラッグすると、上図のような表示に変わるので、そのままドロップすると、ファイルがアップロードされる。

ファイルの情報はメディアライブラリの右の「添付ファイルの詳細」に表示される。
この画像のサイズは3648*2736ピクセルで推奨サイズよりはるかに大きいため、「選択して切り抜く」という選択肢しか表示されていない。

「選択して切り抜く」をクリックすると、上図のような画像編集画面になる。
初期設定で表示されている選択部分が推奨サイズの比率になっており、サンプル画像と同じ縦横サイズになる。
選択範囲は自由に変更可能だが、横幅を基本にリサイズされるため、横幅は推奨サイズを下回らないようにしたほうが良い。
推奨サイズより小さな画像の場合、リサイズされて拡大されるので画像が荒くなってしまう。

推奨サイズより縦を長くして切り抜くと、切り抜いた画像がリサイズされてヘッダー画像に設定される。

ヘッダー画像だけではなく、アップした画像はリサイズ・トリミング・回転・ミラーと、簡単な編集が行える。
操作は上図赤枠部分のアイコンをクリックして行うが、トリミングは初めに切り抜きたい部分を画像上でドラッグすると、上図のように範囲選択できるので、トリミングする位置が決まった時点で、左端のトリミングアイコンをクリックして「保存」。
画像サイズを変更する場合は、「画像縮尺の変更」の箇所で任意の変更後の数値を入力して「縮尺変更」をクリック。リサイズは変更した時点で保存されるので、トリミングのように「保存」する必要はない。

固定フロントページ

固定フロントページは、トップに表示されるページもしくは投稿を指定する項目。
※固定ページと投稿ページについては後述。

デフォルトでは「最新の投稿」が設定されており、トップページにアクセスするとブログの最新記事が表示されるが、上図のように「固定ページ」のラジオボタンにチェックを入れ、任意のフロントページ（固定パージ）、もしくは投稿ページを指定することで、サイトのトップページを特定のページに固定することができる。

ウィジェット

ウィジェトは単独で動作するプログラムで、ブログで一般的なのは「カレンダー」「時計」「RSS」「最近のコメント」など。
これらは固定ページや投稿ページに表示されるわけではなく、サイドバーやフッダーに配置して使用する。

ウィジェトの追加・削除は「カスタマイズ」のメニューよりも、サイドバーの「外観」→「ウィジェト」で設定ページを開いたほうが分かりやすい。
使用するテーマによってサイドバーがあったりなかったりするが、フッダーは基本的にすべて存在する。

ウィジェトも後から変更可能なので、よく分からなければ適当でOK。

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

WordPressには数多くのプラグイン（機能拡張）が公開されており、プログラミングの知識がなくても、プラグインをインストールして有効化するだけで様々なことが可能になる。

左サイドバーの「プラグイン」をクリックすると、デフォルトでインストールされているプラグインが表示されるので、「Akismet」と「WP Multibyte Patch」を有効化する。

Akismetは有効化するだけでなく、アカウントを有効化しなくてはならないので、「Akismetアカウントを有効化」→「APIキーを取得」→「GET AN AKISMET API KEY」をクリックすると、上図のページにくる。
Basicは無料で非商業用のサイトのみ利用可。問題なければ「SIGN UP」をクリック。

クレジットカードの登録画面が表示されるが、これは初期設定が36ドル/年の有料プランになっているため。
スマイルフェイスのスライドバーを左端に動かして無料プランに変更。

クレジットカードの入力画面が、氏名のみの入力フォームに切り替わるので、入力して「CONTINUE」をクリック。

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

この他のプラグインについては、自身のサイトに必要と思われるものを随時インストールしていけば良いのだが、取り敢えずコンテンツの作成を強化するプラグインを3つインストールする。

新しいプラグインは左サイドバーの「プラグイン」→「新規追加」で、上図赤枠部分に下記のタイトルを入力して検索。

TinyMCE Advanced
ビジュアルエディタを強化するプラグイン。
HTMLのタグを直接入力する玄人は別として、普通はWYSIWYG（ウィジウィグ）形式を利用すると思うので、インストールしておくと便利。

TinyMCE Clear
回り込みを解除する「clear:both」というタグを追加するボタンがビジュアルエディタに追加されるプラグイン。
すでの5年前のプラグインで最新バージョンのWordPressではテストされていないが、WordPress4.2 でも問題なく動作する。

Shortcodes Ultimate
ショートコードによってサイトの表現力を強化するプラグイン。
オリジナルのボタン作成などが可能になる。

コンテンツの作成

大まかな箱ができたら、次は中身の作成。

WordPressに限らず、多くのブログサービスに「記事」と「ページ」がある。
何が違うのかと言うと、一般的には「記事が動的」「ページが静的」と言われているが、動的とか静的とか言われても分からない。

WordPressのページは「固定ページ」と表記されているが、この固定ページにはカテゴリーなどの関連付けができず、独立したページになる。
一方の記事はWordPressで「投稿」と表記されており、こちらはカテゴリーやタグ付けなどが行え、普通のブログの記事と同じ。

「投稿」がブログなら、「固定ページ」はウエブサイトのようなもので、両者の性質は大きく異なっており、システムでの取り扱いも違ってくるのだが、見た目には全くわからないので、単純に「ブログっぽくしたいなら投稿」、「ウエブサイトっぽく作るなら固定ページ」で良いと思う。

SEOについて

検索での上位表示を意識するなら、Googleでガイドラインが公表されているので、まずガイドラインに沿って作成することが先決。

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

・検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
・ユーザーをだますようなことをしない。
・検索エンジンでの掲載位置を上げるための不正行為をしない。ランクを競っているサイトや Google 社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
・どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

要約すると、妙な小細工をせず、質の高い、ユーザーが分かりやすいページを作れ、ってこと。

記事の新規作成

「投稿」または「固定ページ」を作成するには、左サイドバーの「投稿」または「固定ページ」をクリックするか、マウスオーバーで出現するサブメニューの「新規追加」を選択。

タイトルと本文を記入して、右サイドバーにある「公開」のメニューで「下書き保存」もしくは「公開」をクリック。
投稿をカテゴリー分類するには、右サイドバーの「カテゴリー」のメニューから「新規カテゴリーを追加」をクリックし、任意のカテゴリー名を入力後に「新規カテゴリーを追加」をクリック。
タグについても同様の操作で編集できる。

カテゴリーやタグは「投稿」メニューから事前に登録可能。
「スラッグ」は説明書きがある通り、URLに表示されるもので、デフォルトではタイトルがそのままスタッグに割り当てられる。
日本語のタイトルだと、そのまま日本語になってしまうため、Googleのガイドラインに沿って「コンテンツに関連した分かりやすい単語」を「半角英数」で登録する。

投稿や固定ページは初期設定でコメントやトラックバックが許可になっており、これらを許可しない場合は、上部にある「表示オプション」をクリックし、「ディスカッション」にチェックを入れると、コメントとトラックバックのチェックボックスが表示されるので、このチェックを外しておく。
ディスカッションの他にも、右サイドバーとフッターのウィジェトの表示・非表示は、この表示オプションで設定する。
また、表示しているウィジェットはドラッグすることで場所の移動が可能。

メニューを作成

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

「外観」→「メニュー」で設定画面を開く。
メニューには「ページ」のほか「カテゴリー」と「カスタムリンク」があり、任意で「メニューに追加」する。初めて設定する場合は、メニューの名前を入力して「メニューを作成」。
メニューはネスト（入れ子）に対応しているので、大分類→中分類→小分類と表示させることもできる。
メニューは複数作成することができるので、ヘッダー部分用とサイドバー用など、表示させる箇所によってメニューを切り替えることができる。

これで必要最小限+ の設定が完了。
後は左サイドバーの「設定」で「投稿設定」や「表示設定」などを編集すれば、結構な見栄えのするページになっていたりする。
CSSやPHPの知識がなく、取り敢えずWordPressを始めよう！というなら、このあたりから手を付けるのがベター。

ただ、文字の大きさや装飾、マージンなど細かな設定をしたい場合は、CSSやPHPを編集すれば可能で、オリジナリティも向上する。
最初はコードのコピペだけでもなんとかなり、編集しているうちにコードも見慣れてくるので、CSS初心者には最適な教材なのかもしれない。

xdomainでWordPressを始めよう！