日付の書式が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. Font Awesomeの使い方

    WordPress

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

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

  2. WordPress

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

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

  3. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法

    ぺんです。以前ご紹介した、ニュースメディア風のワードプレステー…

  4. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方

    ぺんです。前回、このブログをエックスサーバー上で運営することは…

  5. ウイジェットエリア

    WordPress

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

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

  6. WordPress

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

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

コメント

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

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




最近の記事

  1. Twitterアカウントの登録方法
  2. マイクロソフトアカウントの登録方法
  3. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  4. WordPressのローカル環境を簡単に構築する方法
  5. ウイジェットエリア
  1. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投…
  2. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法
  3. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法
  4. 初心者向けWordPressサイトのバックアップ、リストア手順の解説

    Server

    (初心者向け)WordPressサイトのバックアップ、リストア(復旧)手順の詳細…
  5. ツール

    サムネイル画像を作成してくれるサービス
PAGE TOP