日付の書式がNG

WordPress

WordPressの親テーマのウイジットを子テーマで書き換える方法



ぺんです。
今回は、ワードプレスの親テーマのウイジットを子テーマで書き換える方法をご紹介します。

親テーマのウイジットを書き換えた理由

以前ご紹介した、無料のワードプレステーマ「MagCast]を使って、別のサイトを運営しているのですが、このテーマは日本語対応していないため、日付のフォーマットが正しく表示されていないという不具合がありました。

Widget

左がオリジナルのウイジットの日付表記。右側の書式に変更したい。

ソースコードを調べてみると、日付表記の書式がウイジットの中にハードコーディングされていることが理由でした。そのため、日付表記の書式指定を下記のように書き換えてやればよいわけです。

get_the_time(‘j F Y’) → get_the_time(‘Y.m.d’)

ただし、親テーマのソースコードを直接書き換えてしまうと、親テーマをアップデートするたびに、カスタマイズした箇所が上書きされて消えてしまうので、親テーマのウイジットは、子テーマ上で書き換える必要があります。

親テーマのウイジットを子テーマで書き換える方法

親テーマのウイジット修正を子テーマで行う手順は、以下の通りです。

  • 子テーマのウイジットを登録する()
  • 親テーマのウィジットを消す()

そのやり方を検討するまえに、親テーマと子テーマのソースコードがどのような順番で処理されるのかを確認する必要があります。

親テーマと、子テーマのソースコードの処理順

しらべてみたところ、以下の手順でコードが処理されることが判りました。

1.子テーマ functions.php
2.親テーマ functions.php
3.子テーマ after_setup_theme アクションフック作動
4.親テーマ after_setup_theme アクションフック作動

ということは・・・

1.子テーマ functions.php
> 子テーマのウイジットを登録する()
2.親テーマ functions.php
3.子テーマ after_setup_theme アクションフック作動
> 親テーマのウイジットを消す()
4.親テーマ after_setup_theme アクションフック作動

という順番で処理する必要があります。

ポイントとしては・・・

  • 親テーマのfunctions.phpの実行は止められないので、コピーした子テーマのウイジットコードに記載のClass名は、新しい物にする必要がある。

ということです。

参考にさせていただいたサイト

今回はこちらのサイトを参考にさせていただきました!

 

子テーマのウイジットを登録する

子テーマを登録するには、親テーマのウイジット登録用のソースファイルをコピーします。

MagCastのウイジット登録用のコードは、そのまんまwidgetsというフォルダーに格納されている、magcast-widgets.php というファイルです。

まず、このファイルを子テーマのフォルダーの /inc/widgets フォルダーにコピーします。

magcast-widgets.phpの変更点

少々長いですが、以下をオリジナルから変更しています。

  • 関数名をmagcast_widgets_init()からnew_magcast_widgets_init()に変更
  • add_actionに新しい関数名、’new_magcast_widgets_init’を指定
  • 既存のクラス名にnew_を追加して、ユニークなクラス名に変更
  • 日付の書式フォーマットを変更 get_the_time(‘j F Y’) → get_the_time(‘Y.m.d’)

親テーマのウイジットを消す

親テーマのウイジットは、子テーマのfunction.php に記載します。
以下が変更点です。

  • 親テーマのウイジットを削除(18行目~29行目)
  • 子テーマのウイジットソースコードの読み込み(30行目)

 

まとめ

いかがでしたか?
仕組みさえ判れば、子テーマから親テーマのカスタマイズをすることは比較的容易ですね!
MagCast以外のテーマにも、同様に使えるテクニックだと思います。
では!

 

このブログで利用しているWordPress テーマ「MAG」です。
↓ ↓WordPressテーマ「MAG(TCD036)」




関連記事

  1. WordPress

    TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法

    ぺんです。 Google Chromeを使っていると、突然このような表…

  2. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投稿する方法

    ぺんです。ブログ記事を投稿した際に、FacebookとTwit…

  3. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ver.4.7.0)のW…

    ぺんです。立ち上げ途中のサイトで、Font Awesomeのア…

  4. WordPress

    おすすめ無料ワードプレステーマ 2017年8月

    Theme HORSEこちらのサイトでは、ハイクオリティーな無料ワ…

  5. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法

    ぺんです。本サイト「あふぃぶ」で使っているワードプレステーマは…

  6. 沢山のメールボックス

    WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、WordPressプラグ…

    ぺんです。ブログ記事に広告(ASPへのリンク)を貼っていると、…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。




最近の記事

  1. ウイジェットエリア
  2. 日付の書式がNG
  3. エスケープ処理
  4. Jetpack
  5. WP Responsive Menu
  1. 沢山のメールボックス

    WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、Wo…
  2. WordPress

    TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法
  3. ツール

    サムネイル画像を作成してくれるサービス
  4. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法
  5. ツール

    Compressor.io (圧倒的に使いやすいオンライン画像圧縮ツール)
PAGE TOP