yStandardのテンプレートファイルの特徴とPHPカスタマイズ方法

coding

yStandardのテンプレートファイルの特徴とPHPカスタマイズ方法について説明します。

他テーマにないちょっとしたクセがありますが、慣れれば子テーマで自分がカスタマイズした部分がわかりやすくなると思いますので、ぜひ参考にしていただければと思います。

yStandardのPHPカスタマイズの特徴

yStandardのテンプレートファイルは次のような特徴があります

  • single.phpなどのテンプレートファイルを極力シンプルに!
  • 役割ごとに関数を分けてHTMLを出力!
  • 関数が書かれているファイルを見つけやすく!
  • 子テーマで関数の中身をカスタマイズする場合は同名関数を定義する!
  • フィルターフックでのカスタマイズも!

single.phpなどのテンプレートファイルを極力シンプルに!

テーマを作る上で、ある程度役割ごとにPHPファイルを分割して、 get_template_part()で読み込ませるとソースがスッキリしたり、同じような記述を使いまわせたり…

…と、それなりに便利な部分はあるのですが、あまりやりすぎるとどのファイルにカスタマイズしたい内容がかかれているかわからなくなるということになりかねません。

そんな作者の経験を元に、yStandardではsingle.phpなどのテンプレートファイルは極力少なくシンプルな構成になるように心がけています。

テンプレートの作りはTwenty Seventeenなど、WordPressを新規インストールした時にデフォルトでインストールされるテーマを参考に作っています。

役割ごとに関数を分けてHTMLを出力!

先に「single.phpなどのテンプレートファイルは極力少なくシンプルな構成」にしていると説明しました。

ただ、テンプレートの中には同じような記述があることや、全部をsingle.phpに書いてしまうとソースが見づらくなることから、役割ごとにテーマ独自の関数を定義し、その中でHTMLを生成・出力しています

関数はある程度のまとまり毎にincディレクトリ内の各ファイルに書いてあります。

incディレクトリ内にはそれなりに多くのファイルがあり、「どのファイルにカスタマイズしたい内容がかかれているかわからない…」となりそうですが、その点にもちょっとした工夫を凝らしています!

関数が書かれているファイルを見つけやすく!

例えばシェアボタン部分の表示は、ys_template_get_the_sns_share_buttonsという関数でHTMLを作っています。

incディレクトリ内のどのファイルに目当ての関数が書かれているかは関数名の最初の2節から割り出せるようにしています。

ys_template_get_the_sns_share_buttonsの場合、最初のys_templateの「template」部分がincディレクトリ内のファイルtemplate-tags.phpと対応しています。

このように、関数名の冒頭部分で探すべきファイル名がわかるように工夫しています。

(自分で作っててもそのうちどこに書いたかわからなくなるので…)

子テーマで関数の中身をカスタマイズする場合は同名関数を定義する!

子テーマでのカスタマイズに慣れている場合「親テーマにあるファイルと同じ名前のファイルを同じ位置に置けばOK」という認識があると思います

ですが、yStandardのincディレクトリ以下のphpファイルについては、申し訳ないですがそのような動作になりません…

では、どうやってyStandardで定義された関数をカスタマイズするかというと…

子テーマのfunctions.php同名の関数を記述することで親テーマの関数を上書きすることが出来ます。

(もしくは後述のフィルターフックを利用したカスタマイズをして下さい)

親テーマの関数を上書きに関して、具体的な手順としては

  1. 親テーマからカスタマイズしたい関数を中身ごとコピーする
  2. 子テーマのfunctions.phpに貼り付ける
  3. 関数の中身を書き換える

…こんな感じになります

親テーマからカスタマイズしたい関数を中身ごとコピーする

例えばys_template_get_the_sns_shareという関数を書き換えたい場合、次のコードの「ここから〜ここまで」の部分をコピーします

if( ! function_exists( 'ys_template_get_the_sns_share' ) ) {

//▼▼▼ ここから
    function ys_template_get_the_sns_share(){

        global $post;

        $html = '';
        $html .= '<aside id="sns-share" class="sns-share">';
        $share_buttons_title = '\ みんなとシェアする /';
        $share_buttons_title = apply_filters('ys_share_buttons_title','<p class="sns-share-title">'.$share_buttons_title.'</p>');

        $html .= $share_buttons_title;

        if(!ys_is_amp()){
            // AMP以外
            $html .= ys_template_get_the_sns_share_buttons();

        } else {
            // AMP記事
            $html .= ys_template_get_the_amp_sns_share_buttons();

        }
        $html .= '</aside>';

        // シェアボタンが非表示なら表示消す
        if( "1" === get_post_meta($post->ID,'ys_hide_share',true) ){
            $html = '';
        }

        return apply_filters('ys_get_the_sns_share',$html);

    }
//▲▲▲ ここまで

}

子テーマのfunctions.phpに貼り付ける

コピーした関数を子テーマのfunctions.phpに貼り付けます

function ys_template_get_the_sns_share(){

    global $post;

    $html = '';
    $html .= '<aside id="sns-share" class="sns-share">';
    $share_buttons_title = '\ みんなとシェアする /';
    $share_buttons_title = apply_filters('ys_share_buttons_title','<p class="sns-share-title">'.$share_buttons_title.'</p>');

    $html .= $share_buttons_title;

    if(!ys_is_amp()){
        // AMP以外
        $html .= ys_template_get_the_sns_share_buttons();

    } else {
        // AMP記事
        $html .= ys_template_get_the_amp_sns_share_buttons();

    }
    $html .= '</aside>';

    // シェアボタンが非表示なら表示消す
    if( "1" === get_post_meta($post->ID,'ys_hide_share',true) ){
        $html = '';
    }

    return apply_filters('ys_get_the_sns_share',$html);

}

関数の中身を書き換える

あとはよしなしに関数の中身を書き換えます。

関数内で他の関数を呼び出している部分もあるので注意して下さい

function ys_template_get_the_sns_share(){

    global $post;

    $html = '';
    $html .= '<aside id="sns-share" class="sns-share">';
    $share_buttons_title = '\ シェアーーーーー /';
    $html .= '<p class="sns-share-title">'.$share_buttons_title.'</p>';

    if(!ys_is_amp()){
        // AMP以外
        $html .= ys_template_get_the_sns_share_buttons();

    } else {
        // AMP記事
        $html .= ys_template_get_the_amp_sns_share_buttons();

    }
    $html .= '</aside>';

    return $html;

}

少し回りくどい方法になってしまいますが、後々自分でカスタマイズした部分がわかりやすくなります。

長くブログを運営していく中で、他のテーマに移リたくなった時に今までカスタマイズして使っていたコードを簡単に探しやすくなると思いますので、我慢していただければと思います…

フィルターフックでのカスタマイズも!

最後に、作者としてはカスタマイズにはぜひこの方法を使ってもらいたいと思っています。

少しWordPressのカスタマイズに慣れておく必要がありますが、ピンポイントで変更したい部分をカスタマイズ出来るので、子テーマに書くコードもスッキリします!

yStandard内の関数の所々にapply_filtersという関数でフィルターフックを定義しています。

シェアボタン上の「\ みんなとシェアする /」の部分を別の文字に変えたい時のカスタマイズ方法を例として説明します。

//「\ みんなとシェアする /」のカスタマイズのために
//「ys_share_buttons_title」というフィルターフックを用意しています
$share_buttons_title = '\ みんなとシェアする /';
$share_buttons_title = apply_filters('ys_share_buttons_title','<p class="sns-share-title">'.$share_buttons_title.'</p>');

カスタマイズの為のコード例は次のようになります

function my_ystandard_share_buttons_title($text){
  //「$text」には「<p class="sns-share-title">\ みんなとシェアする /</p>」が入ってくるので、うまく利用したり、上書いたりする
    $text = '<p class="sns-share-title">\ カスタマイズしたよ! /</p>';
    return $text;
}
//add_filter('[フィルターフック名(テーマに書かれたフック名)]', '[処理の為の関数名(自分で作成)]');でフックさせる処理を定義します。
add_filter('ys_share_buttons_title','my_ystandard_share_buttons_title');

先に説明した「子テーマで関数の中身をカスタマイズする場合は同名関数を定義する!」だと、「\ みんなとシェアする /」のカスタマイズのためだけに結構な長さのコードを書く必要がありました…

それに比べてフィルターフックを使ったカスタマイズではだいぶコードをスッキリさせることが出来たと思います!

親テーマでフィルターフックが用意された部分しかこの方法でカスタマイズ出来ないという制約がありますが、「ここらへん、きっとカスタマイズしたくなるよな〜」と思った部分については適宜フィルターを追加しています。

もし要望などございましたらご連絡いただければと思います!

テーマのカスタマイズにはローカル環境の用意をおすすめしてます

管理画面からテーマをカスタマイズして、ページが真っ白…なんて経験したことある方もいるのでは?

ってことで、テーマのカスタマイズの際にはぜひローカル環境を用意しておくことをおすすめします!