テーマファイルについて

UNDERSCORES BASED THEMEで学ぶ

更新日:

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

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

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

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

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

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

UNDERSCORES BASED THEMEブランクテーマを利用して作成したサイト
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';

おすすめサイト

オレインデザイン

これまで培った技術力と運営力でお客様のホームページを強力なビジネスツールにするために全力でサポートします。

「WEBの知識がない」という方にも丁寧でわかりやすい説明をお約束します。

ブランクテーマunderscoresをカスタマイズする際のおすすめサイトはオレインデザインです。

underscoresカスタマイズページ

https://olein-design.com/blog/tag/underscores

SlideShare

Share what you know and love through presentations, infographics, documents and more (SlideShares)

UnderScoreとbootstrapとsassでword pressのテーマをつくろう

Tips Note by TAM

TAM のテクニカルチームがお届けする WEB技術ブログ!(Underscore.jsの使い方Tips Note by TAM

Tips Note by TAM

明日色Web

集客効果のあるホームページ、ネットショップ、業務効率化のためのアプリ制作を行います。
ホームページ制作やショップ運営上の問題解決など、お気軽にご相談下さい。(明日色Web

Sassの学習に便利!UnderscoresでWordPressテーマ作成(gulp4 環境構築編)

Gatespace's Blog

ニッチなWordPressとAWS徒然日記

スターターテーマ _s を使ってWordPressのテーマをつくる(準備編)

WordPressスターターテーマ _s の Sassオプション

おすすめ参考情報サイト

みやしもブログ

みやしもブログでは、ブログ運営・WEB制作・プログラミングなど、
初心者でも学べるコンテンツを幅広く発信してゆきます。

sass・scssとは?導入方法や使い方を解説する【Win/Mac対応】

ウェブさえ

ウェブさえとは

このブログは、webサイトの企画・制作が得意な株式会社ウェブさえが運営しています。
「ウェブさえあれば」を語源かつコンセプトとし、生活やビジネスに役立つWeb活用術を更新してます。

WooCommerceの使い方、わりと簡単。日本語対応テーマあり

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

システムの構築や保守運用のサービスを主軸として、 システム全般を行うベンチャー企業になります。
インフラからサーバまで運営保守まで一環して行っております。

【コピペで使える】 スマホメニューテンプレートまとめ、サンプルデモ

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

WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

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

https://web-creators-tips.com/matome/category/mini/mini-float/

西沢直木のIT講座

WordPress関数のbody_classが出力するクラス名にページのスラッグを追加する方法

body_classのクラス名にページのスラッグを追加する

備忘録

オレインデザインさんのサイト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>

-テーマファイルについて

Copyright© WordPressの始め方 , 2022 All Rights Reserved.