できる!Snow Monkey カスタマイズ – 準備・基礎・初歩編

この記事は、不定期連載「できる!Snow Monkey カスタマイズ 」の第1回目です。

今回の記事のテーマ

「Snow Monkey」の大きな特徴の1つとして、プラグインでカスタマイズを自由に出来るテーマと言うのがあります。
しかし、他のテーマと違ってプラグインでテーマのカスタマイズを行うという事やSnow Monkeyのオリジナルな仕様と言う所から、何が出来るのか、そしてどうやるのかについて、まだまだ共有されていない部分も多々あるように思えます。

何をプラグインでカスタマイズできるかを知る

今回の記事では、最初の基礎編として「Snow Monkeyを使用したプラグインでのカスタマイズで出来た事」を、導入として紹介します。

カスタマイズ方法の基本の手順を知る

また、今回の記事では、初歩編として「カスタマイズの初歩の手順」を紹介します。今回紹介するカスタマイズ手法を実際に試してカスタマイズの初歩を理解します。
その初歩の知識は、他のカスタマイズでも役に立ちますので是非覚えてください。

プラグインでテーマカスタマイズは、Snow Monkeyの特徴

プラグインでテーマカスタマイズは、何処まで可能?

大抵のテーマでは、プラグインで出来る事は限られており、複雑な事をしたい場合には、子テーマなどを使って、テーマを上書きしたりしなければ出来ません。
Snow Monkeyでは、子テーマは未使用のまま、またテーマのファイルにも一切手を加える事なく、プラグインのみでカスタマイズする事がかなり多くあります。
下記に紹介するカスタマイズ例は、そう言ったプラグインのみで可能なカスタマイズ例です。

Snow Monkeyでは、プラグインでここまでカスタマイズ可能

  • ドロワーメニューを右にする(Hot Springs Customize Extendでのサンプル)
  • トップページだけメニュースタイルをオーバーレイ
  • カスタマイザーに「追加Javascript」を追加
  • 記事一覧の一覧スタイルに「オリジナル」スタイルを追加
  • 関連記事のスタイルを記事一覧のスタイルと別のスタイルを適用出来るようにカスタマイザー を拡張
  • お知らせバーのスタイルと機能を拡張(日付、表示期間…その他)
  • 記事を読む時間の追加
  • ドロワーメニューのメニュー表示を右側にする
  • トップページだけヘッダー位置設定を「オーバーレイ」にする
  • カスタマイザーに「追加Javascript」を追加
  • 記事一覧の一覧スタイルに「オリジナル」スタイルを追加
  • 関連記事のスタイルを、記事一覧のスタイルと別のスタイルで適用出来るようにカスタマイザーを拡張
  • お知らせバーのスタイルを変更し機能を拡張する(日付表示、表示期間の設定など)
  • 「記事を読む時間」を記事のメタ情報に追加する
  • 検索フォームに「検索条件」を追加する
  • パスワードフォームに「パスワードの可視化」機能を追加する
  • 404 Page Not Found時に、「移動した記事の候補」を表示する
  • ページの下部に「Cookieに関するメッセージ」を表示する
  • (タイトルなし)などの際に、パンくずに(タイトルなし)を表示する
  • Snow Monkey Member Postの適用投稿タイプを追加する
  • Snow Monkey Member Postのメッセージを変更する
  • 記事の一部分を、パスワードでロックする機能を追加
  • 記事の一部分を、ログインしないと見れなくする機能を追加する
  • Snow Monkey Member Postでのログイン・登録・サブスクリプションフォームのカスタマイズ
  • Snow Monkey Member Postでログイン後、サブスクリプションの期限が切れている場合に、サブスクリプションページへ誘導する機能を追加する
  • Snow Monkey Member Postで、ログイン後にサブスクリプションの有効期限が近づいている場合、「残り●日でメンバーが一般に戻ります」警告を表示する機能の追加
テネーブル

紹介したカスタマイズについては、まだまだカスタマイズの一例です。
手順を知り、応用を行う事で、Snow Monkeyではプラグインのみでカスタマイズできる事は、まだまだ沢山あるでしょう。このような多々のカスタマイズをプラグインのみで柔軟にできるのも、Snow Monkeyを使う利点であると言えるでしょう!

テネーブル(アイコン03)

何故、プラグインでテーマカスタマイズするのは利点?

テーマをカスタマイズする場合、通常では子テーマなどを使って、テーマを上書きしたりする事が手順として指定されている事が多いでしょう。しかし、子テーマでテーマカスタマイズを行うのは問題やデメリットも存在しています。

子テーマでテーマカスタマイズをするデメリットと問題

例えば子テーマを使わず Snow Monkey そのまま使ってたとしたら、子テーマをつくって切り替えますよね。ただ、ウィジェットの設定とか、カスタマイザーの設定ってテーマに紐づいているので、テーマを切り替えるとリセットされちゃうんですよね。

テンプレートの上書きは意図せず古いコードを残したままにしてしまうので、無くなった関数などがかかれているとサイト真っ白状態になっちゃうんですよね。

Snow Monkey 公式サイトの記事より、説明の一部を引用
テネーブル

こうした子テーマの問題もそうですが、子テーマのテーマカスタマイズは、主に1ファイルに対して多々の修正を掛ける事が多い為、多人数での制作に環境対応するのが難しい場合が多いです。

テネーブル(アイコン05)
ルミェール

子テーマのXXXXって言うファイルのAさんが修正している箇所を、Bさんも修正しているって事が多いんだ。WordPressのテーマの構成上、カスタマイズ対象のファイルは同じになるからソースコードの記述に競合が起こっちゃう事が多いんだよね。
チーム内の競合だけじゃなくて、テーマ制作者の更新にも対応が必要で、古いバージョンのままテーマを使い続けているケースも多いよ。

ルミェール(アイコン04)

プラグインでテーマカスタマイズするメリットは、制作環境の大幅な改善

プラグインでテーマカスタマイズする場合には、元のテーマのファイルに手を加える必要がありません。
それを理由に、テーマファイルに対するソースコードの競合と言う事は起こりません。

また、それぞれが別のプラグインを作るなどの体制を取る事で制作を別にするカタチになりますので、複数人が同じファイルを扱うと言う事はほぼ起こらないでしょう。

テネーブル

もちろん、プラグインでテーマカスタマイズをする際にはフック処理の優先度や細かな部分や仕様と言った情報共有を行った方が良いです。
それらのルールを決定すれば、後はそれぞれの担当者が自分のカスタマイズに専念して制作できるようになります。子テーマでテーマカスタマイズをするより、スムーズな制作環境になるでしょう。

テネーブル(アイコン01)

プラグインでテーマカスタマイズ制作を試してみよう

今回、初歩として体験するテーマカスタマイズは、記事ページ内の記事の下に出る「この記事を書いた人」と言う部分を、記事の上に表示すると言ったテーマカスタマイズです。
実用性は無いと思いますが、このテーマカスタマイズから多くのことを体験し、理解できると思いますので、是非記事を読みながら実際にお試しください。

テーマカスタマイズをプラグインで制作するために…準備

ルミェール

実際にSnow Monkeyを使ってテーマカスタマイズを行う前に準備しておくと、カスタマイズがしやすくなる事を紹介するよ!既にテーマカスタマイズをしている人も、設定すればもっとカスタマイズしやすくなるかも?

ルミェール(アイコン03)

1. 制作環境のWordPressのデバッグ設定を、有効にする

WordPressのインストールされたディレクトリ内に、wp-config.phpと言ったファイルがあります。
このファイルはWordPressの設定を行うファイルなのですが、そこにデバッグ設定を追加で記述する事で、WordPressをデバッグモードで動作させる事が可能になります。

wp-config.phpに下記の1行を追加します。

define('WP_DEBUG', true);

$table_prefix = 'wp_';と書いてある行の下あたりから、if ( ! defined( 'ABSPATH' ) )と書かれている行の間に、上記のdefine文を追加しましょう。

テネーブル

本番(実際に運営している)環境では、デバッグ設定は無効にした方が良いので、制作が完了した本番環境では、デバッグ設定は無効にするようにしましょう。
デバッグ設定を無効にする方法は、追加した記述を削除するだけです。

テネーブル(アイコン03)

このWordPressのデバッグモードを有効にする事で、Snow MonkeyではGoogle chromeやSafariで閲覧した際に、デベロッパーツールやWebインスペクタでHTML構造を見ると何のテンプレートを読み込んでいるのかがコメントアウトで表示されるようになります。

Webインスペクタ例
テネーブル

コメントアウト表記で、そのHTMLを表示する為に読み込まれているテンプレート名がStartから始まりEndで終わるように記載されているので、どのHTML領域がどのテンプレートで表示されるようになっているのか解るようになります。

テネーブル(アイコン01)

2. My Snow Monkeyプラグインをインストールする

プラグインでテーマカスタマイズをする場合は、プラグインに対してfunctionや処理を加えていくので、テーマカスタマイズ用のプラグインをインストールしている必要があります。
自分でテーマカスタマイズ用のプラグインを作っていない場合は、Snow Monkey公式がテーマカスタマイズ用に用意された雛形プラグイン「My Snow Monkey」を開発環境にインストールし、有効化しておきましょう。

My Snow Monkeyプラグインの入手方法は、Snow Monkey公式サイトのマイアカウントからダウンロード出来ます。(※ Snow Monkeyのサブスクリプションが必要です

Snow Monkey 公式サイトのマイアカウント

テーマカスタマイズの基礎と手順

準備が完了した所で、実際に記事ページ内の記事の下に出る「この記事を書いた人」と言う部分を、記事の上に表示するテーマカスタマイズを制作していきます。

どうすればテーマカスタマイズが実現出来るのか

まず、テーマカスタマイズを行う場合、どうすれば実現が可能なのかを考えるところからはじまります。

テネーブル

どんなやりたい事を実現させようとする場合でも、やりたい事を実現する為にはどうすれば出来るのかを考えなければなりません。スポーツや演劇なら、どう言った練習(手段)を行うのか。結果は手順(手段)の後ありますので、手順を考えると言う事ですね!

テネーブル(アイコン01)

このテーマカスタマイズのやりたい事と言う場合は、記事の下に出る「この記事を書いた人」部分を、記事の上に表示するようにするです。その為にはどうすればよいでしょうか?

考えられる1つの案としては、

1. 記事の下に出ている「この記事を書いた人」のHTML領域を削除する
2. 記事の上に、同じようにして「この記事を書いた人」のHTML領域を表示する

と言う事ですので、この方法でやってみる事にします。

削除する為に、表示されているテンプレートパーツ名を確認

まずは「この記事を書いた人」のHTML領域を削除するために、表示されているHTML領域が、どのようなテンプレートで表示しているか調べる必要があります。
準備をしている場合、デバッグモードが有効になっていると思いますので、SafariのWebインスペクタ等でHTML要素の表示を行えば、「この記事を書いた人」のHTML領域を表示しているテンプレート名が確認できます。

テネーブル

カスタマイザーの「記事にプロフィールボックスを表示する」設定をオフにしていると表示されませんので、設定をオフにしている場合はオンにしてご確認ください。

テネーブル(アイコン03)

<!-- Start : template-parts/common/profile-box -->
と書かれている該当部分が見つかる事でしょう。

この記述から、Snow Monkeyテーマのディレクトリ内のtemplate-parts/common/profile-box.phpと言うテンプレートパーツのファイルが「この記事を書いた人」のHTML領域を表示する為に読まれているテンプレートパーツのファイルと言う事が解ります。

その為、「このテンプレートパーツの読まれている記述を変えてしまえば良い?」と思うかもしれません。
もちろん、それも正解の一つだと思います。
しかし、そのテンプレートパーツのファイルを開いて確認してみると、template-parts/common/profile-box.phpは「この記事を書いた人」のHTML領域の記述しか書かれていません。
もしかしたら、このHTML領域の記述を変更してしまうと、この領域をどこかで代わりに表示する場合に影響が出るのではないかと考えた方が良いかもしれません。

今回の場合、このHTML領域を記事の上に表示する必要もありますので、そのケースに該当するでしょう。
その為、「この記事を書いた人」のHTML領域のみを表示するtemplate-parts/common/profile-box.phpを変更するのは適切と言えないと思われます。
であれば、このテンプレートパーツのファイルを表示するように呼び出している部分を、呼び出さなくすればどうでしょうか?
呼び出さない事で「この記事を書いた人」のHTML領域は表示されなくなるでしょう。
そう言う形でも削除が可能ですし、呼び出されなくなるだけですので「この記事を書いた人」のHTML領域を代わりにどこかで表示した際の影響はありません。

該当のtemplate-parts/common/profile-box.phpを呼び出しているであろう処理部分を探します。
テンプレートパーツを読み込んでいる場所を探す為に、template-parts/common/profile-boxと言う単語で、Snow Monkeyのファイルを検索するのも良いのですが、Webインスペクタの一段上の<!-- Start ... -->のコメントアウトを見ると、ほとんどのケースで、そのテンプレートパーツが読み込まれているテンプレートパーツ名が書かれています。今回の場合、一段上には<!-- Start : templates/view/content-post -->と書かれた記述が見つかりますので、それが、その呼び出しを行なっているテンプレートパーツ名になると思います。
実際にtemplates/view/content-post.phpを開いてみると、ファイル内にはHelper::get_template_part( 'template-parts/common/profile-box' );と書かれた記述が存在しているので、このファイルのその部分がテンプレートパーツを呼び出している処理と言う事が解りました。

ルミェール

Helper::get_template_part…についての説明は、後述しているよ。今は気にしないでね!

ルミェール(アイコン01)

HTMLを置換する為のフックの事

テンプレートパーツ内の表示している部分を知る事が出来ました。
しかし、その表示しているHTMLを削除するにはどうすれば良いでしょうか?

テーマの処理に対して何かの動作を追加や変更するには、Snow MonkeyテーマではSnow Monkey テーマフックを使用します。
Snow Monkeyテーマフックとは、Snow Monkeyのテーマ用に作られているSnow Monkeyテーマのオリジナルのフックです。(説明の為に、勝手に命名しています)
Snow Monkeyテーマフックの一覧は、公式のGitHubリポジトリ内のWikiにあります。

一覧には、Filter Hookフィルタフックと書かれていますが、Action Hookアクションフックもあります。
(※ フックとは何か、フィルタフックとアクションフックの違いなどについては、別記事「プラグインでカスタマイズする為に!フックについて知ろう」を参照してください)

テーマカスタマイズで今やろうとしている目的は「テンプレートの記述を置換する」ですので、その為に使うフックとして、該当のテンプレートパーツの出力を変更するフックであるsnow_monkey_get_template_part_<slug>でしょう。
フック一覧でサンプルコードや説明が記載されているのですが、こう言ったリファレンスや一覧を読むのに慣れている人でなければ、フック一覧から目的の機能やフックを見つける事は難しいかもしれません。

テネーブル

もし、迷った場合や困った場合でも、Snow Monkey公式内には「カスタマイズについて質問」可能なフォーラムが用意されています。どのフックを使ったら良いのか迷ったりした場合やフックの使い方なども、Snow Monkey公式サポートフォーラムで聞くことが可能です!

テネーブル(アイコン03)

フックを使って、テンプレートの出力を変更(置換)する

使用するフックが解った所で、いよいよHTML記述の置換をする…となりました。
しかし、どのような処理を記述すればテンプレートパーツの出力を変更出来るのでしょうか?

フック一覧のサンプルコードの記述を一度見てみましょう。

add_action(
  'snow_monkey_get_template_part_templates/view/404',
  function( $name, $vars ) {
    \Framework\Helper::get_template_part( 'templates/view/404' );
    $html = ob_get_clean();
    ob_start();
    $html = mb_ereg_replace(
      '書き換え前の文字列',
      '書き換え後の文字列',
      $html
    );
    echo $html;
  },
  10,
  2
);

と言ったサンプルコードです。
そのうちのtemplates/view/404部分はslugとなり、フックを掛けるテンプレートパーツ名が記述されます。
今回はtemplates/view/404ではなく、templates/view/content-postのテンプレートパーツの出力を変更したいので、フック名を変更しなければなりません。
今回の変更対象となるのはtemplates/view/content-postですが、content-postcontentまでがslugであり、postnameとなるので、フックのslugとしては、templates/view/contentとなり、functionの引数の$nameに、postと言う値が代入される事になります。

テネーブル

しかし、上記のslugnameに関する事は、Snow Monkeyのv5までのお話になりました。Snow Monkey v6からは、フック名にsnow_monkey_get_template_part_templates/view/content-postと記述しても大丈夫になりました。

テネーブル(アイコン01)

その為、Snow Monkey v6からでは、実際に記述するコードが、

add_action(
  'snow_monkey_get_template_part_templates/view/content-post',
  function( $vars ) {
    echo 'test';
  },
  10,
  2
);

となります。

このコードを記述して記事ページを読み込むと、記事の部分がtestと言う記述に置換される事が確認できるでしょう。そうなっている場合は、置換の記述は正しく動作しています。
しかし、テーマカスタマイズで目標としている「この記事を書いた人」が表示されているHTML領域を変更する事はまだ出来ていません。それを行う為に次へ進みましょう。

置換(削除)を行う為に、テンプレートパーツを読込もう【失敗パターン】

テンプレートパーツを置換する為には、その置換を行う元の出力のHTML文字列を取得する必要があります。
Snow Monkeyでは、\Framework\Helper::get_template_part( テンプレートパーツslug名, name値, 渡したい情報配列 );と言った関数が用意されているので、それを使いましょう。
この関数は、対象のテンプレートパーツを処理した後に出力されるHTML文字列が返却される関数です。

と言う事は、HTML文字列を取得したいのはtemplates/view/content-postですので、
\Framework\Helper::get_template_part( 'templates/view/content', 'post', $vars );と記述すれば、元々表示されるはずだったHTML文字列が取得できる…と思われます。

ルミェール

\Framework\Helper::get_template_partの関数の方は、テンプレートパーツのslug名name値を別ける形で書いてるけど、Snow Monkey v6からは\Framework\Helper::get_template_part( 'templates/view/content-post', $name, $vars );と書けちゃう!
その場合、引数からname値(この場合はpost)は無くなるので、$varsだけ渡すようにしよう。

ルミェール(アイコン01)


実際にサンプルコードを基にしてコードを記述してみましょう。
おそらく下記のようなソースコードが記述されるのではないでしょうか?

add_action(
  'snow_monkey_get_template_part_templates/view/content-post',
  function( $vars ) {
    $html = ob_get_clean();
    ob_start();
    \Framework\Helper::get_template_part( 'templates/view/content-post', $vars );
    $html = mb_ereg_replace(
      'この記事を書いた人',
      'テスト',
      $html
    );
    echo $html;
  },
  10,
  2
);

このソースコードは正しく動作しそうな感じですが、実際に記事ページを読み込みしてみると、記事ページが表示されなくなる、または記事部分が真っ白になるなどで動作が出来ない事が解ります。失敗パターンです。

何故、失敗したのか考えよう

何故、上記のケースでは失敗してしまうのでしょうか?
それは、\Framework\Helper::get_template_part( 'templates/view/content-post', $name, $vars );に、原因があります。
\Framework\Helper::get_template_partは、テンプレートパーツの出力結果を返却する関数ですが、一方でSnow Monkey テーマフックのsnow_monkey_get_template_part_<slug>はテンプレートパーツの出力結果を変更するフックです。
テンプレートパーツの出力結果を正しく返却する為に、出力結果を返却する前に変更する為のフック処理があれば、そのフック処理をApply(適用)する為に動作させます。

ルミェール

\Framework\Helper::get_template_part関数がテンプレートパーツの出力結果を取得するしようとすると、同じフック処理を実行しちゃう。
そうしてまた\Framework\Helper::get_template_part関数がテンプレートパーツの出力結果を取得するしようとして…再帰的に処理が実行されちゃうから出力結果が取得できなくなっちゃうんだ。
それで真っ白になったり、記事ページが出なくなっちゃったんだね。

置換(削除)を行う為にテンプレートパーツを読もう【成功パターン】

では、どのように記述をすれば良いでしょうか?
考えられる事としては「この無限に適用されるフック処理をしないようにすれば良い」となると思います。

フック処理を適用しないようにするには、追加したフックを削除すれば良いです。
WordPressには追加されたフック処理を適用しないように、フックを削除する関数として、remove_filterと言う関数が用意されています。remove_filterの詳しい詳細は、別記事「プラグインでカスタマイズする為に!フックについて知ろう」を参照されるか、WordPress公式リファレンスなどを参照してください。(ここでは詳しく解説しません)

しかし、remove_filter関数は無名関数に対して使用する事が出来ません。
なので、まずはフック処理に無名関数で記述しているfunction処理を正しく関数名をつけて別の関数で動作させるように変更します。そして、remove_filter関数を処理出来るようにします。
その結果、下記のようになりました。(※ まだ完成形ではありません)

add_filter(
  'snow_monkey_get_template_part_templates/view/content-post',
  '_templates_view_content_post',
  10,
  2
);
 
function _templates_view_content_post( $vars ) {
  $_is_removed = remove_filter(
    'snow_monkey_get_template_part_templates/view/content-post',
    '_templates_view_content_post',
    10
  );
  if ( $_is_removed ) {
    \Framework\Helper::get_template_part( 'templates/view/content-post', $vars );
    $html = ob_get_clean();
    ob_start();
    $html = mb_ereg_replace(
      'この記事を書いた人',
      'テスト',
      $html
    );
    echo $html;
  }
}

確認をしてみると「この記事を書いた人」と記述されていたHTML表示が「テスト」と言うHTML表示に変更しているでしょう。(解説の為、仮の置換処理となっています)

ソースコードの解説を行います。

まず、_templates_view_content_post関数を作成し、フック処理の動作を作成した関数で処理するように変更しています。これはremove_filterが無名関数では動作できない事からの変更です。
そして、関数内では、remove_filterで該当の関数のフックを削除するようにしています。
削除を行う事で、1度実行された後に該当のフック処理が再実行されないようになります。
しかし、正しくフックが削除されていない場合は失敗パターン同様の無限ループになる為、$_is_removedで削除されたかどうかの結果を取得判定し、成功している場合のみ表示するようにしています。

テネーブル

フック削除に失敗した場合はHTML領域が表示されなくなってしまいますが、フック処理の削除が失敗したと言う場合は、正しい処理が出来ていないと言う事でもあります。その為、この場合の事はほとんど気にする必要はないでしょう。

テネーブル(アイコン01)

そして、テンプレートパーツのHTML文字列の取得処理を\Framework\Helper::get_template_part関数を用いて行っています。今回はフックを事前にremove_filter関数を用いて削除しているので、無限ループに陥る事なくHTML記述の結果を取得されます。
$htmlとして取得する際には、Snow Monkeyの公式サイトでも推奨されている書き方であるob_get_clean関数等を使用する方法で、HTML記述を取得しましょう。(※ 何故この書き方が必要なのかは、後述で説明しています)

最後に取得した$htmlを、mb_ereg_replace関数などで用いた正規表現などで結果のHTML文字列を置換する事でカスタマイズが完成するようになります。

正しい置換を行う、下部の「この記事を書いた人」領域を置換(削除)

この削除したい「この記事を書いた人」のHTML領域ですが、<div class=”wp-profile-box”>から</div>で囲まれています。
HTML記述を置換する際には基本的には正規表現で置換をするのですが、その囲まれている領域の中にも</div>がいくつも記述されている事で、正規表現で正しく領域を削除するのは一苦労でしょう。
その為、PHP Simple HTML DOM ParserなどのPHPライブラリを使用し、取得した$htmlDOM Parserなどを用いて判定する手法を行う方が楽に実装できると思います。(※ 実際にPHPライブラリを使用する場合は速度や置換パターンの関係上、Goutteを使用される方が良いかもしれません)

ただ、テーマカスタマイズに対して、そのようなDOM Parserなどの重いPHPライブラリを使うのは、ページ全体の表示速度を低下させてしまいます。出来るだけそう言ったPHPライブラリを使用せず、標準のPHPを用いて実装するのがまだ良い方法でしょう。
今回は、PHPの標準関数であるDOM関数を使用しました。

DOM関数の詳細を解説するのはテーマカスタマイズの本題から外れてしまうので、ここではソースコードの紹介と、DOM関数の説明は簡易的なものに留めます。
_templates_view_content_post関数の記述を下記に変えてみましょう。

function _templates_view_content_post( $vars ) {
  $_is_removed = remove_filter(
    'snow_monkey_get_template_part_templates/view/content-post',
    '_templates_view_content_post',
    10
  );
  if ( $_is_removed ) {
    \Framework\Helper::get_template_part( 'templates/view/content-post', $vars );
    $html = ob_get_clean();
    ob_start();
    $domDocument = new DOMDocument();
    @$domDocument->loadHTML( $html );
    $xPath = new DOMXPath( $domDocument );
    foreach ( $xPath->query('//div[@class="wp-profile-box"]') as $node ) {
	  $node->nodeValue = null;
    }
    $html = $domDocument->saveHTML();
    echo $html;
  }
}

確認をしてみると「この記事を書いた人」領域が、記事ページに表示されない(削除されている)でしょう。
PHPのDOMDocument関数DOMXPath関数を使用し、class=”wp-profile-box”にあるdivDOMNodeを削除したからです。(詳しくは、DOMDocument等のPHPリファレンスを調べてみてください)

テネーブル

実際に、プロフィールボックス(「この記事を書いた人」領域)を表示しないだけであれば、カスタマイザーの「記事にプロフィールボックスを表示する」設定をオフにすることで可能です。今回は説明用に、その機能を使わず削除をテーマカスタマイズで行いました。

テネーブル(アイコン03)

いよいよ完成へ!上部に表示する位置と方法を考えよう

ここまでの流れで下部の「この記事を書いた人」領域を削除出来ました。
ここからは、上部に「この記事を書いた人」領域を表示するように進めていきます。
まずは表示したい位置を決定します。

<header class="c-entry__header">タグの閉じた後あたりに追加のHTMLを入れるとすれば、HTML構造的に問題ないと思います。しかし、その部分に「この記事を書いた人」領域を追加した場合は少し表示が崩れてしまうと思いますので、追加するのは<div class="c-entry__body">のすぐ後になりました。

上部に表示させる置換(追加)をやってみる【失敗パターン】

今回の表示する為にはDOMをパースをする必要はないので正規表現を使って処理を記述します。

置換する為の「この記事を書いた人」領域を表示するHTMLをどのように書けば良いのか…を知らなくてはなりません。
このテーマカスタマイズを行う際の最初にtemplates/view/content-post.phpが「この記事を書いた人」領域を表示する為にHelper::get_template_part( 'template-parts/common/profile-box' );と書かれた記述が存在している事を見つけたと思います。
もう一度、その箇所を見てみます。

if ( get_option( 'mwt-display-profile-box' ) ) {
  Helper::get_template_part( 'template-parts/common/profile-box' );
}

と書かれていますね。
この記述を行えば、もしかしたら置換(追加)する事が可能なのではと思われるかもしれません。やってみましょう。

function _templates_view_content_post( $vars ) {
  $_is_removed = remove_filter(
    'snow_monkey_get_template_part_templates/view/content-post',
    '_templates_view_content_post',
    10
  );
  if ( $_is_removed ) {
    \Framework\Helper::get_template_part( 'templates/view/content-post', $vars );
    $html = ob_get_clean();
    ob_start();
    if ( get_option( 'mwt-display-profile-box' ) ) {
      $domDocument = new DOMDocument();
      @$domDocument->loadHTML( $html );
      $xPath = new DOMXPath( $domDocument );
	  foreach ( $xPath->query('//div[@class="wp-profile-box"]') as $node ) {
        $node->nodeValue = null;
      }
      $html = $domDocument->saveHTML();
      $html = mb_ereg_replace(
        '<div class="c-entry__body">',
        '<div class="c-entry__body">' . Helper::get_template_part( 'template-parts/common/profile-box' ),
		 $html
      );
    }
    echo $html;
  }
}

確認してみると「Helperが見つからない」と言うエラーが表示されるでしょう。
このHelperは、Snow Monkey v5以降であればFrameworkと言うクラス内に実装されていますので、使用する場合は\Framework\Helper::にしなければなりません。
Helper::\Framework\Helper::に変更して確認してみましょう。

ルミェール

またはPHPでuse \Framework\Helper;を使用してHelperのまま記述するのも出来るよ。
Helperクラスを別に使わないなどの場合はその記述で書くのもいいかも?

ルミェール(アイコン01)

確認すると、「この記事を書いた人」領域が表示されるようにはなりますが、記事ページの一番上に表示がされてしまっています。

何故、失敗したのか?

\Framework\Helper::get_template_partは、実際にはHTML結果の出力を行う関数なのです。
実行した際に実際にはHTMLを取得ではなく出力してしまいます。その結果、テンプレートパーツを出力するより先に「この記事を書いた人」領域が出力されてしまい、記事ページの一番上に表示される結果となってしまいました。

それを対策する為に、Snow Monkey公式でも推奨された記述方法として、ob_get_clean関数などを使用して、実際の出力を行わない形で変数へ代入などを行うようにします。
前述していたob_get_clean関数などを使用するのが推奨されている理由は、この為です。
それを踏まえて再度修正を行いましょう。いよいよ完成です。

完成!

完成として該当箇所のソースコードを全て記述しています。

add_filter(
  'snow_monkey_get_template_part_templates/view/content-post',
  '_templates_view_content_post',
  10,
  2
);
 
function _templates_view_content_post( $vars ) {
  $_is_removed = remove_filter(
    'snow_monkey_get_template_part_templates/view/content-post',
    '_templates_view_content_post',
    10
  );
  if ( $_is_removed ) {
    \Framework\Helper::get_template_part( 'templates/view/content-post', $vars );
    $html = ob_get_clean();
    ob_start();
    if ( get_option( 'mwt-display-profile-box' ) ) {
      $domDocument = new DOMDocument();
      @$domDocument->loadHTML( $html );
      $xPath = new DOMXPath( $domDocument );
      foreach ( $xPath->query('//div[@class="wp-profile-box"]') as $node ) {
        $node->nodeValue = null;
      }
      $html = $domDocument->saveHTML();
 
      \Framework\Helper::get_template_part( 'template-parts/common/profile-box' );
      $replaceHtml = ob_get_clean();
      ob_start();
 
      $html = mb_ereg_replace(
        '<div class="c-entry__body">',
        '<div class="c-entry__body">' . $replaceHtml,
        $html
      );
    }
    echo $html;
  }
}

この記述をした後に、記事ページで確認してみると、記事下部の「この記事を書いた人」領域が削除され、代わりに記事上部に同じような領域が表示されるように変更されているのが確認できるでしょう。

最後に

今回のテーマカスタマイズには実用性がありませんが、プラグインでテーマカスタマイズを行う一連の手順や方法を理解していただけたのではないかと思います。

DOMの削除、置換……失敗パターン、何故失敗するのかの理由から、成功パターンと成功する為の解決方法…そう言った事を知る事が出来たのではないかと思います。
この記事で解説した事を上手く応用して制作を行っていく事で、削除したいHTML記述を削除し、追加表示したいHTMLに追加する…置換が可能になるはずです。是非、そう言った制作もお試しください。

テネーブル

この記事に関するご相談やご質問などは、Not Wizの制作チームにお問い合わせください。
回答できる範囲で回答させていただきます。
また、テーマカスタマイズ方法の資料に使いたいなどの引用なども、ご自由にどうぞ。
(Snow Monkey公式に迷惑にならない配慮だけ、お願い致します)

テネーブル(アイコン01)