webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)

      2021/02/23

【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応

今回は、管理人が現在かなり力を入れて取り組んでいる、『テーマ改造』をとりあげます。 『パーツやPHP実行部分をへらして高速化しつつ、スタイリッシュに』というのを狙っていますが、ガッツリ改造しようとすると、エラーとの戦いにをなってきます(ただし、慣れると短時間で対処できるようになります)。 今回は『カスタマイザープレビューが出ない』という状態になったので対処してみました。さっそく見ていきましょう。

元になったテーマ(チョイス理由)&エラー内容

元のテーマは、WPユーザーならほぼ誰でも知っている『twenty seventeen』を取り上げました。 中身(構成パーツ)は、いろいろな環境で使えるようになってるから、多いっちゃ多いんですけど、最近の公式(twenty twenty)や、通常配布・販売されているテーマに比べるとシンプルです。

外側はCSSでなんとでもなるので、裏のシステム部分をメインに改造。『使わない機能はパーツを削る』『アクションフックで余計なファイル読み込み解除』みたいなのをしつつ・・・ 調子にのって『ファンクション名も変えちゃうか~』ってやってたところ・・・

やってしまいましたね~ ついに、管理画面のカスタマイザープレビューが出てこなくなりました(笑) しかし、『パーツ削り』とかをやっててテーマ構成ファイルはほぼ把握していたので、『これは直せるな』と思いました。

原因と対処方法

原因~別ファイルでも使われていたファンクションの名前を変えてしまい、プレビューが読み込まれなくなった

エラーメッセージを見たところ、『未定義ファンクション』のようでした。例えば・・・ functions.php内です。この辺はカスタムカラーやプレビュー出しみたいな機能を担当している部分です。『twentyseventeen_custom_colors_css();』を、『my_wp_theme_custom_colors_css();』みたいに変更したけど・・・

color-patterns.php (twentyseventeen/inc/color-patterns.php)内では、『twentyseventeen_custom_colors_css();』というファンクション名のままでした(function twentyseventeen_custom_colors_css())。

また、『色指定のパラメーターをつけて返すフィルターフック』みたいなのもあります(apply_filters( 'twentyseventeen_custom_colors_css', $css, $hue, $saturation ); )。 こちらも元々の名前。変更したのに元々の接頭辞『twentyseventeen_』が付くものを実行しようとしていたから、そりゃエラーになります。

対処方法~エラーメッセージから、変更して読まなくなったファンクション名を合わせる

原因さえわかれば対処は簡単です。/inc/color-patterns.php内の変更して読まなくなったファンクション名を『my_wp_theme_custom_colors_css();』というように、全体にあわせる形に変更。 無事に、管理画面カスタマイザープレビューが表示する状態に戻すことができました。 2013年に初めてwordpressを触って、改造してエラー出したときはめっちゃ焦りましたが、最近では構成ファイルを押さえてることもあり、落ち着いて対処できるようになってます。 これ以外でエラーになる場合は、エラーになっているファイルを確認して修正してください。

テーマ改造でファイル削って軽量化やファンクション名変更をするときの注意~他の構成ファイルも意識しよう

特にtwenty seventeenのカスタマイザーに限ったわけではないですけど(ただしtwenty seventeenは利用者が多いので、検索したとき情報が出てきやすい)、最近の構成ファイルが多いテーマだと、『一カ所だけ変えて何とかならない』というケースが多くなります。

例えば『/inc/template-functions.php』で、『フロントページ判定プログラムは自分で書くから削るわ』とやっても・・・ front-page.php上でも使われているから、両方のファイルを修正しないと動かないという形になります(WPがロールバックしてくれていますが、この状態で無理やりFTPで上げると、フロントページ表示が真っ白になります)。

あとがき・まとめ

  • テーマ改造はファンクション名や変数名まで変えちゃうと、ガッツリ弄ってる感じが楽しめる(そこまでやる必要あるのか?笑)
  • プレビュー用PHPが他ファイルにあるのに、そこで使われているファンクション名を変更してしまったので、プレビューが出なくなった(未定義ファンクション)
  • 他のファイルでもファンクション名を合わせれば、普通にプレビューは直る
  • ファイルを削る・まとめるときは、ファンクションが他のファイルで使われてないかなどもチェック

まとめるとこんなかたちでしょうか。エラーはでましたが、直した上、おかげで構成ファイルの少ないWordPressテーマを作ることに成功しました。 皆さんも、シンタックスエラーや未定義ファンクションなどに気をつけて、オリジナルWPテーマを作ってみましょう。

(ミスると画面真っ白状態がでるので、運用中のサイトとは別のものを使う・ローカル環境でやる、などが安全です)


【カテゴリ】 - webメディア制作運用, wpサイト制作事例
【タグ】 - , ,

  関連記事

【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント

今回は以前、管理人が『お取引先の会社のサイト(静的HTMLは持っ ...

WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも

今回は、もはや何でもある感じのWordPressプラグインで、『 ...

【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)

今回は、管理人がお仕事のWPサイト開発で使ってみたテクをご紹介し ...

bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

今回は、bulma.cssが、お仕事で扱ったお取引先のWordP ...

WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィ ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...