今更聞けないWordPress備忘録

初心者がワードプレスを始める基礎知識のまとめ

子テーマを作りテーマをカスタマイズする

スポンサーリンク

「テーマ」・「サイト」とも、WordPressをアップデートしても大丈夫なように。

テーマはTwenty Seventeenです。

 

子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。

基本の3ステップ

1、/インストーディレクト/wp-content/themesの中にディレクトリ「2017child」ホルダーを新規作成

2、style.cssの作成
3、functions.phpの作成

※お好みでscreenshot.pngTwentySeventeenからコピーしてきます。

 

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

サーバーのwp-content/themesの中にディレクトリ「2017child」ホルダーを新規作成します。(FTPを使用します)

 

2. style.cssを作成(2017childのフォルダ内に作る)

コピペして使う場合にはみなさんのAuthorAuthor URIを記述してください。

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

Description: Twenty Seventeen の子テーマ
Authorwordpress(自分のサイト名)

Author URIhttp://afuri8.hatenadiary.jp/ (自分のサイトアドレス)
*/

はい、これだけです。

 

3. functions.phpを作成(2017childのフォルダ内に作る)

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

<?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' );
}
?>

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

これで、親テーマTwenty Seventeenを有効化したものと同じになっていますが、確認できない時は、子テーマを使ってカスタマイズをするのはやめ、再作成してください。

 

「2017child」のテーマの編集

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

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

もしおかしくなったら、親テーマから新規にコピーしてやりなおせばいいですから。

 

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

 

親テーマから3つのファイルを子テーマへコピー
1、index.php
2、archive.php
3、content.php(template-parts/postディレクトリの中)
コピーしたら、content.php⇒ content-archive.php
index.php ⇒ home.php に変更します。

そうするとこんな感じになります。

f:id:yumeji773:20170302190806p:plain

archive.phpの修正

40行目の部分

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

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

?
get_template_part( 'template-parts/post/content', '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 -->

 

PHPがわる人は archive.php の部分で標準だったら抜粋で、それ以外はそれぞれのフォーマットの表示にする・・・とかカスタマイズですか。

 home.phpの修正

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