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. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて設定するUnroll…
  2. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…
  3. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  4. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

関連記事

  1. like-button-card_ecmg-ps
  2. theme-change_ecrt

    ワードプレス

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

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

  3. tcd-mag_ecmg-ps
  4. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  5. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  6. theme-manual-update_ec

    ワードプレス

    アップデート通知が来ない!?WordPressテーマを手動でアップデートする方法

    アップデート通知、なんでこないの?ある有名なストーリーがあります。…

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

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. theme-change_ecrt
  2. valuable-content-from-image_ec
  3. todoist-tips_ecmg
  4. tcd-mag_ecmg-ps
  5. tcd-theme-user-review_ecmg
  6. todoist-extension_ecmg
  7. tcd-theme-selection_ecmg-ps
  8. retina_ecmg
  9. display-speed_ec
  10. todoist_ec

ピックアップ記事

  1. child-theme_ecmg
  2. intuitive-custom-post-order_ec
  3. original-share-button_ecmg-ps
  4. chrome-font_ecmg
  5. facebook-page-plugin_ecmg-ps
  6. todoist-routine_ecrt
  7. lightshot_ecmg
  8. tcd-css-customize_ecmg
  9. tcd-theme-widget_ecmg
  10. todoist-class_ecrt

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. 「Mailboxの代わりは・・?」代替メールアプリ最有力。S…
  2. 基本的なSEOチェックに。DescriptionやOGPを確…
  3. タスクを完了させたくなる!? モチベーションアップに役立つT…
  4. ”WEBサイズマスター”へ。Chrome拡張「Page Ru…
  5. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 子テーマ使用者必見!カスタマイズしたWordPressテーマ…
  2. 「違い」を調べる神ツール。テキストファイルの差分比較、合併が…
  3. WordPressで子テーマを作る際に知っておくべき仕組みと…
  4. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  5. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

思考・価値感系おすすめ記事

  1. restriction_ecmg-ps
  2. blog-contents_ecrt
  3. reset-button_ecrt

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  2. todoist_ec

    マネジメント

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

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  4. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. tcd-theme-user-review_ecmg

    ワードプレス

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