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

公開日：2022年8月17日

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

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

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

本ページのもくじ

ページ上部へ戻る▲

テーマの更新方法

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

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

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

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

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

15 ダウンロード

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

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

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

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

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

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

ページ上部へ戻る▲

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

【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	タイトル	開閉ボタン（見出し）のタイトルを指定できます
class	ha-accordion	CSSクラスを追加できます「red（赤系）」「blue（青系）」「green（緑系）」「yellow（黄色系）」「dark（黒系）」を入力するとテーマにあらかじめ設定されているデザインが適用されます
header	span	開閉ボタンの文字列を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 色コード;
}