WordPressの白紙テーマ「hakushi」

WordPressでウェブサイトを作り、テーマファイルをカスタマイズする機会、というのは今でも時々あります。

その都度、問題になるのが、何のテーマファイルをベースにするのか問題です。

デフォルトのテーマは、最新の機能が盛りだくさんになっていて、ソースコードを見ても何の事だかわからない記述が結構あります。

シンプルなテーマを選んでも、CSSに癖があったり、あまり使わない機能が盛り込まれていたりでそれらを整理するのに結構時間がかかります。なんだかんだとそれで凌いできましたが、改めて自分用のWordPressの白紙テーマを作ろうと思い立ちました。

2012年にも同じことをやって、しかも途中で投げ出していましたが、もう一度チャレンジしてみます。

サンプル

https://albedo26.com/hakushi/

ダウンロード

hakushi

ベーステーマ

元々のベースファイルは、「underscores」を使いました。

「underscores」もカスタマイズを前提とした、WordPressのベースになるテーマファイルという位置づけです。これをベースに自分仕様にしていきます。

よくわからないファイルや設定が結構残っていますが、とりあえず残してあります。

フレームワーク

CSS

CSSのフレームワークは、「UIKit」にしました。CSSのフレームワークで有名なbootstrapはよく知らないんですが、この間UIKitを使ったらすごく便利でした。もう少し日本語ドキュメントが増えるとありがたいです。

ファイルはCDNで読み込みます。

基本的にUIKitだけ使ってCSSを組むようにしました。

functions.php

  
  	wp_enqueue_style( 'UIKit-css','https://cdn.jsdelivr.net/npm/uikit@3.7.6/dist/css/uikit.min.css' , '', '', 'all' );
    wp_enqueue_script( 'UIKit-js','https://cdn.jsdelivr.net/npm/uikit@3.7.6/dist/js/uikit.min.js' , '', '', true );

ブレイクポイント

ブレイクポイントはパソコン（pc）、タブレット（tab）、スマートフォン（sp）の3つをmax-widthで用意しています。

css/_variables.scss

  
    $pc: 1024px; // PC
    $tab: 680px; // タブレット
    $sp: 480px;  // スマホ

使用する場合。

css/styles.scss

  
    @use 'variables' as VB;

    @include VB.sp{
      font-size:14px;
    }

アイコン

アイコンは、Google Fonts Material IconsのOutlinedを読み込んでいます。

UIkitにもアイコンの用意はありますが、数が少ないので、Material Iconsを使っています。いくつかの種類があるなかで、塗り潰しが少ないアウトライン（Outlined）を選びました。その他に、丸みを帯びたアイコン、2色トーンのアイコンなどがあります。

functions.php

  
  	wp_enqueue_style( 'Google-material-icons','https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined' , '', '', 'all' );

フォント

「Google Fonts」の「Noto Sans Japanese」の400、700をCDNで読み込むようにしています。

初期状態では無効にしています。有効にする場合は、functions.phpのコメントアウト（//）を外してください。

functions.php

  
  	//wp_enqueue_style( 'Google-fonts','https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap' , '', '1.0', 'all' );

メニュー

header-menuとfooter-menuの二つがテンプレートの中に入っています。使用する場合は、［外観］ > ［メニュー］から、header-menuとfooter-menuを作ってください。使用しない場合は、テンプレートからwp_nav_menuを削除してください。

header.php

  
	$hakushi_menu = array(
		'menu' => 'header-menu',
		'theme_location' => 'header-menu',
		'container' => 'div',
		'container_class' => 'uk-hidden-touch',
		'menu_id'        => 'header-menu',
		'menu_class' => 'uk-flex uk-list',
	);
	wp_nav_menu( $hakushi_menu );

footer.php

  
	$footer_menu = array(
		'menu' => 'header-menu',
		'theme_location' => 'header-menu',
		'container' => 'div',
		'container_class' => 'uk-hidden-touch',
		'menu_id'        => 'header-menu',
		'menu_class' => 'uk-flex uk-list',
	);
	wp_nav_menu( $footer_menu );

	$slide_menu = array(
		'menu' => 'header-menu',
		'theme_location' => 'header-menu',
		'container' => 'div',
		'container_class' => '',
		'menu_id'        => 'header-menu',
		'menu_class' => 'uk-flex',
	);
	wp_nav_menu( $slide_menu );

ファイル構成

準備中

リリース

2021/10/31
最初のバージョン。色々気になるところはあるけど、とりあえず公開してしまおう。