WordPressのテーマを子テーマを使ってカスタマイズする

WordPressで初めてサイト作ったんだけど、そのときにやったことをメモしておく。

テーマをカスタマイズするなら、最初にTemplate Hierarchyを読んでおいたほうがいい。ページにどのテンプレートが反映されるかを正確に理解しないと、テーマを意図通りに変更するのは難しい。

子テーマの作成

直接テンプレートを修正すると差分がわからなくなるので、最初に子テーマを作成する。シンプルなテーマから初めて修正していく感じで作りたかったので、ベースにTwenty Sixteenを選択した。

Twenty Sixteenの子テーマを作成するには、まずwp-content/themes/twentysixteen-childというディレクトリを作って、そこに以下のstyle.cssを作成する。

/*  
 Theme Name:   Twenty Sixteen Child  
 Description:  Twenty Sixteen Child Theme  
 Template:     twentysixteen  
 Version:      1.0  
*/  

テンプレートの名前と親テンプレートの名前twentysixteenを宣言している。

以下のfunction.phpも同じディレクトリに作る。

<?php  
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );  
function my_theme_enqueue_styles() {  

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.  

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );  
    wp_enqueue_style( 'child-style',  
        get_stylesheet_directory_uri() . '/style.css',  
        array( $parent_style ),  
        wp_get_theme()->get('Version')  
    );  
}  

するとテーマ一覧にTwenty Sixteen Childが出現するので、それを選択する。

power by WordPressを消す

同じディレクトリに親テーマのthemes/twentysixteen/footer.phpをコピーして、<div class="site-info">の中身をお好みに書き換える。

            <div class="site-info">  
                <?php  
                    printf(__("&copy; %d RoundWide Systems"), date("Y"));  
                ?>  
            </div><!-- .site-info -->  

トップページだけカスタマイズ

他の固定ページに変更を加えることなく、トップページのテンプレートだけ手を加えたい場合は、親テーマのpage.phptoppage.phpとしてコピーしてきて、冒頭を以下のように編集する。

<?php  
/*  
Template Name: Top Page  
*/  

get_header(); ?>  

<div id="primary" class="content-area">  
    <main id="main" class="site-main" role="main">  
        <?php  
        // Start the loop.  
        while ( have_posts() ) :  
            the_post();  

            // Include the page content template.  
            get_template_part( 'template-parts/content', 'toppage' );  

冒頭でTemplate Nameを宣言する。get_template_partの引数をpageからtoppageに変更する。

template-partsというフォルダを作成して、親テーマのtemplate-parts/content-page.phpcontent-toppage.phpとしてコピーする。

toppage.phpを作ると固定ページの編集で、そのページ固有のテンプレートとしてTop Pageを選択できる。

テンプレートにTop Pageを選んだら、そのページにはtoppage.phpcontent-toppage.phpが適用されるので、それらを適当に編集すればいい。

タイトルのフォントサイズを小さくする

タイトルのフォントを10%小さくする場合は、Twenty Sixteenの場合は子テーマのstyle.cssに以下の記述を追加すればよい。

h1.entry-title {  
    font-size: 25.2px;  
    font-size: 1.575rem;  
}  

@media screen and (min-width: 44.375em) {  
    h1.entry-title {  
        font-size: 29.7px;  
        font-size: 1.8576rem;  
    }  
}  

@media screen and (min-width: 61.5625em) {  
    h1.entry-title {  
        font-size: 36px;  
        font-size: 2.25rem;  
    }  
}  

@media screen and (min-width: 61.5625em) {  
    h1.entry-title {  
        font-size: 36px;  
        font-size: 2.25rem;  
    }  
}  

親テーマのstyle.cssのフォントの指定を0.9倍しただけである。メディアクエリを親テーマから移植するのを忘れないように。