【HABONE】テーマを3.2へ更新しました

公開日：2022年6月8日

カテゴリー:テーマ更新情報

【HABONE】テーマをバージョン3.2へ更新しました。

更新内容を確認の上、以下の手順に従って更新を行ってください。

本ページのもくじ

1 テーマの更新方法
2 子テーマの使用をおすすめしています
- - 2.0.1 【HABONE】子テーマのダウンロード
3 【HABONE】テーマを使用した感想をお聞かせください
4 バージョン3.2の変更内容

ページ上部へ戻る▲

テーマの更新方法

新しいバージョンのテーマを上書きインストールすることで更新できます。

親テーマ（【habone】）へカスタマイズを行っている場合は、更新を行うことでカスタマイズ内容が消失します。
親テーマへ何等かのカスタマイズをされている方は、「Download Theme」プラグインなどを使って一旦テーマのバックアップを取り、更新後にカスタマイズ内容を復元（バックアップから該当箇所のコピーをするなど）してください。

【HABONE】では更新ごとにカスタマイズ内容の復元をしなくてもよいよう、子テーマの使用をおすすめしています

以下の手順に従って更新してください。

１．【HABONE】の最新バージョンをダウンロードします

11 ダウンロード

２．サイトの管理画面から「外観」をクリックします

３．「新規追加」をクリックします

４．「テーマのアップロード」をクリックします

５．「ファイルを選択」をクリックし、ダウンロードしたパソコン上の更新ファイルを選択します

６．「今すぐインストール」をクリックします

７．以下のような画面になるので、「アップロードしたもので現在のものを置き換える」をクリックします

ページ上部へ戻る▲

子テーマの使用をおすすめしています

【HABONE】テーマでは子テーマの使用をおすすめしています

子テーマのダウンロードは以下から行っていただけます（インストール方法は親テーマと同じです）

【HABONE】子テーマのダウンロード

7 ダウンロード

親テーマ・子テーマとも無料でダウンロードして使用いただけますが、今後もテーマ開発や更新を続けられるよう、こちらのページで支援をお願いしています。ご協力よろしくお願いいたします。

ページ上部へ戻る▲

【HABONE】テーマを使用した感想をお聞かせください

この度は【HABONE】テーマをご使用いただきありがとうございます。今後のテーマ作成や更新に役立てるため、ご意見をお聞かせください。

いただいたご意見は、一度管理者である「ひまあーと」にて確認させていただき、トップページ内で紹介させていただくことがあります

ページ上部へ戻る▲

バージョン3.2の変更内容

テーマの動作要件を変更しました

既にテストおよび開発環境をWordPress6.0にしており、以前の必須バージョン5.9ではテストを行っていないため、テーマの必須バージョンを6.0へ変更しました。

これにより、WordPressバージョンが5.9.3以前のサイトでは本テーマのインストール（新規および更新）ができなくなりました。

今後【HABONE】テーマをお使いになる際には、WordPressのバージョンを6.0またはそれ以降へ更新してください。

どうしてもという場合にはstyle.cssのRequires at least:項目を変更すればインストール可能ですが、動作は保証しません

カラムブロックのパディング・マージン調整

theme.jsonへ記述を追加し、カラムブロックのパディング（内側の隙間）とマージン（外側の隙間）の指定をできるようにしました。

幅広・全幅を選択したときの修正

カバーブロック・画像ブロック・段落ブロックなど、「幅広」「全幅」が選択できるブロックについて、CSSの調整を行いました。

サイドバーありのテンプレート（デフォルトテンプレート）では、「幅広」「全幅」は選択はできますが、機能しないようにしています。

pc-style.css

/***** ブロックの幅調整 *****/
/*** サイドバーありの場合 ***/
/* full wideともコンテンツ幅を最大値にする */
.contents .alignfull{
	margin-left: inherit;
    margin-right: inherit;
	max-width:100%;
}

.contents .alignwide{
	margin-left: inherit;
    margin-right: inherit;
	max-width:100%;
}

/*** サイドバーなしの場合 ***/
/* 全幅 */
.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

/***** カバーブロック内コンテンツの幅を制限 *****/
.contents-narrow .wp-block-cover__inner-container {
    max-width: 880px;
}

.contents-full .wp-block-cover__inner-container {
    max-width: 1260px;
}

mobile-style.css

/***** カバーブロックの全幅 *****/
.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

.contents-narrow .wp-block-cover__inner-container {
    max-width: 100%;
}

.contents-full .wp-block-cover__inner-container {
    max-width: 100%;
}

スペーサーブロックに選択肢を追加、ブロック認識度の改善

スペーサーブロックのデフォルト値が100pxとなっており、挿入後に変更することが多いので、デフォルトで以下のサイズが指定できるようにしました。

また、スペーサーブロックが挿入されていることがわかりにくいため、薄い背景色を付け、「Spacer block is inserted」という文字を表示するようにしました（この色や文字はフロントエンドでは何も表示されません）

2em・・・2文字分の高さ
4em・・・4文字分の高さ
30px
60px

編集画面でスペーサーブロックを挿入すると以下のように表示されます。

この機能はスタイルに「!important」属性を付与して強制的に適用していますので、ひょっとするとCLS等に影響があるかもしれません。

スペーサーブロックがファーストビューに入る可能性は低いので問題はないかと思いますが、気になる方はこのボタンの使用を控え、お好みのスペースを作成して再利用ブロックへ登録するなどして使用してください。

ショートコードの使い方を見るリンクを別タブで開くようにしました

今まではボタンクリック時に同一タブ内で遷移していたショートコードの「使い方を見る」を、別タブで表示するようにしました。

投稿・固定ページ本文末尾へ「ページ上部へ戻る」リンクを表示させるようにしました

本テーマでは設定により、ページ右下隅へページ上部へ戻るためのボタンを設置できるようになっています。

しかしながら、訪問者がこのボタンに気付かず、ページ上部へ戻って再閲覧したいときに自力でスクロールする方がいると思います。

これを少しでも解消するため、投稿・固定ページの本文最下部へ「ページ上部へ戻る」リンクを表示させることとしました。

本機能には表示／非表示の切り替えがありませんので、非表示にしたい場合には、子テーマのCSSまたはテーマカスタマイザーの追加CSSへ以下を追加ください。

.bttop-uc {
    display: none;
}

また、次項の自動リンクと併用することで、ページ内の各所から簡単にページ上部へ戻ることができるようになり、アクセシビリティ向上に役立つと思いますのでぜひ活用ください。

H2見出し上に自動で「ページ上部へ戻る」リンクを追加できるようにしました

長い投稿や固定ページで、訪問者のスクロール操作を楽にするアクセシビリティ向上のための措置として、すべてのH2タグ上にページ冒頭へ戻るためのリンクを自動表示できるようにしました。

投稿、固定ページに対して、テーマカスタマイザーから、「表示設定」→「その他」で有効／無効の切り替えができるようにしています（デフォルトは無効）。

なお、「ページ上部へ戻るリンク（投稿）」を有効にした場合、すべての投稿とカスタム投稿タイプに対してリンクが表示されますので、投稿と特定のカスタム投稿タイプのみに限定して自動表示をする場合は、子テーマのfunctions.phpへ以下を追加し、「カスタム投稿タイプ」の部分へ適用させる投稿タイプを指定してください。

/***** 投稿のH2タグ上に共通コンテンツ *****/
function habone_add_back_to_top_content_before_all_h2_post($the_content) {
	if (is_singular(array('post','カスタム投稿タイプ'))) {
		$back_content_text = __('>>Back To Top','habone');
		$back_content = '<p class="inline-back-to-top"><a href="#page-head">'.$back_content_text.'</a></p>';
		$back_h2 = '/<h2.*?>/i';//H2見出しのパターン

	if ( preg_match( $back_h2, $the_content, $back_h2s )) {//H2見出しが本文中にあるかどうか
		$the_content  = preg_replace($back_h2, $back_content.$back_h2s[0], $the_content);//H2を置換
	}
	}
  return $the_content;
}

この機能を【HABONE】テーマ以外で実装したい方は、「すべてのH2タグ上へ「ページ上部へ戻る」リンクを表示させる方法（メモ）」を参考にしてください。

ページ上部へ戻る▲