ブログテーマ・カスタマイズ

とりあえず勢いでリニューアルサイトを公開してしまったので、デフォルトテーマでブログはじめ。 子テーマ作りをするのに、どのテーマを親にするか迷うところだが、今回はめずらしく公式のものではじめてみる。

現在の公式デフォルトテーマの最新版「TwentySeventeen」に子テーマ「TwentySeventeen-child」をつくり、サクッと作業が進むつもりだったが、甘かった。 スタイルシートが、煩雑・・・ではなく、スタイルがゴリゴリ・・・だった。

いや、今時のサイトでそんなあっさりCSSあり得ないでしょう、は覚悟していたものの、リンクすべてtransition:指定してあり、リンクhoverがbox-shadow: これが各クラスに指定してあるのでカンマ区切りで2、30行はズラッとClass名カンマ、Class名カンマ・・・と続いている。

スタイルを加筆するのは容易だが、後書きで相殺するのは数があるだけ非効率。 またそこまで手間暇をかけてお互いに相殺し合うスタイルを書くのもどうなんだ、

.site-footer .widget-area ul li a {
    -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
    text-decoration: none;
    -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
    transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
    transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
    transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

こんなのやら、

.widget ul li a:hover {
    color: #000;
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
}

こんなのやらを定義された夥しい数のClassを30行、50行と、ぜーんぶ無かった事にするのは至難すぎる。というより無駄無駄無駄。

なので、消すこと にした。

親テーマの美味しいところは使いたい、しかし無駄無駄無駄は省きたい。 おまえは今まで相殺したスタイルの数を覚えているのか?!

 

こういう事で子テーマを生かすとは思っていなかった。 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() . ‘/minus-style.css’ );
}
?>

通常は、’parent-style’ … ‘/style.css’ のところを、任意の別名CSS(この例ではminus-style.css)を作成し、親テーマ・ディレクトリにアップロードして、子テーマ・ディレクトリには書き換えた functions.php を上書きアップロードした。

minus-style.css で削ったところは、今のところは /* Hover effects */ の複雑なのを通常の text-decoration: underline; にしたのと、marginやpaddingの微調整いくつか程度。

ゴリゴリのbox-shadow: insetリンクホバーはこの投稿画面では生きていて、3pxのアンダーライン、なかなか視認性がいいじゃないか!などと今更役立っている。


あとは、single.php この記事単体ページの表示で、何故か投稿日にpermalinkが貼られるのが悩ましかった。

同日の投稿が抽出されたアーカイブページへ遷移するのか? と思いかけたが、 permalinkだから他のページに移動するわけもなく、例の目立つホバーエフェクトだけは健在で

これである。(タメイキ;)

single.php の 投稿部分templateは’template-parts/post/content’とあるので、post/フォルダ内の content.php を見ると、echo twentyseventeen_time_link(); が該当箇所。

今度は、twentyseventeen_time_link が何処で生成させるか追うと、親テーマフォルダ:TwentySeventeen/inc/template-tags.php にIF文中のfunctionとして書かれていた。

return sprintf(
/* translators: %s: post date */
__( ‘<span class="screen-reader-text">Posted on</span> %s’, ‘twentyseventeen’ ),
‘<a href="’ . esc_url( get_permalink() ) . ‘" rel="bookmark">’ . $time_string . ‘</a>’
);

欲しいのは $time_string だけである。アンカーは要らない。特にpermalinkは何のために貼るのか分からない。

なので、上書きで消す こと にした。

if ( から endif; までを丸々コピーし、子テーマの functions.php にペースト。 上のリンクタグ囲いを一切消して $time_string の返り値だけをいただく。

return sprintf(
/* translators: %s: post date */
__( ‘<span class="screen-reader-text">Posted on</span> %s’, ‘twentyseventeen’ ),$time_string
);

子テーマ、つくづく便利である。