WordPressに本文折りたたみ機能を実装するプラグイン！ Ganohrs Toggle Shortcodeを開発しました。AMPにも対応可能。

Are you want to translate this page to English? Please click this link to translate via ‘©Google Translate'!

みなさんこんにちは！　ガノー（Ganohr）です！　(≧▽≦)

当サイトは‘ワードプレス’（WordPress）で運用しています。

とくに、当サイトの場合記事内に更新履歴を入れ込んで、修正や追記などがいつおこなわれたか明示しています。

ただしこれは、必要としないかたも多い情報です。

そこで、『Ganohrs Toggle Shortcode』（ガノーのトグル・ショートコード）を開発し、ワードプレスのプラグインとしてリリースしました。

Ganohrs Toggle ShortcodeYou can insert to WordPress that toggle-code for CSS-based / Or details Tag. ... 外部サイトへアクセスwordpress.org

この記事では

します！

最新版0.1.0はSEOフレンドリーになりました。その他の機能など

このプラグインは、AMP対応で軽量なものを目指して開発しています。

その一環で、SEOフレンドリーな機能である「CSS Enqueue Type」の指定を可能にしました。

SEO効果を狙いたい方は、「Enqueue Type: Enqueue」を指定してください。

これを行うと、折りたたみを行うためのCSS読み込みを必要になった位置で行うため、ページロード時にブロッキングされません。

ただし、CSSをユーザーがカスタマイザー経由で修正することが難しいため「Enqueue Type: Head」を指定できるようにしています。

SEO効果を求める方へ

このプラグインは『Autoptimize』を用いても正しく動作します。

より高いSEO効果を求める方は、導入を検討されて下さい。

AutoptimizeAutoptimize は、以下を最適化することでサイトの反応を高速にします。JavaScript、CSS、画像 (遅延読み込みを含む)、HTML、Google フォント、非同期 JavaScript、また邪魔な Emoji の除去など。 ... 外部サイトへアクセスja.wordpress.org

なお、本プラグイン開発者は以下のアドレスよりSEOアドバイスやSEO施策サービスを提供しています。

【WordPress】不具合対応/カスタマイズ/AMP/キャッシュ他迄対応しますランサーズで見積もり・カスタマイズの相談を承ります ... 外部サイトへアクセスwww.lancers.jp

「Fix Autoformat」機能を搭載しました

WordPressにはオートフォーマット機能があります。これらは以前のブロックエディタの名残であり、WordPressを敬遠する方々の最大の難敵と言えるでしょう。

オートフォーマットは度々、必要で意味のあるHTMLコードやスタイルを破壊します。

これは主に、折りたたみを行いたいコンテンツの前後の空白を無断で削除したり、逆に余計に追加したり、様々な不具合をもたらしてきました。

そこでオートフォーマットにより破壊されたコードが混入しても、ある程度その破壊されたコードを除去してレイアウトする機能を実装しました。

といっても「<p>タグ」や「<br>」タグ程度しか修復できませんが、レイアウトが崩れたり、余計な空白が開く現象が改善します。

Gutenbargエディター（新ブロックエディタ）に対応

これまでのコードエディタだけでなく、Gutenbargエディタでも問題なくショートコードを利用できるようになりました。

ショートコード欄を追加して入れ込むことも、「段落」欄に直接書くことも出来ます。

上記のオートフォーマットを対策しているため、かなり利便性の高いショートコードになっていると思います。

最新版0.1.2はAMPにより強固に対応しました

AMP誰もが簡単に素晴らしいページ・エクスペリエンスを得られるように。Powered by AMP. ... 外部サイトへアクセスja.wordpress.org

AMP for WP – Accelerated Mobile PagesAMP for WP は、コミュニティで最も推奨されている AMP です。自動的に AMP (Google AMP プロジェクト) 機能を追加します ... 外部サイトへアクセスja.wordpress.org

上記2プラグインで簡単にAMP化できる機能を実装しました。

これらのプラグインを利用する場合は、「Output CSS When AMP」を「Yes」にしてください。

THE THOR「ザ・トール」│次世代WordPressテーマ ... 外部サイトへアクセスfit-theme.com

CocoonSEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。 ... 外部サイトへアクセスwp-cocoon.com

または上記のAMP対応テーマを利用している方は、オプションページから「Output CSS When AMP」を「No」にしたあと、「Minified CSS」をコピーし、AMP用のスタイルシート領域に追加してください。

※ 外観→テーマ編集→amp.cssを編集してください。

もしくは「Details」スタイルを利用していれば、配色は通常のテキストとなりますが、そのまま動作しますので難しいことをしなくても構いません。

0.0.3の特徴

今回からCSSベースの折りたたみの実装からdetailsタグによる実装を搭載しました。

detailsタグは現状の殆どのスマホとPC用のブラウザで動作します。CSSベースの実装は古いブラウザでも動作しましたが、今後はCSSベースの折りたたみの実装はメンテナンスしない予定です。

detailsタグの採用により、折りたたみ上限がなくなりました

CSSベースの実装では、回避的に折りたたみ機能を実装していたため、1記事内で最大20件の折りたたみしかできませんでした。

detailsタグを採用したことにより、折りたたみの上限をなくしましたのでご活用下さい。

動作可能なテーマはCocoonとLion Media、その他

CSSベースの折りたたみではテーマ別の相性問題がありましたが、detailsタグを採用したことでこれがなくなりました。

現在、実際に動作を確認しているテーマ以下のとおりです。

【Ganohrs Toggle Shortcodeが動作するテーマ】

• Cocoon
• Simplicity2
• Lion Media

※ その他のテーマでも基本的に動作します。動作しなかったテーマがあればコメントで教えてください。

WordPress6.1＆PHP7.4.28、及びPHP8.1.12での動作を確認しました

PHP7のセキュリティアップデートが、2022年11月28日で終了する予定です。

そこでWordPress最新の6.1及び7系最新の7.4.28、8系では8.1.12で動作するよう改修しました。

Output CSS When None AMP機能を搭載しました

これまで独自のCSSを追加するか否かを、AMPモードかどうかだけでしか制御できませんでした。

0.2.0からは、非AMPモードでもCSSを追加するか否か制御できます。

例えばCSSをより小さくしたい場合に、「Output CSS When None AMP」及び「Output CSS When AMP」を「No」にし、Minified CSSをコピーし、使用しないSuffixの定義を除去したものを子テーマのCSSやカスタマイザーの追加CSS、または、amp.css等に追加することでCSSを変更できます。

まあ、デザインのカスタマイズを行いたい場合にもCSSが読み込まれなくなるため便利でしょう。

0.2.0からはDetails Defaultスタイルを搭載しました！

0.2.0の目玉機能としてDetails Defaultスタイルを搭載しました！

このスタイルは一つのスタイルで複数のスタイルの折りたたみを使い分けることができます。

0.2.1からは数値のsuffixを除去する機能が追加されました

detailsスタイルを利用すれば、数値で指定していたsuffix指定（古い非detailsスタイルで利用されていた）を除去し、現状推奨しているdetails defaultスタイルでもそのまま表示できるよう機能を実装しました。

アップデート後、この機能は強制的にONになりますが、不要な場合や不具合が出た場合設定から無効化してください。

折りたたみ機能が活躍する場面

折りたたみ機能は、さまざまな利点があります。

そのため、いろいろな活用ができます。

折りたたみ機能の実践例

折りたたみの実践例を紹介します。

折りたたみ機能の実践例1 - 折りたたみ可能な文章を表示する

折りたたみ機能の実践例2 - 最初から折りたたんでおく例

折りたたみ機能の実践例3 - 広告をユーザー自身で非表示可能にする例

なお、広告をユーザーが非表示可能にすることは『Googleアドセンス』（Google AdSense）の‘プログラムポリシー’（確認）で許可されています。

対して、「最初から折りたたまれた領域に、アドセンス広告を配置する」と、プログラムポリシー違反になるためご注意ください。

それでは次ページにて、同プラグインでの

「折りたたみ機能の呼びだしかた」を解説します。

簡単な記述で呼びだせます！