WordPressを使っていると、
管理画面のエディターで書いたカスタムHTMLの内容を分割して、
それぞれ違うセクションに表示したい時がありました。
「the_content()は全部まとめて表示しちゃうから無理やんか。」
と思い込んでいたのですが
get_the_content()を使えばできることがわかりました。
思い込みはいけませんね。
方法
1.管理画面
まず、適当な投稿を作成し、カスタムHTMLを埋め込みましょう。
そして、コメントアウトで目印を残して、表示したい内容を分割します。
忘れずに保存しておきましょう。
2.php
まず、get_the_content()で投稿の生データを取得しましょう。
index.php
$content = get_the_content();
次に、preg_split()でコメントアウトの目印を元にデータを分割しましょう。
index.php
$content_parts = preg_split(
'/<!--こっちだよ-->|<!--そっちじゃないよ、こっちだよ-->/', $content
);
それぞれの目印の内容（😎と⭐️）が、配列の[1]と[2]に格納されます。
最後に、$content_partsに入れた内容をHTMLに埋め込みます。
index.php
<!-- 「こっちだよ」の内容 -->
<section>
<?php echo $content_parts[1]; ?>
</section>
<!-- 間に入れたいセクション -->
<section class="middle-section">
<h2>間に入れたいセクション</h2>
</section>
<!-- 「そっちじゃないよ、こっちだよ」の内容 -->
<section>
<?php echo $content_parts[2]; ?>
</section>
これで、カスタムHTMLの内容を分割して表示することができました。
全体のコード
index.php
<?php
$content = get_the_content();
$content_parts = preg_split('/<!--こっちだよ-->|<!--そっちじゃないよ、こっちだよ-->/', $content);
?>
<!-- 「こっちだよ」の内容 -->
<section>
<?php echo $content_parts[1]; ?>
</section>
<!-- 間に入れたいセクション -->
<section class="middle-section">
<h2>間に入れたいセクション</h2>
</section>
<!-- 「そっちじゃないよ、こっちだよ」の内容 -->
<section>
<?php echo $content_parts[2]; ?>
</section>
これが可能ということは、WordPressの投稿記事に書いた内容は、php側でいくらでも加工して表示できるということでしょうね。
タスクをこなすだけでなく、きちんとWordPressの仕組みを学ぶ必要があるなぁと感じた瞬間でした。
補足
配列の番号が[0]ではなく[1]からになっている点について
配列の番号が[1]と[2]になっているのは、[0]には空が入っていて、今回欲しい内容ではないからです。
Array
(
[0] => ""
[1] => "<p>😎</p>"
[2] => "<p>⭐️</p>"
)
なぜ[0]が空になるかというと、preg_split()が最初に指定した目印が見つかる前の内容を[0]に格納するからです。
もし管理画面のカスタムHTMLで、最初のコメントアウトの前に何か書いた場合は、その内容が[0]に格納されます。
Array
(
[0] => "ここは配列の[0]に格納される"
[1] => "<p>😎</p>"
[2] => "<p>⭐️</p>"
)
the_content()とget_the_content()の違いについて
-
the_content()
そのままHTML出力を行い、WordPressのフィルター（ショートコード展開や自動段落挿入）を適用します。そのため、投稿コンテンツを直接画面に表示したい場合に使います。
-
get_the_content()
「生のデータ」を取得するだけで出力しません。
そのため、分割して加工するにはget_the_content()が適しています。
ただし、WordPressのフィルターが機能しないので、もしショートコードを使う場合はapply_filters()を使いましょう。
参考