WordPressテーマ「Cocoon(コクーン)」を使ってサイトをリニューアルしました

2018年5月24日(木)にサイトをリニューアルしました。

見て分かりやすいところはテーマ(テンプレート)を変更した点ですが、それ以外にもサイトの構造などを色々と変更していますのでそのあたりも含めてリニューアルの経緯や実施した作業などについて書いていきたいと思います。

サイト運営的な話なので自身でサイトを運営している・運営はしていないが興味があるといった方以外には多分無価値な記事です。

リニューアルの目的

昨今のウェブ事情に適したテーマへの変更

今回のリニューアル前まで当サイトが使用していたテーマは「Simplycity」というものです。

Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

https://wp-simplicity.com/

無料で使える上に高機能でありスキン(見た目を変更するもの)も豊富で大変ありがたく利用させて頂いていたのですが、作成されてからかなり時間が経っていることから昨今のウェブ事情に合わないところが色々あるなとも感じていました。

そこで、Simplicityの後継の後継である「Cocooon」というテーマを導入することとしました(「Simplicity」の後継は「Simplicity2」)。

Cocoon | SEO・高速化・モバイル最適化済みの無料WordPressテーマ

https://wp-cocoon.com/

2018年3月にリリースされたばかりのCocoonは(現在はまだβ版ですが)昨今のウェブ事情にもマッチしていますし、Simplicityと同様に無料で使える上に高機能であり且つテーマやCSSなどを一切弄らなくても設定画面から様々なカスタマイズができるような作りになっていて非常に使いやすいです。

普通に1万円超で販売しても良いのではないかなと思えるくらいの出来です。

サイト機能とブログ機能の分離

こちらの記事でもちょっと触れていますが、当サイトは極一部を除いたほとんどの記事をブログ記事(WordPressで言うところの「投稿」)として投稿していました。

「投稿」はとりあえず記事を書いて投稿するという点においては自動的に前後の記事とリンクを貼ってくれますし、適切にカテゴリ分けさえすれば記事を整理しやすいという利点があります。

しかし、そういった便利さや手軽さの一方で以下の2種類の記事を全て「投稿」として一括りに突っ込んでしまっていることで、レビュー記事を非常に探しにくい状況となっていました。

鮮度が重要な記事
キャンペーン情報など、ある程度の時間が過ぎたら情報の価値が著しく落ちる記事
鮮度が重要ではない記事
各サイトのレビュー記事など、時間経過が情報の価値にあまり影響しない記事

例えばモッピーのレビュー記事(総合的な評価友達紹介制度の評価ポイント交換についてなど)は初期に書いた記事なので「モッピー」カテゴリの奥底に埋まっており、カテゴリを開いてこれらの記事に辿り着くためには多数投稿された過去のキャンペーン記事に埋め尽くされたカテゴリページを何ページも奥に辿る必要があって非常に不便でした(検索フォームから「モッピー」で検索するという方法もありますが、「モッピー」のような使用頻度の高いキーワードだとヒットする記事数が多いのでそれはそれで手間がかかります)。

特に最近は記事数が増えてきたことで余計にそう感じるような状況が増えてきていました。

そこで、性質の異なる上記2種類の記事を分離するために今後は鮮度が重要な記事は「投稿」として、鮮度が重要でない記事は「固定ページ」として投稿していくこととしました。

また過去に投稿した記事についても必要に応じて「固定ページ」に変換している最中です。

具体例としてはモッピーのキャンペーン等に関する情報は「モッピー」カテゴリに、モッピーのレビューに関する記事はモッピーのレビュー記事にぶら下がるような構造になりましたので、過去のキャンペーンの情報などを調べたいときは「モッピー」カテゴリを辿れば良いですし、モッピーの評価を知りたいときはモッピーのレビュー記事から全てのレビュー記事へ簡単にアクセスできるという感じです。

また、ポイントサイトのレビューとアンケートサイトのレビューについては以下の2記事をそれぞれ最上位として、その下に関連記事をぶら下げていく予定です。

ポイントサイトの基礎知識 - サービス内容やポイントを稼ぐ方法などのまとめ
ポイントサイトとは? ポイントサイトは何らかの商品やサービスなどを購入するとポイント還元を受けることができるサービスです。 例えば、ポイントサイトの「モッピー」を経由して楽天市場を訪問・買い物をすると、 楽天市場の...
アンケートサイトの基礎知識 – サービス内容やポイントを稼ぐ方法などのまとめ
アンケートサイトとは? アンケートサイトは配信されるアンケートに回答するとその謝礼としてポイントを貰えるサービスです。 貯まったポイントは現金をはじめ電子マネー・ギフト券など様々なものに交換できるので、アンケートサイトはお小遣い...

このあたりの「投稿」と「固定ページ」の使い分けについては以下の記事が非常に参考になりました。

[WordPress]投稿や固定ページ、カスタム投稿タイプの使い分け方

https://olein-design.com/blog/wordpress-post-page-custom-post-type

脱プラグイン

WordPressは色々な機能をプラグインで追加できる点が非常に魅力的です。

当サイトも色々なプラグインを使っています。

しかし、何でもかんでもプラグインに頼っていると当該のプラグインが更新されなくなったときに困りますし、たまたまいくつかのプラグイン同士の相性が悪かったりするとそのせいでサイトのレイアウトが乱れたりしてしまうこともあるため、頼りすぎは良くありません。

そこで可能な限りプラグインに頼らずともテーマの機能や自作のショートコードだけで対応できるようなサイトを作りたいと以前から考えていました。

今回のリニューアルにおいてはCocoonのおかげでいくつかのプラグインを停止することができましたし、トップページ等に掲載している更新履歴はショートコードを自作して出力しています(以前はプラグインで対応)。

もちろん今後もプラグインは使っていきますが頼りすぎないようにやっていくつもりです。

HTML・CSS・PHPの勉強

WordPressは無料で高品質なテーマが多数公開されているので、そういった既存のテーマを利用すれば100点満点中で90点以上の満足度を得られます。

しかし、他人が作ったものだとどうしても痒いところに手が届かず100%満足できることはないため細かい部分については自分でカスタマイズするしかなくHTML・CSS・PHPの知識が必要となります。

私は簡単なカスタマイズ程度なら自力でできるのですが、もう少し勉強をしてレベルアップしたいと考えていたこともリニューアルの理由の一つです。

今回は最終的にテーマにCocoonを導入するという結論に至りましたが、実は当初はHTML・CSS・PHPの勉強の一環としてゼロからテーマを自作するつもりでいて一応ある程度のところまで作りました。

自作したWordPressのテーマ

※クリックで拡大
途中まで自作したテーマの外観

しかし、テーマ作成は見た目のデザイン以外にもやらなければならない作業が膨大であるため流石に全てを自作していたらいつまで経ってもリニューアルできないなと思っていた頃にタイミングよくCocoonがリリースされたので、その時点でテーマの自作は諦めました。

中途半端に止めるのもアレかなと思いましたが、テーマをある程度自作したことによりHTML・CSS・PHPの知識が以前よりも強化されたと実感できていたので割と素直に進路変更できたと思います。

リニューアルのために実施した作業

noindexを付けた記事のリストアップ & 削除

当サイトでは定期的に各記事のアクセス数などを調べた上で、アクセス数が著しく少ない記事にはnoindexを付けていました。

その際には「All in One SEO Pack」を利用していました。

しかし、Cocoonは標準でSEO関連の機能が付いておりCocoonを導入した上でAll in One SEO Packも続投するとdescriptionなどが二重で出力される等の問題が生じるためリニューアルに合わせて停止することとしました。

ただ、All in One SEO Packを消すと今までに設定したnoindexも全て消えてしまうという問題があったため、停止前にnoindexを付けた記事のリストアップを実施しました。

具体的な作業としては、過去にどの記事にnoindexを付けたのかはほとんど覚えていなかったため各記事のソースを開いてnoindexの有無をチェックしました。

手作業でやると時間がかかりすぎますしチェック漏れが発生する可能性大なので、PHPで自作プログラムを作って自動で処理しました。

リストアップした記事の内容は全部チェックしましたが、サイト開設当初に書いた記事が大半でほとんど中身がなかったり現在のサイトの主旨とはちょっとズレた内容のものも少なくなかったので思い切ってほとんど削除しました。

ショートコードの整理

当サイトでは広告(友達紹介バナーを含む)やレビュー記事へのリンクなどの大半は自作のショートコードを使って出力しています。

特に広告はショートコードの中身を差し替えれば全記事の広告を一気に差し替えられて非常に便利だからです。

リニューアル後も同様にしてショートコードを活用するつもりではいたのですが、ショートコードの大半はfunction.phpの中に直接書いてしまっていたためメンテナンスのしやすさを改善するために機能ごとに別ファイルに記述した上でfunction.phpからそれらのファイルをインクルードするように整理しました。

また、広告タグはコード中にベタ書きしており差し替えの度にコードを弄らなければならないという怖さがあったため、広告タグは別ファイルに保存してショートコードの実行時に都度読み込むように変更しました。

これにより広告タグを変更する際には当該ファイルを置換すれば良いだけになりました。

「投稿」から「固定ページ」への変換

冒頭でも述べた通り今後は記事の性質に合わせて「投稿」と「固定ページ」を使い分けていく予定です。

ただ、過去に投稿した記事のほとんどは「投稿」にしてしまっていたため、記事の内容をチェックしながら必要に応じて「固定ページ」へと変換しました。

変換の際には「pTypeConverter」というプラグインを利用しました。

pTypeConverter — WordPress Plugins

https://wordpress.org/plugins/ptypeconverter/

ボタンひとつで記事のタイプを変更してくれて大変便利です。

テストサイトの作成

一通り上記のような準備が終わったところで、当サイトとは別の場所にWordPressをインストール & Cocoonを適用してテストサイトを作りました。

そこでトップページのレイアウトの作成・メニューやサイドバーの中身の作成・CSSのカスタマイズ・ショートコードのテストなどを実施しました。

現在のWordPressにはライブプレビューという機能があり適用中のテーマとは別のテーマのプレビューをしつつカスタマイズもできたりしますが、それだとチェックできない箇所がいくつもあったためです。

リニューアル作業の実施

テストサイトで一通りのチェックが済んだ後に当サイトにCocoonを導入しました。

テストサイトで100%完璧に仕上げたわけではなかったので色々な作業も発生しましたが、事前にテストサイトを作っていたおかげでだいぶ楽だったような気がします。

今後の予定

リニューアル作業の継続

見た目の変更を始めとする大まかなリニューアルは一応終わりましたが、実はまだリニューアル作業は半分も終わっていません。

例えば過去記事の「投稿」と「固定ページ」の分類についても主要な記事にしか手を付けておらず「カテゴリ」内にはまだまだこれから変換の要・不要を判断しなければならない記事が大量に残っているためそれらを少しずつ処理していく予定です。

その他にも細かい部分が色々と気になるので追々手を加えていくつもりです。

順位の変化を見守る

今回のリニューアルで一番怖いのが順位の変化です。

テーマを現在のウェブ事情に適したものに変更したので順位が上がってくれるなら嬉しいのですが、サイト全体の構造が大きく変化しているため評価を著しく下げてしまうことも十分に予想できるからです。

少なくともこの記事を書いている時点(5/25。リニューアルは5/24。)では早速一部の記事が大きく順位を下げているようで戦々恐々としています。

とりあえず日々の上下に一喜一憂せずに最低でも1ヶ月単位の長めのスパンで評価していきたいと思います。

まとめ

一応サイトのデザインを変更して一段落といったところですが、作業的には非常に面倒だったのでリニューアル作業は積極的にやりたいものではないと実感しました。

そもそも当サイトの運営目的はあくまでも「お小遣いサイトを紹介するサイトを運営して収入を得る」ことであり、リニューアル作業をしても一銭の得にもなりません(サイト構造の変化で順位が上がって収益アップにつながる等は考えられますが即効性があるものではない)。

従って、記事を書くといった作業に比べるとリニューアル作業の優先度はかなり低く、ひたすら後回しにしつつ今回ようやく達成したという感じです。

記事を書くための労力を大幅に割いてリニューアルしたのだからできれば当サイトには今後大きな成長を望みたいところですが、こればかりはGoogle次第なので残りのリニューアル作業に取り組みつつ今後に期待したいと思います。


ポイ活のいろは – 初心者が月1万円を稼ぐ始め方・やり方

ポイントサイトの友達紹介で月3万円を稼ぐやり方まとめ

SEO実践記
フォローする
お小遣いサイト初心者入門 – fuku.work

コメント