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

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

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

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

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

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

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

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

動作要件

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

本テーマは、Internet Exprolerでの動作確認は一切行っておりません。テーマのデザインに使用しているCSSコードにつきましてもInternet Exprolerでは適用できないものを多数使っておりますので、正常に表示されません。また、今後もInternet Exprolerへ対応させる予定はありませんのでご了承の上使用ください。

項目バージョン等
開発に使用しているサーバーカラフルボックス(ColorfulBox) BOX2プラン
 Web サーバーLiteSpeed
 PHP7.4および8.0
 データベースmysqli(10.3.31-MariaDB mysqlnd 8.0.9)
WordPressバージョン5.8.1
表示確認済のブラウザ【パソコン】
Windows版Google Chrome 93.0.4577.63(64 ビット)
Windows版Microsoft EDGE 93.0.961.44 (64 ビット)
Windows版mozilla Firefox 92.0 (64 ビット)
※上記のバージョンは最終確認時のものであり、常に最新バージョンへのアップデートをしながら確認するようにしています
【モバイル】
モバイルでの確認は、Google Chromeの拡張機能「Responsive Viewer」および、デベロッパーツール上にて行っております

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

【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】テーマのカスタマイズ方法

上位テーマ【HABONE】の機能を含め、【HABONE BASE】テーマをカスタマイズするための参考記事の一覧です。

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

カスタマイズベースとして使われる場合、ご自身で自由にテーマ名を付けていただくことができます。【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クライアントツールやサーバーのファイルマネージャー等を使って、一旦「エラーの出たテーマ名」フォルダを削除してから、再度管理画面等へアクセスしてみてください。前述したデフォルトテーマが有効化され、表示できるようになるはずです。

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