日付の書式が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

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

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

  2. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法

    ぺんです。先日公開したこの記事の中で、オリジナルプラグ…

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

    WordPress

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

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

  4. WordPress

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

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

  5. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる

    ぺんです。商品紹介のリンクを貼るときに、サムネイルのサイズを指…

  6. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法

    ぺんです。Wordpressサイトのカスタマイズをするは、細心…

コメント

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

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

最近の記事

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

    WordPress

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

    アフィリエイト収益ブログの始め方(1)- ブログのテーマを決定する方法
  3. マイクロソフトアカウントの登録方法

    SNS

    2018年最新版-マイクロソフトアカウントの登録方法
  4. ツール

    サムネイル画像を作成してくれるサービス
  5. MagCast ワードプレステーマ

    WordPress

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