WordPress用テーマ Bonyo (凡庸)

wordpress

テーマBonyoについて

テーマ名のBonyoは日本語の「凡庸ぼんよう」です。凡庸の意味は「平凡でつまらない」、英語なら「Mediocrity」。汎用はんようではないのでお間違いなく。
テーマの見た目(デザイン)は利用する人が好きに変更して利用して貰うことを前提に、というか変更しないと使いものにならないように、初期値は徹底的にダサくしてあります。その代わりできるだけシンプルにカスタマイズしやすいJavascriptフリーなテーマになっています。フルスクラッチでスターターテーマも使っていないので洗練具合は低いかもしれません。

ライブデモとしてはこの「がとらぼ」がBonyoのフル機能版 v1.4.0で動いています。(2019年3月22日現在)ただし、「がとらぼ」は巨大な日本語ウェブフォントや広告などを読み込むため「Bonyo本来の非常な軽快」に表示にはなりません。

Download

bonyo_20190306.zip  v0.9

bonyo_full_20190325.zip  v1.4.1 Full (安定版)

フル機能版はCSS最小化機能・静的サイドバー機能・画像遅延読み込み機能・AMP対応・管理パネルでのカスタマイズ機能を含みます。当然フル機能版がページ表示は高速です。
2つのバージョンが存在する理由はWordPressの公式がページ表示以外の機能を含むテーマの登録を受け付けないからです。
通常版・フル機能版共に無料で、どちらも無料であることによる機能制限等はありません。

特徴

  • 高速な表示
  • テーマ自体は非Javascriptブラウザ完全対応 (※1)
  • レスポンシブ対応
  • ピュアCSSな多階層ドロップダウンメニュー
  • タッチ操作に対応したピュアCSSなハンバーガー・アコーディオンメニュー
  • CSS変数によるカスタマイズ対応 (標準のみ、Full版は管理バネル)
  • Font Awesome 4.7アイコン
  • CSS最小化出力対応 (v0.8 Full以降)
  • Gutenbergエディタ無効化設定
  • 固定ページはページ毎に2カラムと1カラム(全幅・サイドバー無し)を選択可能 (v0.8以降)
  • サイドバーの静的出力機能 (v0.8 Full以降)
  • 画像の遅延読み込み機能 (v1.0 Full以降)
  • AMPプラグイン用のテーマ (v1.1 Full以降)
  • 通常テーマとAMP用テーマでスタイルシートの共通化(v1.1 Full以降)
  • 管理パネルでのカスタマイズが通常テーマ・AMPテーマの両方に反映される(v1.1 Full以降)
  • AMPページで「最新の記事」一覧をREST APIで取得して表示する機能(v1.2 Full以降)
  • AMPページ専用サイドバー(v1.3 Full以降)

Bonyo 画像 1
PCなどの画面の幅の広いブラウザで表示したとき。メインのナビゲーションメニューバーはドロップダウン形式で3階層まで表示。

Bonyo 画像 2
モパイル端末などの画面の幅の狭いブラウザで表示したとき。メインのナビゲーションメニューバーは右上隅のハンバーガーメニューアイコンに変わる。

Bonyo 画像 3
ハンバーガーメニューアイコンを押してメニューを広げた状態。メニューは3階層まで表示可能で、階層はアコーディオン形式で上下に広げて表示される。安易にCSSだけでメニューを作るとタッチよる多段操作に耐えないものになりやすいが、BonyoのメニューはJavascript無しでもタッチによる常識的な多段操作が可能になっている。

Bonyo 画像 4
Bonyoはコンパクトで非常に軽いテーマですが、さらに高速表示のための工夫をしているのでPageSpeed Insightsでは100点も余裕です。高得点を得にくい「モバイル」でも100点となります。

CSSの最小化 (フル機能版のみ)

WordPressでは通常はテーマ内のstyle.cssがメインのスタイルシートとして表示・使用されますが、Bonyoではそのstyle.css v1.1からはstyle.phpの内容を最小化したstyle.min.cssが表示・利用されます。CSSの最小化はWordPressの管理パネルをログアウトすると自動的に実行されます。その最小化処理はinc/extra-admin.phpに書かれています。

静的サイドバー出力機能について (フル機能版のみ)

ウェブサーバが非力であったりレンタルサーバなどでCPUパワーが制限されているなどの場合に、サイドバーの出力に時間がかかってページ全体の表示が遅くなることがあるので、静的なサイドバー出力機能を追加しました。管理パネルのデーマのカスタマイズのメニューで静的/静的サイドバー出力を選択できます。
静的サイドバー出力を選択すると、CSSの最小化機能と同じく管理パネルをログオフするとサイドバー部分をキャッシュ化してsidebar-static.phpを新規作成・上書され、それがサイドバー表示に使用されます。
動的サイドバーを選択すると、サイドバー出力にはsidebar.phpが使用されます。
サイドバーのウィジェットなどで動的な出力※2を行っている場合は静的サイドバーには変更しないで動的サイドバーを出力して下さい(初期値)。

画像の遅延読み込みについて (フル機能版のみ)

通常の画像読み込みはページの表示を遅らせます。閲覧者がページの表示を待つことになるので好ましくありません。この数年は画像の遅延読み込みが流行りとなっています。そこでBonyoにも画像の遅延読み込み機能を追加しました。遅延読み込みのベースはEcho.jsです。 BonyoではEcho.jsが機能するようにimgタグを書き換えるようになっています。なお、v1.0の時点では遅延読み込みになるのは記事中の画像とアイキャッチ画像だけです。遅延読み込みと通常の読み込みはWordPressの管理画面のテーマのカスタマイズにある「Option」内で選択できます。選択して「公開」ボタンを押した時点から有効化/無効化されます。画像の遅延読み込みはクローラーが画像を読めなくなることがありSEOの点から好まれないこともありましたが、Bonyoではnoscriptでクローラーに読ませるようにしているのでSEO上の不利も無いかと思われます。

Bonyoの画像遅延読み込みはAMPでは無効になるようにしています。AMPではEcho.jsは使えず、出力されるタグもAMPとしてはエラーになるのでAMP時の無効化判定部分を削除するのはお薦めしません。

カスタマイズについて (フル機能版)

WordPressの管理パネルにログインしテーマのカスタマイズからいろいろ変更できます。通常のWordPressのテーマカスタマイズとは違い、変更後に管理パネルをログオフしたときに変更した設定を含めてスタイルシートを最小化して出力するようになっています。管理パネルのカスタマイズで触れない項目を変更をしたい場合はstyle.phpに書かれているスタイルシートを変更して下さい。WordPressの通常のテーマで利用されるstyle.cssはBonyoフル機能版では使用しません。ただし、style.cssはWordPressが使用するので削除しないで下さい。

カスタマイズについて (通常版)

WordPressのテーマのカスタマイズは管理パネルから幾つか値を変更する、またはカスタムCSSを追加・変更するというものですが、Bonyoでは管理パネルから触れるのはサイト名の変更とカスタムCSSの追加だけです静的サイドバーと画像の遅延読み込みの有無が選択できます。その他の幾つかのスタイルはCSS変数を触るのが簡単でしょう。CSS変数の設定はstyle.cssの最初の方にあります。

AMP対応について (フル機能版のみ)

BonyoにはAMP用のテーマを同梱します。ただし、Bonyoで全てのAMP変換機能を持つわけではありません。WordPress公式のAMPプラグインをインストールしてClassicモードを選択して下さい。
AMPプラグインのClassicモードでは通常はサイドバーをAMP用に変換してくれませんが、Bonyoではその部分だけAMP用タグに変換する機能を持っています。(ただし、Bonyo v1.1では基本的なコードの変換だけです。)なお、AMP用のサイドバーはBonyoでは静的サイドバーのみとします。AMP変換も行うと動的サイドバー出力は表示が遅くなりBonyoの作成目的から外れるので。
「最近の記事」の一覧を動的に取得して表示する機能はBonyo v1.1ではまだ実装していません。つまりクロールとれてキャッシュ化されたときに含まれる「最近の投稿」一覧が次にクロールされるまで変化なく表示され続けることになります。

Bonyoでは通常テーマとAMP用テーマで同内容のスタイルシートを利用するようにしています。通常テーマ用のstyle.phpに含まれる内容と管理パネルでカスタマイズされた内容を合わせて最小化して通常テーマ用とAMP用に同内容のファイルを出力します。これにより、管理パネルでカスタマイズした内容が通常テーマと同様にAMPにも適用されます。
ナビゲーションメニューもAMP対応を見据えてJavascriptフリーで作成しているので通常テーマと同じものがAMPで表示されます。

つまり、Bonyoでは通常ページとAMPページでほぼ見た目が変わらないということになります。

REST APIによるAMPページの「最近の投稿」一覧表示について (フル機能版のみ)

AMPのページは、AMPファーストのウェブサイトでなければ殆どがGoogleなどのAMPキャッシュを閲覧者が見ることになるかと思われます。AMPキャッシュはGoogleなどのクローラーが収集してそれがキャッシュされるわけですが、更新頻度が高いわけではありません。閲覧者が見るページは古いものである可能性が高いわけです。この古いページの「最近の投稿」一覧は当然古いわけで、ウェブサイトのオーナーとしては少し困ります。そこで、Bonyoのv1.2 Fullでは「最近の投稿」の一覧部分だけはAMPキャッシュではなくWordPressからREST APIで最新の一覧を取得してはめ込んで表示する機能を搭載しました。この機能はWordPressの管理パネルのBonyoテーマのカスタマイズで有効・無効を選択できます。(初期値は無効です。)
Bonyoでは「最近の投稿」ウィジェットが表示される部分を書き換える方法を採っているので、サイドバーのウィジェットに「最近の投稿」ウィジェットが登録されていなければこの機能を「有効」にしても機能しません。
当然ですが、AMPキャッシュではこの機能を有効にした後にキャッシュされたページでのみREST APIが使えます。つまり機能を有効にしてもそれ以前にキャッシュされたページでは(次にキャッシュが更新されるまでは)機能しません。
通常のAMPキャッシュのページはGoogleなどと閲覧者の間で完結しますが、REST APIを使うと閲覧者がAMPキャッシュを閲覧した際に「最近の投稿」の一覧を取得するためにWordPressにアクセスすることになります。WordPressの負荷を軽減させる目的でAMPを採用しているのであればこの機能は有効にしない方が良い場合もあります。(「がとらぼ」の中の人のオススメは「有効」ですが。)

AMPページ用サイドバー(ウィジェットセット)

AMPでは勝手Javascriptが利用できないとか専用タグを使わないといけないとか制限があります。通常ページ用のウィジェットにはJavascriptを使っているものがあり、場合によっては「カスタムHTML」ウィジェットに広告を貼っていることがあるかと思います。これらはAMPページでは表示しても正しく機能しませんし、AMPエラーの原因にもなります。そこで、AMPページ用のウィジェットのセットを用意しました。(v1.4.0 Full以降)
管理パネルの「外観」から「ウィジェット」を開くと「通常ページ用サイドバー」と「AMPページ用のサイドバー」があります。この「AMPページ用サイドバー」がv1.4.0から追加された新しいウィジェットセットです。
基本的には「通常ページ用サイドバー」と同じアイテムを登録すれば良いと思いますが、例えば「カスタムHTML」ウィジェットに広告を貼るのであればAMP用の広告コードを貼ります。または、WordPress標準のウィジェットでもドロップダウンメニューを選択したらページ遷移するようなものはAMPでは使えない(amp-bindでは可)のでドロップダウン+Javascriptになっているウィジェットは使用しない、またはウィジェットのその機能は使わないようにしないといけません。なので、通常ページ用とAMP用で登録できるウィジェットを変えることができるように2種類のサイドバーにしたわけです。
前述のREST APIを使った「最近の投稿」を表示したい場合は「AMPページ用のサイドバー」に「最近の投稿」ウィジェットを登録して下さい。そのウィジェットがamp-listに置換されます。また、そのウィジェットの「表示する投稿数」の設定がamp-listでも使用されます。

FAQ

Q. テーマカスタマイズの設定が保存されません。

A. ウェブサイト側のキャッシュを有効にしている場合は削除するかキャッシュを停めて再設定・保存してみて下さい。これはBonyoに限らずWordPressでは起こり得ることです。

変更履歴

v1.4.1 full

* Released: March 25, 2019

Fixed: The author's icon at the bottom of the article was not something that should be included in the link. It should have been fixed early but was forgotten.
Fixed: <pre> and <code> should have been specified as block elements but were left unspecified.
Fixed: A bug that the author name of AMP page is not displayed.
Fixed: A bug that the content of AMP page is displayed twice.


v1.4.0 full

* Released: March 22, 2019

Changed: Added the attribute to delete for AMP.
Fixed: It coped with the environment which fails to acquire the number of articles of recent posts. Changed to get from DB without using get_option().


v1.3.4 full

* Released: March 21, 2019

Fixed: to get values can not be acquired by get_option() from DB.

Fixed: the URL specification process of the background image was incorrect.

v1.3.3 full

* Released: March 21, 2019

Fixed: "excerpt more" written in functions.php was fundamentally wrong.
Fixed: "excerpt more" button is written in the archive.php.
Added: read more buttons in archive.php


v1.3.2 full

* Released: March 20, 2019 (dropped this version)

Changed: The range of links in the archive list is now only titles and buttons.
Fixed: An issue that caused an error in the process of obtaining the number of "Recent Potst" list.
Fixed: A bug that can not output the added AMP sidebar to a static file.
Fixed: Stylesheet. The color of the hamburger menu icon is not reflected.


v1.3.1 full

* Released: March 19, 2019

Removed: Some debug codes
fixed: Stylesheet


v1.3 full

* Released: March 19, 2019 (dropped this version)

Added: 2nd Sidebar for AMP.


v1.2 full

* Released: March 19, 2019

Fixed: Some bugs.
Removed: Unnecessary loop processing in the AMP convert function.
Added: Enabled to display recent article list using REST API on AMP page.


v1.1 full

(紹介記事)

* Released: March 12, 2019

Style definitions have been moved to style.php.
Changed theme options on the admin panel.
Sharing style sheets with AMP and regular themes.
Added AMP sidebar conterter.
Added AMP static sidebar.
Added AMP theme.
Added colors section to theme customizer


v1.0 full

* Released: March 7, 2019

Changed theme options on the admin panel.
Added theme customizer. (inc/bny-customizer.php)
Added lazy loading function.


v0.9 wordpress

* Released: March 6, 2019

Changed readme.txt.
Changed functions.php.
Deleted inc directory.
Deleted "css-minimize.php.txt".
Deleted static sidebar function.
Added static sidebar function.
Deleted css minimization function.

Forked

v0.9 full

* Released: March 6, 2019

Changed "readme.txt".
Deleted "css-minimize.php.txt".
Added static sidebar function.


v0.8 (withdrawed version)

* Released: March 5, 2019

Added the ability to select one and two columns of templates for each page.
Added static sidebar output function. The sidebar.php will be overwritten each time you log off the administration panel.
If you want to output dynamic sidebar, Override "sidebar.php" with "template-parts/dynamic-sidebar.php". In addition, please change "bny_static_sidebar(1);" to "//bny_static_sidebar(1);". It is in the end of "functions.php".


v0.7

* Released: March 4, 2019

The stylesheet (for navigation) was fixed.
Created localization files. (Japanese)


v0.6

* Released: March 3, 2019

Initial release (最初のリリース)
Navigation stylesheet was fixed.


v0.5

* Snapshot: March 2, 2019

Navigation menu was changed.
functions.php was written.


v0.4

* Snapshot: March 1, 2019

Navigation menu for narrow screen was written.


v0.3

* Snapshot: February 28, 2019

Navigation menu for wide screen was written.


v0.2

* Snapshot: February 27, 2019

Some stylesheets ware written.


v0.1

* Snapshot: February 26, 2019

Several parts were written.

※1: 基本版にはJavascriptのスクリプトはありません。
フル機能版では、オプション機能非使用時にはJavascriptのスクリプトは無しですがCSSファイルの遅延表示のためにJavascriptの機能を1箇所利用しています。Javascript非対応のブラウザでは遅延読み込みは機能しませんが、正常に読み込むことができます。
テーマにはJavascriptを含みませんが、WordPress本体またはプラグインがJavascriptを表示・使用することがあります。画像遅延読み込みはJavascriptを使用します。

※2: Javascriptの広告など表示は変化してもサイドバーの出力するコードが書き換わらないものはここでいう動的出力ではありません。

関連記事: