※ 現在このブログはTwentySeventeenの子テーマではありません。(2017/02/01)

 

毎年、最愛の娘さんの誕生日にAdvent Calemderを書くという出来損ない母のねこみみ隊長でございます。
今日は WordPress Advent Calendar 2016 の21日目です。

こんなね、ねこみみつけてるのに平成元年生まれの27歳の娘がいるんですよ。Advent Calender書いてる他の子もそんな年齢だったりするわけで。はい。そしてね、この忙しい時に何を書こうか決めてなくて、子テーマについて書くわけです。みんな知ってるかもしれないけど、最近WordPressをいじりはじめた人向けに…(あ、手抜き言わない!そこ、石投げない!!)

 

新デフォルトテーマが出ると必ず子テーマを作ります

WordPressのメジャーアップデートが行われる時、新デフォルトテーマも公開されます。今回はTwenty Seventeenです。

毎回デフォルトテーマが出ると自分が書いてるブログで新テーマを有効化するんですが、それでどんな風に作られているのかコード見ずにわかります。だって知らんデータより自分でいつも書いてる記事だからねー。

子テーマの作り方については日本語Codexや各種の記事など検索すると出て来ますので、そちらも参考になると思います。私はアホほど初心な感じで書きますので、知ってる方はあまり参考にならないでしょう。唯一4.7に対応したとこもありますけど。

 

まず基本の3ステップ

  1. /インストールディレクトリ/wp-content/themesの中にディレクトリ「2017child」を新規作成
  2. style.cssの作成
  3. functions.phpの作成

お好みでscreenshot.pngをTwentySeventeenからコピーしてきます。

1.「2017child」ディレクトリを新規作成

テーマはディレクトリ(フォルダ)ごとにまとまってますからこれを作らないとね。

2. style.cssの作成

/*
Theme Name: 2017child
Template:   twentyseventeen
Theme URI:  https://wordpress.org/themes/twentyseventeen/

Description:   Twenty Seventeen の子テーマ
Author:        ねこみみ隊長
Author URI:    http://nekomimi-taicho.com/about/
*/

はい、これだけ。
コピペして使う場合にはみなさんのAuthorとかAuthor URIを記述してくださいね。

 

3. functions.phpの作成

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}
?>

親テーマのCSSを読み込む記述を書いておきます。

 

以上の3ステップができたら「2017child」を有効化します。

これだけで、親テーマTwenty Seventeenを有効化したものと同じになっているはずです。ちゃんと確認しましょうね。
それが確認できない時点では、子テーマを使ってカスタマイズをするのはやめましょう。これはよい子と隊長との約束だよ!

 

アーカイブ表示のカスタマイズ

子テーマのカスタマイズは、自分で最初からコチコチ打ち込んでもいいですが、親テーマの変更したい部分をコピーして修正するという方法が間違いないと思います。もしおかしくなったら、また親テーマから新規にコピーしてやりなおせばいいですし。

そして私はいつも、デフォルトテーマのアーカイブの表示が抜粋文じゃなくて全文で表示されてしまうのが嫌いで、そこから変更してしまいます。

親テーマから3つのファイルを子テーマへコピー

  • index.php
  • archive.php
  • content.php(template-parts/postディレクトリの中)

コピーしたら、content.php → content-archive.php に
index.php → home.php に改名します。

そうするとこんな感じ。

 

archive.phpの修正

40行目の部分

get_template_part( 'template-parts/post/content', get_post_format());
get_template_part( 'template-parts/post/content', 'archive' );

get_post_format()の部分を’archive’に変更してます。

 

content-archive.phpの修正

50〜65行目

<div class="entry-content">
<?php
  /* translators: %s: Name of current post */
  the_content( sprintf(
    __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
    get_the_title()
  ) );

  wp_link_pages( array(
    'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
    'after'       => '</div>',
    'link_before' => '<span class="page-number">',
    'link_after'  => '</span>',
  ) );
?>
</div><!-- .entry-content -->

この部分をこれに置き換えます。

  <div class="entry-content">
    <p class="entry-text"><?php the_excerpt( '40' ); ?><p>
  </div><!-- .entry-content -->

 

もちろんポストフォーマットに準じて表示するテンプレートはわかってるんですが、一覧だと長文のときスマホですごいスクロールしなきゃいけないでしょw
PHPがわかってる人は archive.php の部分で標準だったら抜粋で、それ以外はそれぞれのフォーマットの表示にする・・・とかカスタマイズするのもあり。

 

home.phpの修正

私は、設定でフロントページを「最新の投稿」にしているので、home.phpを修正します。45行目をarchive.phpと同じで、get_post_format()の部分を’archive’に変更してます。

これだけで、だいぶ一覧表示がなんとかなったかな。

 

もし「固定ページ」を設定している人は、親テーマのpage.phpをコピーしてきてfront−page.phpに改名してカスタマイズしてくだしあ。

 

 

さらにお好みでカスタマイズ

12月21日現在有効化している子テーマには、サイトバーに他のWordPressサイトのRSSを表示させたり、CSS追加したり、投稿ページにアイキャッチでてこないようにしたりとか、ちまちま変更してます。

基本はこんな感じで、最初の3ステップのあとに、自分でカスタマイズしたいテンプレートを追加修正していきます。

 

既存テーマをカスタマイズする際、最初に覚えたいのが子テーマの作成

公式ディレクトリからダウンロードしたテーマファイルそのものを直接カスタマイズすると、WordPressがアップデートしろって通知してしたら、無視しちゃおうって思う人がいるかもしれません。

でも本来は、テーマもサイトも、WordPressをどんなにアップデートしても大丈夫なように作らなきゃいけないんです。

だから、最初から自作できない人は、子テーマを作って、安全にサイト運営をしてくださいね。

え?やり方がわからない?
そんな方はねこみみすくーるにプライベートレッスンの申し込みをしてくださいw

そういや2016年の終わりに、自分や愛娘や家族のサイトすべて常時SSL化が完了しました。来年には常時SSL化してないと大変!って話題ですもんね。

 

さて、明日の WordPress Advent Calendar 2016の担当は Masahiko Kawaiさんです。どんな記事かな〜〜楽しみです。