【HABONE】テーマを更新しました（バージョン1.3.1）
- 公開日：2021年12月27日
カテゴリー:テーマ更新情報
【HABONE】テーマをバージョン1.3.1へ更新しました。
主な変更・修正項目は以下の通りです（リンクをクリックすると詳細をご覧いただけます）
本記事はせっかく設定できるようにしたシングルカラム（サイドバーなし）で表示させています
追加した機能
不具合や調整
【HABONE】本体のダウンロード
テーマの更新方法
新しいバージョンのテーマを上書きインストールすることで更新できます。
親テーマ（【habone】）へカスタマイズを行っている場合は、更新を行うことでカスタマイズ内容が消失します。
親テーマへ何等かのカスタマイズをされている方は、「Download Theme」プラグインなどを使って一旦テーマのバックアップを取り、更新後にカスタマイズ内容を復元（バックアップから該当箇所のコピーをするなど）してください。
【HABONE】では更新ごとにカスタマイズ内容の復元をしなくてもよいよう、子テーマの使用をおすすめしています
以下の手順に従って更新してください。
１．【HABONE】の最新バージョンをダウンロードします
２．サイトの管理画面から「外観」をクリックします
３．「新規追加」をクリックします
４．「テーマのアップロード」をクリックします
５．「ファイルを選択」をクリックし、ダウンロードしたパソコン上の更新ファイルを選択します
６．「今すぐインストール」をクリックします
７．以下のような画面になるので、「アップロードしたもので現在のものを置き換える」をクリックします
子テーマの使用をおすすめしています
【HABONE】テーマでは子テーマの使用をおすすめしています
子テーマのダウンロードは以下から行っていただけます（インストール方法は親テーマと同じです）
【HABONE】子テーマのダウンロード
親テーマ・子テーマとも無料でダウンロードして使用いただけますが、今後もテーマ開発や更新を続けられるよう、こちらのページで支援をお願いしています。ご協力よろしくお願いいたします。
【HABONE】テーマを使用した感想をお聞かせください
この度は【HABONE】テーマをご使用いただきありがとうございます。今後のテーマ作成や更新に役立てるため、ご意見をお聞かせください。
いただいたご意見は、一度管理者である「ひまあーと」にて確認させていただき、トップページ内で紹介させていただくことがあります
【HABONE】1.3での変更・修正内容詳細
ホームページのヘッダーカスタマイズ機能追加
固定ページをトップページにした場合、もしくは通常のブログ一覧がトップページの場合に、トップページのヘッダー部分で以下のようなカスタマイズができるようにしました。
- ヘッダーナビ（グローバルナビ）の位置変更
- ヘッダー画像の代わりに3枚の画像をスライド表示
- サイトタイトルとキャッチフレーズをヘッダー画像内へ表示
ヘッダーナビ（グローバルナビ）の位置変更
デフォルトでヘッダー画像上に表示されるヘッダーナビ（グローバルメニュー）をヘッダー画像下へ移動できるようにしました。
ヘッダー画像のスライド表示機能を追加（※１）
ヘッダー画像を従来の固定画像にするか、3枚の画像をフェード＆拡大しながら入れ替わる疑似スライダーにするかの選択をできるようにしました。
カスタマイザー上で幅1280px x 高さ500px以上の画像
※１ 今回実装したヘッダー画像スライダーは、ページ読み込み速度やCoreWebVitals(CWV)への影響を考え、JavaScriptなどを使った画像の切り替えではなく、CSSのみで切り替えを行う「疑似スライダー（ひまあーと命名）」を実装しています。不具合が出る場合には使用しないようにしてください。
本機能についてはcssだけでズームしながらふわっと表示が切り替わるスライドショーを作るを参考にさせていただき、【HABONE】テーマに合うよう調整・実装しました。
ヘッダー画像内へサイトタイトルとキャッチフレーズを表示
ヘッダー画像が設定されている、またはスライダーが有効な場合には、画像の中央へタイトルとキャッチフレーズが表示できるようになります。
これらの設定変更はテーマカスタマイズへ新設した「色とデザイン」の中の「ヘッダーとフッター」および「ヘッダーレイアウト」でいろいろと調整できるようにしています。
もちろん、従来からあった、ヘッダー画像の高さ指定についても、固定画像・スライダーに関わらず、そのまま適用できます（タイトル等を画像内に表示する場合には画像の高さに応じてきちんと中央に表示されるようにしています）。
仕様上ヘッダーを画面幅いっぱいにした場合には画面幅に応じてヘッダー画像（またはスライダーの画像）が横長になりますので、いろいろと変更しながらベストな形にしてください
デフォルト画像を用いた各所の出力修正
テーマカスタマイザーの「色とデザイン」→「その他」項目に「サイトデフォルト画像」という項目を追加しました。
ここで設定した画像はテーマ内の以下の部分で使用されます
- OGP画像タグ
- 構造化データの画像タグ
- ヘッダーメタデータの画像タグ
また、この項目の設定有無や条件などにより、以下のように画像が出力されます。
個別の固定ページ・個別の投稿
- アイキャッチ画像があればアイキャッチ画像を出力
- アイキャッチ画像がなければ「サイトデフォルト画像」を出力
- 「サイトデフォルト画像」もなければ、テーマデフォルト画像を出力
個別の固定ページ・個別の投稿以外（ホームやアーカイブ）
- 「サイトデフォルト画像」を出力
- 「サイトデフォルト画像」がなければ、テーマデフォルト画像を出力
構造化データの画像出力変更
前項のページ画像出力変更と同時に、作者画像の出力方法を、そのページの作者の画像URL（グラバターのURL）が出力されるようにしました。
当テーマが推奨するアバター変更プラグイン「Simple Local Avatars」を使ってメディア内の画像をユーザー画像として登録できるようにしている場合は、その画像が作者画像として扱われます
コメントフォームの色設定見直し
コメントフォームの以下の部分について、個別で設定できるようにしました
※設定はテーマカスタマイザーの「色とデザイン」→「本文とサイドバー」に追加しています
- コメントフォーム、メールアドレス、名前部分の入力窓枠線色
- コメントフォーム、メールアドレス、名前部分の入力窓背景色
- コメントフォーム、メールアドレス、名前部分の入力窓文字色
構造化データ出力の調整
作者情報の出力
エラーが出ているわけではありませんが、構造化データで、「作者のURL」の出力が推奨されるようになりましたので、以下のように出力させるようにしました。
- ユーザープロフィールの「サイト」欄に入力があればそれを出力
- 入力がなければサイトのURLを出力
画像の出力方法を修正
初期フォントの不具合対応
インストール時からフォント種を選択していない場合に文字種の指定がされていない不具合を解消しました。
インストールデフォルトはゴシック体で以下の順に適用されます。
body {
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}「前のページへ戻る」リンクの表示
サイト内で2ページ以上閲覧した際にのみブラウザの「戻る」ボタンと似た機能を持つ機能です。
カスタマイザーで有効化することにより、投稿本文下へ「前ページへ戻る」リンクを自動表示します。
また、無効化した状態でも以下のショートコードを任意の場所へ挿入すれば機能します。
[return-page]このページ以外を見てから、このページを表示したとき、↓↓のように表示されます。
本機能は以下のページで掲載されていたコードを参考に実装し、ショートコードで出力できるようにしました。
なお、本機能を他のテーマで使えるようにするには以下のコードをテーマのfunctions.phpへ追加します。
/***** 前のページへ戻る *****/
/** 閲覧履歴がある場合だけ戻るボタンを表示 **/
function habone_return_page_button(){
$server_host = $_SERVER['HTTP_HOST'];
$return_url = $_SERVER['HTTP_REFERER'];
$return_btn_title = __('<< Return to the previous page','habone');
if (!empty($_SERVER['HTTP_REFERER']) && (strpos($_SERVER['HTTP_REFERER'],$server_host) !== false)) {
return '<a class="return-btn" href="' . $return_url . '">'.$return_btn_title.'</a>';
}
}
add_shortcode('return-page','habone_return_page_button');全投稿へ表示させるなら、single.php(個別投稿のテンプレート)の挿入したい場所へ以下を追加します。
<?php echo do_shortcode('[return-page]'); ?>テンプレートによってはphpの開始、終了タグが不要なものもありますので、使われているテーマソースを確認して判断ください
XML-RPC通信停止機能追加
リモート環境から投稿したり、ピンバック処理を行うために標準で有効になっている「XML-RPC通信」と「X-Pingback」機能を無効にし、この機能を用いて行われる不正ログインや改ざんを防止する機能を追加しました。
テーマカスタマイザーから「便利機能」→「セキュリティ」にある「XML-RPC通信を無効にする」にチェックを入れると有効になります。
他のプラグインとの併用や運営上不具合が出る場合はオフにしてください
ポチップ 
作者: ひまあーと（管理人）
WordPress用テーマ「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。
年齢：40代 趣味／園芸・ペット・卓球