WordPressテーマ : Jewelbeetle – セルティスラボ

WordPress のブロックテーマが少しずつ出てきています

ブロックテーマにすべきか、あるいはクラシックテーマを使い続けていくか、悩まれているかも知れませんが、結論から言えば、お好きな方をお使いください

使い慣れたものを使うのが一番です。クラシックテーマをお使いなら、無理にブロックテーマに移行する必要もありません。ただ、最新のWordPressに対応しているかは大事なので、そこはご注意ください

ブロックテーマかクラシックテーマかなんてどちらでも良いのです。単にテンプレートの形式が違うだけです

本当に大事なのは、theme.json やそれを元に生成されている HTML や CSS かもしれません。theme.json により使用できるブロックコンポーネントやスタイルが設定されるので、そこが肝です

ブロックテーマ等の新しいものを使うことで全てがカバーできるわけでもありませんし、従来のちょっと古い機能でも素晴らしい機能はたくさんあります。それらも合わせて使用したいなら、ここで紹介する Jewelbeetle テーマを試してみてはいかかでしょうか

従来のPHPベースのテンプレートと最新のブロック機能が高次元でバランスよく融合されているハイブリッドな二刀流のブロックテーマで、最新のブロック機能を使用できます😀

Jewelbeetle テーマ
機能
1. テーマでサポートしている機能
  1. テンプレートについて
  2. カラーパレットについて
2. Celtispack プラグインでサポートしている機能
ダウンロード
インストール
1. 免責事項
履歴

Jewelbeetle テーマ
機能
1. テーマでサポートしている機能
  1. テンプレートについて
  2. カラーパレットについて
2. Celtispack プラグインでサポートしている機能
ダウンロード
インストール
1. 免責事項
履歴

Jewelbeetle テーマ

このテーマのおすすめポイント

theme.json 及び CSS ネストを使用したスタイリング
最新版のブロックエディタに対応したPHPベースのハイブリッドブロックテーマ
投稿、固定ページ毎にPHPテンプレートやブロックテンプレートを選択可能な二刀流
テーマの機能はシンプルですが、専用プラグインを使えば有料テーマ並の多機能なテーマ

最新版の WordPress に対応したシンプルなテーマをお探しならおすすめです

機能

Jewelbeetleテーマは、ブロックテーマですが、PHPテンプレートがベースとなっているので、クラシックテーマに慣れた方には扱いやすく、カスタマイズ用のベーステーマとしておすすめです

PHPテンプレートもブロックテンプレートも両方扱えるテーマ
その仕組みとは… 🧐

詳細は下記ページをご参照ください

ページ毎にPHPテンプレート/ブロックテンプレートを切り替えられるブロックテーマ作成

WordPressのクラシックテーマからPHPテンプレートもブロックテンプレートも扱える二刀流（two-way）ブロックテーマにするための手順を紹介します

セルティスラボ

別途このテーマに最適化された Celtispack プラグインを導入することで、様々な便利機能が使用できるようになります

合わせてお使いいただくとシンプルなのに多機能というバランスの良い組み合わせとなります

テーマでサポートしている機能

theme.json によるブロックのスタイリング
ブロックエディタ対応
投稿、固定ページ毎にPHPテンプレートやブロックテンプレートを選択可能
投稿ページ及び固定ページ毎のカラーパレット設定（ライト/ダーク/カスタム）
bbPress（フォーラム）用のスタイル定義
WooCommerce 対応（ブロックテンプレート対応）

テンプレートについて

single.php、 page.php、 full-width-page.php、 full-note.php のテンプレートでは、コンテンツ幅、幅広のサイズが以下のようになります
また、 full-width-page.php、 full-note.php テンプレートでは、全幅表示もサポートしてます

基本的なPHPのテンプレート

テンプレート	対象ページ	content / wide 幅
home.php	ホーム（２カラム）	680 / 752
single.php	投稿ページ（２カラム）	680 / 752
page.php	固定ページ（２カラム）	680 / 752
full-width-page.php	投稿・固定（１カラム）	960 / 1200
full-note.php	投稿・固定（１カラム）	1024 / 1200
image.php	添付画像（１カラム）	–
archive.php	アーカイブ（２カラム）	680 / 752
search.php	検索（２カラム）	680 / 752

ブロックテンプレート

テンプレート	対象ページ	content / wide 幅
single.html	投稿ページ（１カラム）	960 / 1200
page.html	固定ページ（１カラム）	960 / 1200

テンプレートのコンテント幅、ワイド幅は theme.json の settings > layout の contentSize, wideSize に設定している 960px / 1200px がベースとなります

WPコア側ではテンプレート毎の設定は現時点でまだ用意されていないと思われますので、Jewelbeetle テーマでは html tag に data-template 属性を出力することで、 style.css を用いてテンプレート毎に contentSize、wideSize を指定しています

※ブロックテンプレートのコンテント幅等を調整したい場合は css に条件を追加してください

/* 
コンテントワイドとコンテント幅 theme.json  contentSize, wideSize が global style で以下のデフォルト定義またはカスタマイズ設定値となる
--wp--style--global--content-size: 960px;
--wp--style--global--wide-size: 1200px;
--wp--style--root--padding-right: min(4rem, 5vw);
--wp--style--root--padding-left: min(4rem, 5vw);  

php template 毎にコンテントワイドとコンテント幅を変更
--wp--style--global--wide-size    1200/1200/752
--wp--style--global--content-size 1024/960/680
*/
:root {
    --wide-size-default: 1200px;
    --wide-size-narrow: 752px;
    --content-size-default: 960px;
    --content-size-full-note: 1024px;
    --content-size-narrow: 680px;
}
html[data-template="single.php"],
html[data-template="page.php"],
html[data-template="home.php"],
html[data-template="search.php"],
html[data-template="archive.php"] {
    --wp--style--global--content-size: var(--content-size-narrow);
    --wp--style--global--wide-size: var(--wide-size-narrow);
}
html[data-template="full-width-page.php"] {
    --wp--style--global--content-size: var(--content-size-default);
    --wp--style--global--wide-size: var(--wide-size-default);
}
html[data-template="full-note.php"] {
    --wp--style--global--content-size: var(--content-size-full-note);
    --wp--style--global--wide-size: var(--wide-size-default);
}

ちなみにブロックエディタの編集画面でも、選択したテンプレートによりコンテント幅がダイナミックに変わりますので、文章の折り返しや幅広画像等のイメージがフロント側でのイメージと合わせやすくなります

カラーパレットについて

ブロックテーマは、カラースタイル用の json ファイルでテーマカラーを選択する方法がサポートされていますが、Jewelbeetel テーマでは、独自方式の CSS変数を使ってページ単位で切り替えられるようにしています

jewelbeetel テーマでは、投稿・固定ページ毎に使用するカラーパレットを「ライト / ダーク / カスタム」から選択することができます

各カラーパレットは外観 > カスタマイズ > 色で設定された値となります

このページはギャラリーページだからダークで表示したいなんてことが簡単にできるようになっています

Jewelbeetle テーマでは html tag に data-color-scheme 属性を出力することで、 style.css でカラー関連の変数を用いて全体のカラーイメージをダイナミックに反映させています

/*--------------------------------------------------------------
# Variable (Color)
--------------------------------------------------------------*/
:root {    
    /* カスタマイザーで設定される基本カラー定義 5種 （light/dark/custom パターンにより切り替える var 定義値）*/ 
    /* lighten, darken を扱いやすいよう HSL 色相（0から360度）彩度（0から100%）明るさ（0から100%）に変換して使用 */
    --jb--color-hsl-background-body: 0 0% 97%;
    --jb--color-hsl-text-main: 0 0% 13%;
    --jb--color-hsl-text-header: 0 0% 100%;
    --jb--color-hsl-theme-main: 210 70% 40%;
    --jb--color-hsl-theme-sub: 120 100% 38%;

    /* 基本カラーパターンを用いて自動的に調整される補助カラー 4種 */
    --jb--color-hsl-background-content: 0 0% 100%;
    --jb--color-hsl-headline: 0 0% 23%;
    --jb--color-hsl-text-sub: 0 0% 38%;
    --jb--color-hsl-text-meta: 0 0% 28%;
    
    /* marker, selection, pre, button デフォルトカラー */
    --jb--color-border: color-mix(in srgb, currentColor 33%, transparent);
    --jb--color-background-mark: yellow;
    --jb--color-selection: lightcyan;
    --jb--color-background-pre: rgba(128, 128, 128, .2);
    --jb--color-button: #4285f4;
}

/* light/dark カラーパターン別に扱う要素　link */
html[data-color-scheme="light"],
html[data-color-scheme="custom"] {
    --jb--color-scheme : light;
    --jb--color-link: #06f;
}
html[data-color-scheme="dark"] {    
    --jb--color-scheme : dark;
    --jb--color-link: #8ac4ff;    
}

テーマのレイアウトやカラーをカスタマイズする場合は、このあたりを参考にしてください

Celtispack プラグインでサポートしている機能

サムネイル画像ユーティリティ（拡張アイキャッチ/サムネイル再作成/画質指定)
アイキャッチ画像付きの RSS フィード
ブログカードの埋め込みとカスタマイズ機能
ブロックエディタの拡張機能（コア基本ブロックへのアイコン、アウトライン機能、吹き出し、アンダーラインマーカー等見やすく使いやすくおすすめです）
SNS共有ボタン表示
目次を生成するショートコード
Google Code Prettify を使用したシンタックスハイライト
Post Branch Utility（💳有償版のみ – 記事の更新複製ユーティリティとっても便利）
管理バーに表示する便利なツールへのリンクを登録/表示

フロントサイドの jQuery 読み込み抑制
oEmbed Discovery REST API リンク停止出力
WordPress コアの絵文字(emoji) 無効化機能
WordPress コアの duotone svg 無効化機能

noindex 及び WP標準サイトマップの wp-sitemap.xml カスタマイズ機能
OGP(Open Graph Protocol）メタタグ出力
構造化データ JSON-LD 出力
Google アナリティクストラッキングコード出力
著者アーカイブリクエストの ?author=1 → /author/[author slug]/ リダイレクト停止と著者スラッグ置換機能によるセキュリティ強化
XMLRPC 無効化 (外部アプリ接続、トラックバック、ピンバック)
ユーザー権限による Rest API 許可機能

ブロックベースのウィジェットエリアを無効にして、従来のクラッシックウィジェットに戻す
Post Widget Area (💳有償版のみ – 記事前後のウイジェットエリア）
テキストウィジェットでのショートコード使用
最近/更新投稿を表示するウィジェット
関連する投稿を表示するウィジェット
YASAKANI Cache 統計を使用した人気記事ウィジェットとショートコード

ブログカードやYouTubeなどの埋め込みキャッシュデータクリア機能
Celtispack プラグイン更新の自動確認許可
Celtispack プラグインを削除するときにオプションデータをクリアしない設定

ちょっと気の利いた便利な機能が満載です

足りない機能もあるとは思いますので、お気に入りのプラグイン等と組み合わせて使用して頂ければと思います

ダウンロード

Jewelbeetle は無料公開していますので、お気軽にお試しください

動作環境は、WordPress6.9, PHP8.1 以上となっています

Jewelbeetle 最新版 2026/7/6 Version 1.5.3

ダウンロード “jewelbeetle-v1”jewelbeetle-1.5.3.zip - 345 KB

ダウンロードボタンをクリックするとパスワード入力ページが表示されるので、パスワード（ jb-theme ）を入力してダウンロードして下さい
パスワードを入力すると自動的にダウンロードが実行されます

インストール

下記手順でテーマをインストール出来ます

WordPress 管理画面を表示します
左側のメニューから外観のテーマを選択します
表示された画面の上部の 新規追加 をクリックします
表示された画面の上部の テーマのアップロード をクリックします
ファイルを選択 ボタンをクリックして、ダウンロードしてある jewelbeetle-x.x.x.zip ファイルを選択します
今すぐインストール ボタンをクリックするとインストールが行われます
有効化すれば、このテーマが使用できるようになります

テーマを有効化すると Celtispack がインストールされていない場合は案内メッセージが表示されます

Celtispack プラグインをインストールしなくても使用することは可能ですが、便利機能満載のプラグインなのでインストールすることをお勧めします

まず初めに、評価版を使ってお試しください
評価版は一部機能制限されてますが、ちょっと気の利いた便利なユティリティが満載です

Celtispack プラグインを気に入ってくださったら、購入をご検討いただけると幸いです

免責事項

本ソフトウェアを使用した事による、いかなる損害も作者は一切の責任を負いませんので、自己責任の上でご使用下さい

履歴

2026/7/6 Version 1.5.3

theme.json 調整
html tag にカラースキーム(data-color-scheme)属性出力
html tag にテンプレート(data-template)属性出力
css wide,full レイアウト関連の修正
customizer link color 設定を止めサイトエディタースタイルの link 設定を使用するよう変更
プラグインやウィジェット等で使われているボタン要素に global style を反映させるための wp-element-button class 追加機能
wp core block gallery にスライダー機能が追加されたので photoswipe 機能廃止
クラッシックエディタ(tinymce)用の埋め込み embed アスペクト調整用 superembed.js 廃止

2026/5/20 Version 1.4.2

WordPress7.0 対応
デフォルトフォントを Yu Gothic から Noto Sans JP へ変更
ミニサイズヘッダーの選択機能追加
WPコアブロックの使用CSSのみ読み込みするか選択する機能追加
SVG icon、メニューのキャッシュ機能廃止
css tree shaking 機能廃止（Yasakani Cache をご利用ください）
load_theme_textdomain 明示的な呼び出しを止める
カラーパターン切り替えをブロックエディタ用メタ設定にして CSS 変数定義値のインラインCSSによる変更のみで行うよう変更

2025/4/25 Version 1.3.6

WordPress6.8 対応
フォントファミリ選択に NOTO Sans JP, Noto Serif JP 追加
投稿保存時の外部画像サイズ検出機能削除（負荷が高く遅くなるため）
CSS 調整

2024/12/6 Version 1.3.5

WordPress6.7 対応
翻訳処理 load_theme_textdomain の適用を after_setup_theme フックに変更
css 結合縮小処理に block-style-variation-styles を含めるよう変更
Bluesky sns follow ボタン追加
CSS 調整

2024/7/30 Version 1.3.4

WordPress6.6 対応
block template と共存する為に singular.php をやめ single.php と page.php に分けた
block template single.html, page.html を追加
投稿、固定ページのデフォルトテンプレート選択にブロックテンプレート選択モード追加
投稿、固定ページの編集ページのテンプレート選択で php template と block template の選択できるよう対応
font size small を min 12->13px max 13->14px vieport 400-1200px に変更
woocommerce は phpテンプレートを削除してブロックテンプレート対応として、関連 css も修正
CSS ブロックテンプレートと共存する為の追加と調整

2024/4/2 Version 1.2.1
WordPress6.5 対応
Sass -> CSS nesting へ変更
CSS Tree Shaking 更新とCSS調整

2023/8/16 Version 1.0.2
WordPress6.3 対応
テンプレート HTML 調整
CSS Tree Shaking 機能更新とCSS調整
その他軽微な不具合の修正

2023/3/30 Version 1.0.0
WordPress6.2 対応
PHP8.2 対応
theme.json の追加と修正
CSS Tree Shaking 機能更新とCSS調整

2022/12/19 Version 0.9.7
WordPress6.1 及び theme.json の対応強化
いくつかの機能を Celtispack へ移し、テーマ自体を軽量化

2022/7/1 Version 0.9.0
Celtis Speedy テーマ後継のシンプルで高速なハイブリッドテーマ公開