WordPressサイトを1ヶ月で作ってみた

備忘録も兼ねて、現在公開しているこのサイトをどのように0から作ったのかを書いていきたいと思います。このサイトを公開したのは3月頭で、勉強を開始したのは2月頭。約1ヶ月で公開に至っています。記事自体は古いもので2013年のものもありますが、これは以前利用していたアメブロのブログを移植したからです。この移植作業が実に大変で、ウェブサイトの大枠の完成自体は実は勉強時間含め2週間程度しかかかっていないのですが、その後2週間を移植作業に費やしていました。この作業がとにかく大変だったので、今からブログを始めようと思っている人はアメブロやFC2などのブログサービスなどを利用するのではなく、頑張って自分のブログサイトを作ることを強くオススメします。

このサイトはWordPressで作りましたが、WordPressでウェブサイトを作ろうと思ったのはウェブサイト作成の勉強を始めた後で、勉強を始めた直後はHTML、CSS、PHPを使ってテンプレート無しでウェブサイトを作ろうとしていました。WordPressという素晴らしい土台がある現在、特に自分のように趣味程度でブログサイトを運営しようとする場合コードを全て自分で書いてウェブサイトを構築する必要は全くなく、WordPressを使用するのが一番かと思います。

WordPressを知らなかったこともあり、PHPを含むウェブサイトの勉強はかなりハードルが高いものだと認識していました。実際PHPを勉強したい、と初めて思ったのは2010年頃で、一度挑戦したものの挫折した過去を持っています。挫折した理由は色々ありますが、一番大きな理由は「PHPを勉強する目的」が欠落していたからだと思います。今回は、2016年の山旅をアメブロではなく自分で自由にいじれる個人ブログに掲載したい！と思ったところからPHPの勉強を始めており、その熱意があったからこそ勉強を始めることができまたサイトを完成させるに至ったのだと思います。それでもPHPの勉強をしようと思ってから実際始めるまでは1ヶ月くらいが経過していました。最初からWordPressというものを知っていれば、勉強を開始するハードルは下がっていたと思います。

今回は、どうやって勉強し、どんなソフトを使用し、どんなサイトから知識を得たか。また、WordPressのテンプレートやプラグイン、テンプレートの中でコードをいじった箇所などを紹介していきたいと思います。勉強の方法は人それぞれだと思いますが、自分の場合缶詰で一気に勉強するほうが頭に入るので、サイトを作ろうと思って公開に至るまでの1ヶ月間は仕事をしながら一日7時間くらいを勉強にあて、休みの日はほぼ一日中PCの前に座っていました。

スペック/ネット環境

執筆者

勉強を開始した時点での、ウェブサイト作成における自分のスペックは；

HTMLの基礎知識
ブラインドタッチ
ショートカットキー（Windows）

こんなところです。以前、アメブロでブログをつけていた際にHTMLのタグを使用して表など作っていたので、その知識は役に立ちました。あとは、ウェブサイト作成に直接関係があるわけではありませんが、仕事でエクセルのマクロを使用していたのも役に立ったように感じます。CSSやPHPは、個人的にはHTMLとエクセルのマクロを組み合わせたような感覚でしたので。ショートカットキーやブラインドタッチはスキルに加えるべきかどうか、というところではありますが、これらが出来ないと作業効率が非常に悪くなるので勉強開始前にある程度できるようになっておいたほうがよいでしょう。

PC

機種：Lenovo G570 433449J
OS：Windows 7 Home Premium
CPU：Intel Core i5
メモリ：4GB

こんなところです。ごくごく普通の、というより現時点（2017年5月）においてかなり古いモデルのPCといえるでしょう。購入したのは2011年くらいだったと記憶しています。

ネット環境

格安SIM（IIJmioの10GBプラン）を導入したスマホからテザリングで繋げていました。ドットインストールのレッスンは全て動画なので、10GBという上限があるとやや厳しいですが、自分の場合なんとかなりました。実際のウェブサイト作成においてはあまり容量を食わないので（特にローカル環境開発時）、ネットの容量/速度は殆ど気になりません。

勉強法

色々なサイトで紹介されておりますが、ドットインストールで勉強しました。

ドットインストール
http://dotinstall.com/

ウェブサイト作成の基礎が非常に分かりやすく、しかも無料で学べるのでかなりオススメです。自分のウェブサイトを作る、という点にのみ特化するのであれば；

第一段階（上から順に）
1. HTML入門 (全24回)
2. CSS入門 (全23回)
3. CSS3入門 (全19回)
4. CSSレイアウト入門 (全15回)
5. 実践！ウェブサイトを作ろう (全17回)
第二段階（順不同）
- ローカル開発環境の構築 [Windows編] (全14回)　※Macの人はMac編
- UNIXコマンド入門 (一般ユーザー編) (全16回)
第三段階（順不同）
- PHP入門 (全30回)
- MySQL入門 (全19回)
最終段階
- WordPress入門 (全23回)

これら10個の無料レッスンをこなせばWordPressのテンプレートを応用して自分のブログサイトができます。順を追ってレッスンをこなすことでサイトが出来るよう、10個のレッスンを基礎から応用へと大きく4段階に分けました。実際、自分の場合もこの流れでレッスンをこなしてブログサイトを作成しました。足りない知識はネットで検索すれば得られます（足りなかった分も解説していきます）。所要時間としてはどの程度事前知識があるかにもよりますが、勉強開始から2週間程度あれば新規のブログサイトの運営を開始できるかと思います。旧ブログから新規ブログにコンテンツを移植する場合は記事の構成を修正したりなど追加作業が膨大に発生する場合があり、自分の場合これに追加で2週間費やしました。

一回約3分の動画を見ながら勉強していくことになりますが、見るだけではもちろんスキルが身につくはずもなく、実際に動画を見ながら（多くの場合一時停止しつつ）PCを操作してコードを打ったり写真を入れたりしていくことになります。こうやって書くと難しそうに聞こえますが、動画は非常に分かりやすく説明されているので見ながらPCを操作するだけでどんどん知識が吸収されていきます。あと、これは人によるかもしれませんが、動画で紹介されるコードなどをノートに書き写すのも効果的です。内容はデジタルですが、コピペでワードファイルに内容を移していくよりもペンでノートに直筆で書いたほうが頭に入っていくような気がします（実際入っていると思います）。あとから「あれなんだっけ」と思ったときに、ノートを見返すことも出来るのでオススメです。

使用ソフト

Google Chrome
Atom
Virtual Box
Vagrant
Cyberduck
Windows PowerShell
PuTTY

使用ソフトの説明も動画に含まれているので、インストール方法や使用方法に関しては動画参照。

ローカル環境での開発

ドットインストールでの勉強を経てこの項目に至った場合、ウェブサイト作成の大まかな知識は得られたかと思います。ここからは応用編になりますが、いきなりネットにブログを公開できるわけもなく、まずはドットインストールでも勉強したようにローカル環境での開発になります。自分の場合、まずはテンプレート探しから始めました。WordPress上で導入しては変更、を繰り返し、最終的にシンプルな「First」というテンプレートに決定。

First
http://themehaus.net/ja/themes/first/

テーマが決まったら何をするよりもまず先に「親テーマ」と「子テーマ」の設定です。

親テーマ・子テーマの設定

テーマがアップデートされた場合、インストールしたテーマを直接編集してしまっていると編集箇所が元に戻ってしまいます。そこで、変更したい部分のみ編集できるよう「子テーマ」を作ります。まず「first_child」というように（firstの部分は親テーマの名前にします）新しいフォルダをthemesディレクトリに作成し、style.cssとfunctions.phpを用意します（この2ファイルはとりあえず記述無しで用意します）。用意したstyle.cssの中に：

/*
Template: first
Theme Name: first_child
*/

と記述。Templateが親テーマの名前、Theme Nameが子テーマの名前になります。用意したfunctions.phpの中に：

<?php
add_action ('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
	wp_enqueue style ('parent-style', get_template_directory_uri() . '/style.css');
}

と記述。これで子テーマの使用準備完了です。スタイルシート上で変更したい箇所があれば、子テーマのstyle.css内に記述することで親テーマの内容を上書きすることができます（＝子テーマが優先される）。また、親フォルダで階層が異なる場合でも（fist/css/ja.cssのように）、first_childフォルダ直下に新しくファイルを作成すれば（first_child/ja.cssというように）記述した内容が上書きされます。header.phpなどのphpファイルは、ファイルごとfirst_child直下にコピペして更新したい箇所を修正していきます。

注意点としては、functions.phpだけ特殊で、上書きではなく追加しか出来ません。よって、新しく追加する場合は子テーマのほうに追加すれば問題ありませんが、親テーマのfunctions.phpに記述されている内容を上書きしたい場合は直接親テーマのfunctions.php内の記述を変更する必要があります。（参照URL：http://knnpocket.xii.jp/wordpress/child_themes）

また、inc/template-tags.php内のコードを更新したい場合、子テーマにinc/template-tags.phpというファイルを作って新しいコードを書いても上書きされません。この場合、親テーマのtemplate-tags.php内の変更したいfunctionを子テーマのfunctions.phpにコピペし、内容を修正すればfunctionが上書きされます。（参照URL：http://mcbrain.jp/17292/）

ローカル環境下で子テーマを導入した時点で、下記のような細かい修正をいくつか行いました。該当しない方はスルーしてください。

細かい設定あれこれ

URLにindex.phpが必ず入ってしまう
ネットで見ると色々な原因があるようでしたが、自分の場合「設定」の「WordPressアドレス（URL）」をhttp://192.168.33.10/wordpressにすることで解決しました（.hostで設定したAliasにFollowSymLinksが効いていなかったのではないかと考えています）。
ファイルのアップロードサイズの制限解除
.htaccessファイルに：
```
php_value memory_limit 50M
php_value post_max_size 40M
php_value upload_max_size 30M
```
と記述することで任意のサイズに変更できます（値は任意のサイズ、単位はメガバイト）。注意点としては、memory_limitを最大、upload_max_sizeを最小の値にすることです。（参照URL：https://website-fun.com/upload-file-size/）
「外観」=>「カスタマイズ」でブログの外観が表示されない
「設定」の「WordPressアドレス（URL）」と「サイトアドレス（URL）」を統一させることで解決。

アイキャッチ画像が投稿記事の冒頭に表示されないよう設定変更

content-single.phpファイルをfirst_childフォルダ直下にコピペし、

<?php if ( has_post_thumbnail() ): ?>
		<div class="post-thumbnail"><?php the_post_thumbnail(); ?></div>
		<?php endif; ?>

という部分を

<!-- <?php if ( has_post_thumbnail() ): ?>
		<div class="post-thumbnail"><?php the_post_thumbnail(); ?></div>
		<?php endif; ?> -->

に変更。

表示の変更あれこれ

ナビゲーションにある「ホーム」をローマ字の「home」に変更
親テーマのfunction.phpに（必ず親テーマに記述して下さい！）：
```
function ***_page_menu_args ($args) {
	$args['show_home'] = 'home';
	return $args;
}
add_filter ('wp_page_menu_args','***_page_menu_args');
```
と入れることで表示が変わります（= ‘home’の’ ‘内の文字が表示されることになります）。***の部分には任意の文字を入れて下さい（ホームページ名など）。問題点は、これは子テーマではなく親テーマに記述しなければ機能しないということです。忘れないよう、子テーマのfunctions.php内に
```
# Firstのfunction.phpにホームを英語にする記述がしてある
```
と記述しておきました。（参照URL：http://bit.ly/2qbdjQg）

サイトの背景色変更

スタイルシートに下記のように記述します：

/* サイトの背景色変更用 */

.site {
	background-color: rgba(0,0,0,.5);
	margin-left: auto;
	margin-right: auto;
}

日本語のアイタリック表記
デフォルトだと日本語のアイタリックが反映されていなかったので、ja.cssというファイルを新しくfirst_childフォルダ直下に作り、
```
span[style="font-style:italic"], em, i {
	font-size: 15px;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif,"メイリオ",Meiryo;
	line-height: 1.7;
}
```
と追記。他にも色々と細かな変更を行っていますが、紹介しだすとキリがないのでとりあえず紹介はこの辺にしておきます。

導入したプラグイン紹介

導入したプラグインは下記の通りです：

Movable Type and TypePad Importer
Foo Gallery
Easy FancyBox
Contact Form 7
Meta Slider
Breadcrumb NavXT
Broken Link Checker
Google Authenticator
Jetpack
Lazy Load
Search Regex
SI Captcha Anti-Spam
Simple Share Buttons Adder
Yoast SEO

この中で、この項目ではMeta SliderとBreadcrumb NavXTを紹介します。

Meta Slider
このプラグインは、トップページにスライダーを挿入するために導入しました。Firstのテンプレートのトップページでスライダーを流すには、first_childフォルダ直下にheader.phpをコピペし、
```
<?php if ( is_home() && get_header_image() ) : ?>
		<div id="header-image" class="header-image">
			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
		</div>
```
という部分を
```
<?php if ( is_home() ) : ?>
      <?php
      echo do_shortcode("[metaslider id=2395]");
      ?>
```
に変更します。これでトップページにメタスライダーのスライダーが流れるようになります。[metaslider id=****]は作成したスライダーのIDを入れて下さい。また、メタスライダーの画像はなぜかセキュアな接続だと認識されていなかったので（SSL化に関しては「セキュリティ関連」にて）、子テーマのfunction.phpに下記のような記述を追記：
```
/* metaslider secure設定 */
function metaslider_protocol_relative_urls($cropped_url, $orig_url) {
    return str_replace('http://', '//', $cropped_url);
}
add_filter('metaslider_resized_image_url', 'metaslider_protocol_relative_urls', 10, 2);
```
これで問題なくhttps接続できるようになりました。
Breadcrumb NavXT
このプラグインは、固定ページにパンくずリストを追加するために導入しました。content-page.phpファイルをfirst_childフォルダ直下にコピペし、<article id～>の直下に下記を追記：
```
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="breadcrumbs">
	    <?php if(function_exists('bcn_display'))
	    {
	        bcn_display();
	    }?>
	</div>
	<header class="entry-header">
```
これで固定ページにパンくずリストが表示されるようになります。

現在のサイトで使用しているタグクラウドは、デフォルトの設定から少し変更しています。スタイルシートに下記のように記述しました：

/* タグクラウドCSS */
.tagcloud a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 6px;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    background: rgba(255,255,255,.2);
}

.tagcloud a:hover {
    transition: 0.3s;
    background: rgba(255,255,255,.3);
}

タグクラウドに関しては子テーマのfunction.phpにも下記のように記述し細かな設定も変更しました：

/* タグクラウドの編集 */

function tag_cloud_customize($args) {
    $myargs = array(
        'smallest' => 9, //最小フォントサイズ
        'largest' => 9,  //最大フォントサイズ
        'orderby' => 'count', //表示順(件数)
        'order'   => 'DESC', //ソート順(降順)
    );
    $args = wp_parse_args($args, $myargs);
    return $args;
}
add_filter('widget_tag_cloud_args', 'tag_cloud_customize');

（参照URL：https://www.pc-weblog.com/simplicity-tagcloud-customize/）

旧ブログからの移植

人によってはこれがかなり大変な作業になります。自分の場合もそうでした。新しくブログを立ち上げる前に利用していたブログサービスがアメブロだったので、ここではアメブロからWordPressへの移植に特化して書いていきます。おおまかに書くと、以下のような手順になります：

FC2ブログに登録
FC2ブログで「FC2お引越しツール」を使用
アメブロのテーマをFC2ブログが指定するテーマに変更
アメブロのカラムを「2カラム･左メニュー」に変更
アメブロの日付の表示を「xxxx-xx-xx xx:xx:xx」に変更
FC2ブログにアメブロの記事が移行されてきたら、FC2ブログの「バックアップ」機能を使用。インポート元のブログサービスを”WordPress”に設定。「全ての記事」をダウンロード。
「リンクと画像の抜き出しツール（http://www.shurey.com/js/works/linkview.html）」を使って、ダウンロードした「全ての記事」から画像URLを抜き出す。URL抽出が終わったら、全部コピーしてテキストファイルに保存。
Irvineというソフトを使い、抽出した画像URLをコピペしたテキストファイルから全画像をダウンロード。
FC2ブログを削除
6でダウンロードした全ての記事テキストファイル内の「画像のパス」が全てFC2用のパスになっているので、WordPress用の物に変換。具体的には：
http://blog-imgs-xx.fc2.com/t/a/n/アメブロID/
というのを、
http://自分のサイトURL/wp-content/uploads/
というパスに変換します（/のあとにはファイル名が続きます）。もちろん一つ一つ変換できるわけがないので、テキストファイルの内容をワードファイルにコピペし、一括変換します。※wp-content/uploads/の部分はサーバーや設定によって違う可能性があるので注意。変換後、ワードファイルの中身をテキストファイルに戻します。
WordPressに「Movable Type and TypePad Importer」プラグインをインストール

（参照URL：http://trapnest.net/811/post-811/）

11までいったら、10で編集した記事の内容テキストファイルをプラグイン経由でアップロードし、8でダウンロードした画像ファイルをWordPressのメディアに新規追加すれば基本的には移植完了になりますが、問題は10で用意した「記事の内容テキストファイル」です。自分の場合アメブロで記事を書く際に<p>タグなどを使っていたりいなかったりしたので、WordPressにアップロードした際の構成が記事ごとに異なり、記事によっては自分の意図した構成からかけ離れていたりと、これを記事ごとに確認して修正していくのが非常に大変でした。

アメブロには600記事くらい公開してあったのですが、まずはその中からWordPressで公開したい記事に絞るところから始めました。方法としては、まず600記事全てをWordPressにアップロードし、軽く読みつつ取捨選択をしていく。これだけで気が遠くなる作業でした。結果300記事くらいに絞ることになりましたが、次はその300記事の構成チェックです。多くの記事で、段落を分けたいのに改行されているだけであるとか、その逆とか・・・これもまた気が遠くなる作業でした。ある条件で<p>タグを追加したい、という場合が多かったので、テキストファイルの内容をワードファイルにコピペし、変換機能を使って一括で変えたい部分を変えていきました。また、非推奨だからかWordPressにアップロードした後に<center>タグが記事内から勝手に一括削除されたりと、予期せぬエラーも多数発生。これに関しては<div align=”center”>で対応しましたが、どの記事で<center>タグを使っていたか把握しているわけもなく、これにも辟易させられました。さらに、おそらく権限の問題ですがiframe（YouTubeなど）要素が全て無効化（勝手に削除）されてしまい、これに関しては対処法があったので下記に載せておきます。

WordPressでiframeが無効化されるのを防ぐ方法

子テーマのfunctions.phpに下記を追記します：

function allow_iframe_tag($content){
global $allowedposttags;
$allowedposttags['iframe'] = array('class'=>array() , 'src'=>array() , 'width'=>array(), 'height'=>array() , 'frameborder'=>array() , 'scrolling'=>array() , 'marginheight'=>array(), 'marginwidth'=>array() , 'allowfullscreen'=>array());
return $content;
}
add_filter('content_save_pre','allow_iframe_tag');

（参照URL：http://techmemo.biz/wordpress/iframe-disable-prevent/）

サーバー選び･ドメイン選定

サイトをローカル環境から公開に移す際、http://から始まるドメイン、そしてサーバーと呼ばれる自分のウェブサイトの内容を格納しておく場所が必要になります。よく言われることですが、ドメインは自分のウェブサイトの「住所」で、サーバーは「土地」であると考えると分かりやすいです。そしてサーバー（土地）に対しては月々の利用料（土地の使用料）、そしてドメイン（住所）に対しては年間の費用（住民税のようなもの）が発生します。個人ブログ運営のみであれば、PCの購入費や月々のネット代以外で費用が発生するのは主にこの2点のみで、サイトの規模や内容にもよりますがサーバー代は安くて月々500円程度、ドメイン代は年間700円といったところです。

まずサーバーですが、自分の場合このサイトで稼ごうという意思が全くなく、あくまで趣味としてブログを運営しているのでサーバーは低価格のwpXクラウドサーバーを利用しています。少し調べれば色んなサイトで各種サーバーを比較しているのでこのサイトで詳細に比較することは控えますが、wpXクラウドサーバーのポイントとしては下記が挙げられます：

WordPressに特化しているので、WordPressのインストールが楽
無料でSSL化が可能
一番安価なプランで月々500円（税抜）※実際に現在利用中のプラン
初期費用無料
無料お試し14日間で試すことが出来る
問合せへの対応が迅速

安さが目立ちますが、お試し期間もあり、また問合せへの対応が迅速（実体験）なのも評価できるポイントかと思います。また、自分のように趣味程度で不定期にブログをつけるのみであれば、月々500円（税抜）のグレードAで十分かと思います。グレードAの機能は下記の通りです：

初期費用：無料
月額料金（税抜）：500円
ディスク容量：10GB
WordPress設置可能数：1
MySQL容量：150MB
転送量目安：300GB/月
独自SSL：無料
自動バックアップ：過去14日分
FTP接続：可能
.htaccess編集：可能

…etc.

設置可能なWordPressのサイトが一つだけなので、WordPressのサイトをいくつか運営したいという方にはオススメできません。そういう方は、wpXサーバーを運営するXSERVERの基幹サービス「エックスサーバー」が良いかもしれません（月額900円（税抜）～）。実際私もエックスサーバーとwpXクラウドサーバーの二択で迷い、とりあえず初期費用無料で月額も安いwpXクラウドサーバーを試しに使ってみることにしたのでした。これからサーバーを探す方は色々と見比べてみると良いかと思います。

wpXクラウド
https://www.wpx.ne.jp/cloud/

次にドメインですが、ドメインはお名前.comで登録します。.netや.jpなど色々なドメインがあり、ドメイン名が既に使われているかどうかはお名前.com上で調べることが出来ます。まだ使われていなくても、分かりやすい英単語などが使用されていると莫大な費用がかかったりなど、調べてみると色々と発見があります。今回のサイトは主に自分のブログとして使用するという性質上自分の名前を入れることにし、日々を綴るという意味からほかに使用者がいなかった「yusakudays」にしましたが、年間699円（税抜）と.comを使うドメインの費用としては最安で登録することが出来ました。このドメイン名に決めるまで相当迷ったので、サイトを構築しながらサイト名もいくつかの候補に絞っておくとよいかと思います。ハイフンを入れたり数字を入れたりすると、使用者がいない場合が多くまた安価に押さえられるようです。

サーバー代･ドメイン代を合わせても年間かかる費用としては税込7,000円程度で、考え方にもよりますが趣味にかける金額として年間これくらいであれば安い方かな、と思います。どこかのサイトに「ネット上に自分が自由に使えるスペースがあるというのは実に良いもの」と書かれておりましたが、本当にその通りだと思います。ネットに公開するまでローカル環境で試行錯誤を重ねた自分のサイトが公開される瞬間は、なんともいえない達成感があります。

公開

ローカル環境でのテストが終わり、サーバー･ドメインも決まったらいよいよネット上への公開です。いくつか方法があるようですが、子テーマやローカル環境で編集したスタイルシートは手元にありアップロードすればすぐに適用され、また、旧ブログの過去記事に関してもプラグイン経由ですぐにアップロードできるので、今回は下記のような手順で契約したサーバーにローカル環境と同じ構成を0から作ることにしました。

サーバーにログインし、まっさらなWordPressをインストール。
WordPressのダッシュボードにアクセスし、上の「ローカル環境での開発」の手順で設定を行う。スタイルシートやその他ソースコードはローカル環境で用意したものを再度サーバー上にアップロードすれば済むのであまり手間ではありませんが、プラグインの再インストール･再設定は少し煩わしいかもしれません。親テーマのコードを編集していた場合は、再度編集が必要になる（親テーマを新規でインストールした場合）ので注意が必要。
上の「旧ブログからの移植」で用意した「記事の内容テキストファイル」をインポータープラグインを使用してアップロード。写真も再度アップロードする必要があります。

概ね、これでローカル環境開発時の状況を再現できるかと思います。これで作ったサイトがウェブ上に公開され、やれやれといったところですが、まだいくつか行うべきことがあります。

セキュリティ関連

セキュリティに関して、自分が行ったのは以下の4点です：

サーバーのサービスの一環で行えるSSL化
wp-config.phpをアクセス不可に
データベースのプレフィックスをデフォルトのwp-から変える
プラグインを使ってGoogle Authenticatorと画像認証をログイン画面に組み込む

一つ一つ簡単に説明していきます。

サーバーのサービスの一環で行えるSSL化
どのサーバーを選んだかにもよりますが、サーバーによってはサイトのSSL化を無料で行っている場合があります（SSL通信とは、データを暗号化して通信すること）。wpXクラウドサーバーもSSL化を無料で行っており、もちろん設定してみました。が、設定の際に色々と間違った操作をし、結果SSL化に1週間かかってしまいました。簡単に事の顛末を書いておきたいと思います。

何を間違ったのか、というと、なにも知らずに行った自分が阿呆だったのですが、サーバーにWordPressをインストールする際：

WordPressのインストール
ドメインの登録
SSL化

本来はここで終わりなのですが、なぜか「色々試してみよう」と無駄なことを思って、

WordPressの再インストール

この「再インストール」というところまで含めて、5回以上やってしまったんですね。6回目以降、サイトをSSL化させようとしてもなぜか画像のようなエラーが返ってきて設定できなくなってしまいました。

ここに書かれている設定の変更を行ってみるも改善されず、困り果てたのでカスタマーサポートに連絡してみると以下のような連絡が：

加えて、特定のドメインで何度も独自SSL設定を繰り返されますと、1週間ほど再設定が行えなくなる場合がございます。

1週間何もせずに待ってもいられなかったので、少し調べてみることにしました。まず分かったのは、wpXクラウドサーバーが採用しているのは「Let’s Encrypt」というSSL証明書であること。そこから突っ込んで調べてみると、こちらのサイトにこのような記述がありました：

Let’s Encryptでは同一ドメインの申請について、過去７日間に、５回までしか同一ドメインの証明書を取れないようです。
参照元： https://http2.try-and-test.net/letsencrypt_cron.html#get_in_a_short_period

さらに色々と調べてみると、この件に関してのLet’s Encrypt本家の資料を見つけました。

We also have a Duplicate Certificate limit of 5 certificates per week. A certificate is considered a duplicate of an earlier certificate if they contain the exact same set of hostnames, ignoring capitalization and ordering of hostnames. For instance, if you requested a certificate for the names [www.example.com, example.com], you could request four more certificates for [www.example.com, example.com] during the week.
参照元：https://letsencrypt.org/docs/rate-limits/

自分のドメインに対して何回証明書を発行したのか、この時点ではおおよそしか分からなかったのですが、上記サイトにそれを調べられるウェブサービスが紹介されていました。

Certificate Search
https://crt.sh/

ここに自分のサイトを入力して調べてみたところ、1日の間に6回証明書を発行していたようで、これでは制限上初回発行から7日経たないと新規SSLが発行されません。このウェブサービスで調べると、登録した日付だけではなく時間も詳しく出てきますが（日本時間ではないことに注意）、「7日間に5回」の「7日間」とは最初に登録した時間から24時間x7日間＝168時間経過した時間を指しているようで、ちょうど168時間経過した時点でSSL化を試したところ無事証明書が発行されました。殆どこんなエラーは起こらないと思いますが、初めてWordPressをインストールする際は注意が必要です。

サイトをSSL化すると、ウェブサイトのアドレスがhttpからhttpsに変わります。これに伴い画像ファイルのアドレスも全て変わりますが、ブログ内でリンクを貼っている場合リンクのアドレスも可能であれば変えたほうがよいです。一つ一つ変えていくわけにもいかないので、ここはSearch Regexというプラグインを使用。このプラグインを使うことでサイト上に貼った画像ファイルのリンクを一括でhttpsに変換することができます。また、ダッシュボードの「設定」=>「一般設定」画面で「WordPressアドレス（URL）」と「サイトアドレス（URL）」をいずれもhttpsのアドレスに変えておきましょう。

wp-config.phpをアクセス不可に
「wp-config.php」にはデータベースのアカウント情報が記載されており、最上位のセキュリティレベルが必要です。セキュリティレベルを上げる方法としては、まず「wp-config.php」と同じ階層に「.htaccess」ファイルを作成し（既にある場合は作成しない）、「.htaccess」ファイルに下記を入力：
```
<files wp-config.php>
order allow,deny
deny from all
</files> 
```
この設定により、外部からのアクセスは不可能になります。次に「wp-config.php」のパーミッションを「400（管理者のみ「読み取り」権限）」にしておきましょう。（参照URL：http://viral-community.com/wordpress/wordpress-security-1298/）
データベースのプレフィックスをデフォルトのwp-から変える
データベースのプレフィックスは、デフォルトのままだとwp-になっており、テーブル名を容易に特定されてしまうのでハッキングの対象になりやすいです。データベースのプレフィックスは任意のものに変更可能です。この行程は煩雑なので、時間を作っていずれ説明したいと思います。
プラグインを使ってGoogle Authenticatorと画像認証をログイン画面に組み込む
最後に、プラグインを使ったセキュリティ対策です。自分が使っているのはGoogle AuthenticatorとSI Captcha Anti-Spamという二つのプラグインですが、これらを使うことによりWordPressのダッシュボードにログインする際にパスワードに加えGoogle Authenticatorと画像認証が追加され第三者がよりログインしづらくなります。

せっかく作った自分のウェブサイト、煩雑な作業ではありますがセキュリティ対策はしっかりとしておきたいところです。

高速化あれこれ

高速化を行うにあたって、まず自分のウェブサイトがどれくらいのスピードであるのかを測る必要があります。これは下記ウェブサービスにて測ることができます：

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

始めの内は点数が非常に低くページも遅かったのですが、以下の設定を行うことでモバイル85点、PC90点まで引き上げることが出来ました。

背景やブログアイコンなど全ページに表示される画像を圧縮する（＝圧縮してファイルサイズを小さくしたものを使う）
GravatatorホバーカードのスクリプトをOFFに
HTMLの圧縮を有効にする
ブラウザのキャッシュを活用する
プラグインの使用

ざっとこんなところですが、一つ一つ説明していきます。

背景やブログアイコンなど全ページに表示される画像を圧縮する
そのまんまですが、自分の場合ページの背景に使用している画像の容量が非常に重く、これを鑑賞に耐えるギリギリのサイズまで圧縮したところ、ページのスピードが大幅に向上しました。ほか、プロフィール画像など、全ページに表示される画像の圧縮も効果的です。
GravatatorホバーカードのスクリプトをOFFに
Jetpackプラグインを導入している場合に限りますが、子テーマのfunctions.phpに下記のように書き込みます：
```
/* vGravatar ホバーカードのスクリプトをOFFにするコード */

function dequeue_devicepx() {
wp_dequeue_script( 'devicepx' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_devicepx', 20 ); 
```
（参照URL：http://hublog.biz/bwpb/setting-of-jetpack-by-wordpress-com/）

HTMLの圧縮を有効にする

.htaccessファイルに下記のように記述します：

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

（参照URL：https://webtatan.com/blog/wordpress/wp-speedup）

ブラウザのキャッシュを活用する

こちらも、.htaccessファイルに下記のように記述します：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/javascript "access plus 2 weeks"
ExpiresByType application/x-javascript "access plus 2 weeks"
</IfModule>

（参照URL：https://webtatan.com/blog/wordpress/wp-speedup）

プラグインの使用
Lazy Loadというプラグインを使用することで、現在見ている画面外の画像の読み込みは行わなくなります。スクロールするごとに画像が表示されていくので、特に画像が多いページの場合スピードが大幅に上がります。また、JetpackというプラグインのPhotonという機能も画像の読み込みを速くするのでオススメです。（参照URL：http://viral-community.com/wordpress/wp-high-speed-tech-5581/、http://wp-technique.com/jetpack-photon/）

まとめ

ここまでの内容で、簡単なウェブサイトは作成できるはずです。あくまで趣味としてしか考えていないのでSEO対策などは解説できませんが、どこで知識を得て何が必要なのか、まではここに書いてあることでわかるかと思います。他にもGoogle Analyticsの設定など色々とありますが、気が向いたら記事にしようかと思います。この記事で、見知らぬ誰かを助けられていたら幸いです。あまり技術的なことにはお答えできませんが、質問等ありましたらメニューのCONTACTからご連絡下さい。

Yusaku Days

WordPressサイトを1ヶ月で作ってみた

もくじ

スペック/ネット環境

執筆者

PC

ネット環境

勉強法

使用ソフト

ローカル環境での開発

親テーマ・子テーマの設定

細かい設定あれこれ

表示の変更あれこれ

導入したプラグイン紹介

旧ブログからの移植

WordPressでiframeが無効化されるのを防ぐ方法

サーバー選び･ドメイン選定

公開

セキュリティ関連

高速化あれこれ

まとめ

もくじ

スペック/ネット環境

執筆者

PC

ネット環境

勉強法

使用ソフト

ローカル環境での開発

親テーマ・子テーマの設定

細かい設定あれこれ

表示の変更あれこれ

導入したプラグイン紹介

タグクラウドの設定変更

旧ブログからの移植

WordPressでiframeが無効化されるのを防ぐ方法

サーバー選び･ドメイン選定

公開

セキュリティ関連

高速化あれこれ

まとめ