BuddyPressで子テーマを作ってみる

ゲーム関係のチーム用小規模コミュニティサイトをBuddyPressを使って運用しているのだが、そろっと子テーマ作らないとめんどいなって思い始めたのでためしに作ってみるのと後学のためにメモしておく。
…実は正直サボらないでしょっぱなからつくっとけばよかったよなぁって思ってる。

参考にしたサイト様は以下

[2019年版] BuddyPressで子テーマを作る方法
https://www.tecking.org/archives/5803

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!
https://requlog.com/self-branding/wordpress/child-theme/

とりあえず普通に子テーマを作る

今回使ってるBuddypress対応のテーマはcustomifyなのでcostomify_childという名前のフォルダを作成した。
フォルダ内にfunctions.phpとstyle.cssを作成し、編集していく。

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

style.css

/*
Theme Name:customify_child
Template:customify
Version:0.3.3
*/

3つの項目を書き足すが、ここで以下のように書き足す。

2行目:子テーマの名前(今回はcostomify_child)
3行目:親テーマのフォルダ名
    FTP上で/wp-content/themes/の中にあるやつ
4行目:親テーマのバージョンとあわせる
    親テーマ内フォルダのstyle.cssを開いたらわかる

この時点で子テーマ自体は利用することができるが、BuddyPressではもうちょっと追加をしていかなければならない。子テーマのフォルダの中は今はこんなかんじ。

BuddyPressのテンプレート用フォルダを作る

テンプレートでカスタマイズしたい部分だけ、元のテンプレートファイルからもってくる。
テンプレートファイルは2019年10月現在以下の2種類になる。

  • BuddyPress レガシー
  • BuddyPress Nouveau

ここで注意しないといけないのがフォルダ構造。
今回はNouveauのメンバー一覧ページだけをカスタマイズしたかったので以下の構造にした。

元のファイル:wp-content/plugins/buddypress/bp-templates/bp-nouveau/buddypress/members/members-loop.php
子テーマ用ファイル:wp-content/themes/customify_child/buddypress/members/members-loop.php

要はテンプレートが入っているフォルダと子テーマのフォルダ階層を同じにするような感じ。(赤字の部分)

こんな感じで結構あっさりできた。もっと早くやっておけばよかったなぁ