カスタマイズベース向きのWordPress用テーマ【HABONE BASE】の仕様とダウンロード

カスタマイズベース向きのWordPress用テーマ【HABONE BASE】の仕様とダウンロード

【HABONE BASE】はWordPressで作成したサイトが表示・管理できる最低限の機能とテンプレートを備えている、シンプルなテーマです。

【HABONE BASE】は以下のような用途を目的とされる方におすすめのWordPress用テーマです。

  • 必要な機能はプラグインを使って追加していくので余分なものはいらない
  • 自分で機能を追加していきたいので余分なものはいらない

現在ご覧になっているサイトは上位テーマの【HABONE】を使用しています。

【HABONE BASE】は上位テーマ【HABONE】のベースとしている簡易版であり、ご自身のカスタマイズベースとして、【HABONE】テーマの導入をご検討いただくための試用版として、どなたでも無料でダウンロードおよび使用しただくことができます(お使いになる前にテーマの利用規約を必ずご確認ください)。

ダウンロード前に、本ページに記載している動作要件や機能などをご確認いただき、テーマ切替時に発生する不都合や不具合についてまとめた「テーマ切替前に確認したいこと、気を付けたいこと」を参照ください、

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

テーマを使用いただいた感想を募集しています。簡単なフォームから送信いただけますので、ぜひこちらからご協力お願いします。

【HABONE BASE】テーマのダウンロードとインストール方法

ダウンロードの方法

以下のボタンをクリックして、パソコンのデスクトップなどへ保存してください

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

7 ダウンロード

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

7 ダウンロード

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

インストールの方法

万が一のトラブルに備え、インストール前にデフォルトテーマ(「Twenty Twenty One」などWordPressの最新バージョンでインストールされるテーマ)が存在するかをテーマ一覧で確認いただくことをおすすめします

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

2.画面上部の「新規追加」をクリックします

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

4.「ファイルを選択」をクリックし、先ほどダウンロードした【HABONE BASE】テーマを選択し、「今すぐインストール」をクリックします

5.「今すぐ有効化」をクリックします

子テーマを使われる際は、上記5の前に再度1の手順へ戻り、子テーマをインストール後に、子テーマを有効化をしてください

【HABONE BASE】(親テーマ)と【HABONEBASE Child】(子テーマ)は、WordPressでは別テーマとして扱われます。親テーマで行ったカスタマイザー設定は子テーマには反映されません(逆も同じ)ので、最初から子テーマのインストール&有効化をされることをおすすめします。

テーマ有効化後にトラブルが発生したら

サーバー環境やWordPressのバージョンなどテーマの必須要件を満たさない場合や、併用しているプラグインとの競合などにより、稀にテーマを有効化したら画面が真っ白になってしまうことがあります。

そのような場合には「WordPressのテーマを強制的に別のテーマへ変更する方法」を参考に、WordPressのインストール時に同梱されているテーマへの変更を行って復旧してみてください。

テーマの利用規約にも書かせていただいていますが、本テーマを使用したことによるサイトのトラブルに関しては一切責任を負いませんので、了承の上使用ください。

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

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

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

感想をお寄せください

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

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

【HABONE BASE】の仕様と動作要件

開発環境および動作要件

本テーマは以下の環境で開発と動作の確認を行っております。環境が異なる場合やブラウザによっては正常に動作・表示ができない可能性がありますのでご了承ください。

使用しているサーバーColorful Box(カラフルボックス) BOX2プラン
WEBサーバーLiteSpeed
PHPバージョン7.4および8.0
Mysqlバージョンmysqlnd 7.4.23
WordPressバージョン5.8.1
動作・表示テスト(PC)Google Chrome(95.0.4638.54)
Microsoft EDGE(95.0.1020.30)
Opera(80.0.4170.63)
Mozilla Firefox(93.0)
テストはすべてWindows版(Windows10上)のみで行っています
動作・表示テスト(モバイル)スマートフォンおよびタブレットについては、Google Chromeのデベロッパーツールでのみテストを行っています

本テーマは、構造上、旧ブラウザ(Internet Explorerやバージョンの古いその他ブラウザ)には対応させていません。
また、今後も対応予定はありませんので、旧ブラウザでも正常表示させたい方は、本テーマの使用をご遠慮ください

テーマの基本仕様と機能の一覧

【HABONE BASE】テーマは以下の機能を備えています。

項目 概要
レスポンシブ対応画面幅(モニタ幅・任意のウインドウ幅両対応)、モバイル/パソコンのアクセス別に画面が自動で拡大・縮小するレスポンシブ対応のテーマです
右サイドバー投稿および固定ページで「サイドバーなし(広)」「サイドバーなし(狭)」を選択した場合を除き、本文右側にサイドバーが表示されます
国際化対応.moファイルを使った翻訳が可能。多言語サイトの作成や独自の翻訳文字列を使ったサイト作りができます。
※一部文字列は日本語表記のみとなります
子テーマ【HABONEBASE】【HABONE】それぞれに専用の子テーマを用意し、無料で配布しています
※本テーマを使って独自の追加カスタマイズをする際は子テーマの使用をおすすめしています
テーマカスタマイザー本テーマに搭載している機能や設定のほぼすべてがテーマカスタマイザー(「外観」→「カスタマイズ」)から行えるようになっています
エディタへの反映テーマカスタマイザーで指定した色や文字に関する設定は、ブロックエディタ上で可能な限り反映されるようにしています
また、ブロックエディタ用のCSSクラスを追加すれば、子テーマのCSSへ記述したコードも反映されるようになっています
専用スタイルシートパソコン用とモバイル用とで完全に独立したCSSを読み込ませるようにしています。それぞれに不要なコードを出力したり、後から上書きしたりしないようになるため、より処理が高速になります。
※レスポンシブチェックを行うツールや拡張機能では正常にページが表示されないことがあります
※モバイル・パソコンの判別には組み込み関数のwp_is_mobileを使用しています
専用スクリプト パソコン用とモバイル用とで完全に独立したスクリプトを読み込ませるようにしています。それぞれに不要なコードを出力したり、不要な処理をしないようになるため、より処理が高速になります。
※レスポンシブチェックを行うツールや拡張機能では正常にページが表示されないことがあります
※モバイル・パソコンの判別にはis_mobile関数を使用しています
機能の名称機能の概要
カスタムヘッダー(*1)ヘッダー部分の色、画像などの設定ができます(画像表示はトップページのみにしています)
ヘッダー・フッター部分は「サイト幅と同じ」「画面幅と同じ(幅広)」が選択できます
サイトの色(*1)サイトでテーマから出力される背景、境界線、文字、ボタン等の色をテーマカスタマイザーから簡単に変更できます
デザイン要素(*1)ヘッダー画像の高さ、基本文字の大きさ、フォント(ゴシック体、明朝体)、境界線の太さなどをテーマカスタマイザーから簡単に変更できます
カスタムフッター(*1)フッター部分の色、フッターコンテンツを表示させる列(1~3列)などの設定ができます。フッターの内容はウィジェット設定で簡単にできるようにしています
ウィジェットエリア以下のウィジェットエリアを独自に追加しています
・「サイドバー」
・「投稿アイキャッチ画像下」
・「投稿本文下」※
・「投稿最下部」※
・「固定ページアイキャッチ画像下」
・「固定ページ最下部」※
・「フッター」
※印のものは、パソコン表示時とモバイル表示時で別のものが設定できるようになっています。
モバイル時フッター非表示(*1)モバイル表示時にフッターの内容が長くならないよう、ウィジェットの情報を表示しないようにできます
更新日を有効活用(*1②⓹)①検索エンジンへ、更新日を優先して認知されるようにします。
②更新日を基準に閲覧画面側、管理画面側のリストを表示させることができます
③個々の投稿・固定ページに対して更新日の「変更する」「変更しない」「削除する」を選択でき、更新日を使ったコンテンツの鮮度管理ができるようになります
④最終更新日を管理画面の一覧へ表示し、更新日を基準に並び替えができます
⓹クイック編集(個々のクイック編集のみ)での更新時に更新日を変更しないようにします
アイキャッチ画像の適正化アイキャッチ画像の縦横サイズを、HTMLソース上で強制せず、実寸を出力するようにし、検索エンジン等に画像サイズがご認知されないようにします。
フッターの著作権表示フッターへサイトコンテンツの著作権表示をします。また、対象年度をサイト内の一番古い投稿から最新の投稿の公開日までの範囲表示にします。
ブロックベースのウィジェット無効(*1)WordPress5.8から採用された、ブロック形式のウィジェット設定を無効にし、従来のウィジェット設定画面へ戻します
Emoji機能を停止(*1)WordPress標準で有効化されているEmoji機能を無効にし、余分なコードを出力しないようにします。
タグを一覧表示にする(*1)投稿編集画面のタグ表示をカテゴリーと同じ一覧形式にします
サイトマップを無効にする(*1)WordPress標準で出力される、簡易サイトマップ(検索エンジン向け)機能を停止します。

テーマの名前を変更して使うには

カスタマイズベースとして使われる場合、ご自身で自由にテーマ名を付けていただくことができます。【HABONE BASE】テーマをダウンロードし、パソコン上で解凍した後で、以下の手順にて変更を行ってください。

テーマフォルダ名の変更

解凍したフォルダの名前を変更します(これがテーマスラグになります)。記号(ハイフンやアンダーバー)などを入れても機能しますが、空白と共に原則使わない方がよいでしょう。

style.cssの編集

解凍したフォルダ名にある「style.css」をエディタで開きます(メモ帳は不具合を起こす可能性がありますので、無料で使える「EmEditor」がおすすめです)。

編集するのは以下の内容です。

Theme Name: テーマ名
Theme URL: テーマを紹介するサイトのURL
Author: テーマの作者名
Author URI: テーマ作者のサイトURL
Description: テーマの簡単な説明
Text Domain: 翻訳接頭辞
Version: テーマバージョン

「テーマ名」「テーマの作者名」「テーマの簡単な説明」は英語でも日本語でも構いません。

「テーマを紹介するサイトのURL」はあればそれを、なければご自身のブログなどで構いません。

「テーマ作者のサイトURL」はご自身のブログなどで構いません。

「テーマバージョン」は適当(1.0など)で構いません。

「翻訳接頭辞」は、次項の情報をお読みになってから決めてください。

テンプレートや機能に関するプログラムの翻訳対応文字列の変更

テーマ内のプログラムやテンプレートは、Gettextを使った翻訳機能が備わっています。「languages」フォルダ内にある「ja.po」をPoeditという無料ソフトを使って内容変更するだけで、文字列を独自のものへ変更することができます。また、他の言語ファイルを作ることで世界中の人が使えるテーマを作ることもできます(翻訳に関する詳しい内容はここでは割愛します)。

翻訳を可能にするためには、翻訳接頭辞というのが必要になります。【HABONE BASE】の翻訳接頭辞は「habone」にしていますので、以下の例のような文字列をエディタで検索し、前項のstyle.cssで指定した接頭辞への変更を行ってください。

__('英語で書かれた文章など','habone');

※接頭辞の変更をすると、現在「languages」フォルダ内にある「ja.mo」ファイルは無効になり、テーマ内のすべての文字列が英語表記になりますのでご注意ください。

接頭辞を変更しないままお使いいただくことも可能ですが、WordPressのテーマは「テーマフォルダ名」と「翻訳接頭辞」は同じ文字列であることが原則とされていますので、特に他の方へ配布したいとお考えの場合にはきちんと処置をされることをおすすめします(ちなみに【HABONE BASE】の接頭辞は正式テーマの【HABONE】の簡易版ですので翻訳接頭辞を便宜上「habone」にしています)。

テーマのアップロードインストール

まずはテーマ有効化時にエラーが出た場合の転ばぬ先の杖として、以下の2点に留意ください。

1.デフォルトテーマの有無を確認しましょう

WordPressのデフォルトテーマが存在するかを確認しておきましょう。デフォルトテーマはWordPressのバージョンによって異なりますが、WordPressを常に最新版へ更新しているようであれば、現在の西暦が名前になっているテーマ(2021年なら「Twenty Twenty One」)がテーマメニューを開いた画面上に表示されていればOKです。

2.テストサイトを作ってインストールと有効化をテストしましょう

テーマファイルの編集に誤りがある場合などには、テーマのインストール・有効化時に重篤なエラーとなる場合があります。万が一に備え、いきなり現在稼働している主サイトへの導入は避けるようにしましょう。


次に、パソコン上で先ほど編集したテーマ名フォルダの中身すべてを選択してzip形式で圧縮します。その際ファイル名は「テーマフォルダ名.zip」となるようにしてください。

※フォルダごとではなく「functions.php」や「style.php」などのファイル類が見える状態で全ファイルと全フォルダを選択して圧縮してください。

導入するサイトのテーマメニューを開き、新規追加でアップロードを選択して、「テーマフォルダ名.zip」をアップロードしインストールしてください。

インストール・有効化に失敗する時は

インストール時、および有効化時にエラーが出る場合は、ここまで紹介した変更部分の不具合が影響しています。再度内容を見直してインストールと有効化をし直してください。

万が一失敗後にサイトやサイトの管理画面が見れない状態になった場合には、FTPクライアントツールやサーバーのファイルマネージャー等を使って、一旦「エラーの出たテーマ名」フォルダを削除してから、再度管理画面等へアクセスしてみてください。前述したデフォルトテーマが有効化され、表示できるようになるはずです。

もしも復旧しない場合には、以下の記事を参考にテーマのリセットを行っていただくか、不具合復旧対応できる方へ相談してみてください。