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. */

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' ); }

その他のファイル

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

例えば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でローカル環境を構築して、ローカル環境で子テーマをテストをしてから本番環境にデプロイするようにしています。

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

UMilCLhttps://umilcl.com
兼業ブロガー。メインは大手製造業システム企画・設計・プロジェクト管理。工場のプロセス制御が主な業務。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

返事を書く

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

Follow US

1ファンいいね
6フォロワーフォロー
89フォロワーフォロー
4,245フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular

Synology DS220j DS220+の比較・レビュー

SynologyのエントリーモデルのDS220jとDS220+が発売され、2020年モデルもある程度そろってきました。 DS220はエントリークラス、DS220+はフラッグシップモデルとなりますが、違いはどこにあるか調査しました。

Synology DS220j レビュー【エントリーモデル後継機】

SynologyのエントリーモデルのDS218jの後継機が発売されたので、改善点と問題点をまとめています。 簡単にまとめると大変コスパのよいエントリーモデルのNASを踏襲した機能向上が行われており、上位機種とのスペックを要求する機能の差別化はそのままです。

Synology DS220+と他DS+シリーズ3種の比較・レビュー

SynologyのDS220+、DS420+、DS720+、DS920+の2ベイと4ベイのDS+シリーズが4機種の後継機が5月20日に発売されました。DS+シリーズ4種のスペックについて比較していますので、購入時の参考にしてみてください。

Windows10のHyper-V環境へのCentOS 8のインストール方法

この投稿では検索にてHyper-V環境へのCentOS8インストールを見に来てくれた方がいたので、CentOS7だけでなく、Windows 10上のHyper-V環境へのCentOS 8.1のインストール方法についても今回投稿します。

【2020年1月】子育て中ママが端末購入するならOPPO Reno A【購入後レビュー有】

妻のスマホ(Google Pixel 3a)が購入から5か月で子供の手により水没したので、防水性能の高い楽天モバイルより発売されているOppoのおすすめの最新機種「OPPO Reno A」の購入を検討した内容を紹介します。