【ha-Basic】テーマ バージョン3.0リリース

公開日:2021年5月8日 すべて

【シンプルで使いやすいWordpress用無料テーマ【ha-Basic】を更新しました。

PHP8.0で動作させるための更新、以下の機能の改良、新機能の追加を行いました。

最新バージョンは3.0(メジャーアップデート)です。

現在【ha-Basic】をお使いいただいている方は、更新前に以下の内容を必ずご確認ください。

【ha-Basic】テーマのダウンロード

2021年5月20日 バージョン3.1へ更新しました

【ha-Basic】の最新バージョン(3.1)は以下のボタンから入手いただけます。

ファイル管理の都合上、配布ページのドメインが本サイトのドメインと異なりますが、私「ひまあーと」が管理・編集しているメインサイト「Knowledge Base」のドメイン配下のサブサイトですので、ご安心ください。

本テーマはセキュリティ上の観点などから、アーカイブバージョン(旧バージョン)のファイル提供を行っておりません。旧バージョン用の更新情報ページについても、常に最新バージョンのみダウンロードいただけるようにしています。

バージョン3.0で追加した機能

  • ブロックエディタで簡単に変更できるデザインパターン(詳細情報
  • 内部リンクカードを小さいカードのみに限定(詳細情報
  • 「再利用ブロック」一覧メニューを管理画面上に表示(詳細情報
  • メディア一覧へ画像ファイルのファイルサイズを表示(詳細情報
  • 完全なリファラ情報を渡す(詳細情報
  • メディアページを検索エンジンにインデックさせない(詳細情報

以前のバージョンにおける不具合対応・機能改善

  • モーダル(ポップアップ)ウインドウが動作しなくなる不具合の解消(詳細情報
  • ダークカラースキンのCSS調整(詳細情報
  • 引用(blockquote)タグのデザイン(詳細情報
  • パソコン表示の関連記事画像のサイズ調整(詳細情報
  • Swiperを最新版(6.5.3)へ更新(詳細情報
  • 【スポンサーリンク】文字列を削除(詳細情報
  • アイキャッチ画像のHTML出力方法変更(詳細情報
  • prism.js(コードハイライト表示)の選択使用(詳細情報
  • single.php内のコード整理(詳細情報
  • CSSへバージョン情報を付加(詳細情報
  • 見出しタグ(H2/H3)がエディタ上でデザイン変更できるよう改良(詳細情報
  • 親テーマの表示画面用CSSの出力方法を変更(詳細情報

バージョン3.0で廃止した機能

バージョン3.0で追加した機能の詳細

ブロックエディタで簡単に変更できるデザインパターン

「段落ブロック」「リストブロック」「テーブルブロック」で、ブロック編集画面(ブロックエディタ右サイドバー)上からデザイン選択できるパターンをいくつか追加しました。

どのようなことができるかについては、本機能をプラグイン化した「HA BLOCK DESIGN」のページで詳しく紹介しています。

内部リンクカードを小さいカードのみに限定する

WordPress標準の内部リンクカード表示機能(Embed)。挿入するリンク先ページのアイキャッチ画像によって自動で大カード化されてしまうのを防ぎ、常に小カードで表示させるための設定を追加しました。

テーマカスタマイザーの「表示設定」にある「内部リンクカードを小サイズに強制」にチェックを入れることで、常に内部リンクカードが小サイズ表示されるようになります。

「再利用ブロック」一覧メニューを管理画面上に表示

WordPress標準では投稿編集画面から再利用ブロックを選択し、再利用ブロックの一覧最下部にあるリンクをクリックしないと再利用ブロックの一覧表示および編集ができません。

これを通常の投稿のように管理画面のメニューからワンクリックで一覧表示させる設定を追加しました。

テーマカスタマイザーの「ログイン画面・管理画面」にある「再利用ブロックメニューの表示」にチェックを入れることで、管理画面左メニュー上に表示されるようになります。

メディア一覧へ画像ファイルのファイルサイズを表示

ページの表示高速化への一番の近道は「ページの転送量を減らすこと」で、ページ転送量の増加の多くは画像ファイルが大きいことが原因となっています。転送量を無駄に多くしてしまうファイルサイズの大きい画像を手軽に発見できるように、ファイルサイズを表示させる機能です。

テーマカスタマイザーの「ログイン画面・管理画面」にある「メディア一覧へメディアサイズを表示」にチェックを入れることで、メディア一覧上にファイルサイズが表示されるようになります。

完全なリファラ情報を渡す

個人情報保護の観点により、Google Chrome85から、外部リンク経由でのページアクセス情報がドメインまでに限定されました。これにより、Googleアナリティクスなどでアクセス解析を行う際にリンク元を探しにくくなり、サイト制作者にとっては不都合に感じる方もいるかも知れません。

そこで、【ha-Basic】を使っているサイトのページに含まれる外部リンクをクリックした際に、リンク先のリファラ情報へ完全なURLを渡す(知らせる)ことができるようにしました。

テーマカスタマイザーの「その他の設定」にある「リファラにフルURLを送信する」にチェックを入れることで、完全なURLをリンク先へ渡すことができるようになります。

メディアページを検索エンジンにインデックさせない

WordPressでメディアにアップロードした画像やファイルは、直接アクセスできるようページが自動生成されます。検索エンジンクローラーが巡回した際に検索対象であるページと認識されると、検索結果にそれらが表示されることがあり、情報量が少ないことからサイト評価に影響が出たり、ファイルへの直接リンクをされる可能性があります。

そこで、画像やファイルのページに対して「Noindex」属性を付加し、検索エンジンの検索対象とならなくするためのスイッチを設けました。

テーマカスタマイザーの「その他の設定」にある「画像ファイルURLをNoindexにする」にチェックを入れることで、画像・ファイルページを検索エンジンのインデックス対象から除外できるようになります。

↑ 一覧へ戻る

以前のバージョンで起きていた不具合への対応・改良の詳細

テーマで実装しているスムーススクロール用スクリプトの影響により、プラグインなどの機能に含まれていることの多いポップアップウインドウの表示ができない現象が発生していましたが、スクリプトの設定変更により解消しました。

ダークカラースキンのCSS調整

ダークカラースキンにおいて、「ホーム」「画面上部に戻る」ボタンの配色不良によりマークが表示されない現象を解消しました。

また、固定ページの全幅テンプレートで、左右余白に差ができてしまう現象をできる限り解消しました。

引用(blockquote)タグのデザイン

より簡素なデザインへ変更しました。

パソコン表示の関連記事画像のサイズ調整

アイキャッチ画像に縦長画像を使っているとき、パソコン表示の関連記事が正常に表示されない(表示が崩れる)現象を解消しました。

Swiperを最新版(6.5.3)へ更新

トップページのスライダー画像表示に用いているswiper.jsを現行での最新バージョンへ更新しました。

Swiper バージョン6.5.3ではIE(Internet Exproler)へのサポートは対象外となっているため、正常に動作しない可能性があります

本文下レクタングル広告の上に表示していた【スポンサーリンク】の表示を削除しました。

アイキャッチ画像のHTML出力方法変更

Discover や Google 検索のすべての形式の検索結果(Google ウェブ検索、Google 画像検索、アシスタントなど)で幅1200px以上のアイキャッチ画像を使うことが推奨されているため、パソコン表示時には「full」サイズ(アップロード時の原寸)画像を出力するようにしました。

また、条件による分岐を使い、モバイル時には転送サイズが大きくなりすぎて、PageSpeed Insightsにおいて、「適切なサイズの画像」を使うよう指摘を受ける可能性を抑制するため「large」サイズの画像を出力するようにしました。

同時にmax-imageメタタグを出力するようにし、検索結果に大きな画像を表示することを許可するようにしました

prism.js(コードハイライト表示)の選択使用

使用に備え、ハイライト表示用のスクリプトとCSSを読み込ませるようにしていましたが、テーマカスタマイザーで使用するか否かを選択するようにし、サイト上で本機能を使わない場合にはそれらを出力しないようにしました。

これにより、ハイライト表示が不要なサイトにおいて余分なスクリプトやCSSが出力されなくなり、より高速にページ表示ができるようになります(若干の効果ではありますが、こうしたものの積み重ねが大きくなるという観点からの変更です)

デフォルトではOFF(使用しない)になっていますので、旧バージョンを使用中に本機能を使われていた方はテーマカスタマイザー上でONにするようにしてください(OFFのままですとショートコードとコードがそのまま表示されます)

single.php内のコード整理

テーマテストサイト上などで追加していた実サイトでは不要なコード類を整理しました

CSSへバージョン情報を付加

CSSへ追記や編集を加えた際、できるだけキャッシュのクリアをすることなく反映できるよう、すべてのCSSファイルリンクへバージョン情報を出力するようにしました。

これにより、ある程度は解消されると思われますが、完全ではありませんので、反映されない場合には「Ctrl」+「F5」などによるキャッシュのクリアを行ってください

見出しタグ(H2/H3)がエディタ上でデザイン変更できるよう改良

テーマのCSSが効いてしまい、投稿(固定ページ)編集画面で、H2およびH3タグの色変更などができなくなってしまう現象に対して対策を致しました。

動作は以下のようになります。

  • テーマカスタマイザーの「表示設定」で「見出しタグをカラースキンに合わせる」にチェックを入れた場合、カラースキンに合わせた見出しタグのデザインに強制されます
  • 「見出しタグをカラースキンに合わせる」のチェックを外した場合(デフォルト)では、自由にデザインの設定が可能になります

テーマ更新後は「見出しタグをカラースキンに合わせる」のチェックが外れた状態となりますので、カラースキンの設定を維持する場合にはチェックを入れてください

表示画面用CSSの出力方法を変更

旧バージョンでは、非圧縮のCSSファイルと圧縮したCSSファイルを用意し、以下のような順序で表示画面用CSSの出力を行っていました。

  1. 非圧縮のCSSファイルへ何等かの書き換えがあった場合、日付の差分を見て、圧縮したCSSファイルを生成しなおす
  2. ページへのアクセス時に圧縮したCSSをインラインで出力

ブラウザキャッシュがない場合、少なくともページ表示ごとにこの2つの処理を行う必要があったため、サーバーに少なからず負荷増が発生していました。

バージョン3.0では、子テーマの利用、追加CSSの利用を行うことを前提に親テーマのCSSは行われないことが多いと判断し、最初から圧縮したCSSを用意し、それをhtmlとして直接出力する方法へ変更しました。

これにより、親テーマの表示画面用各CSSに編集を行った場合は、ユーザー自身で圧縮CSSを用意して上書きする必要がありますので、「子テーマの利用」「追加CSSへの追記」を推奨します

↑ 一覧へ戻る

バージョン3.0で廃止した機能の詳細

Youtube動画の遅延読み込み機能

Youtube動画の埋め込みコードの置き換え、遅延読み込みのためのスクリプトを読み込ませることで表示速度の改善を行うための機能でしたが、ブロックエディタでは使いにくいと判断し、機能を削除しました。

この機能を使っている投稿や固定ページは編集していただく必要があります。Search Regexプラグインなどで「data-src」が含まれるコンテンツを探していただき、変更をお願いします。

Youtube動画を挿入するページでは、ブロックエディタの埋め込みを使いながら、自動で遅延読み込み(正確には画像だけを表示させ、再生ボタンがクリックされた時のみきちんと読み込みをする)させるプラグインを使うのが便利かと思います。おすすめは以下のプラグインです。

GutenbergでYoutube動画の埋め込みをした際、Google PageSpeed Insightsのスコアが低下するのを防ぐプラグイン「Lazy Load for Videos」

AMP対応用のテストプログラム

テーマ開発段階からAMP対応させることを目指してテスト用プログラムをいくつか入れていましたが、無理にAMP対応させることよりも、サイトの表示そのものを最適化させる方向での開発に絞りましたので、それらのファイル・プログラムを削除しました。

テーマ上で実稼働はさせていませんので、更新による影響はありません

バージョン1.0時代からお使いいただいている方のため、is_amp(AMP対応ページかどうかを判断する関数)のみ残してあります。

↑ 一覧へ戻る

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしていますブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。