テーマBonyoについて
テーマ名のBonyoは日本語の「凡庸」です。凡庸の意味は「平凡でつまらない」、英語なら「Mediocrity」。汎用ではないのでお間違いなく。
テーマの見た目(デザイン)は利用する人が好きに変更して利用して貰うこと前提です。というか変更しないと使いものにならない程度に初期配色をダサくしてあります。その代わりできるだけシンプルでカスタマイズしやすいJavascriptフリーなテーマになっています。このテーマはフルスクラッチでスターターテーマも使っていないので洗練具合は低いかもしれません。
WordPressの最近のバージョンで注力しているブロックエディタ全否定のテーマです。モダンなWordPressを好む方には全く向きません。
ウェブ初心者/WordPress初心者には優しくないかもしれません。スタイルシートの知識が無い初心者の方にはカスタマイズしにくいかもしれませんが、style.cssを編集して好みの配色やデザインにしてください。(v1.5.0)
ライブデモ: https://wptest.intaa.net (初期配色のままです)
また、このテーマの元ネタとなるhttps://gato.intaa.net/ (「がとらぼ」=このサイト)があります。ただし、「がとらぼ」はフルカスタム＋機能いろいろなのでベース部分だけ同じといえます。
Download
bonyo-1.5.0.zip v1.5.0 2022年7月1日(最新)
bonyo_full_20190418.zip v1.4.3 フル機能版
bonyo_full_20190325.zip v1.4.1 フル機能版
bonyo_20190306.zip v0.9 通常版
Bonyo v1.5.0は内部的にはほぼ新しく生まれ変わったテーマです。v1.4.xまでのフル機能版にあった多くの機能は廃止されシンプルになっています。v1.4.xまでの通常版に近い内容ですが静的サイドバーをデータベースに保存する機能とCSSをHTMLヘッダ内に出力する機能が追加されています。
v1.4.xまでのフル機能版はCSS最小化機能・静的サイドバー機能・画像遅延読み込み機能・AMP対応・管理パネルでのカスタマイズ機能を含みます。当然フル機能版がページ表示は高速です。
(v1.4.xまでに)通常版とフル機能版の2つのバージョンが存在する理由はWordPressの公式がページ表示以外の機能を含むテーマの登録を受け付けないからです。(WordPressの公式から配布することは断念したのでバージョンを分ける意味はなくなりました)
v1.4.xまでの通常版・フル機能版共に無料で、有料オプションはありません。
v1.5.0以降も無料です。やはり有料オプションはありません。
インストール
WordPressが展開されているトップディレクトリ(フォルダ)からwp-content/themesの下に既存のテーマが1つ〜幾つかある筈です。 そのWORDPRESS/wp-content/themesの下にbonyo-vX.X.X.zipを置いて展開してください。bonyoというディレクトリが出来る筈です。 WORDPRESS/wp-content/themes/bonyoディレクトリやその中のファイルのオーナー(所有者)やパーミッションをWordPressディレクトリ内の他のディレクトリやファイルと同じオーナーに変更してください。「凡庸」はテーマディレクトリ内に静的サイドバーやミニファイ化したCSSファイルを出力するようになっていますがWORDPRESS/wp-content/themes/bonyoディレクトリやその中のファイルのオーナーやパーミッションが不適切だと正常に書き込むことができません。ファイルの展開が完了したらWordPressの管理パネルにログインしてください。 「外観」から「テーマ」を開くと「Bonyo」というテーマが表示されている筈なのでアクティベート(有効化)してください。 WordPress管理パネルの「外観」「カスタマイズ」「オプション」を開き、3つのチェックボックを好みに設定してください。上部にある「公開」ボタンを押すと設定確定です。一度WordPressの管理パネルをログオフしてください。これで設定が反映されます。
配色やデザインのカスタマイズはWORDPRESS/wp-content/themes/bonyoディレクトリの中にあるstyle.cssを変更することがメインとなります。スタイルシートの変更はBonyoテーマを有効化したサイトをブラウザで表示し、[F12]ボタンでデベロッパツールを開き、配色を変更したい要素の上にポインタを移動しして右クリックで「検証」をクリック。デベロッパツールの「要素」タブを開き、要素の色を確認して好みに変更、気に入ったら変更した値をstyle.cssに書き込むというのが初心者向けです。style.cssを変更したらWordPressの管理パネルにログインしてログアウトします。管理パネルのログアウトで変更が適用されます。
特徴
- 高速な表示
- テーマ自体は非Javascriptブラウザ完全対応 (※1)
- レスポンシブ対応
ピュアCSSな多階層ドロップダウンメニュー(v1.5.0で廃止)- タッチ操作に対応したピュアCSSなハンバーガー・アコーディオンメニュー (v1.5.0でサイドバーに変更)
CSS変数によるカスタマイズ対応 (v1.4.xまでの通常版のみ、v1.5.0では廃止)- Font Awesome 4.7アイコン
- CSSミニファイ出力対応 (v1.4.xまでの通常版は非対応、v0.8 Full以降対応, v1.5.0対応)
- Gutenbergエディタ無効化設定
- 固定ページはページ毎に2カラムと1カラム(全幅・サイドバー無し)を選択可能 (v0.8以降)
- サイドバーの静的出力機能 (v0.8 Full以降)
画像の遅延読み込み機能 (v1.0 Full以降)(v1.5.0で廃止)AMPプラグイン用のテーマ (v1.1 Full以降)(v1.5.0で廃止)通常テーマとAMP用テーマでスタイルシートの共通化(v1.1 Full以降)(v1.5.0で廃止)管理パネルでのカスタマイズが通常テーマ・AMPテーマの両方に反映される(v1.1 Full以降)(v1.5.0で廃止)AMPページで「最新の記事」一覧をREST APIで取得して表示する機能(v1.2 Full以降)(v1.5.0で廃止)AMPページ専用サイドバー (v1.3 Full以降)(v1.5.0で廃止)- CSSのHTMLヘッダ内出力に対応 (v1.5.0以降)
- CSSのデータベース格納 + style.min.css(ファイル) (v1.5.0以降)
- 静的サイドバーのデータベース格納 + sidebar-1.php (ファイル) (v1.5.0以降)
PCなどの画面の幅の広いブラウザで表示したとき。メインのナビゲーションメニューバーはドロップダウン形式で3階層まで表示。
v1.5.0からはドロップダウン形式の階層表示は廃止で1階層のみに変更。
モパイル端末などの画面の幅の狭いブラウザで表示したとき。メインのナビゲーションメニューバーは右上隅のハンバーガーメニューアイコンに変わる。
v1.5.0からは左右に狭い画面でページ右上のハンバーガーメニューになるのは変わりませんが、ナビゲーションメニューではなくサイドバーがスライドインする表示に変わりました。
ハンバーガーメニューアイコンを押してメニューを広げた状態。メニューは3階層まで表示可能で、階層はアコーディオン形式で上下に広げて表示される。安易にCSSだけでメニューを作るとタッチよる多段操作に耐えないものになりやすいが、BonyoのメニューはJavascript無しでもタッチによる常識的な多段操作が可能になっている。
v1.5.0からは(ナビゲーション)メニューではなくサイドバーが表示されます。
Bonyoはコンパクトで非常に軽いテーマですが、さらに高速表示のための工夫をしているのでPageSpeed Insightsでは100点も余裕です。高得点を得にくい「モバイル」でも100点になりやすいでしょう。
CSSの最小化 (v1.4.xまでのフル機能版とv1.5.0以降のみ)
WordPressでは通常はテーマ内のstyle.cssがメインのスタイルシートとして表示・使用されますが、Bonyoではそのstyle.css v1.1からはstyle.phpの内容を最小化したstyle.min.cssが表示・利用されます。CSSの最小化はWordPressの管理パネルをログアウトすると自動的に実行されます。(v1.4.xまで)
v1.5.0からはスタイルシートは再びstyle.cssがメインになりました。サイト管理者はstyle.cssのスタイルを編集/変更してください。WordPressの管理画面をログアウトするとCSSのミニファイ処理が走りstyle.min.cssが出力されます。ページ表示で使われるCSSファイルはこのstyle.min.cssです。また、v1.5.0からはミニファイ化したスタイル(style.min.cssと同内容)がWordPressのデータベースにも書き込まれます。データベースへの書き込み(更新)タイミングはstyle.min.cssの出力と同じでWordPress管理画面からのログアウト時です。CSSを外部ファイルとして読み込む場合はstyle.min.cssが使用され、CSSをHTMLヘッダ内で読み込む場合はデータベースに格納されたものが使用されます。CSSを外部ファイルとして読み込むかHTMLヘッダ内で読み込むかはWordPressの管理パネルにログインし、テーマのカスタマイズでオプションからチェックボックスを操作して「公開」してください。
静的サイドバー出力機能について (フル機能版のみ)
ウェブサーバが非力であったりレンタルサーバなどでCPUパワーが制限されているなどの場合に、サイドバーの出力に時間がかかってページ全体の表示が遅くなることがあるので、静的なサイドバー出力機能を追加しました。管理パネルのデーマのカスタマイズのメニューで静的/静的サイドバー出力を選択できます。
静的サイドバー出力を選択すると、CSSの最小化機能と同じく管理パネルをログオフするとサイドバー部分をキャッシュ化してsidebar-static.phpを新規作成・上書され、それがサイドバー表示に使用されます。
動的サイドバーを選択すると、サイドバー出力にはsidebar.phpが使用されます。(v1.4.xまで)
v1.5.0からはサイドバーはsidebar-1.phpに出力されます。また、sidebar-1.phpと同じ内容がWordPressのデータベースにも格納されます。ファイルの読み出しが速いウェブサーバではサイドバーの静的ファイル出力(sidebar-1.php)を使用するのがオススメです。ファイルの読み出しが遅いウェブサーバではサイドバーの静的データベース出力を使用するのがオススメです。サイドバーの内容が変化することが多いのであれば静的サイドバーではなく動的サイドバー(WordPress初期値)がオススメです。
画像の遅延読み込みについて (v1.4.xまでのフル機能版のみ)
通常の画像読み込みはページの表示を遅らせます。閲覧者がページの表示を待つことになるので好ましくありません。この数年は画像の遅延読み込みが流行りとなっています。そこでBonyoにも画像の遅延読み込み機能を追加しました。遅延読み込みのベースはEcho.jsです。
BonyoではEcho.jsが機能するようにimgタグを書き換えるようになっています。なお、v1.0の時点では遅延読み込みになるのは記事中の画像とアイキャッチ画像だけです。遅延読み込みと通常の読み込みはWordPressの管理画面のテーマのカスタマイズにある「Option」内で選択できます。選択して「公開」ボタンを押した時点から有効化/無効化されます。画像の遅延読み込みはクローラーが画像を読めなくなることがありSEOの点から好まれないこともありましたが、Bonyoではnoscriptでクローラーに読ませるようにしているのでSEO上の不利も無いかと思われます。
Bonyoの画像遅延読み込みはAMPでは無効になるようにしています。AMPではEcho.jsは使えず、出力されるタグもAMPとしてはエラーになるのでAMP時の無効化判定部分を削除するのはお薦めしません。
画像遅延読み込み機能はWordPressに実装されたためv1.5.0からテーマ内の画像遅延表示機能は廃止しています。
カスタマイズについて (v1.4.xまでのフル機能版)
カスタマイズについて (v1.4.xまでの通常版)
WordPressのテーマのカスタマイズは管理パネルから幾つか値を変更する、またはカスタムCSSを追加・変更するというものですが、Bonyoでは管理パネルから触れるのはサイト名の変更とカスタムCSSの追加だけです静的サイドバーと画像の遅延読み込みの有無が選択できます。その他の幾つかのスタイルはCSS変数を触るのが簡単でしょう。CSS変数の設定はstyle.cssの最初の方にあります。
AMP対応について (v1.4.xまでのフル機能版のみ)
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ページでほぼ見た目が変わらないということになります。
テーマのAMP対応とAMP周りの全ての機能はv1.5.0から廃されています。AMPプラグインを使うことで他のテーマと同様のAMP対応は可能です。ただ、2022年夏現在これからAMPに対応する必要性が感じられません。
REST APIによるAMPページの「最近の投稿」一覧表示について (v1.4.xまでのフル機能版のみ)
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を採用しているのであればこの機能は有効にしない方が良い場合もあります。(「がとらぼ」の中の人のオススメは「有効」ですが。)
v1.5.0からはREST APIを使った「最近の投稿」一覧表示機能は廃されています。REST APIを有効にしておくこと(WordPress初期値)自体を好ましく思っていません。
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でも使用されます。
AMP周りの全ての機能はv1.5.0から廃されています。
FAQ
Q. Bonyoだとボニョじゃないの？
A. ボニョでもいいです。
Q. テーマのオプション変更が適用されません。
オプションのチェックボックス変更後に画面上部の「公開」をクリックし、WordPressの管理パネルからログオフして下さい。ログオフイベント発生時にサイドバーやスタイルシートが更新されます。この仕組みのため管理パネル内での「プレビュー」は機能しません。
Q. style.cssファイルを編集してスタイルシートを変更しましたが適用されません。
A. 1つ上と同じで、WordPressの管理パネルからログアウトすることでstyle.min.cssまたはデータベースが更新されて変更後のスタイルがページに適用されます。(外部CSSファイル(style.min.css)を採用している際にはブラウザのキャッシュを削除すると確実でしょう)
Q. 上をやってもテーマの変更が反映しません。
A. ウェブサイト側のキャッシュを有効にしている場合は削除するかキャッシュを停めて再設定・保存してみて下さい。これはBonyoに限らずWordPressでは起こり得ることです。
変更履歴
v1.5.0 full
* Released: July 1, 2022
Many features up to bonyo v1.4.x full version have been removed.
Added the ability to store the static sidebar in the database.
Added the ability to include stylesheets in HTML headers.
v1.4.3 full
* Released: April 18, 2019
Added: iframes are lazy loaded.
Fixed: Several styles.
v1.4.2 full
* Released: March 26, 2019
Added: AMP option section to theme customizer.
Added: Several AMP JS libraries can be selected and loaded by the theme customizer.
Changed: Moved the option to view recent posts via the REST API to the "AMP Options" section.
Changed: An optional internal variable has been changed to display recent posts using the REST API. Set this option again in the theme customizer.
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.
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: v1.4.x以前の通常版とv1.5.0以降にはJavascriptのスクリプトはありません。
v1.4.xフル機能版では、オプション機能非使用時にはJavascriptのスクリプトは無しですがCSSファイルの遅延表示のためにJavascriptの機能を1箇所利用しています。Javascript非対応のブラウザでは遅延読み込みは機能しませんが、正常に読み込むことができます。
テーマにはJavascriptを含みませんが、WordPress本体またはプラグインがJavascriptを表示・使用することがあります。