customized-theme-update_ecmg-1-ps

ワードプレス

子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と注意点

ついにやってきた、WordPressテーマの更新通知。不具合の修正?新機能の追加?・・

customized-theme-update-01

興奮と焦燥感が絡み合っては”まどろむ”、この身に覚えのない感情は一体なんだ?・・・いや恋ではない。それは確かだ。何にせよ初めての体験だ。

とは言いつつ、まあ先日から気づいてはいた。子テーマは作っている。カスタマイズは消えないはずだ。しかし・・・アレ?

子テーマを作ったあとのアップデートって、どーやるんダスか・・?

途端、今日起こったストレスフルな出来事たちが次々と脳裏に浮かびだす。
オーケー、わかってる。こうなってしまえばもう頭は切り替わらない。

男はいちど深呼吸をしたあと目を細め、唇の端を少しだけもちあげる。皮肉たっぷりのその表情は、何かを悟ったかのようにさえ見える。いつもの様子だ。クリック&ログアウト。そして今夜も静かに画面を閉じるのだった。そう、何事もなかったかのように・・・

いやいや、アカン。
放置、アカン。


それでは、カスタマイズしたWordPressテーマのアップデート方法と注意点をご紹介します。

customized-theme-update_ins1

アップデートのおおまかな流れ

親テーマ

新バージョンをまるごとダウンロード

記述変更している部分があれば新バージョンに反映

管理画面で旧バージョンとまるごと差替え

 クリックで拡大

customized-theme-update-24-1

子テーマ

使用しているテンプレートファイルをダウンロード

カスタマイズを新バージョンに反映

アップロードして上書き

 クリックで拡大

customized-theme-update-23-1

「ふーん・・まぁ・・なんとなく・・」ってかんじでしょうか。大丈夫です。慣れれば簡単。

親テーマも子テーマもやっていることは同じなんですが、失敗しないように細かく手順を分けて紹介していきます。上の流れをふんわりイメージしながら読み進めてください。

親テーマに直接変更を加えていない人はあっという間です。

1. 何はともあれバックアップ!

しときましょう。方法は何でもいいから。泣きたくないから。初体験ならこちらを参考に。どうか泣かないでください。

WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

2. 新バージョンのテーマをダウンロード

管理画面からダウンロードしてもいいんですが、テーマの「ダウンロードサイト」が用意されていればそちらからダウンロードします。

 管理画面

customized-theme-update-02

 ダウンロードサイト

customized-theme-update-03

customized-theme-update-04

上のダウンロードサイトはTCDテーマの例ですが、今回のアップデートでは何が行われたのか?どの内部ファイルが変更・追加されたのか?などを確認しながら作業していけるからです

【省略可】テスト環境で不具合がないか確認

customized-theme-update_ins2-ps

「テスト環境ってナニ?」という人は作業量が増えるため、このセクションは飛ばしてしまっても構いません。ただ将来的に色々と役立つので、いつか挑戦してみてください。意外と簡単です。

ローカルでテスト環境を既に作っている人は、ここで一度、新バージョンの挙動をチェックしておきましょう。実際の表示を見てレイアウト崩れなどはないか、ざっと確認するためです。

ここでは下の動画のように、親テーマを「通常のアップデート方法」(カスタマイズをしていない場合のアップデート方法)で有効化します。これで【新バージョンのデフォルト状態に不具合がないか】、何かおかしなところがあれば【相性の悪いプラグインはないか】も確認することができます。

通常のアップデート方法 (動画提供元:DesignPlus)

tcd-theme_01

旧バージョンのテーマを削除するなら、設定もイチからやりなおし!?

と心配になるところですが大丈夫。独自カスタマイズではない、元々テーマに実装されている設定はそのまま残ります。例えば「TCDテーマオプション」やメニュー設定なども引き継がれるので安心。確認して問題なければ、さっそく本番環境でのアップデートへ進みましょう。

使用テーマによっては設定が引き継がれない可能性もあります。配布元で確認してください。

3. 使用中の子テーマファイルをサーバーからダウンロード

customized-theme-update_ins2.5-ps

この作業も、場合によっては不要です。どんな場合かというと・・

現状で子テーマに組み込んでいるテンプレートファイルが、
ダウンロードサイト内の【修正したファイル】にラインナップされていない場合です。

(例)子テーマファイル/修正されたファイル

customized-theme-update-05-06

上の例では、「header.php」と「footer.php」だけがアップデートされています。今回のアップデートで修正されていない他のファイルは、当然そのままでいいわけですね。

というわけで修正されたファイルだけ、現在使用中のものをダウンロード。【子テーマ:ダウンロードファイル】と名前を付けたフォルダーにまとめておきましょう。

customized-theme-update-07

「functions.php」と「style.css」は修正されていてもダウンロード不要。

4. 現状の親テーマ変更点をピックアップしてメモ

customized-theme-update_ins3-ps

親テーマに直接、独自カスタマイズを施していなければ、この作業も不要です。

プラグインの干渉などで、子テーマではカスタマイズがうまく反映されない場合もあります。そんな時はやむを得ず、親テーマの記述を直接変更していることもあるでしょう。

その場合はもちろん、新バージョンの親テーマも同様に書き換える必要があります。「現状で記述変更している部分はどこか?」をここでは一旦、メモとしてピックアップしておきます。

customized-theme-update-08

customized-theme-update-09

一度だけメモしておけば、今回だけでなく、今後のアップデート時にも役立ちます。

関連記事

【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹底解説!

5. カスタマイズを新バージョンのテーマに反映しておく

customized-theme-update_ins4-ps

ここで親テーマ・子テーマとも、独自カスタマイズを新バージョンのファイルに反映。いつでもアップロードできる状態にしておきます。便利すぎる神ツールで。

Mergelyでカスタマイズ部分を挿入&差替え

mergely-02

Mergely(マージリー)は、左右に貼り付けたテキストの「違い」を発見する無料サービス。
ここでは左側に旧バージョン、右側に新バージョンを貼り付けます。すると・・

 21行目に挿入

customized-theme-update-11

 同じ部分を差替え

customized-theme-update-12

※ともにクリックで拡大できます↑

差分の挿入も差替えもクリックひとつ・・!「違い」を発見するだけでなく、思い通りに合併できるという”神ツール”。これなら新バージョンの内容が変わっていても、その中に、今までのカスタマイズを簡単に組み込むことができます

解説記事

「違い」を調べる神ツール。テキストファイルの差分比較、合併ができるMergelyの使い方

使い方は上の記事を参考に。順番にマージ(合併)していきましょう。

子テーマにカスタマイズを反映

子テーマファイルに施していたカスタマイズを、新バージョンの同名ファイルに反映。完成した記述を新規保存して、【子テーマ:上書きするファイル】と名前を付けたフォルダーの中にまとめておきます。

customized-theme-update-13

もちろん、今回のアップデートで修正されたものだけでOK。

最初にダウンロードした子テーマファイルたちはバックアップのためにとっておきたいので、同じファイル名で新規保存し、別途まとめておきましょう。

customized-theme-update-14

親テーマにカスタマイズを反映

先に用意したメモを見ながら、「記述変更していた部分」を新バージョンのファイルに反映。完成した記述で上書き保存します

こちらは上書き保存しても問題ありません。元のファイルは何度でも解凍し直せますから。

customized-theme-update-15

いつでもアップロードできるようにテーマフォルダーごと別の場所に再圧縮しておきます

customized-theme-update-16

これでもう、アップデートに必要なデータは全て揃いました。↑

圧縮フォルダーの名前は、ダウンロードした時のものから変更しないようにしましょう。

6. キャッシュは一旦消しておく

念のため、キャッシュプラグインを利用している場合は、一旦キャッシュをクリアしておきましょう。アップデートによるレイアウト崩れなどの不具合を防ぐためです。サーバー独自のキャッシュ機能などを使っている場合も同様。「何言ってんのかわかんねぇ」って方はスルーでOK。

7. 一気に差替え&上書きアップロード!

customized-theme-update_ins5-ps

まずは親テーマを通常のアップデート方法でまるごと差替え、有効化します。

customized-theme-update-17

次にサーバーのファイルマネージャにログイン。(サーバーによって名称は違います)子テーマフォルダーの中に入り、用意していた新しいファイルたちをアップロード。上書きます。

customized-theme-update-18

仕上げに子テーマを有効化。

customized-theme-update-19

以上!アップデート完了!
「ちょうど新バージョンに切り替えている真っ最中」に来てくれた訪問者には、レイアウトが崩れて表示されてしまいます。切り替えの間はプラグインなどでメンテナンスモードにしておくか、できるだけアクセスの少ない時間帯に作業しましょう。

サイト表示を確認。安心して就寝。

最後に、ざっくりとサイト表示を確認しておきます。

思わぬレイアウト崩れは無いか?独自カスタマイズはうまく反映されているか?

customized-theme-update-20

よし!

追加された新機能はしっかり動作しているか?

customized-theme-update-21

よしよし!

・・と無事確認できたら安心して寝よう。いい夢みよう。

メンテナンスモードにしていたら解除を忘れずに。無効化していたキャッシュ設定なども元に戻しておきましょう。
FTPソフトを利用できる人はもちろん、ご自由に駆使してやってください。ただし「追加されたファイル」が多い場合などは、このアップデート方法のほうが安心です。
関連記事

魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

【衝撃の事実】子テーマを使っていても、マージは必要

customized-theme-update_ins6

さてここで・・ハテナマークが飛びかっている、あなたの心の声を代弁しましょう。

え?親テーマだけアップデートすればえーんちゃうの?

子テーマのマージ作業は、必要なくね?

確かに子テーマを有効化していれば、親テーマをアップデートしてもカスタマイズは消えません。その側面では正解です。ただし、どうしても必要になる時があるんです。それは・・・

子テーマに組み込んでいるテンプレートファイルに、アップデートがあったとき】。

そんな時、親テーマだけをアップデートするとレイアウトが崩れる恐れがあります。ちなみに今回紹介したアップデート方法であれば、どんなアップデートにも対応可能。むしろ本当は、毎回このアップデート方法をとるべきなんです

では、それはなぜなのか?せっかくなので、子テーマの仕組みとあわせて覚えておきましょう。一度知ればナルホド納得。一気に理解が深まります。

Wordpressで子テーマを作る際に知っておくべき仕組みと注意点

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  2. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  3. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  4. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  5. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

関連記事

  1. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  2. compress-jpeg-png-images_ecrt

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG ima…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトで表示されている…

  3. screenpresso-capture_ec

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでブログに必須のスクリーンショットを撮る方法

    ピクセル単位でキレイにキャプチャー。前回の記事ではScreenpr…

  4. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  5. retina-weight-saving_ecmg
  6. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. retina_ecmg
  2. display-speed_ec
  3. business-books_ecmg
  4. tcd-theme-selection_ecmg-ps
  5. todoist_ec
  6. extension-tools-for-bloggers_ec

ピックアップ記事

  1. intuitive-custom-post-order_ec
  2. like-button-card_ecmg-ps
  3. todoist-basic_ec-ps
  4. compress-jpeg-png-images_ecrt
  5. enlarge-image-ecmg
  6. chrome-font_ecmg

タスク管理で、自己管理。

todoist

掘り出し記事

  1. mergely-ecmg
  2. feedly-count-problem_ecmg
  3. retina-weight-saving_ecmg
  4. child-theme-mechanism_ecmg-ps

魅力的なブログを、今すぐ作ろう。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. quicktag_ecmg
  2. sns-count-cache_ecmg
  3. facebook-page-plugin_ecmg-ps
  4. blog-theme-mag_ecmg-ps

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. reset-button_ecrt
  2. modern-dilemma-ecmg
  3. irreplaceable-ecmg
  4. restriction_ecmg-ps
  1. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  2. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  3. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  5. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP