UNDERSCORES BASED THEMEで学ぶ

テーマ自作を学ぶためのブランクテーマとして、UNDERSCORES BASED THEMEを選びました。

最小限の CSS で事前のスタイル定義もほとんどないとのことだったからです。

いろいろと学んでから始めたつもりだったのですが、いかに自分がワードプレスを知らなかったかを実感する毎日です。

先人の方々の参考サイトと、作業備忘録を掲載していますのでよろしければ参考にしてください。

基本的な部分のみ作成した修正点満載のサイトですが、作成したテーマを使った現時点でのサイトは下記のリンクをご参照ください。

今後、勉強を兼ねて機能追加とスタイル調整を行う予定です。

UNDERSCORES BASED THEMEブランクテーマを利用して作成したサイト

実際の作業は、下記おすすめサイトで紹介しているオレインデザインの、

underscoresカスタマイズページを参考に進めカスタムメニューの作成からモバイル対応まで行っています。

UNDERSCORES BASED THEME

テーマファイルダウンロード先のGITHUBリンクはこちらです。

UNDERSCORES BASED THEME　README.md

A modern workflow with a pre-made command-line interface to turn your project into a more pleasant experience.
A just right amount of lean, well-commented, modern, HTML5 templates.
A custom header implementation in inc/custom-header.php. Just add the code snippet found in the comments of inc/custom-header.php to your header.php template.
Custom template tags in inc/template-tags.php that keep your templates clean and neat and prevent code duplication.
Some small tweaks in inc/template-functions.php that can improve your theming experience.
A script at js/navigation.js that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in functions.php.
2 sample layouts in sass/layouts/ made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in sass/style.scss. Note: .no-sidebar styles are automatically loaded.
Smartly organized starter CSS in style.css that will help you to quickly get your design off the ground.
Full support for WooCommerce plugin integration with hooks in inc/woocommerce.php, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.
Licensed under GPLv2 or later. 🙂 Use it to make something cool.

カスタムヘッダー実装

コードの実際は/inc/custom-header.phpに存在【※】するので必要に応じてパラメーターを変更する。

【※】functions.phpより呼び出している。

ヘッダーを表示させたい個所にコメント欄記載の下記コードを挿入する。

<?php the_header_image_tag(); ?>

// width height指定の場合は、下記コードを挿入
 <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />

incフォルダ配下phpファイル

function.phpファイルより呼び出されるincフォルダー配下の機能は以下の通り。

/**
 * Implement the Custom Header feature.
 */
require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

備忘録

オレインデザインさんのサイトhttps://olein-design.com/blog/tag/underscoresをもとに作業を進めています。

カスタムヘッダー～カスタムメニュー～2カラムレイアウトまで

layoutsフォルダーが無い

公式サイト：https://underscores.me/　のジェネレーターを使用しない。

Github ：　https://github.com/Automattic/underscores.me　よりzipファイルをダウンロードして使う。

css反映されない

/layouts/content-sidebar.cssクラス名変更

site-contentをsite-mainへ変更。

/*
Theme Name: Underscores.me
Layout: Content-Sidebar
*/

/*site-content {
	float: left;
	margin: 0 -25% 0 0;
	width: 100%;
}
*/
.site-main {
	float: left;
	margin: 0 -25% 0 0;
	width: 75%;
}

cssファイルバージョン設定

現状出力されるlinkタグは下記。

s?ver=221113031000は、2022年11月13日03時10分（JST）更新を示す。

<link rel='stylesheet' id='test-layout-content-sidebar-css' href='https://seodouga.info/classic/wp-content/themes/test/layouts/content-sidebar.css?ver=221113031000' media='' />

wp_enqueue_style()関数の$ver（文字列|真偽値）（オプション）に、

date('ymdHis', filemtime('CSSのURL'))を設定しファイル更新日時をVerになるように設定する。

wp_enqueue_style( 'test-layout-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css','',date('ymdHis', filemtime( get_template_directory().'/layouts/content-sidebar.css' )),''  );

contentsエリアの表示が重なる

サイドバーエリアが25%となっていたので、width: 75%;とする。

.site-main {
	float: left;
	margin: 0 -25% 0 0;
	width: 75%;
}

サイドバーが表示されない。

ウィジット表示エリアのみなので、カレンダーウィジットなどを設定しておく。

ナビゲーションバーの子要素の動作が不明

ナビゲーションバーの子要素　孫要素の表示方法が不明。

Qiita

hoverすると表示されるメニュー

親メニューをhoverしたとき、子要素を表示

ul.global_menu > li:hover ul{ /*親メニューをhoverしたとき、子要素を表示 セレクタの使い方注意*/
    display: block;
    background: red;
}

TechMemo

開いているページのナビゲーションには、「current_page_item」というクラスが追加される。

WordPressのカスタムメニューで開いているページのみ装飾を変更する方法(カレント表示)

Mmdn web doc(css left positionプロパティ)

leftプロパティ

positionプロパティ

WordPress Development Stack Exchange

In the function wp_page_menu there is an auto-generated classes to the list elements and the function generates current_page_parent and current_page_ancestor to a parent menu item if I clicked a child menu item (I mean if the current page is the child menu element). So now why does WordPress generate two different classes for the same element.

What is the difference between current_page_parent and current_page_ancestor?

ナビゲーションバーのモバイル化

オレインデザインさんの_s(underscores)のナビゲーションをモバイルファーストのレスポンシブデザインにしてみるをもとに作業実施。

PC タブレット用ナビメニューは、_s(underscores)のナビゲーションをカスタマイズするをそのまま使用し、PC　タブレット　モバイルクエリ内で非表示に変更。

/*---メディアクエリ pc tablet menu ----*/
@media screen and (min-width: 768px) {

/*pc tablet用menu -----------------
*/
button.menu-toggle {
	display: none;
  }

親メニューがクリック出来ない

テストデーターで作成されたメニューの内、親メニューがクリック出来ない。

親メニュータッチイベントリスナー登録回避ロジック部分をコメント

親メニュータッチイベントリスナー登録回避ロジック部分をコメントにする。

（//comment 20221115～）

	// Get all the link elements within the menu.
	const links = menu.getElementsByTagName( 'a' );

	// Get all the link elements with children within the menu.
	const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

	// Toggle focus each time a menu link is focused or blurred.
	for ( const link of links ) {
		link.addEventListener( 'focus', toggleFocus, true );
		link.addEventListener( 'blur', toggleFocus, true );
	}
//comment 20221115
	// Toggle focus each time a menu link with children receive a touch event.
//	for ( const link of linksWithChildren ) {
//		link.addEventListener( 'touchstart', toggleFocus, false );
//	}
// comment end
	/**
	 * Sets or removes .focus class on an element.
	 */
	function toggleFocus() {
		if ( event.type === 'focus' || event.type === 'blur' ) {
			let self = this;
			// Move up through the ancestors of the current link until we hit .nav-menu.
			while ( ! self.classList.contains( 'nav-menu' ) ) {
				// On li elements toggle the class .focus.
				if ( 'li' === self.tagName.toLowerCase() ) {
					self.classList.toggle( 'focus' );
				}
				self = self.parentNode;
			}
		}

		if ( event.type === 'touchstart' ) {
			const menuItem = this.parentNode;
			event.preventDefault();
			for ( const link of menuItem.parentNode.children ) {
				if ( menuItem !== link ) {
					link.classList.remove( 'focus' );
				}
			}
			menuItem.classList.toggle( 'focus' );
		}
	}
}() );

JSファイルのバージョンを設定する

jsファイルがキャッシュされないようにバージョン設定する。

wp_enqueue_script( 'test-navigation', get_template_directory_uri() . '/js/navigation.js', array(), date('ymdHis', filemtime( get_template_directory().'/js/navigation.js' )), true );

読み込み個所。

<script src='https://********.***/classic/wp-content/themes/test/js/navigation.js?ver=221115070500' id='test-navigation-js'></script>

UNDERSCORES BASED THEME

UNDERSCORES BASED THEME　README.md

カスタムヘッダー実装

incフォルダ配下phpファイル

おすすめサイト

オレインデザイン

SlideShare

Tips Note by TAM

明日色Web

Gatespace's Blog

おすすめ参考情報サイト

みやしもブログ

ウェブさえ

システムガーディアン株式会社

Webデザインまとめんばーず

西沢直木のIT講座

備忘録

カスタムヘッダー～カスタムメニュー～2カラムレイアウトまで

layoutsフォルダーが無い

css反映されない

/layouts/content-sidebar.cssクラス名変更

cssファイルバージョン設定

contentsエリアの表示が重なる

サイドバーが表示されない。

ナビゲーションバーの子要素の動作が不明

Qiita

TechMemo

Mmdn web doc(css left positionプロパティ)

WordPress Development Stack Exchange

ナビゲーションバーのモバイル化

親メニューがクリック出来ない

親メニュータッチイベントリスナー登録回避ロジック部分をコメント

JSファイルのバージョンを設定する

UNDERSCORES BASED THEMEで学ぶ

UNDERSCORES BASED THEME

UNDERSCORES BASED THEME README.md

カスタムヘッダー実装

incフォルダ配下phpファイル

おすすめサイト

オレインデザイン

SlideShare

Tips Note by TAM

明日色Web

Gatespace's Blog

おすすめ参考情報サイト

みやしもブログ

ウェブさえ

システムガーディアン株式会社

Webデザインまとめんばーず

西沢直木のIT講座

備忘録

カスタムヘッダー～カスタムメニュー～2カラムレイアウトまで

layoutsフォルダーが無い

css反映されない

/layouts/content-sidebar.cssクラス名変更

cssファイルバージョン設定

contentsエリアの表示が重なる

サイドバーが表示されない。

ナビゲーションバーの子要素の動作が不明

Qiita

TechMemo

Mmdn web doc(css left positionプロパティ)

WordPress Development Stack Exchange

ナビゲーションバーのモバイル化

親メニューがクリック出来ない

親メニュータッチイベントリスナー登録回避ロジック部分をコメント

JSファイルのバージョンを設定する

UNDERSCORES BASED THEME　README.md