無料の Toombler プラグインを使えば、Gutenberg ブロックまたはシンプルなショートコードにより、インタラクティブで直感的なページめくり PDF フリップブックをあらゆる投稿や固定ページに追加できます。
バージョン 1.4.0 · 無料 · GPL ライセンス · WordPress 5.8 – 7.1 対応
Toombler が読み取れるように、共有設定を「リンクを知っている全員」に指定します。
WordPress プラグインディレクトリで「Toombler Flipbook」を検索し、「今すぐインストール」をクリックします。
任意の場所に [toombler id="…"] を貼り付けるだけで完了です。
Toombler Flipbook ブロックをページにドラッグするだけで、ブロックエディタ内で直接リアルタイムプレビューを確認できます。
クラシックエディタ、Elementor、Divi、WPBakery など、ショートコードに対応したあらゆるページビルダーで動作します。
あらゆるコンテナの幅に自動でフィットし、デスクトップ、タブレット、スマートフォンで常に鮮明に表示されます。
フロントエンド側で余計なスクリプトは読み込まれません。単一のレスポンシブな iframe のみで構成され、ページ表示速度スコアに影響を与えません。
PIN コードによる閲覧制限や公開期限の設定も可能で、すべて Toombler ダッシュボードから一元管理できます。
プラグインは完全無料かつオープンソース (GPL) です。必要なのは無料の Toombler アカウントだけです。
方法 A： WordPress 管理画面の「プラグイン → 新規追加」へ進み、「Toombler Flipbook」を検索して「今すぐインストール」＆「有効化」をクリックします。
方法 B： 下記の ZIP ファイルをダウンロードし、「プラグイン → 新規追加 → プラグインのアップロード」からアップロードします。
⬇ toombler-wp-plugin.zip をダウンロードToombler ダッシュボードを開き、対象のフリップブックの ⚙ をクリックして「設定と埋め込み」を開きます。埋め込み URL の id= の後ろにある文字列をコピーします — これがファイル ID です。
ブロックエディタで「+」をクリックし、「Toombler」を検索してブロックを追加します。サイドバーパネルにファイル ID を貼り付けると、即座にライブプレビューが表示されます。
投稿、固定ページ、またはウィジェットに以下を追加します：
オプションパラメータを指定する場合：
| パラメータ | デフォルト値 | 説明 |
|---|---|---|
id | required | Toombler ダッシュボードから取得したフリップブック ID |
width | 760 | 埋め込みの幅（ピクセル単位） |
height | 540 | 埋め込みの高さ（ピクセル単位） |
nav | 1 | ナビゲーション矢印 — 1 有効、0 無効 |
counter | 1 | ページカウンター — 1 有効、0 無効 |
sound | 0 | ページめくり音 — 1 有効、0 無効 |
flipsound | 1 | めくり音の種類：1 または 2 |
autoplay | 0 | 自動めくり再生 — 1 有効、0 無効 |
autospeed | 3 | 自動再生時の1ページあたりの秒数 (1–60) |
dl | 1 | ダウンロードボタン — 1 有効、0 無効 |
fs | 0 | 全画面表示ボタン — 1 有効、0 無効 |
bg | dark | 背景色：dark、light、または transparent |
start | 1 | 初期表示する開始ページ番号 |
bookmark | 1 | 訪問者ごとに前回のページを記憶 — 1 有効、0 無効 |
zoom | 1 | ズーム操作を許可 — 1 有効、0 無効 |
drag | 1 | ページの角ドラッグを許可 — 1 有効、0 無効 |
thumbs | 0 | サムネイル一覧バー — 1 有効、0 無効 |
duration | 650 | めくりアニメーション速度（ミリ秒、100–3000） |
spine | 0 | 背表紙の立体影（中央の光影） — 1 有効、0 無効 |
borderless | 0 | 角丸なし（平らなエッジ） — 1 有効、0 無効 |
closed | 1 | 閉じた状態から開始（表紙のみ） — 1 有効、0 無効 |
hardcover | 1 | 硬質な表紙＆裏表紙 — 1 有効、0 無効 |
corners | 1 | ホバー時の角めくりアニメーション — 1 有効、0 無効 |
mscroll | 0 | モバイルでめくらずスワイプスクロール — 1 有効、0 無効 |
adreplace | 0 | ページ追加ではなく2ページ目を Toombler ページに置き換え — 1 有効、0 無効 |
text | 0 | フリップブック下に折りたたみ可能なテキスト版を表示（SEOに有効） — 1 有効、0 無効 |
プラグインは自分のサイトの中に招き入れるものですから、何を持ち込むのかを尋ねるのは当然です。これは意図して小さく作ってあります。表側に出力されるのは <div> ひとつと、その中の <iframe> ひとつだけ。loading="lazy" を付けてあるので、長いページの下のほうにあるフリップブックは、読者がそこまで来てから読み込まれます。
表側でスタイルシートも JavaScript も読み込みません。データベースに表を作らず、管理画面にメニューも増やしません。どこかへ通信することも、何かを数えることも、API キーを求めることもありません。フリップブックを動かしているものはすべて iframe の中、つまり当方側で動いています。追加してもページ速度のスコアが動かないのは、そのためです。
停止するときも同じように静かです。ショートコードが認識されなくなるので、[toombler id="…"] は削除するまで記事にそのままの文字列として残ります。データベースには何も残りません。もともと何も書き込んでいないからです。
フリップブックはページの画像です。目が見えてマウスを使える読者には十分ですが、スクリーンリーダーにとっては役に立ちません。枠があるだけで、読むものがないからです。ショートコードに text="1" を加えると、本の下に折りたたみ式の Read the text version パネルが現れ、PDF の実際のテキストレイヤーがそこに入ります。
取得は訪問者のブラウザではなくお使いのサーバーで行われ、結果は WordPress のトランジェントに保存されます。テキストが見つかったときは十二時間、見つからなかったときは一時間——まだ抽出中のフリップブックが、翌日ではなくまもなく反映されるようにするためです。保存するのは最大 6 万文字。一般的なパンフレットより多く、四百ページのマニュアルがオプションテーブルを埋め尽くすのを防ぐのに十分です。
もうひとつ、高尚ではありませんが実際的な理由があります。そのテキストはあなたのページに、あなたの HTML の中に、あなたのドメインの下に置かれます。記事を読む検索エンジンは、入り込めない枠ではなく、文書が実際に述べている内容を見ることになります。見つけてほしいカタログやニュースレターを公開しているなら、この属性ひとつがこのページの他の何よりも効きます。
これは本物のテキストを含む PDF でのみ働きます。OCR をかけていないスキャンにはテキストレイヤーがないので、空のパネルを開くのではなく、パネル自体が現れません。
WordPress 5.8 以降と PHP 7.4 以降が必要で、現行の WordPress に対して動作を確認しています。この条件を低くしてあるのは意図的です。奇をてらったものを使っていないので、数年遅れのホスティングでも動き続けます。
ふつうのショートコードなので、ブロックエディター、クラシックエディター、テキストウィジェット、そして Elementor、Divi、Beaver Builder、Bricks といったページビルダー——ショートコードが処理される場所ならどこでも動きます。Gutenberg ブロックはその上に乗った便利さであって、必須ではありません。
GPL バージョン 2 以降のフリーソフトウェアで、WordPress 本体と同じライセンスです。読むことも、書き換えることも、自分用に改変したものを自分のサイトで動かすこともできます。
ページの HTML に入り込むものはすべて疑ってかかる価値があります。属性がどう扱われるかを書いておきます。ファイル ID は [A-Za-z0-9_-] に一致し、十文字から六十文字でなければなりません。それ以外は URL に貼り付けられるのではなく、目に見えるメッセージで拒否されます。幅と高さは absint() を通るので、紛れ込んだ文字はレイアウトを壊さず既定値になります。組み立てた URL は src に入る前にエスケープされます。
知っておくと役に立つことがひとつ。WordPress は知らないショートコード属性を黙って捨てます。hight="600" と書いても何も壊れません——ただ既定の高さになり、どこにも警告は出ません。設定が効いていないように見えるときは、まず上の表と綴りを照らし合わせてください。
このプラグインがお使いのサーバーから当方へ送る要求は、ちょうど一件だけです。しかも text="1" を指定したときだけで、そのフリップブックのテキストを求めるものです。訪問者に関する情報は何も送られません。そもそも何も知らないからです。
出力される HTML は同じなので、これは好みの作業スタイルの問題です。ブロックはエディター内で実際の表示を見せ、サイドバーで各設定を操作できます。サイズを試すときはこちらが楽です。ショートコードは文字列なので、記事間でコピーしたり、ページビルダーに貼り付けたり、あとからサイト内のフリップブックを全部探し出したりするのが簡単です。
誰かのためにサイトを管理しているなら、ショートコードには実際的な利点がひとつあります。テーマの変更、エディターの切り替え、ページビルダーへの移行を、作り直さずに乗り越えられることです。このプラグインと他の三つの埋め込み方——素の iframe、JavaScript の断片、oEmbed——の比較は、WordPress に PDF を埋め込むガイドをご覧ください。
無料の Toombler アカウントを作成し、Drive、Dropbox、OneDrive 内の PDF や Google Docs、Slides のファイルをフリップブックに変換して、数分でサイトに埋め込みましょう。