【HABONE】テーマを更新しました(バージョン1.3.1)

【HABONE】テーマを更新しました(バージョン1.3.1)

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

主な変更・修正項目は以下の通りです(リンクをクリックすると詳細をご覧いただけます)

本記事はせっかく設定できるようにしたシングルカラム(サイドバーなし)で表示させています

追加した機能

不具合や調整

【HABONE】本体のダウンロード

8 ダウンロード

テーマの更新方法

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

親テーマ(【habone】【HABONE BASE】)へカスタマイズを行っている場合は、親テーマの更新を行うことでカスタマイズ内容が消失したり、カスタマイズ内容によっては動作しなくなったりすることがありますのでご注意ください。

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

手順は以下の通りです。

1.管理画面から「外観」をクリックします

2.「新規追加」をクリックします

【HABONE】テーマを更新しました(バージョン1.3.1)|HABONE

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

【HABONE】テーマを更新しました(バージョン1.3.1)|HABONE

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

【HABONE】テーマを更新しました(バージョン1.3.1)|HABONE

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

【HABONE】テーマを更新しました(バージョン1.3.1)|HABONE

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

【HABONE】テーマを更新しました(バージョン1.3.1)|HABONE

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

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

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

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

9 ダウンロード

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

7 ダウンロード

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

使用した感想をお聞かせください

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

感想をお寄せください

 
 
 
 
 
 
「*」の付いた項目は必須入力項目です
・投稿元のIPアドレスとホスト名が記録されます(スパム対策に使用します)
・「ひまあーと」によって投稿内容を承認した後、トップページ内で一般公開します(不適切と判断したものについては承認せず、投稿は表示されません)
・管理者の判断により、投稿を編集・削除することがあります
・メールアドレスを入力いただかないようにしているため、投稿の確認、公開時の確認メール等は送信しません

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

【HABONE】1.3での変更・修正内容詳細

ホームページのヘッダーカスタマイズ機能追加

固定ページをトップページにした場合、もしくは通常のブログ一覧がトップページの場合に、トップページのヘッダー部分で以下のようなカスタマイズができるようにしました。

  • ヘッダーナビ(グローバルナビ)の位置変更
  • ヘッダー画像の代わりに3枚の画像をスライド表示
  • サイトタイトルとキャッチフレーズをヘッダー画像内へ表示

ヘッダーナビ(グローバルナビ)の位置変更

デフォルトでヘッダー画像上に表示されるヘッダーナビ(グローバルメニュー)をヘッダー画像下へ移動できるようにしました。

ヘッダー画像のスライド表示機能を追加(※1)

ヘッダー画像を従来の固定画像にするか、3枚の画像をフェード&拡大しながら入れ替わる疑似スライダーにするかの選択をできるようにしました。

カスタマイザー上で幅1280px x 高さ500px以上の画像

※1 今回実装したヘッダー画像スライダーは、ページ読み込み速度やCoreWebVitals(CWV)への影響を考え、JavaScriptなどを使った画像の切り替えではなく、CSSのみで切り替えを行う「疑似スライダー(ひまあーと命名)」を実装しています。不具合が出る場合には使用しないようにしてください。
本機能についてはcssだけでズームしながらふわっと表示が切り替わるスライドショーを作るを参考にさせていただき、【HABONE】テーマに合うよう調整・実装しました。

ヘッダー画像内へサイトタイトルとキャッチフレーズを表示

ヘッダー画像が設定されている、またはスライダーが有効な場合には、画像の中央へタイトルとキャッチフレーズが表示できるようになります。


これらの設定変更はテーマカスタマイズへ新設した「色とデザイン」の中の「ヘッダーとフッター」および「ヘッダーレイアウト」でいろいろと調整できるようにしています。

もちろん、従来からあった、ヘッダー画像の高さ指定についても、固定画像・スライダーに関わらず、そのまま適用できます(タイトル等を画像内に表示する場合には画像の高さに応じてきちんと中央に表示されるようにしています)。

仕様上ヘッダーを画面幅いっぱいにした場合には画面幅に応じてヘッダー画像(またはスライダーの画像)が横長になりますので、いろいろと変更しながらベストな形にしてください

デフォルト画像を用いた各所の出力修正

テーマカスタマイザーの「色とデザイン」→「その他」項目に「サイトデフォルト画像」という項目を追加しました。

ここで設定した画像はテーマ内の以下の部分で使用されます

  • OGP画像タグ
  • 構造化データの画像タグ
  • ヘッダーメタデータの画像タグ

また、この項目の設定有無や条件などにより、以下のように画像が出力されます。

個別の固定ページ・個別の投稿

  1. アイキャッチ画像があればアイキャッチ画像を出力
  2. アイキャッチ画像がなければ「サイトデフォルト画像」を出力
  3. 「サイトデフォルト画像」もなければ、テーマデフォルト画像を出力

個別の固定ページ・個別の投稿以外(ホームやアーカイブ)

  1. 「サイトデフォルト画像」を出力
  2. 「サイトデフォルト画像」がなければ、テーマデフォルト画像を出力

構造化データの画像出力変更

前項のページ画像出力変更と同時に、作者画像の出力方法を、そのページの作者の画像URL(グラバターのURL)が出力されるようにしました。

当テーマが推奨するアバター変更プラグイン「Simple Local Avatars」を使ってメディア内の画像をユーザー画像として登録できるようにしている場合は、その画像が作者画像として扱われます

コメントフォームの色設定見直し

コメントフォームの以下の部分について、個別で設定できるようにしました

※設定はテーマカスタマイザーの「色とデザイン」→「本文とサイドバー」に追加しています

  • コメントフォーム、メールアドレス、名前部分の入力窓枠線色
  • コメントフォーム、メールアドレス、名前部分の入力窓背景色
  • コメントフォーム、メールアドレス、名前部分の入力窓文字色

構造化データ出力の調整

作者情報の出力

エラーが出ているわけではありませんが、構造化データで、「作者のURL」の出力が推奨されるようになりましたので、以下のように出力させるようにしました。

  1. ユーザープロフィールの「サイト」欄に入力があればそれを出力
  2. 入力がなければサイトのURLを出力

画像の出力方法を修正

初期フォントの不具合対応

インストール時からフォント種を選択していない場合に文字種の指定がされていない不具合を解消しました。

インストールデフォルトはゴシック体で以下の順に適用されます。

body {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

「前のページへ戻る」リンクの表示

サイト内で2ページ以上閲覧した際にのみブラウザの「戻る」ボタンと似た機能を持つ機能です。

カスタマイザーで有効化することにより、投稿本文下へ「前ページへ戻る」リンクを自動表示します。

また、無効化した状態でも以下のショートコードを任意の場所へ挿入すれば機能します。

[return-page]

このページ以外を見てから、このページを表示したとき、↓↓のように表示されます。

本機能は以下のページで掲載されていたコードを参考に実装し、ショートコードで出力できるようにしました。

PHPで「前のページに戻る」を実装

WordPressで1つ前に戻るボタンを設置する方法

なお、本機能を他のテーマで使えるようにするには以下のコードをテーマの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用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球