WordPressのテーマ変更時の注意点と変更後のオススメ設定

WordPressでブログを開設してから長い事Luxeritasというシンプルで使いやすい無料テーマを使用していたのですが、製作者様が体調を崩してしまっていて、WordPressのバージョンが更新されてもテーマが更新されない状況が2023年から続いていました。

テーマが更新されないと表の文字やキャプションを中央揃えに設定しているのに反映されなかったりしていたので、2026年ついにテーマを変更することにしました。

WordPressのテーマ変更はサイトのレイアウトが大きく変わってしまうことで有名で、注意点が存在します。
今回はテーマ変更時の注意点と私がテーマ変更後に行った設定をご紹介します。

画像はLuxeritasトップページより抜粋

サイトのバックアップ取得方法

テーマ変更後にサイトのレイアウトがぐっちゃぐちゃになってしまって、「やっぱり元に戻そう」となった時のためにサイトのバックアップを取得しておきましょう。

私はXServerを利用しているので、XServerの機能を使ってバックアップを取得しました。

手順
XServer管理ページにログインする。
②サーバー管理→データベース→MySQLバックアップ取得・復元を選択。
③「自動バックアップデータの取得と復元」タブで「バックアップ取得・復元」をクリック。
 これでしばらくすると「履歴」タブにバックアップを取得したことが表示されます。
④自動バックアップは何日かすると削除されるらしいので一応手動バックアップもやっておきましょう。「手動バックアップ」タブを選択。
⑤圧縮形式をgz形式にして「ダウンロードする」をクリック。
 これでPCに圧縮ファイルがダウンロードされます。
 復元方法は以下を参照してください。

XServer 自動バックアップからの復元
https://www.xserver.ne.jp/manual/man_db_restore.php

【参考】XServer 自動バックアップ機能
https://www.xserver.ne.jp/functions/service_backup.php

②サーバー管理→データベース→MySQLバックアップ取得・復元を選択。

テーマを探す

バックアップを取得出来たら、次はどのテーマに変更するか決めましょう。

私は以下のサイトでテーマを探しました。
https://wp-search.org/ja/themes/

人気1位のSWELLは有料テーマだったので、人気2位のCocoonにしました。
【参考】Cocoonテーマダウンロードページ
https://wp-cocoon.com/downloads/

テーマをインストールする

テーマダウンロードページで親テーマと子テーマをダウンロードしたらWordPressでテーマを設定しましょう。

手順
①WordPress管理者画面で外観→テーマを選択
②テーマを追加→テーマのアップロード→テーマのzipファイルをアップロードしてインストール
③今度は子テーマをアップロードしてインストール
④テーマ画面に戻ってテーマを有効化する

①WordPress管理者画面で
外観→テーマを選択
②テーマを追加→テーマのアップロード→テーマのzipファイルをアップロードしてインストール
③今度は子テーマをアップロードしてインストール
④テーマ画面に戻ってテーマを有効化する

Cocoonの設定

LuxeritasからCocoonにテーマを変更しましたが、バックアップから復元しないといけないほどレイアウトがぐっちゃぐちゃになるということはありませんでした。

ただし細かいところで設定が外れていたりしたので、私がCocoonに変更した後に行った設定を以下にピックアップします。

まずはWordPress管理者画面でCocoon設定を選択しましょう。

全体

まずはCocoon設定の「全体」タブです。
私は以下のように設定しました。

キーカラー→サイトキーカラー:青
サイト背景画像:フリー素材画像

ヘッダー

Cocoon設定の「ヘッダー」タブです。
私は以下のように設定しました。

ヘッダーレイアウト:センターロゴ(スリムメニュー)
ヘッダーロゴ:オリジナル画像
ヘッダー全体色→ヘッダー全体背景色:白
       →ヘッダー全体文字色:黒
ヘッダー色(ロゴ部)→ロゴエリア背景色:白
         →ロゴ文字色:黒
グローバルナビメニュー色→グローバルナビ背景色:青
            →グローバルナビ文字色:白

インデックス

Cocoon設定の「インデックス」タブです。
個人的に記事は縦型カード3列にした方が、PC・タブレット・スマホどれで見た時も見やすいと思っているので、以下のように設定しました。

カードタイプ:縦型カード3列

本文

Cocoon設定の「本文」タブです。
これは好みによると思いますが、個人的にリンクは新しいタブで開きたいので、以下のように設定しました。

外部リンクの開き方:新しいタブで開く
内部リンクの開き方:新しいタブで開く

目次

Luxeritasを使っていた時はTable of Contents Plusというプラグインを使って目次を作成していたのですが、Cocoonの目次と被る上にクリックしても機能しなかったので、このプラグインを無効化しました。

画像

Cocoon設定の「画像」タブです。
デフォルトだと記事のトップにデカデカとアイキャッチ画像が表示されて邪魔だったので、以下のように設定しました。
全ての設定が完了したら忘れずに一番下の「変更をまとめて保存」をクリックしましょう。

アイキャッチの表示:チェックを外す

全ての設定が完了したら忘れずに一番下の
「変更をまとめて保存」をクリックしましょう。

投稿画面

LuxeritasからCocoonにテーマを変更したところ、投稿画面が以下の画像のようになりました。

見づらっっっ!!!
縦に長すぎんだろ・・・

困った時はChatGPT君に聞いてみましょう。

言われたとおりにタグとIDの列を非表示にしてみると・・・

タイトルの列が横に広がってスッキリ!
ChatGPT君すげえええ!!!

以上、WordPressのテーマ変更時の注意点と変更後のオススメ設定でした。
参考になれば幸いです。

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