本記事のゴール
WordPress のデフォルトのテーマですと、記事も大きく、モバイル対応や高速化の課題があります。これらの課題について、無料でアプローチできるテーマの 1 つに Cocoon があります。今回はこの Cocoon の導入について、解説していきます。
Why Cocoon?
デフォルトのテーマは、かなり見づらいです。また、昨今ですと PC からもモバイルからもアクセスするということでレスポンシブデザインも必要、検索エンジンからのランキングも意識した SEO 等、サイトデザインにはかなり気を配るポイントがあります。これらを解決してくれるテーマの 1 つが Cocoon です。
Cocoon は日本人により開発されたそうで、通常エンジニアリング目線だと日本人開発はどうかなというところは実はあったりしますが、コンテンツ周りということで日本語が中心にになるサイトだとマルチバイト文字とそれに係るデザインで安心感がありますので、今回は Cocoon を選んでいきます。何より情報量も多いですし。
念のため、無料の WordPress テーマについてまとめている記事へのリンクも残しておきます。目的に応じて、適宜適切なテーマを選んでいただければ。
Cocoon テーマをダウンロードする
Cocoon テーマは WordPress からは直接インストールできませんので、いったんダウンロードしてから、WordPress サイトにアップロードします。
親テーマと子テーマをダウンロードします。なお、こちらに関連ファイル一式のダウンロードリンクがまとまっています。
テーマの WordPress サイトへのアップロード、インストール
さて、早速テーマをアップロードしていきます。メニュー「外観」から「新規追加」、
「テーマを追加」画面で「テーマのアップロード」、
落とした Cocoon の親テーマ (ファイル名: cocoon-master-x.x.x.x.zip)を「Choose File」で選択し、「今すぐインストール」を押してアップロードしていきましょう。
そうすると、Nginx のエラー「413 Request Entity Too Large」が返ってきてしまいます。どうやら、Nginx の設定値の上限を上回るファイルをアップロードしてしまったようです。
したがって、Nginx のファイルをアップロードサイズの上限を変更していきましょう。サーバーに SSH で接続して、/etc/nginx/nginx.conf を編集し、http ブロックの中に client_max_body_size を追記します。
...
http {
...
client_max_body_size 16m;
...その後、Nginx を再起動します。
# systemctl restart nginx再度、同様の手順でアップロードにトライ。そうすると、今度は
のように、「辿ったリンクは期限が切れています。」とのエラー。php 側の設定で、ファイルのアップロードサイズ、POST サイズ上限等に引っかかっているようです。
それでは、/etc/php.ini の post_max_size、upload_max_filesize を変更していきます。
# vi /etc/php.ini[PHP]
...
post_max_size = 16M
...
upload_max_filesize = 16M
...今度は、php-fpm をリスタート。
# systemctl restart php-fpmそして、三度トライ。
今度はうまくいったようで、以下のような画面が表示されました。「テーマページへ移動」してみます。
問題なくインストールされているようですね。
同様に、「外観」メニューの「新規追加」、「テーマのアップロード」でCocoon の子テーマ (ファイル名: cocoon-child-master-x.x.x.zip) もインストールしていきます。
ここで詰まることはないと思うのですが、念のため成功画面は以下のようになるかと思います。
「テーマページへ移動」し、子テーマの方を有効化していきます。
これで Cocoon のインストールは完了、使っていくことができます。
ネクストアクション
なので、次回は WordPress サイト運用にあたりおすすめの EC2 インスタンスタイプと、インスタンスタイプの変更の方法と制限についてお話ししていくことにします。記事執筆のついでに、本サイトもインスタンスタイプを切り替えるつもりです。
