フォークしたブロックテーマで行うカスタマイズいろいろ

functions.phpを追加する

TT3では、もはやカスタムコードを追加することなくサイトを構築しようという意図が明確に出ていて、通常テーマには必ずあるfunctions.phpというファイルがありません。

ただこれは、functions.phpというファイルをテーマフォルダ内へ入れるだけで、WordPressが自動で「プログラム用のファイルね」と適用してくれるので、パソコン上で作成してテーマフォルダへアップロードしましょう。

ファイルの冒頭には以下のコードを記述し、PHPファイルであることと、このファイルへの直接アクセスを拒否する措置をしておきます。

<?php
//このファイルへの直接アクセスを禁止
if ( !defined( 'ABSPATH' ) ) exit;

以後の作業ではこのファイルへコードを追加する必要がありますので、この措置は必須です

CSSを読み込ませる

フロントとブロックエディター用のスタイルを読み込ませる

TT3では、WordPressにおいてテーマであることを認識させるためにのみ「style.css」というファイルを置き、必要な記述だけがされています。

このままでは、ここにスタイルコードを書いてもどこにも反映されないので、以下のコードをfunctions.phpへ追加します。

/***** style.cssの読み込み（通常では読み込まれないため） *****/
/* global-stylesの下へ挿入してほぼ最後に適用されるようにする */
function sample_theme_style_init(){
$rand = rand( 1, 99999999999 );

//スタイルシートの登録
	wp_register_style(
		'theme-style',
		get_theme_file_uri('/style.css'),
		array('global-styles'),
		$rand,
		'all'
	);

	wp_enqueue_style('theme-style');
}
add_action('enqueue_block_assets','sample_theme_style_init',999999);

設置が終わったら、確認のため、以下のコードをstyle.cssへ追加して、表示画面の背景色が赤になるかどうかチェックします（チェックが終わったらコードは削除して構いません）。

body{
background:red!important;
}

この方法で思い通りに読み込まれない、適用されない場合は、エディター用のスタイルを有効にし、フロントと別に読み込ませるなどの対処をするといいでしょう

スタイルやJSのエンキュー・登録の方法やいろいろなやり方でエンキューさせた時の挙動などは、以下のページで詳細に研究・紹介していますのでついでにどうぞ。

ここへ書くのはtheme.jsonで適用できないものに限るようにすると良い

旧来のクラシックテーマを使っていると、スタイルの指定はほぼ100%このファイルへ記述するため、慣れている方ほどこのファイルへ書いた方が早いと感じがちです。

ただ、ブロックテーマには、theme.jsonというサイトの基本スタイルを定義するファイルがあり、そこへ設定したものが即座にサイト全体に反映される仕組みになっていますので、ここへコードを書いてテストをしたら、この設定はtheme.jsonでサイト全体に反映させられるか？反映させておいた方が一貫性が保てるか？を考え、できるだけtheme.jsonで完結するようにしておくと、ブロックテーマの恩恵をより多く得られると思います。

管理画面用のスタイルを読み込ませる

フロント・ブロックエディター以外の管理部分に対してのみ色を変えたりしたい場合もあると思いますので、以下の手順で管理画面専用のスタイルを読み込ませるようにします。

まずはパソコン上で「custom-admin-style.css」というファイルを作り、テーマフォルダ内へアップロードします。

次に以下のコードをfunctions.phpへ追加します。

function sample_admin_style_init( $hook='' ){
	$rand = rand( 1, 99999999999 );

	if ( 'post.php' != $hook ) {
		wp_enqueue_style(
			'theme-admin-style',
			get_theme_file_uri('/custom-admin-style.css'),
			'array()',
			$rand
		);
	}	
}
add_action('admin_enqueue_scripts','sample_admin_style_init');

こちらは、特に登録する必要はないので、wp_enqueue_styleを使い、wp_enqueue_scriptsへフックさせて読み込ませています。さらに「post.php（投稿や固定ページの編集画面）」でないところへのみ反映させるようにしています。

設置が終わったら適用されることを確認するため、以下のコードをcustom-admin-styleファイルへ追加して画面をリロードし、背景色が赤色になるかを確かめましょう。

body{
background:red!important;
}

JSを読み込ませる

WordPressのカスタマイズの中には、何かの動きを持たせたりする際に、JavaScriptやjQueryを使う機会があると思います。

テストするときに都度JSを適用させるのは面倒なので、書いたコードがすぐに反映されるように、最初から読み込ませるようにしておくと便利です。

まずはパソコン上で「custom-js.js」というファイルを作り、テーマフォルダー上へアップロードします。

次に、以下のコードをfunctions.phpへコピーします。

function sample_custom_js_init(){
	wp_enqueue_script(
		'theme-custom-js',
		get_theme_file_uri('/custom-js.js'),
		array('jquery'),
		null,
		array( 
			'strategy'  => 'defer',
			'in_footer' => true, // Note: This is the default value.
		)
	);	
}
add_action('wp_enqueue_scripts','sample_custom_js_init');

設置が終わったら、どこかのページでjQueryを使ったコンテンツ作成の例などを探すか、jQuery Examplesなどでサンプルコードを探して試してみてください。

WordPressのjQueryライブラリを利用する時は、このファイルへ書く構文の「$」接頭辞を「jQuery」へ変更するなどの措置が必要です

theme.jsonファイルの編集

ブロックテーマのキモはtheme.jsonファイルの編集にあると言えます。

theme.jsonで指定した内容は、HTML上でヘッダーの中にインラインで表示（コードを直接表示）されて適用され、サイトのすべてのスタイルの基礎となります。

通常このスタイルコードは、テーマの追加CSSやサイトエディターのグローバルスタイルよりも先に読み込まれるため、それらで上書きすることが可能ですが、theme.jsonで指定することで、サイト全体に反映させることができ、かつ、余分なスタイルコードを削減することができますので、ブロックテーマを使用する際には、安易に追加CSSやグローバルスタイルで設定する前に、theme.jsonで指定できないかを考えながら行うと、効率よくサイトのデザインを行うことができます。

theme.json編集前に、確定した部分までをバックアップすることをおすすめします。どうしてもうまくいかない時は、TT3をダウンロードして、theme.jsonを上書きすれば、すべてデフォルトに戻すことができます。

json形式のファイル編集が苦手・良く分からないという方は、後半の「【おまけ】PHPからtheme.jsonを上書きできるようにしておく」に書いた措置をしておくとPHPからtheme.jsonを上書きできます。

特にグローバルスタイルで設定したものは、他のサイトへ流用しようとしたとき、テーマのエクスポート機能を使っても、継承されませんので注意が必要です

ここでは以下のことを中心に行っていきます。

1. 不要なフォントを削除する
2. コンテンツ幅を変える
3. フォントサイズを編集する
4. カラーパレットを追加する
5. theme.jsonの編集のコツ
6. 【おまけ】PHPからtheme.jsonを上書きできるようにしておく

不要なフォントを削除する

TT3では、以下のフォントが標準で使用できるようになっています。

• DM Sans
• IBM Plex Mono
• Inter
• System Font
• Source Serif Pro

「DM Sans」「IBM Plex Mono」「Inter」はGoogleの欧文フォント、「Source Serif Pro」はAdobeの欧文フォントで、日本語で使用する場合にはほとんど使わないでしょう

この通常しないフォントたちは、全ページでいつでも指定できるよう、HTML上で読み込むようにされており、以下の容量のファイルが転送されるようになっていて、使用しないのであれば、転送量の無駄＝ページ表示速度低下への影響が出ることがあるかも知れません。

たったこれだけ？と思われるかも知れませんが、画像をガンガン使うサイトでない場合には、ページ全体の転送量と比較すると結構な量になりますし、訪問者のブラウザ上でキャッシュされるだのなんだのというのを除けば、誰かがアクセスする度にこの転送量を無駄に消費するわけですから、アクセスが増えるほど転送するサーバーの負荷もかかっていく可能性があります。

以下が、TT3標準で読み込む（読み込むようにHTML上で指示されているファイル）の容量です。

何もしなくても2メガバイトのファイルが無駄に転送されるのかも知れないということです。前述したようにキャッシュ云々があるので毎回これが．．というわけではないのかも知れませんが、使わないのですから必要ないですよね？

逆に削除してはいけないのが、「System Font」。これは「-apple-system,BlinkMacSystemFont,\”Segoe UI\”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,\”Helvetica Neue\”,sans-serif」という欧文・和文の場合でブラウザに標準装備されているフォントの中での優先度が指定されていて、閲覧する人の環境に応じて出し分けるようになっています。

そして、この「System Font」は、何もフォントを指定しなかった場合に使われるフォントの組み合わせとして、theme.jsonの末尾付近にある以下の行で指定されています。

"typography": {
	"fontFamily": "var(--wp--preset--font-family--system-font)",
	"fontSize": "var(--wp--preset--font-size--medium)",
	"lineHeight": "1.6"
}

不要なフォントの削除方法

他のフォントを使用しないのであれば、「System Font」以外のフォントは削除してしまっても大丈夫です。

削除することで、各ブロックのフォントの選択肢にも表示されなくなるので、必要ないのであればなるべく早いうちに削除の処置をした方がいいと思います。

フォントの設定は同じくtheme.jsonに書かれています。

例えばDM SANSのnormalフォントであれば以下の部分がそれに当たります。

"fontFace": [
	{
		"fontFamily": "DM Sans",
		"fontStretch": "normal",
		"fontStyle": "normal",
		"fontWeight": "400",
		"src": [
			"file:./assets/fonts/dm-sans/DMSans-Regular.woff2"
		]
	},

もしも既にどこかで削除したフォントが指定されている場合には、この場合では「System Font」が代替として使用されるはずなので（ベースが「System Font」なので）、「System Font」として表示されるだけで、その部分が表示されなくなるということはありません。

代わりに和文フォントを使う

ここまで不要なフォントの削除をすることをお勧めしてきました。そして、「System Font」に指定されている優先度によって、ブラウザで読み込まれているフォントを使ってサイトを表示させるということも理解いただけたと思います。

ただ、このフォントスタイルは、欧文・和文それぞれで「このフォントが使えれば（表示できれば）．．」という優先順を設けているので、厳密にいうと、閲覧する環境によって、文字種にバラつきが出る可能性が高いという弱点もあります。つまり「これだ！」というフォントで表示させる場所には向いていないのです。

そこでおすすめなのが、Googleフォントの和文フォントとして人気のある「Noto Sans」を使う方法。日本語はマルチバイト文字（一文字表示するのにたくさんのバイト数を使う）なので、結構な容量になってしまうのですが、どのデバイスから見ても変わらないというサイトにしたい場合に使用すると有効でしょう。

theme.jsonを使って「Noto Sans」を使う方法については以下のページで詳しく紹介していますので、興味のある方はご覧ください。

コンテンツ幅を変える

theme,jsonの先頭の方にある以下のコードを探します。

"layout": {
	"contentSize": "650px",
	"wideSize": "1000px"
},

この中の「contentSize」に指定されているのが、通常の場合のコンテンツ幅、「wideSize」が幅広の場合のコンテンツ幅の基準値になりますので、任意に指定します。

ここで設定するのはサイト幅ではなく、各ブロックの幅であることに注意しましょう

個人的には通常800px前後(タブレットでも普通に見える程度)、幅広は1200px（1366x768pxのノートPC向け）にするのがベストかなと思います

このコンテンツ幅を、サイトエディターの「サイト幅－左右パディングの合計」にすると、ブロックエディターでの見え方をほぼ一致させることができます

これで、何かのブロックを挿入した時に指定できる「なし」「幅広」の幅を指定することができます。

カラーパレットを追加する

theme.jsonの最初の方にある以下の部分がカラーパレットの設定です。ここに設定した色が、ブロックエディターの色選択の中に表示され、クリックで色を選択できるようになります。

"color": {
	"palette": [
		{
			"color": "#ffffff",
			"name": "Base",
			"slug": "base"
		},
....
]
....

上のコード中の赤字部分が1つのカラーの設定です。

カラーパレット上で上記の色を選択した部分は#ffffff(白)が指定されるという仕組みです。

この塊を追加すればいくつでも独自の色を追加することができます。ただし、あまり色を追加しすぎると、選択時のパレットに表示される色が多くなり、逆に選択しにくくなる可能性がありますので、必要最小限にとどめておいた方がいいと思います。

また、CSSなどで、以下のように書くことで、カラーパレットの色を指定することができ、theme.jsonでcolor項目を変更すれば、その部分すべての色を一括で変更するといったこともできます。

var(--wp--preset--color--base)
※baseはカラーパレット指定のslugを指定します

フォントサイズを編集する

TT3デフォルトのフォントサイズ指定は以下のように書かれています。

"fontSizes": [
	{
		"fluid": {
			"min": "0.875rem",
			"max": "1rem"
		},
		"size": "1rem",
		"slug": "small"
	},
	{
		"fluid": {
			"min": "1rem",
			"max": "1.125rem"
		},
		"size": "1.125rem",
		"slug": "medium"
	},
	{
		"fluid": {
			"min": "1.75rem",
			"max": "1.875rem"
		},
		"size": "1.75rem",
		"slug": "large"
	},
	{
		"fluid": false,
		"size": "2.25rem",
		"slug": "x-large"
	},
	{
		"fluid": {
			"min": "4rem",
			"max": "10rem"
		},
		"size": "10rem",
		"slug": "xx-large"
	}
]

theme.jsonで指定できるフォントサイズは2023年12月18日現在「small」「medium」「large」「x-large」「xx-large」の5種類となっているようですので、それぞれのサイズに対する文字サイズを任意に変更します。

ここで指定した文字サイズは各ブロックの文字サイズ（小・中・大など）を選択した時に適用されます

デフォルトでは大きいサイズのフォントがかなり巨大なので調整することをおすすめします

ここで設定した値は、theme.jsonのstyles項目の中で頻繁に以下のような指定方法で使われています。

"fontSize": "var(--wp--preset--font-size--small)"

これは、theme.jsonのsmallに指定されているフォントサイズを使いなさいという意味なので、フォントサイズの指定を変更すれば、即座にそれらの要素の文字サイズも変更されます。

冒頭のまとまったコードの中から「small」を例にすると、

{
		"fluid": {
			"min": "0.875rem",
			"max": "1rem"
		},
		"size": "1rem",
		"slug": "small"
	},

がひと塊になっていて、内容は以下のように理解すればいいでしょう。

つまり、上記標準のコードでは、以下のように指定されていることになります。

• 通常の文字サイズは1rem(ブラウザの標準文字サイズの1倍)
• 画面幅に応じて文字サイズを1rem→0.875remまで徐々に小さくするが、画面幅がいくら小さくなっても0.875remより小さくしない
• 画面幅が大きい場合には最大1remまで拡大（つまり標準のまま）にする

ここでいう画面幅については、WordPress6.3以前と、6.4以降とで扱いが異なりますので、詳しくは以下のページを参考にしてみてください。

また、文字サイズを固定にしたい場合には、以下の部分を削除します。

"fluid": {
			"min": "0.875rem",
			"max": "1rem"
		},

fruidではなく、CSSのclampを使いたい場合には、fruidを無効にした状態で、sizeのところへclampを使ったサイズを指定すれば大丈夫です。

theme.jsonの編集のコツ

ここまで、よく編集するフォントとフォントサイズの部分を説明してきましたが、その他いろいろとカスタマイズできる項目があり、多岐にわたるため、theme.jsonの基本構造や編集のコツを書いておきます。

theme.jsonの構造

theme.jsonは大まかに以下のような大項目に分かれています。これを理解しておくと、編集しやすくなります。

theme.json編集のコツ

theme.jsonはPHPやCSS、JSファイルと違い、コメントを残したり、不要な部分をコメントアウトすることはできません。また、括弧などの扱いも慎重に行う必要があり、間違っていると何も読み込んでくれなくなります。

従って、唯一どの部分？ということを知る頼りになるのは、タブ送りだけということになります。

theme.jsonを見ると、各項目がきれいにタブ（空白）の数で整頓されていて、同じタブ送り数のものは同じ項目を指定しているものとして見やすくなっていますから、この構造を壊さないようにすると、編集ミスが起きにくくなります。

また、いろいろな項目の指定を眺めているうちに、例えばリンクの扱いなど、利用できるオプション項目なども見えてきますので、いろいろと触ってみるのが一番だと思います。

【おまけ】PHPからtheme.jsonを上書きできるようにしておく

json形式のファイルに書くコードは、PHPのそれと比べて、括弧の使い方や「,」の使い方など結構厳格な印象があります。

テーマファイルエディターで編集する分には、エディターの検証機能によって、誤っていると思われる個所については指摘してもらえるので都度やり直すという方法でもいいかも知れませんが、カスタマイズ慣れしている方はPHPで編集できたらいいのに．．と思うことも多いでしょう。

WordPressではきちんとその辺が考慮されていて、フックを使ってtheme.jsonをPHPから上書きできるようになっていますので、以下のページを参考に設置しておくといいかも知れません。

この方法を使った場合、theme.jsonへ既に行っている変更は完全に上書きされて無効になりますので、どちらで編集するかを決めた方がいいでしょう（個人的には直接jsonファイルを触った方がいいと考えますので【おまけ】としています）

テンプレートを編集する

ブログ一覧となるトップページ用テンプレートやその他アーカイブのテンプレートは、クエリーループブロックを使ってタイル状に表示されるようになっているので、それなりな形になってますし、何よりブログ形式のサイトでは、それらを見て投稿を探す．．というよりは、何かの投稿に検索経由で来て、「トップページってどうなってるの？」と自分のサイトの参考になれば．．という感じで見られていることが多いように感じますので、トップページやアーカイブページのスタイルはある程度有用な投稿が増えてからでもよく、後回しにしてもいいと個人的には思います。

もっと言えば、ブログサイトへ検索エンジン経由で訪問する場合、トップページがヒットして．．というのは考えにくいのを考えても、別にどうでもいい（ちょっと言いすぎか？）ような気もします。

逆に肝心なのは、投稿や固定ページのテンプレート。訪問してくれた稀有な方が、さっととじてしまうことがないよう、それなりな形にしておいた方がいいと思います。

しかしながら、TT3の投稿や固定ページのデフォルトテンプレートは「固定概念にとらわれず自由に編集してほしい（と勝手に思ってます）」という意図のもと、すごくシンプルな作りになっていますからちょっと工夫したいもの。

最後に投稿や固定ページのテンプレートをオーソドックスな右サイドバー風スタイルにする方法を紹介しておきます。

と言ってもなかなか一からというのは難しいと思いますので、投稿や固定ページのテンプレートの内容をすべて削除する、もしくは新しくテンプレートを作ります。

次にカスタムHTMLブロックを1つ挿入して、以下のコードを貼り付けてください。

<!-- wp:template-part {"slug":"header","theme":"hatwentytwentythree","tagName":"header"} /-->

<!-- wp:spacer {"height":"1rem"} -->
<div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<main class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"1%"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"70%","backgroundColor":"ha-white","className":"page-column","layout":{"type":"default"}} -->
<div class="wp-block-column page-column has-ha-white-background-color has-background" style="flex-basis:70%"><!-- wp:group {"tagName":"article","style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"20px","right":"20px"}},"border":{"width":"1px","color":"#abb8c3","radius":"4px"}},"layout":{"type":"constrained"}} -->
<article class="wp-block-group has-border-color" style="border-color:#abb8c3;border-width:1px;border-radius:4px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:post-title {"level":1} /-->

<!-- wp:post-date {"textAlign":"right"} /-->

<!-- wp:post-terms {"term":"category","textAlign":"right"} /-->

<!-- wp:post-featured-image /-->

<!-- wp:post-content /-->

<!-- wp:post-author {"showBio":true,"isLink":true,"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}}} /-->

<!-- wp:group {"tagName":"aside","layout":{"type":"constrained"}} -->
<aside class="wp-block-group"><!-- wp:comments -->
<div class="wp-block-comments"><!-- wp:comments-title /-->

<!-- wp:comment-template -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
<div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"fontSize":"small"} /-->

<!-- wp:comment-edit-link {"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:comment-content /-->

<!-- wp:comment-reply-link {"fontSize":"small"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:comment-template -->

<!-- wp:comments-pagination /-->

<!-- wp:post-comments-form /--></div>
<!-- /wp:comments --></aside>
<!-- /wp:group --></article>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"29%","backgroundColor":"ha-white","className":"page-column"} -->
<div class="wp-block-column page-column has-ha-white-background-color has-background" style="flex-basis:29%"><!-- wp:group {"tagName":"aside","style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"12px","right":"12px"}},"dimensions":{"minHeight":"px"},"border":{"width":"1px","color":"#abb8c3","radius":"4px"}},"layout":{"type":"constrained"}} -->
<aside class="wp-block-group has-border-color" style="border-color:#abb8c3;border-width:1px;border-radius:4px;min-height:px;padding-top:20px;padding-right:12px;padding-bottom:20px;padding-left:12px"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">サイト内検索</h3>
<!-- /wp:heading -->

<!-- wp:search {"label":"","width":100,"widthUnit":"%","buttonText":"検索","fontSize":"small"} /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">カテゴリー</h3>
<!-- /wp:heading -->

<!-- wp:categories {"showPostCounts":true} /--></aside>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></main>
<!-- /wp:group -->

<!-- wp:spacer {"height":"1rem"} -->
<div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:template-part {"slug":"footer","theme":"hatwentytwentythree","tagName":"footer"} /-->

貼り付けたら、そのカスタムHTMLブロックを選択して、ブロックツールバーの三点リーダー（点が縦に3つ並んだボタン）をクリックし、「ブロックへ変換」をクリックしてください。

どうでしょう？右サイドバースタイルのテンプレートが出来上がりましたか？

このテンプレートは幅1200px、そのうち70%(840px)の本文と29%(348px)のサイドバーという作りになっていますので、あとはサイト幅（theme.jsonのワイド幅）と合わせたり、本文やサイドバーのパディング（内側の隙間）を調整したり、いろいろな部品の調整や挿入をすれば、右サイドバーデザインの投稿テンプレートは完成です。

ブロックテーマには、クラシックテーマのように「ウィジェットエリア」「ウィジェット」という概念はありませんから、このような作りになります

固定ページは、簡単に言えば、投稿テンプレートから「公開日」や「カテゴリー」を除いたものなので投稿テンプレートをコピーしてそれらを削除すれば同じレイアウトのものが簡単に完成します。

もしも何か失敗したら、サイトエディターの「すべてのテンプレートを管理」から、投稿（固定ページ）のテンプレート右の三点リーダーをクリックして「カスタマイズをクリア」をクリックすれば、TT3デフォルトのテンプレートに戻すことができます

こうして形になったものからなら、何とかなりそうですよね（そうでもない？）。