ワードプレス

WordPressテーマをCocoonに変更(調査編)

ワードプレス テーマ Cocoon コクーン ワードプレス
スポンサーリンク

はじめに

ブログ「ふたりでねっと。」を開設して丸4年が経過しました。

最初に気に入ったシンプルなWordpressテーマをそのまま使っていましたが、ブログのデザインを整えたくなり、まとまった休日のGW期間に変更しました。

これまではテーマに直接カスタマイズを加えていたため、新しいテーマへの変更は不安でしたが、手順を踏んで作業を行いました。思っていたよりも難しくはありませんでした。

今回の移行手順についてメモとして残します。どのテーマに変更する場合も同様の手順が使えると思います。

テーマ変更作業の流れ

テーマ変更は以下の手順で進めました。

  1. 調査
    • 変更前の状況確認
WordpressテーマをCocoonに変更(調査編)
はじめに ブログ「ふたりでねっと。」を開設して丸4年が経過しました。 最初に気に入ったシンプルなWordpressテーマをそのまま使っていましたが、ブログのデザインを整えたくなり、まとまった休日のGW期間に変更しました。 これまではテーマに...
  1. 準備
    • テーマのインストール
    • 切り替えのプレビュー(必要なファイルの洗い出しと準備)
WordpressテーマをCocoonに変更(準備編)
テーマ変更作業の流れ テーマ変更は以下の手順で進めました。 調査 変更前の状況確認 準備 テーマのインストール 切り替えのプレビュー(必要なファイルの洗い出しと準備) 実行 バックアップ テーマ 切り替え 動作確認 この記事は「2.準備編」...
  1. 実行
    • バックアップ
    • テーマ 切り替え
    • 動作確認
WordpressテーマをCocoonに変更(実行編)
テーマ変更作業の流れ テーマ変更は以下の手順で進めました。 調査 変更前の状況確認 準備 テーマのインストール 切り替えのプレビュー(必要なファイルの洗い出しと準備) 実行 バックアップ テーマ 切り替え 動作確認 この記事は「3.実行編」...

この記事は「1.調査編」です。

変更前の状況確認

変更前の状況

テーマ変更前は下記のような状況です。
記事数が多いこと、プラグインが多いこと、カスタマイズをしていることが気になっていました。

  • WordPressの「外観メニューのテーマ」から選択したシンプルなテーマを使用
  • 記事数は 600以上
  • Google Adsenseの広告を導入
  • 約30種類のプラグインが有効
  • テーマの phpファイルを直接カスタマイズし、ウィジェットやショートコードを追加
  • テーマの cssファイルを直接カスタマイズし、スタイルを適用

以前のテーマに加えたカスタマイズの洗い出し

以前のテーマに加えたカスタマイズの内容です。今回変更した Cocoonテーマでも必要に応じてカスタマイズを加えます。

  • 404ページに広告を出さない
  • カテゴリの投稿一覧ページの修正
    • ページの先頭にカテゴリのサムネイル画像を表示
    • 投稿の並び替えをカテゴリごとに変更
    • 投稿一覧に広告を差し込む
  • 関連記事Googleの表示
  • 自作ショートコード
  • Simple GA Rankingプラグインのレイアウトを変更
  • ページデザインのスタイル変更

プラグインの整理

Cocoonテーマは無料のテーマながら、プラグインと同様の機能が標準で備わっています。(参考:Cocoonの独自機能
Cocoonテーマに含まれている機能に置き換えができるプラグインは削除しました。

今後の修正の方針

テーマ変更すると

テーマを切り替えると下記のようなことが起きます。
ページのデザインは再度やり直し、ショートコードとアイキャッチは新しいテーマでも問題なく表示できるように変更していきます。

  • ページのデザインは利用不可:テーマが使っているphpファイルやcssファイルは全て置き換わる
  • テーマ独自のショートコードは使用不可:投稿にショートコードが残る
  • アイキャッチのサイズ:アイキャッチ画像のサイズが変更になる

子テーマを使う

以前はWordpressの「親テーマ/子テーマの構造」を理解しておらず、有効にしたテーマの構成ファイルである phpファイルやcssファイルを直接更新していました。不注意でテーマをアップデートしたことで、加えたカスタマイズが綺麗さっぱり消えてしまい、初期状態に戻ってしまうことがありました。

今回は最初から「親テーマ/子テーマの構造」ですすめます。親テーマと子テーマの両方をインストールし、子テーマを有効にします。

  • 子テーマは、親テーマのスタイルや全ての機能を引き継いで利用できるテーマで、ブログテーマの任意の部分を変更するために使用することができます。
  • 子テーマにブログテーマへのカスタマイズを行うことにより、親テーマのファイルとは別に保持できます。
  • 子テーマを使用することで、サイトに加えたカスタマイズに影響を与えずに親テーマをアップデートすることができます。

(参考:子テーマとは

今回はここまで

「1.調査編」は終わりです。次回は「2.準備編」です。

WordpressテーマをCocoonに変更(準備編)
テーマ変更作業の流れ テーマ変更は以下の手順で進めました。 調査 変更前の状況確認 準備 テーマのインストール 切り替えのプレビュー(必要なファイルの洗い出しと準備) 実行 バックアップ テーマ 切り替え 動作確認 この記事は「2.準備編」...

コメント

タイトルとURLをコピーしました