- Advertisement -

WordPressのfunction.php・CSSを改造する場合の子テーマ作成

WordPressのCSSやfunction.phpを変更する際に、テーマのstyle.cssやfunction.phpを変更するとテーマを更新した際に変更箇所が消えてしまいますが、子テーマを使用すると子テーマの変更は残るため更新しても問題ありません。

UMilCL
UMilCL
本記事では、WordPress 5.4更新、Newspaper 10に更新する場合に発生した問題点についても説明します。

子テーマの必要性

子テーマがなぜ必要かというと以下の理由となります。テーマを弄るなら絶対入れた方がいいです。

  1. テーマの更新時にstyle.cssとfunction.php内の変更が維持される
  2. テーマパネルの設定内容が維持される
  3. header.phpなどの変更も維持される(トラッキングコードやアドセンスコード等)

子テーマの作り方

子テーマの保存場所

子テーマは親テーマと同じディレクトリに保存します。フォルダ名は「親テーマ名-child」と親テーマのディレクトリ名に、「-child」とするのがおすすめです。

~/wp-content/themes/親テーマ名-child

ディレクトリの中には、style.cssとfunctions.phpの2つが、最低限必要となります。以下に私が作成したテンプレートを保存しておきます。

style.cssの記載内容

子テーマのstyle.cssには、子テーマの情報を記載します。テーマ名や作者、ディレクトリ等です。この中で「Theme Name」と「Template」は必須項目となります。

/*
Theme Name:     親テーマ名 Child theme
Theme URI: 	  テーマURL
Description:    テーマ説明
Author:         製作者
Author URI: 	製作者のURL
Template:       親テーマディレクトリ
Version:        バージョン
*/


/*  ----------------------------------------------------------------------------
    This file will load automatically when the child theme is active. You can use it
    for custom CSS.
*/
Code language: CSS (css)

function.phpの記載内容

function.phpでは親テーマでのfunction.phpより先に読み込まれるため、基本的に子テーマのfunctions.phpは、機能の追加・削除となる。同じ関数の重複は不可となる。

function.phpでは親テーマのstyle.cssを読み込んでから、子テーマのstyle.cssを読み込むようにしており、cssを上書きすることが可能となっている。

<?php
/*  ----------------------------------------------------------------------------
    add the parent style + style.css from this folder
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
    wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
    wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );

}Code language: HTML, XML (xml)

その他のファイル

修正したいファイルを親テーマから子テーマに配置し、修正することで親テーマの機能を修正して簡単に使用することが可能となる。

例えばheader.phpなどにトラッキングコードを追加する場合などに使用すると、プラグインの使用をする必要なく、高速に処理されるようになる。

WordPress 5.4とNewspaper 10への更新

今回子テーマを使用してWordPress 5.3とNewspaper 9からWordPress 5.4とNewspaper 10へ更新し、子テーマ使用時の問題点について確認しました。

私の環境にて発生した問題点は以下の2つになります。他の問題は特に発生していません。

  1. Newspaper 10にした際に、親テーマに入れていたphpファイルが消失(子テーマにいれとけ・・・)
  2. Table of Contents PlusがNewspaper 10との相性の問題か、タイトル前にも目次が表示され、2回目次が表示される。(Easy Table of Contentsに変更し、改善
  3. 再利用ブロックが消える(再度設定が必要)

このように子テーマを不具合少なく、更新したり、テーマを変更することが可能です。

Newspaper内のテーマの変更

Newspaperでは簡単に内部テーマを変更することができます。今までTech Newsを使用していましたが、Styleに変更しましたので、変更の際の問題についても併せて解説します。

  1. Newspaper9の内部テーマから10の内部テーマに変更するとメニューの再設定が必要
  2. ウィジェット等の外観のカスタマイズ関係は全て再設定が必要
  3. テーマパネルのソーシャルシェアの設定も同様
  4. テーマパネルの広告コードの設定は残っているが、テンプレートの広告に紐づけが必要

このように内部テーマの変更はNewspaper 9から10への変更を行ったこともあり、内部テーマを変更した場合は上記のような変更を行う必要があります。

変更の際は以下の「WP MAINTENANCE MODE」を使用すると、管理者の自分だけがブログにアクセスしながら、変更内容を確認しつつ更新作業を行えるためおすすめです。

.htaccessで設定すると自分もアクセスができなくなるため、このプラグインでメンテナンス中を明示する方がメンテナンス性も高くおすすめです。

最後に

子テーマを使用すると親テーマの変更に影響されずに使用することが可能なので、WordPressで環境構築する際にはぜひ使用してみてください。

私もLOCAL by flywheelでローカル環境を構築して、ローカル環境で子テーマをテストをしてから本番環境にデプロイするようにしています。

以下がローカル環境の構築の参考記事になります。合わせて読んでみてください。

- Advertisement -
UMilCL
UMilCLhttps://umilcl.com
兼業ブロガー。大手製造業の企画・設計・プロジェクト管理で8年、受配電・電動機・システムの保全部門の課長1年目。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

返事を書く

コメントを入力してください!
ここに名前を入力してください

- Advertisement -

Follow US

1ファンいいね
19フォロワーフォロー
633フォロワーフォロー
3,383フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular