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

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

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

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

本ページのもくじ

ページ上部へ戻る▲

テーマの更新方法

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

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

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

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

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

15 ダウンロード

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

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

【HABONE】テーマ3.6へ更新しました|HABONE

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

【HABONE】テーマ3.6へ更新しました|HABONE

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

【HABONE】テーマ3.6へ更新しました|HABONE

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

【HABONE】テーマ3.6へ更新しました|HABONE

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

【HABONE】テーマ3.6へ更新しました|HABONE

ページ上部へ戻る▲

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

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

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

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

2022年11月30日をもちまして、配布を終了しました

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

ページ上部へ戻る▲

バージョン3.6の変更点

カスタムフィールドの値を出力するショートコードを追加

[ha-field field='〇〇' post_id='××']
  • field=’〇〇’の〇〇には、カスタムフィールドのキーを入力します
  • post_id=’××’の××には、投稿IDを入力します(省略すると現在の投稿にあるカスタムフィールドの値を取得します)

参考:Get Custom Field Value with Shortcode

アコーディオン(開閉)コンテンツを作成するショートコードを追加

下記ショートコードで囲まれた、「開閉させるブロック」内のブロック(複数のブロック可)をタイトルをクリックさせることで開閉(アコーディオン)表示させることができます。

[habone-accordion title="" class="" header=""]
開閉させるブロック
[/habone-accordion]

もちろん通常通り、ショートコードブロックに囲みショートコードを挿入し、開始・終了コード間に文字列を入れれば、その部分が開閉されるようになります

パラメーターデフォルト内容
titleタイトル開閉ボタン(見出し)のタイトルを指定できます
classha-accordionCSSクラスを追加できます
「red(赤系)」「blue(青系)」「green(緑系)」「yellow(黄色系)」「dark(黒系)」を入力するとテーマにあらかじめ設定されているデザインが適用されます
headerspan開閉ボタンの文字列をspanとは別のもの(h3など)へ書き換えることができます

jQuery、CSSとも小さなファイルですが、ページ表示速度等に影響が出ないよう、ショートコードのないページでは無駄に読み込まれないようにしています。

以下この機能を使ったアコーディオンコンテンツの例です。

標準

ショートコード
[habone-accordion title="標準色のアコーディオンコンテンツ" class="" header=""]
コンテンツの中身(段落ブロックで挿入した例)
[/habone-accordion]
表示サンプル
標準色のアコーディオンコンテンツ

コンテンツの中身(段落ブロックで挿入した例)

赤系

ショートコード
[habone-accordion title="赤系のアコーディオンコンテンツ" class="red" header=""]
コンテンツの中身(段落ブロックで挿入した例)
[/habone-accordion]
表示サンプル
赤系のアコーディオンコンテンツ

コンテンツの中身(段落ブロックで挿入した例)

青系

ショートコード
[habone-accordion title="青系のアコーディオンコンテンツ" class="blue" header=""]
コンテンツの中身(段落ブロックで挿入した例)
[/habone-accordion]
表示サンプル
青系のアコーディオンコンテンツ

コンテンツの中身(段落ブロックで挿入した例)

緑系

ショートコード
[habone-accordion title="緑系のアコーディオンコンテンツ" class="green" header=""]
コンテンツの中身(段落ブロックで挿入した例)
[/habone-accordion]
表示サンプル
緑系のアコーディオンコンテンツ

コンテンツの中身(段落ブロックで挿入した例)

黄色系

ショートコード
[habone-accordion title="黄色系のアコーディオンコンテンツ" class="yellow" header=""]
コンテンツの中身(段落ブロックで挿入した例)
[/habone-accordion]
表示サンプル
黄色系のアコーディオンコンテンツ

コンテンツの中身(段落ブロックで挿入した例)

ダーク系

ショートコード
[habone-accordion title="ダーク系のアコーディオンコンテンツ" class="dark" header=""]
コンテンツの中身(段落ブロックで挿入した例)
[/habone-accordion]
表示サンプル
ダーク系のアコーディオンコンテンツ

コンテンツの中身(段落ブロックで挿入した例)

独自のカラーを追加する方法

以下のようにしてご自身で任意の配色をすることもできます。

ショートコードのclassパラメーターに任意のCSSクラス(半角英数字)を入れてコンテンツを作成します
[habone-accordion title="" class="任意のCSSクラス" header=""]
コンテンツの中身(ブロックで挿入)
[/habone-accordion]
子テーマのstyle.cssへ以下のコードを挿入し、「任意のCSSクラス」「色コード」の部分を変更します
/** 任意のCSSクラスの配色 **/
.任意のCSSクラス .ha-accordion-button {
    background: 色コード;
    border: 1px solid 色コード;
    padding: 12px;
    color: 色コード;
}

.任意のCSSクラス  .ha-accordion-button:hover {
    cursor: pointer;
    background: 色コード;
}

.任意のCSSクラス .ha-accordion-detail {
    padding: 12px;
    border: 1px solid 色コード;
}

ショートコードをブロックパターンから呼び出せるようにしました

【HABONE】に搭載されているショートコードを投稿・固定ページ編集画面のブロックパターンから呼び出せるようにしました。

ブロックの追加→すべて表示→ブロックパターン→HABONEショートコードですべてのショートコードが表示されますので、クリックして挿入します。

なお、現バージョンの段階で使用できるショートコードは以下の通りです。

  • QRコードコンテンツの表示
  • ログインユーザーにのみ表示されるコンテンツ
  • 管理ユーザーにのみ表示されるコンテンツ
  • モバイルアクセス時のみ表示されるコンテンツ
  • パソコンアクセス時のみ表示されるコンテンツ
  • メールアドレスを難読化
  • メールアドレスリンクを難読化
  • カスタムフィールドの値を出力
  • アコーディオン(開閉式)コンテンツ
  • 最終更新日の表示
  • シェアボタンの表示
  • 直前に閲覧したページへのリンク表示
著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 (2022/12/01 21:33時点 | Amazon調べ)
著:Mana
¥2,200 (2022/12/01 21:33時点 | Amazon調べ)
Avatar photo

作者:

WordPress用テーマ「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

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