WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話しの続きの話しです。ダークモードに対応させてみました。

しかし、Wordpressの管理画面でダークモードをOnにすると、子テーマのstyle.cssの前に親テーマのstyle.cssが出現してデザインが元に戻ってしまいます。他に親テーマのstyle.cssが登録しているところが見つかりませんので、おかしな動作です。

おかしいとも言ってられないので、親テーマのstyle.cssの後に子テーマのstyle.cssが来るようにします。こちらのサイトを参考にしました。

変更したのはfunction.phpのところです。

function theme_enqueue_styles() {
	wp_enqueue_style( 'child-style',
		get_stylesheet_directory_uri() . '/style.css', array( 'twenty-twenty-one-style' ) 
	);
	wp_enqueue_style( 'child-dark-style',
	get_stylesheet_directory_uri() . '/assets/css/style-dark-mode.css', array( 'tt1-dark-mode' ) 
	);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

最初のwp_enqueue_style()の第3引数に親テーマのIDを指定して、style.cssの順番を明示的に指定しています。２番めのwp_enqueue_style()がダークモードのCSSです。

これで、ダークモードに対応できましたが、本来ならば親テーマのstyle.cssは必要ないので読み込むのも無駄ですし、どうして最初に動かなかったかは不明です。

HTMLサイトをWordPressにする本

著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美

¥2,399 （2025/04/08 11:39時点 | Amazon調べ）

Amazon

ポチップ

いちばんやさしいWordPressの教本 第6版 6.x対応 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズ

著:石川栄和, 著:大串肇, 著:星野邦敏

¥1,919 （2025/04/08 11:39時点 | Amazon調べ）

Amazon

ポチップ

なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

気になると修正箇所が出てくるWordpressのTwenty Twenty-Oneのテーマですが、ページナビゲーションの表示がとてもおかしいので修正してみます。

こんな感じでページ番号の頭に「固定ページ」が追加されて表示されてしまっています。

「固定ページ」って何でしょうか？　このページナビゲーションを表示しているファイルは、/inc/template-tags.phpのようです。以下のthe_posts_pagination()で表示しています。

the_posts_pagination(
  array(
    /* translators: There is a space after page. */
    'before_page_number' => esc_html__( 'Page ', 'twentytwentyone' ),
    'mid_size'           => 0,
    'prev_text'          => sprintf(

しかし、’before_page_number’プロパティの’Page’が「固定ページ」と翻訳ファイルとリンクされているようで、おかしな表示になっています。

そこで、’before_page_number’プロパティを削除して、シンプルにページ番号で表示させるようにします。ついでに、前後のページ番号を３つ表示するように変更してしまいます。修正した結果は以下のようになります。

the_posts_pagination(
  array(
    /* translators: There is a space after page. */
    'mid_size'           => 3,
    'prev_text'          => sprintf(

最初、子テーマに変更した/inc/template-tags.phpを作ってあげても、その変更は反映されませんでした。いろいろ探ってみると、行き着いたのは以下のサイトです。

POPWEB

WordPress親テーマのincサブディレクトリ以下のファイルを子テーマで上書きしたい場合

https://blog.popweb.dev/programming/child-theme-directory-overwrite/

当ブログではWordPressのテーマは「Twenty Seventeen」を使っている。さらに、子テーマを配置してカスタマイズ変更を行っている。なぜ子テーマを使うか基本的なことだが、なぜ子テーマを使用するのかについて。親テーマを編集してい…

the_posts_pagination()を定義している関数twenty_twenty_one_the_posts_navigation() をfunction.phpに追加してあげればいいようです。function.phpに追加した結果は、以下の通りとなりました。

以上のように、まともで見やすいページナビゲーションとなりました。

HTMLサイトをWordPressにする本

著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美

¥2,399 （2025/04/08 11:39時点 | Amazon調べ）

Amazon

ポチップ

いちばんやさしいWordPressの教本 第6版 6.x対応 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズ

著:石川栄和, 著:大串肇, 著:星野邦敏

¥1,919 （2025/04/08 11:39時点 | Amazon調べ）

Amazon

ポチップ

なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。