CocoonをSWELLに変更するとどうなる?

WordPressテーマTCD「UNIQUE」のwp_headアクションフック関数をカスタマイズする

本ページはプロモーションが含まれています

WordPressテーマTCD「UNIQUE」はWordPressテーマTCDの中でも多くのカスタマイズを行ったテーマです。

その一例を紹介します。

「UNIQUE」にはカスタムCSSを読み込む機能があるので、ページ毎にデザインを変更することが可能です。

しかし、カスタムCSSの後に何か別のCSSを読み込んでいたり、コードエディターが使えないなどの不便な点もあります。

そこで、「head.php」をカスタマイズして独自のCSSを読み込むことにしました。

問題となるのが「head.php」のwp_headアクションフック関数の再宣言エラーです。

このページでは関数の再宣言エラーの回避方法をとりあげます。

「head.php」のカスタマイズは、以下の手順です。

  1. 子テーマにhead.phpを配置
  2. 子テーマのfunctions.phpで親テーマのhead.phpの関数を削除
  3. 再宣言エラーを回避するためhead.phpの関数名称を変更

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非!

「Arkhe」の詳細を見る
「Arkhe Pro Pack」(サブスク版)を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

子テーマにhead.phpを配置

「head.php」にはhtmlの<head></head>タグの内部を設定する「tcd_head」関数があります。(wp_headに「tcd_head」関数をフックしている)

とりあえず、親テーマのフォルダー構成と同じように「functions」フォルダーを子テーマフォルダーにつくり、フォルダー内に「head.php」をコピーします。

親テーマはfunctions.phpでrequireしていますので、「head.php」は必ず読み込まれます。

この点に注意が必要です。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能
他、機能多数。

子テーマのfunctions.phpで親テーマのhead.phpの関数を削除

子テーマでは「head.php」をカスタマイズしますので、親テーマの「tcd_head関数」のフックを無効にします。

子テーマのfunctions.phpに以下のように記述します。

add_action( 'after_setup_theme', 'setup_after_parent_theme', 20 );
function setup_after_parent_theme() {
 // 親テーマでフックしているアクションを削除
 remove_action( 'wp_head', 'tcd_head' );
}

require_once ( get_stylesheet_directory() . '/functions/head.php' );

add_actionwp_headのフックを無効化し、require_onceでカスタマイズした関数をwp_headにフックします。

しかし、これを実行すると「tcd_head」関数の再宣言でエラーが発生してしまいます。

先に述べたように「head.php」は既に読み込まれているので「tcd_head関数」は宣言されています。

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非!

「Arkhe」の詳細を見る
「Arkhe Pro Pack」(サブスク版)を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

再宣言エラーを回避するためhead.phpの関数名称を変更

「tcd_head関数」の再宣言エラーを回避するためには、子テーマのhead.phpの関数名称を変更します。

<?php
     function tcd_head2() { //関数名を変更
       $options = get_desing_plus_option();
?>

(中略)

<?php
     }; // END function tcd_head()
     add_action("wp_head", "tcd_head2");
?>

関数名「tcd_head」を「tcd_head2」に変更します。
これによってエラーが発生しなくなります。

あとは、「// END function tcd_head()」の直前でCSSを読み込ませれば、独自のCSSを読み込むことができます。

<!-- 追加 start -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/custom.css?ver=<?php echo version_num(); ?>">
<!-- 追加 end -->
<?php
     }; // END function tcd_head()
     add_action("wp_head", "tcd_head_child");
?>

隘路

テストの段階で親テーマの関数の削除に失敗。
head部分が2回繰り返されたのには驚きました。

先に子テーマの tcd_head2()が実行され、その後、親テーマのtcd_head()が実行されます。

この実行順序も面白いです。

その他のカスタマイズ

以下はhead.phpをカスタマイズして、動画の配置を変更しています。

こちらも参考にしてください。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能
他、機能多数。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。