ブログ・カスタマイズ備忘録

子テーマの作成

まずは子テーマの設定方法。
今回は公式テーマ「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をアップした後

ダッシュボードメニュー：外観 > テーマで新しくテーマを選択できるようになった時点で、親テーマが持つテーマ・カスタマイズ項目は
ダッシュボードメニュー：外観 > カスタマイズから同じように設定できるようになります。（ヘッダー画像やリンク色、ウィジェットなど）

右手側のテーマ画像は、子テーマフォルダに「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をコピーしました。

種別として、サイトの構成に使っているのが

front-page.php（サイトトップ : ‘/’）
home.php（ブログトップ : ‘/blog/’）

訪問者のアクションで表示されるページ群

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’ 最終更新日時があるのは知らなかった。

WordPress Codex : get_posts()

ブログトップで投稿日と記事タイトルを表示させているループは、「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の使い分けについて書こうと思ってましたが、すでに記事が長いので別稿にします。

Sakurai Rono PEN

ブログ・カスタマイズ備忘録

目次

子テーマの作成

使用したテンプレート

wordpressの記事を固定ページで表示する