ワードプレス

WordPressテーマをCocoonに変更(準備編)

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

テーマ変更作業の流れ

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

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

この記事は「2.準備編」です。

テーマをインストール

テーマをダウンロードし、親テーマ/子テーマ の両方をWordpressにインストールしました。(参考:Cocoonをインストールする方法

この時点では「親テーマ/子テーマ」をインストールするのみで、有効にはしていません。「新しいテーマの動作確認」後、有効にします。

新しいテーマの動作確認

WP Theme Testプラグインを使う

WP Theme Testプラグインを使い、新しいテーマの動作確認を行います。

親テーマと子テーマを両方インストールしたら、WP Theme Testプラグインで「子テーマ」を一部ユーザのみに有効にしました。これにより管理者のみが新しいテーマの動作を確認することができました。

管理者以外の編集者や一般の訪問者など、他のユーザには作業中の新しいテーマは見えません。カスタマイズの確認や、必要となるファイルの作成はこの状態ですすめます。

変更前のテーマで使っているサイドバーやメニュー、ウィジェットの設定は他のユーザにも影響が出ます。新しいテーマ用のメニュー作成だけに留め、それ以外の設定は後で行うこととしました。

テーマの設定確認

新しいテーマの設定を順に試していきました。
今回導入したCocoonはテーマ設定をバックアップする機能があります。(参考:テーマ設定のバックアップ方法

ロゴファイルの作成

新しいテーマに合わせて、ヘッダやフッタのロゴを作成しました。

テーマのスキン確認

Cocoonテーマには外観を着せ替えできるスキンという機能があります。(参考:Cocoonスキンの機能の仕様)外観をゼロからカスタマイズしていくと大変なので、スキンという機能を利用できるのはとても便利です。

親テーマに入っていた ミックスブルー(公式HP)が好みのデザインに近かったので、このスキンを子テーマにコピーしてデザインをカスタマイズすることにしました。

phpファイルのカスタマイズ

投稿にショートコードが残るだけで大きな影響はありませんが、見栄えをよくするために、自作のショートコードを以前のテーマの phpファイルからCocoon子テーマへコピーしました。

人気記事のカスタマイズ

Cocoonテーマには人気記事を表示する機能があります。(参考:人気記事一覧を表示
サイドバーにはこれまでのGoogle Analyticsによる人気記事の表示を行いたいと考え、Simple-ga-ranking プラグインのカスタマイズを以前のテーマの phpファイルからCocoon子テーマへコピーしました。

テーマのパッチ

Cocoonテーマの画面設定で変更できない仕様については、Cocoon子テーマに phpコードを追加して対応しました。

  • カテゴリのアイキャッチ設定が保存できない
  • 一覧ページの広告を追加(広告を配置する間隔、広告を配置するページ 等)

今回はここまで

「2.準備編」は終わりです。次回は「3.実行編」です。

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

コメント

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