子テーマの作成
まずは子テーマの設定方法。
今回は公式テーマ「TwentySeventeen」を親テーマに選んだので
/wp-content/themes/に「TwentySeventeen-child」フォルダを作成し、子テーマ用のfunctions.phpとstyle.cssをアップロード。
子テーマ作成時の「functions.php」には最低限の内容を記入してUP。
<?php
// default
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にも親テーマの情報など書いてアップしたのだが、いや！ちょっと待て。
/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
Version: 1.4
*/
@charset "UTF-8";
@import url("../twentyseventeen/style.css");
後日、Sassを「compressed」形式でコンパイルして上書きして消えてました（汗）
/*!
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
Version: 1.4
*/「/! … /」コメントとして加筆してコンパイルし直し。
→ →
ダッシュボードメニュー：外観 > テーマで新しくテーマを選択できるようになった時点で、親テーマが持つテーマ・カスタマイズ項目は
ダッシュボードメニュー：外観 > カスタマイズから同じように設定できるようになります。（ヘッダー画像やリンク色、ウィジェットなど）
右手側のテーマ画像は、子テーマフォルダに「screenshot.png」としてアップすると反映されます。
推奨サイズは 880 × 660
使用したテンプレート
- front-page.php
- home.php
- header.php
- footer.php
- sidebar.php
- single.php
- archive.php
- search.php
- 404.php
親テーマフォルダから、必要なテンプレートをコピーして編集します。
home.phpは親テーマにはないのでindex.phpをコピーしました。
種別として、サイトの構成に使っているのが
訪問者のアクションで表示されるページ群
- archive.php
- search.php
- 404.php
では、アーカイブページがそのままだと該当記事が全文積まれてしまうので、「抽出感」が薄く見辛かった。
whileループ文の中
get_template_part( 'template-parts/post/content',
get_post_format() );を、抜粋 ‘excerpt’ で置き換える表示に変更。
get_template_part( 'template-parts/post/content', 'excerpt' );
というか、これで「archive.php」の表示内容は「search.php」とまったく同じに。
whileループの中を要約すると
postのcontentを
template-parts/post/content.php にある
post_format() でまるっと表示してね、だったのを
引数 ‘excerpt’ 付きで表示してね、と変更。
デザイン変更部分は、レスポンシブのレイアウトをfloatからflexに変更しているので大枠のところのclass名を変更しネストをかなり単純化。
- header.php
- footer.php
- sidebar.php
- single.php
特に「sidebar.php」など何も変更を加えていない親テーマのまま。
「single.php」は別記事にすでに書いたけど、個別記事のページにいるのに、自分自身の位置にpermalinkを貼るとか
しかもpublishしたtimeて・・・投稿日にマウスホバーとか紛らわしすぎるだろ！
というわけで、日付関数を置き換える部分は子テーマの functions.php に上書きする方法で対応しました。
途中迷ったんですけどね。シングルページだけだろー
そこだけ get_template_part() を別PHPファイルで書いてしまえば。と思わなくもなかったが、元々のフォーマットではスクリーンリーダー用のテキストがきちんと用意されているので、なるべく網羅してくれている部分はそのまま使いたいなと、
<span class="screen-reader-text">Posted on</span> %s
パートについてた get_permalink() リンクだけ削ることにしました。
もちろん新規のテンプレートにそのまま書けば同じ表示をしてくれるはずですが、些細な見せ方の違いのためにあまり分岐は作らない方がいい（たぶん後で忘れる）という理由が大きかった。
wordpressの記事を固定ページで表示する
さて、カスタマイズのメインテーマとなることが多い固定ページ。
クライアントワークでは、ほぼこのWP「Pages」制作部分が9割。
固定ページを作って、任意のカテゴリの記事を最新(n)件表示せよ、みたいなのが多いのですが、このブログではまだほとんど固定ページを使ってません。
条件付きで読み込みをしているのは、フロントページの後半でブログの最新記事を3件表示しているセクションのみ。
<?php
$args = array( 'posts_per_page' => 3 );
$my_posts = get_posts( $args );
foreach( $my_posts as $post ) : setup_postdata($post); ?>
・・・ループ処理・・・
<?php endforeach;
wp_reset_postdata();
?>get_posts( )で呼び出す条件を決めてforeachが終わったら
wp_reset_postdata();
まだ記事が寡ないので特にカテゴリーを絞らず最新記事から並べていますが、任意のカテゴリーを全件表示する場合の条件定義は
$args = array(
'category_name' => 'CategorySlug',
'posts_per_page' => -1
);指定するパラメータをカンマ区切りで書くのだが、「表示順」を決めるORDER BYに
‘orderby’ => ‘rand’ ランダムや
‘orderby’ => ‘modified’ 最終更新日時があるのは知らなかった。
ブログトップ で投稿日と記事タイトルを表示させているループは、「home.php」なのでコピー元の「index.php」と同じwhile文をそのまま使いました。
<?php
if ( have_posts() ) :
/* Start the Loop */
while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink() ?>">
・・・パーマリンクをブロックで使ったループ処理・・・
</a>
<?php
endwhile;
the_posts_pagination( array(
・・・略・・・
) );
else :
get_template_part( 'template-parts/post/content', 'none' );
endif;
?>最後にfront-page.phpとhome.phpの使い分けについて書こうと思ってましたが、すでに記事が長いので別稿にします。