雪ん子パースペクティヴ

読むとちょっとタメになるエントリー。

【WordPress】自分用のWebサイトを初めて作った。

世界は意志ある者の前のみに開かれる。

 

はろー、yukiです。

 

IT業界で働いていたこともあるのですが、Webの勉強をしても、それを一つの形にしたことがなかったので、やってみました。

最初はMVCで一からの制作を思っていましたが、お手軽なCMSを選びました。

理由は、コンテンツを早く公開したかったのと、アクセス解析を特に勉強したかったからです。

 

さて、今回はWeb制作の一連の流れをまとめました(詳細は省きますが、参考にしたWebサイトを随所に載せます)。

ーーーーーーーーーーーーーーー

1. ローカルで開発環境の用意

2. カスタム投稿タイプ作成

3. カスタムフィールド作成

4. ページごとにCSSを設定

5. ローカルからレンタルサーバーへ移行

ーーーーーーーーーーーーーーー

 

ざっとこんなものです。

 

1. ローカルで開発環境の用意

 

「XAMPP」を利用しました。WordPressのローカル開発と言えば、XAMPPの利用がまず挙がっていたからです。

ダウンロードドキュメント

 

XAMPPとは...

XAMPPプロジェクトは、Apache WebサーバーとMySQLPHPPerlFTPサーバー、phpMyAdminをパッケージ化したXAMPPなどを開発するプロジェクトです。

 

起動するとこの画面が表示される。

f:id:yuki_sasano:20160830162915j:plain

 

制作で参考にしたのは下記。

XAMPPでローカル環境構築して、簡単WordPressインストール | はじめてのWordPressまとめ

とは言っても、特に知りたいのは初期設定からではないでしょうか。

 

localhostからWordPressの管理画面に進めるようになると、デフォルトで固定ページと投稿ページが編集可能です。

次からは、カスタマイズになりますので、必要のない方は5まで進んでください。

 

 

2. カスタム投稿タイプ作成

 

まず、デフォルトの投稿と、カスタム投稿では何が違うのか。

WordPress CODEX(WordPresswiki)では次のようにあります。

投稿とは...

WordPress投稿 (post) はブログで最もよく使われる投稿タイプです。投稿はふつう一番新しいものが最初にくる反時系列順で表示されます。

 

カスタム投稿とは...

カスタム投稿タイプは自分で作れる新しい投稿タイプです。(略)ラベル、サポートする機能、使える場面や他の特徴を指定して投稿タイプを定義できます。

 

つまり、デフォルトの投稿が日記のようであるのに対し、カスタム投稿はオリジナリティのある個別ページだと言えます。

 

カスタム投稿タイプを使用するには、WordPressを構成するphpファイルを編集するか、プラグインを使用する方法の二つがあります。

僕は後者を選択。使用したプラグインは「Custom Post Type UI」です。

ドキュメント(英語)】

ダウンロード・インストールは、WordPressの管理画面からの方が容易です。

使い方は下記を参考にしました。

Custom Post Type UIの使い方[WordPress]

 

英語で書かれたプラグインなので、日本語でスムーズに作業したい場合は「使い方」で検索すると良いです。このプラグインを説明するエントリは多いので、さほど困らないと思います。

 

 

3. カスタムフィールド作成

 

僕の場合、カスタム投稿を作成後、投稿ページには必ず記載する項目が出てきました。

そこで、同じ種類の投稿ページを作成する際に、入力する項目をデフォルトで編集画面に表示したい。カスタムフィールドの出番です。

カスタムフィールドとは...

投稿者が投稿に「カスタムフィールド」を追加できる機能があります。この任意の情報は「メタデータ」と呼ばれており、(略)メタデータは「名前」と、その「値」の組み合わせからなっています。「名前」は、メタデータ要素の名称のことを指します。「値」は、その要素に対応する情報を指します。一般的には、固定された「名前」に対し、記事によって異なる「値」を記入します。

少し意味が難解かもしれませんね。

僕の具体例を紹介します。

f:id:yuki_sasano:20160830164152p:plain

上図にある本の[タイトル]、[画像]、[一言コメント]は、カスタムフィールドで作成しています。

「読んだ本一覧」という固定ページに、一つ一つHTMLタグを用いて作成したのではありません。

「本のページ」を作成する編集画面に、上記3つの項目を追加し、「読んだ本一覧」のページに呼び出しているのです。

また、「本のページ」内においても構成は同じにしたいので、カスタムフィールドを用いて入力欄を統一しています。

(構成については、実際に確かめてみてください⇒画像左のページ画像右のページ

 

カスタムフィールドはカスタム投稿タイプと同様、phpファイルとプラグイン、どちらでも作成可能です。

僕はプラグインを使用しました。プラグインは「Advanced Custom Fields」です。

ドキュメント(英語)】

 

参考にしたのは下記。プラグインの使い方から、呼び出し方法まで書かれています(スッキリしていて見やすい)。

WordPressのカスタムフィールドを使いやすくするプラグイン「Advanced Custom Fields」|アイムービック エンジニアブログ

 

 

4. ページごとにCSSを設定

 

WordPressではデフォルトでデザインのテンプレートが適用されています。

ですが、上記のカスタム投稿や、個別ページに独自のCSSを記述し、オリジナリティを持たせたい。そんな時に、CSSを個別に設定する方法があります。

僕はカスタムフィールドを用いた場合と、functions.phpを編集した場合の二通りを行いました。

参考にしたのは下記。

・カスタムフィールドを用いた場合

WordPressでページごとに別のスタイル(外部CSS)を適用させる方法

・カスタムフィールドを用いない場合(functions.phpを編集)

WordPressで記事ごとに個別のCSSを設定する方法3選

 

ただ、カスタムフィールドを用いない場合、上記ではカスタム投稿タイプのページには適用できないと思います。

カスタム投稿タイプは、

$post_types => 'ラベル'

ということなので、is_single() ではなく、is_singular() が適切です。

つまり、こうする。

is_singular( 'ラベル' )

 これで、functions.phpに追加したCSSを適用するif文が通ると思います。

 

 

5. ローカルからレンタルサーバーへ移行

 

一通り制作したら、あとは本番サーバへファイルを移行するだけ。

サーバーはレンタルを選ぶと思いますので、任意のものに。

さくらサーバーの場合、次が参考になります。

【WordPress】ローカル環境(XAMPP)で作成したサイトを、さくらレンタルサーバーへ移行する方法

 

私ごとですが、wp-config.phpの編集で、データベースサーバ名につまずきました。

データベースサーバ名は、取得したドメインとは異なります。データベースの設定・管理画面に記載されていますので、そちらをコピペしてください。

 

さて、公開後はURLの変更とセキュリティを高めましょう。

参考にしたのは次です。

URLの変更:WordPress を専用ディレクトリに配置する - WordPress Codex 日本語版

セキュリティ:WordPress の安全性を高める - WordPress Codex 日本語版

 

セキュリティと言えば、ファイルのパーミッションとかですかね。

 

 それから、Google Analyticsについて、僕は直接貼り付けました。

プラグインは重くなるし、用いるほどのことでもなかったからです。

参考にするなら下記。

WordPressにGoogle Analyticsを設定する3つの方法

 

 

最後に、宣伝にもなりますが、僕の制作したWebサイトを紹介しておきます。

yuki-office.sakura.ne.jp

 

※読書に関する投稿は、上記サイトに追加していく予定です。

 

 

 

以上。