Affinger Wordpress

Affinger4で子テーマを使って個別記事をカスタマイズしても反映されない時の対処法

はじめに

HTMLとPHPがちょっとだけ分かる系男子。どうも、なっち（@bboy_nacchi）です。Wordpressのカスタマイズをするうえで、この二つの言語は最低限知っておかなくては行けないものですよね。

Nacchi
CSSもでしょ！というツッコミはなしにしておいて下さいｗ

そんな僕ですが、別途運営し始めたサイトにAFFINGER4という有料のWordpressテンプレートを導入しました。

以前、当ブログでも利用していたStinger5の派生のテンプレートで、カスタマイズする必要がないくらい洗礼されたデザインのテンプレートなのですが、キャラを出すため、そしてより自分らしい形にしようと思ってカスタマイズを試みました。

ところがどっこい！これまでに、簡単なカスタマイズであれば何度も行ってきた経験があるのですが、いつもどおりやっても個別記事のカスタマイズが反映されない…Σ(´∀｀；)

ということで今回は、備忘録としてこの記事にまとめておきます。

Affinger4で子テーマを使って個別記事をカスタマイズしても反映されない時の対処法

この事象に該当する条件

  • WordPressを使っている
  • テーマにAffinger4を使っている
  • 子テーマを使ってカスタマイズをしようとしている
  • 個別投稿ページ（Single.php）のカスタマイズが反映されない

最初に、これから説明する内容は、上記4つの条件と合致している場合です。個別投稿ページのカスタマイズをやりたいって人は多いはずなので、意外と多くの人があてはまるのではないでしょうか？

Nacchi
ってかそもそも子テーマって何？

っていう方は、こちらの方がWordPressテーマのカスタマイズで子テーマを使うべき理由、使い方などでめちゃくちゃわかりやすく解説しているのでご一読ください。

Affinger4の個別投稿ページは特殊

Affinger4の製作者であるENJIさんがこちらの記事（投稿ページのカスタマイズ）でも紹介していますが、Affinger4の個別投稿ページの構造は、普通のWordpressテーマと少々ことなっています。

Affinger toukou 1
※画像は上記リンクよりお借りしてきました。

画像をご覧の通り、Affinger4の個別投稿ページは、「single.php」で条件分岐をして、「single-type1.php」、または「single-type2.php」を表示する仕様になっています。

そのため、個別投稿ページのデザインをカスタマイズしたい場合は、「single.php」と「single-type1.php」を子テーマフォルダ内にコピーする必要があります。

ポイント

「single-type2.php」は、特殊な使い方をするものなので、ここではあえて深く触れません。

single-type1.phpのカスタマイズが何故か反映されない

僕がAffinger4の個別投稿ページで行ったカスタマイズは以下の2つ。

  • アイキャッチ画像をタイトル下に表示
  • SNSシェアボタンをアイキャッチ画像にも表示
Nacchi
よっしゃできた！あとは保存して子テーマフォルダにあっぷするだけ♪

と、これまでに何度も簡単な子テーマの編集を行ったことのある僕は、余裕綽々で作業を完了して、カスタマイズがちゃんと反映されているか確認することに。

Nacchi
Σ(´∀｀；)！え、カスタマイズ反映されていない。な、なぜだ…(；・∀・)？

と、予想外の結果に戸惑う僕。ENJIさんの説明通り、「single.php」と「single-type1.php」をちゃんと子テーマに保存しているいし、カスタマイズの方法も間違っていない…

1時間くらい、原因追求とGoogle先生に聞きまくった結果、原因がわかり無事問題は解決しました。

single-type1.phpの変更が反映されない理由と対処法

原因は、single.phpのTEMPLATEPATH

【子テーマ使っている時は注意が必要だと思った】WordPressの「TEMPLATEPATH」と「STYLESHEETPATH」の違いについてで詳しく説明されていますが、変更が反映されない理由は、パス指定が間違っていて、親テーマのsingle-type1.phpを見に行っていたため。

TEMPLATEPATHをSTYLESHEETPATHに修正すれば問題解決

修正は非常に簡単。

ポイント


3行目のinclude(TEMPLATEPATH . '/single-type2.php');
5行目のinclude(TEMPLATEPATH . '/single-type1.php');

をそれぞれ以下の用に変更するだけ。

ポイント


3行目:include(STYLESHEETPATH . '/single-type2.php');
5行目:include(STYLESHEETPATH . '/single-type1.php');

これで、パスの指定が正しくなり子テーマの「sigle-type2.php」を読み込んでくれます。

まとめ

  • Affinger4の個別投稿ページの構造は特殊
  • 個別投稿ページを子テーマで変更する場合は、TEMPLATEPATHをSTYLESHEETPATHに変更する必要がある

WordPressのカスタマイズが得意な人であれば、こんな問題は一瞬で気づいてしまいそうなものですが、知識不足な僕はこれの解決に小一時間かかりました…Σ(´∀｀；)

この記事を忘れないための備忘録、そして同じ現象に陥って困っている人の問題解決の役に立つことを願っています♪

おすすめの記事

-Affinger, Wordpress