【Hima Art Utility】プラグインをバージョン2.3へ更新しました。

更新内容は以下の通りです。

機能の修正・不具合対応

メニューの整理

プラグインの設定メニューをタブ切り替えにし、より設定しやすくしました。

メニューの表示方法を変更したのみで、今まで設定した内容に影響はありません

一部JS(jQuery含む)コードの修正

プラグイン内のJSおよびjQueryにおいて、軽微なコード修正を行いました。

確実に動作させるための修正ですので、この修正により既存機能の大きな仕様や動作への影響はありません

一部ショートコードコンテンツの最適化

以下のコンテンツを出力するショートコードについて、内容全体をHTMLタグで括るようにしました。

ショートコード囲みタグ
関連投稿aside
古い投稿の案内aside
アコーディオン（開閉コンテンツ）section

これにより、検索エンジンから見たページ中のコンテンツの判別がしやすくなり、SEOに役立つかも知れません。

PHP8.1 OGPカードで発生するPHP非推奨項目への対応

OGPを使ったリンクカードショートコードを使用する際、PHP8.1環境でコードの一部が非推奨となる不具合を修正しました。

「Home」「Topへ戻る」ボタンの表示調整

EdgeおよびFirefoxで、「Home」「Topへ戻る」固定ボタンのアイコンの位置がずれる不具合を修正しました。

機能の追加

スライドインコンテンツ機能を追加

予め作成した再利用ブロックをボタンクリックでスライド表示させる機能を追加しました。

通常スライドだとメニューの表示を想像されますが、柔軟性を持たせるため、再利用ブロックのコンテンツを表示させるよう工夫しています。

設定は、プラグインの設定メニューから「追加コンテンツ」を開き、「スライドコンテンツ」タブから行えます。

再利用ブロックをWordPressのメニューに表示させる既存の機能と併用することで、管理しやすくなります

機能有効化時の動作については、本ページおよびサイト内ページを表示した際に、左上に表示されるボタンをクリックして確認いただけます（現在、簡素なテスト用再利用ブロックの内容を表示しています）

一応モバイルでも同じ位置にボタン表示をし、追従するようにしていますが、設定からモバイルでの表示をオフにすることもできるようにしています。

常時SSL通信を行うリダイレクトタグの追記機能を追加

設定は「セキュリティとスパム対策」から行えます。

一応SSL通信が有効なサイトかどうかを判定させるようにしているものの、設定画面にもしつこく書いていますが、有効にする前に以下の点を必ず確認ください。

誤って有効にしたことで不具合が起こった場合、復旧には専門知識が必要となりますので、慎重に確認・判断ください

  • 既にインストールしているサイトの.htaccesファイルに、常時SSL通信（301リダイレクト）の記述（後述のような記述）がある場合、本機能を有効にする必要はありません
    ※本機能ではコードが存在するかの確認はしませんので、リダイレクトコードが重複した場合には思わぬ不具合が発生する可能性があります
  • SSL通信できていない（https://～）で管理画面・閲覧画面ともアクセスできていないサイトで有効化すると、管理画面や閲覧画面が表示できなくなりますので必ず確認ください
  • 以下のテストサイトでトップページ以外の個別投稿・個別固定ページを対象に、あえて「http://～」で検出し、常時SSL通信ができていないことを確認してから、機能を有効化してください。

※常時SSL通信させるためのリダイレクトコード（例）

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

※常時SSL通信できているかの確認ツール

Check Your Redirects and Statuscode

ツールを開いたら、トップページ以外の個別投稿・個別固定ページのいずれかで「http://～（わざとsをつけない）」に変更したURLで検査を行い、以下のように、「301 Moved Permanently」となっていたら、本機能を有効にする意味はありません。

【Hima Art Utility】プラグインの更新（バージョン2.3）|Personal WP Customization Notes (PWCN)

逆に、「200 OK」のみが表示されている場合は、本機能を有効にしてください。

本機能を有効にし、設定を保存したら、管理画面の「設定」→「パーマリンク」画面を開き、何もしないで「変更の保存」をクリックしてください（設定がリフレッシュされ、機能が完全に有効になります）

設定後は念のため、上記チェックツールで再度チェックし、上図のようになるかを確認ください。

HSTS(セキュリティヘッダー)の出力機能を追加

常時SSL通信を有効にしたとしても、まだまだ通信セキュリティには穴があり、ユーザーが入力して送信するまでの間（中間）で情報が抜き取られる（漏洩する）可能性は否めません。

そこで必要になるのがHSTS(セキュリティヘッダー)です。セキュリティヘッダーは、閲覧する側のブラウザのセキュリティ状態を、セキュリティヘッダーのあるサイトとの通信に限って、設定内容をコントロールして、セキュリティの高い通信状態を保持させるために役立ちます。

セキュリティヘッダーについて詳しくはこちら（トレンドマイクロ）のページなどを確認ください。

HSTSの各ディレクティブ（機能）の設定は、結構コード形態が厳格で、必要のない情報や記述に誤りがあると正常に動作してくれません。また、コピペで．．と紹介しているサイトのコードも誤っている場合があります。

そこで、できるだけ簡単にセキュリティヘッダーを実装していただけるよう、本プラグインにHSTSを適用する機能を追加しました。

機能を有効化すると以下のディレクティブと値が設定されます。

ディレクティブ値
X-Frame-OptionsSAMEORIGIN
X-Content-Type-Optionsnosniff
X-XSS-Protection1;mode=block
Referrer-Policyno-referrer-when-downgrade
Content-Security-Policy (CSP)upgrade-insecure-requests
Strict-Transport-Securitymax-age=31536000; env=HTTPS
Strict-Transport-Securitymax-age=31536000; includeSubDomains
Strict-Transport-Securitymax-age=31536000; preload
Permissions-Policygeolocation=(), midi=(),sync-xhr=(),accelerometer=(), gyroscope=(), magnetometer=(), payment=(), camera=(), microphone=(),usb=(),fullscreen=(self)

いろいろと調べて実装したので問題ないかと思われますが、また変更を行うかも知れません。

設定は「セキュリティとスパム対策」から行えます。

一応、非SSLの場合は有効にしてもセキュリティヘッダーが出力されないような措置は講じていますが、不具合が発生した場合、以下のようなトラブルとなる可能性がありますので、確実に上記の内容でHSTSを出力すると判断された場合以外は有効化しないようにしてください。

  • 設定により、フロントエンドから何かを送信するフォームからの送信に不具合が出る
  • 期限のあるものは1年を指定しているため、不具合が起きた状態でアクセスした方のブラウザからのアクセスができなくなる（アクセス拒否または権限不足で閲覧できない状態になる）

本機能有効化後、以下のツールで、きちんとHSTSが出力されているかを確認ください。

https://securityheaders.com/

きちんと出力されていれば以下のような結果が表示されます。

【Hima Art Utility】プラグインの更新（バージョン2.3）|Personal WP Customization Notes (PWCN)

.htaccessファイルへ記述する高速化コードの追記機能を追加

古くから「.htaccess 高速化」というキーワードで検索すると出てくる高速化対策コードを追加する機能です。

機能はプラグイン設定の「サイトの最適化」→「.htaccessファイルへの高速化コード追加」で有効にできます。

有効にすると、以下のコードを.htaccessファイルへ追加します。

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
# MIME Type 追加
<IfModule mime_module>
AddType text/cache-manifest .appcache
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule>
# プロクシキャッシュの設定（画像とフォントをキャッシュ）
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On
# キャッシュ初期化（1秒に設定）
ExpiresDefault "access plus 1 seconds"
# MIME Type ごとの設定
ExpiresByType text/css "access plus  1 year"
ExpiresByType text/js "access plus  1 year"
ExpiresByType text/javascript "access plus  1 year"
ExpiresByType image/gif "access plus  1 year"
ExpiresByType image/jpeg "access plus  1 year"
ExpiresByType image/png "access plus  1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/webp "access plus  1 year"
ExpiresByType application/pdf "access plus  1 year"
ExpiresByType application/javascript "access plus  1 year"
ExpiresByType application/x-javascript "access plus  1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
# Gzip圧縮の設定
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# 古いブラウザでは無効
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
# 画像など圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp|ico|eot|woff|woff2)$ no-gzip dont-vary

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

本機能については、かなり前に「Simplicity2」というテーマを使用していた時に、高速化コードとして紹介されていたコードで、主にブラウザ側のキャッシュ機能を最適化するものですが、体感的に高速化されたという感じは個人的には感じません。

ただ、古くから有効化しているコードで、本プラグイン側から追加して.htaccessファイルを直接触らなくて済むという感覚で実装しましたので、現状の表示速度等に特に問題を感じないのであれば、有効化する必要はないかと思われます。

本機能を有効にし、設定を保存したら、管理画面の「設定」→「パーマリンク」画面を開き、何もしないで「変更の保存」をクリックしてください（設定がリフレッシュされ、機能が完全に有効になります）

CSSによるツールチップショートコード追加

段落ブロックなどの文章中にツールチップ（ポップアップで表示される簡単な用語説明）を表示させるショートコードを追加しました。

詳しくは以下をご覧ください。

各種ショートコードの使い方

ゴミ箱が自動で空にならないようにする機能を追加

WordPressの標準では、ゴミ箱に入れた固定ページや投稿は、ゴミ箱に入れてから30日後以降に自動で削除されるようになっています。

本機能を有効にすると、自動削除処理を無効にし、ゴミ箱内のデータが永久に残るようにします。

「サイトの最適化」→「ごみ箱コンテンツの自動削除を停止する」で機能を有効にできます。

【Hima Art Utility】をダウンロード

最新バージョン　3.6　（2023年9月24日リリース）

66 ダウンロード