WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WordPress】Huemanテーマで独自の固定ページテンプレートを作る方法

公開日:2019(令和元)年5月12日/最終更新日:

WordPressのカスタマイズ情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

カスタマイザーからいろいろなカスタマイズができるし、ページごとにサイドバーの位置など細かく設定できる人気のテーマ【Hueman】(あまり詳しく触ってないのでこの程度の解説ですみません)。

便利なテーマですけどテーマ内のファイル構造が複雑で、ちょっと分かりにくいのがちょっと難点?なテーマでもあります。
※機能の多いテーマにはよくある風景です

独自カスタマイズで行うことの多い固定ページテンプレートの追加も然り、一筋縄ではいきませんでした。

今回は苦労話を交え、Huemanテーマで独自の固定ページテンプレートを作る方法を紹介します。苦労話なんかどうでもいいのでとにかく固定ページテンプレートの追加方法が知りたいという方は文末に「まとめ 結局こうすればいい」を見れば済むのでそこまで読み飛ばしてください。
※何をしてるのかがわからぬまま言われるがままにやるというのはカスタマイズする上でちょっと危険かもと思い、それでどうした?という内容を苦労話として書いていますから、理解した上で進めていただけるといいなぁと思います。

固定ページテンプレートについては
ファイル名:page-test.php
テンプレート名:テストテンプレート

この固定ページテンプレートが読み込む内容のファイルは
page-tmpl-custom.php

として紹介しますので、ご自身のファイル名等に置き換えて読んでください。

Huemanテーマで独自の固定ページテンプレートを追加したときの苦労話

定石通りに固定ページテンプレートは増やせない??

基本的な構造のテーマで固定ページテンプレートを追加するには
page.phpをダウンロードしてリネーム(今回の場合は「page-test.php」としました)
独自の固定ページテンプレートであることが認識されるようにコメント追加
テーマファイル内へアップロード
この3手順で独自テンプレートは認識されるようになり、固定ページ編集画面から選択できるようになります。

あとは「page-test.php」を編集していけば独自テンプレートは完成!!

ですが・・・Huemanは全くこの法則は役に立ちません。

コピー元の「page.php」に書かれているのは以下の数行

<?php get_header(); ?>

<?php hu_get_content( 'tmpl/page-tmpl'); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

つまりヘッダーを読み込んだ後は「hu_get_content」という独自関数で判断した上で、「tmpl/page-tmpl」を通して表示しなさいってなってるんです。その後は通常のサイドバーとフッターの読み込みです。

まあこの関数判断を無視してでよければ

<?php hu_get_content( 'tmpl/page-tmpl'); ?>

の行の代わりに「tmpl/page-tmpl」の内容を丸ごとコピーすれば動くとは思うのですが、できれば構造はそのままで使用したい!!ここからが苦労の始まりでした。

「hu_get_content」関数で独自テンプレートを認識させる

前述した通り、独自関数でテンプレートが認識されなければ(該当するテンプレートがなければ)「tmpl/page-tmpl」に従って投稿一覧が表示されてしまうので、これを何とかする必要があります。

で・・・「hu_get_content」関数はどこに??これを探すには「String Locator」というプラグインを使うか、自身で調べるかということになるのですが、本当にいろいろなところにソースが飛んでて自力では難しいということでプラグインに頼りました。

場所は「functions/init-front.php」の中、後で追ってみたら本当にいろいろなところを経由してここにたどり着きます。

ここでまた冒頭部分で、「hu_is_authorized_tmpl」に該当するテンプレートがなかったら「tmpl/page-tmpl」を表示しなさいという記述。さらに「hu_is_authorized_tmpl」を探す必要があります。

それは同じファイルの51行目にありました。やっとたどり着いた~(泣)。

ソースは以下の通り

//helper
//@return bool
if( ! function_exists('hu_is_authorized_tmpl') ) {
function hu_is_authorized_tmpl( $tmpl ) {
$ct_map = apply_filters(
'hu_content_map',
array('tmpl/index-tmpl','tmpl/archive-tmpl','tmpl/page-tmpl','tmpl/single-tmpl','tmpl/search-tmpl','tmpl/404-tmpl')
);
//Are we good after filtering ?
if ( ! is_array( $ct_map ) || ! is_string( $tmpl ) )
return;
return in_array( $tmpl, $ct_map );
}
}

内容を超簡潔に書くと

  1. 「hu_is_authorized_tmpl」という関数がfunctions.phpになかったら以下を実行してね
  2. 「hu_content_map」というフィルタで次のテンプレートが含まれてるよ!

※フィルタフックを使って増やすこともできるよ!

とのこと。フィルタフックをテーマのfunctions.phpへ追加してもいいのですが、せっかくfunctions.phpになかったら・・・と親切に書いてくれてるので、この条件を除いた

function hu_is_authorized_tmpl( $tmpl ) {
$ct_map = apply_filters(
'hu_content_map',
array('tmpl/index-tmpl','tmpl/archive-tmpl','tmpl/page-tmpl','tmpl/single-tmpl','tmpl/search-tmpl','tmpl/404-tmpl')
);
//Are we good after filtering ?
if ( ! is_array( $ct_map ) || ! is_string( $tmpl ) )
return;
return in_array( $tmpl, $ct_map );
}

をそのままfunctions.phpにコピーすればいい!

そしてコピーしたら

array('tmpl/index-tmpl','tmpl/archive-tmpl','tmpl/page-tmpl','tmpl/single-tmpl','tmpl/search-tmpl','tmpl/404-tmpl','page-tmpl-custom.php');

と末尾に「,’page-tmpl-custom.php’」を追加すれば「page-tmpl-custom.php」がテンプレートとして使えるようになります。

※この行を編集した後「更新」ボタンを押すとありがちな保存エラーが出ることがありますので、この行の半角スペースを削除して保存すればうまくいきます。

page-tmpl.phpをコピーしてpage-tmpl-custom.phpを作る

パソコンに「tmpl/page-tmpl.php」をダウンロードして「page-tmpl-custom.php」にリネーム。その後はtmplフォルダ内へアップロードします。

page-test.phpを作る

ここまでくればできたも同然!!あとは「page.php」を一旦パソコンにダウンロードして「page-test.php」とリネームした後

<?php
/**
* Template Name: テストテンプレート
*/
?>
<?php get_header(); ?>

<?php hu_get_content( 'tmpl/page-tmpl-custom'); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

とお約束の「テンプレート名のコメント部分」を冒頭に挿入し、

<?php hu_get_content( 'tmpl/page-tmpl-custom'); ?>

という風にこのテンプレートから呼び出すテンプレートを「page-tmpl-custom.php」にすれば完了!!

本当に長い闘いでした。

まとめ 結局こうすればいい

過程はどうでもいいからテンプレート追加の方法だけおせーて!!という方に・・・

テーマのfunctions.php末尾へ以下を追加

function hu_is_authorized_tmpl( $tmpl ) {
$ct_map = apply_filters(
'hu_content_map',
array('tmpl/index-tmpl','tmpl/archive-tmpl','tmpl/page-tmpl','tmpl/single-tmpl','tmpl/search-tmpl','tmpl/404-tmpl','page-tmpl-custom.php');
//Are we good after filtering ?
if ( ! is_array( $ct_map ) || ! is_string( $tmpl ) )
return;
return in_array( $tmpl, $ct_map );
}

※保存エラーが出るときは半角スペースを削除すれば回避できます

page-tmpl.phpをコピーしてpage-tmpl-custom.phpを作る

パソコンに「tmpl/page-tmpl.php」をダウンロードして「page-tmpl-custom.php」にリネーム。その後はtmplフォルダ内へアップロードします。

page-test.phpを作る

パソコンでテキストエディタを開き、

<?php
/**
* Template Name: テストテンプレート
*/
?>
<?php get_header(); ?>

<?php hu_get_content( 'tmpl/page-tmpl-custom'); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

をそのままコピーして「page-test.php」というファイル名で保存、テーマフォルダへアップロード

以上で固定ページ編集画面の「テンプレート」に「テストテンプレート」というのが選択できるようになり、それを選ぶと「page-tmpl-custom.php」に書かれた内容が表示される(独自テンプレートで表示される)ようになります。


今回は長い闘いでした。テーマのバージョンや無料/有料版によってちょっと違うかも知れませんが、どうしてもカスタム固定ページテンプレートを作りたいという方は一度お試しください。

最後にどうでもいいことだとは思いますが、こういういろいろなことができる(できそう?)なテーマは総じて複雑な構造であることが多いです。そのテーマをカスタマイズしようと思うよりも、もっと簡素なテーマに自身で機能追加した方が満足いくサイトが完成するのではないかと思います。

\楽天ポイント4倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す
著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す