まず、バックグラウンドに入り、次に同じ方法でプラグインを直接インストールしてアップロードします。すべてのプラグインのインストールはこのプロセスに従いますが、プラグインのインストールプロセス中、プラグインの圧縮形式は zip 形式である必要があります。
プラグインを選択し、クリックして開き、インストールします。インストールが成功したら、プラグインをアクティブ化します。アクティブ化後、ここに追加の Perfmatters が表示されるので、設定をクリックします。もちろん、プラグインが正常にインストールされると、ツールバーに表示されます。もう 1 つのボタンもありますので、ここからプラグインの設定インターフェイスにすばやく入ることができます。
このプラグインは比較的機能が豊富です。主に、ファイル、js ファイル、CSS ファイル、画像、フォント、そしてもちろん CDN などの素材のパフォーマンスを向上させます。ただし、キャッシュ関連のプラグインはないため、このようなパフォーマンス向上プラグインを使用した後も、先ほど説明した小さなロケットなどのキャッシュ プラグインと連携する必要があります。また、無料の CDN CloudFlare を使用すると、キャッシュの役割を果たすこともできます。キャッシュと CDN はまったく異なる概念です。これについては後で説明する機会があります。ここでは、このプラグインについてのみ知っておく必要があります。これは主に、パフォーマンスを向上させるための軽量な方法です。プラグイン。
Perfmatters パフォーマンス プラグイン機能モジュール:
Perfmatters の基本的な最適化設定:
この基本設定は主に WordPress、プログラム自体、または woocommerce 自体を対象としています。それらの珍しい機能のいくつかをオフにする必要があります。
Perfmatters 独立ステーション リソースの最適化:
主に JS ファイルと CSS ファイルの場合、パフォーマンスを向上させる主な方法は、JS ファイルの読み込みを遅らせて Web ページの読み込み速度を向上させることであり、もう 1 つは、使用されていないファイル (CSS ファイル) を削除することです。
Perfmatters 独立ステーション キー リソースのプリロード:
簡単に言えば、フォントや CDN のアドレスなどのコア要素を事前に読み込むということです。
Perfmatters 独立ステーションの画像リソースは遅延ロードされます:
たとえば、画像が読み込まれるとき、ユーザーがページをめくるときなど、ユーザーが見ていないときは、最初の画面が表示されます。たとえば、今ホームページを開くと、これが最初の画面です。この位置に到達します。その後、ページをめくると、2 番目の画面に入ります。次に、ユーザーが最初の画面に入ると、ユーザーがこの画面に移動してから読み込まれるまで、次の画像は読み込まれません。この場合、ホームページの開く速度またはページの開く速度を効果的に向上させます。
Perfmatters 独立ステーション Google フォントと CDN の最適化:
次の 1 つは、主に Google フォントの最適化に関する私たちのものであり、もう 1 つは CDN に関するもので、最後の 1 つは Google の統計分析に関するものです。
以下、それぞれの内容についてご説明いたします。
Perfmatters の基本的な最適化設定:
まず、WordPress と woocommerce 用の最初のものを見てみましょう。プログラム自体は無関係なので、閉じる必要があります。
絵文字を無効にする: 顔文字
使わないことが多いのでオフにしてもいいです。例えば記事を書いたり商品一覧を書いたりするときに、こういったフォントアイコンが絵文字のように見えることがあり、いろんなところで使われているので絵文字は使わないし、ブラウザによっては認識できないものもあるので、普段は無効にしているだけです。
Dashicons を無効にする: WordPress 公式アイコンフォント
アイコンもフォントであることがわかるので、これをオフにすることができます。
埋め込みを無効にする: WordPress 埋め込み機能
埋め込み機能もありますが、これも今はオフにしています。
XML-RPC を無効にする: リモート接続の公開
リモートでの執筆と編集。通常、バックグラウンドで記事や製品を編集する場合は、コンテンツを編集するために電子メールやその他の方法を使用する必要がないため、これをオフにすることもできます。
jQuery Migrate を削除します: jQuery Migrate。
また、トランジションにはあまり使用されない jQuery もいくつかオフにします。
WP バージョンを非表示: WordPress の現在のバージョンを非表示にします。
次のステップは、WordPress のバージョンを隠すことです。ホームページを開いて、ソース コードを確認してみましょう。ソース コードには、WordPress のバージョン ノートがいくつか記載されていることがよくあります。たとえば、現在使用しているバージョンは 6.32 であることがわかります。この情報を隠して、このようなバージョンの脆弱性を利用して他人が Web サイトを攻撃するのを防ぐことができます。
RSD リンクを削除: ヘッダーは類似していますか? Rsd リンク
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://yourdomain.com/xmlrpc.php?rsd" />
RSD もリモート エディターであり、その効果は XML と同じです。
ショートリンクを削除します: 短縮リンク形式。
通常、サイトをセットアップするときには固定リンクを設定するため、短縮リンクが必要ない場合がよくあります。固定リンクを設定した後は、短縮リンクは必要ありません。
RSSフィードを無効にする: ブログ購読
RSSフィードリンクを削除する
RSS は主にブログの購読用なので、ショッピング モールや企業の Web サイトを運営している場合は、他の人にブログを購読してもらう必要はないので、次のようなものも必要ありません。
自己ピンバックを無効にする: 自己ピンバック
ピンバック:この機能は主に、誰かが私たちのアドレスを引用した場合、たとえば他の人のブログなど、私たちの側にジャンプできるアドレスがある場合、メールボックスから私たちにメールを送信して通知することを意味します。これは正常です。状況も不要です。
REST APIを無効にする: WordPressデータ型APIエンドポイント
REST APIリンクを削除する
デフォルトで REST API を使用することもできますし、リンクをオフにすることもできます。
Google マップを無効にする: Google マップ コンポーネント。
Google マップは Google マップです。企業の Web サイトを構築する場合、通常はお問い合わせフォームがあります。場合によっては、独自のニーズに基づいて Google マップを使用することもあります。サイトに Google マップが必要ない場合は、Google マップをオフにする必要があります。Google マップは大量の JS を生成するため、速度が遅くなります。
国内サイトを構築する場合は、これを閉じなければなりません。
国境を越えたビジネスを行っている場合は、ご自身の選択次第です。もちろん、Google マップを無効にした場合は、お問い合わせページなどのページをターゲットにすることもできます。上記の Google マップのように、Google マップを使用する必要があります。
もちろん、これを Google マップに設定していません。このページが必要な場合は、このページを除外し、他のすべてのページを無効にします。投稿の ID を見つけるにはどうすればよいでしょうか。ページの ID は非常に簡単です。まず、これがページであることを確認し、このページを見つけて、このページのリストを開きます。これらはすべてアクセサリ ページです。お問い合わせはアクセサリ ページです。お問い合わせを見つけたら、このページにあります。このお問い合わせの下にマウスを移動します。この場所に 4439 に等しい投稿があることがわかります。
つまり、このページには 4439 と入力できます。このページのみが読み込まれ、他のすべてのページは閉じられます。
パスワード強度メーターを無効にする: パスワード強度メーター;
パスワードを入力するときに、それが弱いパスワードである場合はリマインダーが表示されますが、これはオフにすることができます。
コメントを無効にする: サイトのコメント機能
サイト全体のコメント機能は、必要に応じて調整できます。たとえば、私たちはスタンドアロンの TOC サイトです。当社の製品ページはコメントではありません。評価です。コメントは主にブログを参照しています。ページはブログページです。他の人が私たちに残したメッセージは、必要ない場合は、自分のニーズに応じて閉じることができます。ここに投稿することもできます。
コメント URL を削除: コメントに挿入された URL。
次に、次のステップは、コメントから URL を削除することです。これは、他のユーザーが WordPress でコメントを入力するときに、その URL アドレスを入力できるためです。もちろん、コメント アドレスには通常、デフォルトで nofollow が追加されるため、SEO の最適化効果には影響しませんが、直接削除することもできます。
空白のファビコンを追加: 空白のアイコンを追加します。
空白のアイコンが現在表示されている場所です。アイコンがあり、それを追加したいと考えています。
グローバル スタイルを削除: サイト全体の組み込みスタイル。
次に、サイト全体から組み込みスタイルの一部を削除しましょう。通常は、後で独立したサイトを構築します。すべてのスタイルはテーマまたはプラグインから取得され、WordPress のデフォルト スタイルの一部は使用されないことがよくあります。これをオフにできるようにする必要があります。
ハートビートを無効にする:WordPress ハートビート
これは WordPress のハートビートと呼ばれ、Web ブラウザーが AJAX 呼び出しを実行するために使用されます。デフォルトでは 15 秒ごとにビートするように設定できるため、心配する必要はありません。
投稿のリビジョンを制限する: 履歴バージョンの数を制限します。
これは、記事やページの履歴バージョンを制限するために使用されます。つまり、編集するたびに履歴バージョンが作成されます。デフォルトは 20 ですが、20 に制限することもできます。次は、自動的に保存されるバージョンです。1 分または 10 分に設定できます。これで問題ありません。
ログイン URL: WordPress 独立ステーション バックエンド ログイン アドレス。
次の場所は、WordPress ログイン バックグラウンドを変更するために使用されます。通常、デフォルトの WordPress ログイン バックグラウンドでは、ドメイン名の後に /wp-admin または /wp-login.php を追加して、バックエンドに入ることができます。ここで、このアドレスを非表示にして別の名前を使用すると、他のユーザーがバックエンドのログイン インターフェイスに入ることができなくなります。
次の 2 つは補助的なものです。たとえば、このページに入ることができない場合は、メッセージまたは 404 ページを選択できます。それでも /wp-admin に入ると、404 が直接表示されます。このページは存在しないことを思い出して伝えることもできます。以下は、上記のページに対する 2 つの補足です。
Woocommerce 関連のパフォーマンス設定。
スクリプトを無効にする: Woocommerce global JS;
Woocommerce自体にも、プリロードされたコンテンツがいくつかあります。1つ目はJSを無効にすることです。これはWoocommerce内のすべてのJSです。もちろん、その操作プロセスにも指示があります。たとえば、当社の製品ページ、ショッピングコラム、またはチェックアウトページは表示されません。はい、しかし、たとえばホームページに多くの製品リストが表示される可能性があるため、慎重に操作する必要があります。JSを入力すると、これらの製品リストは表示されないため、通常の状況では、ニーズによって異なります。通常、デフォルトでは閉じません。
カートの断片化を無効にする: Woocommerce カートの断片;
これはショッピングカートのフラグメントです。いわゆるフラグメントはショッピングカートの内部です。たとえば、空の場合、現在ショッピングカートに商品があります。空の場合、この時点では読み込まれません。ショッピングカートの JS を確認できます。
ステータスメタボックスを無効にする: バックグラウンド WooCommerce モジュール
これはバックエンドの最適化です。たとえば、ホームページに入ると、タングステン鉱山の販売情報が表示されますが、ここでは表示されていないことがわかります。もちろん、これはこのことに関する情報です。うまく構成されていません。構成後、今日の製品と注文の数を示すメッセージが表示されます。通常、このコンテンツを表示するには、ドアなしで注文を入力するか、ドアなしで統計インターフェイスを入力します。そのため、通常の状況では、このモジュールをオフにします。
ウィジェットを無効にする: woocmmerce のデフォルト ウィジェット。
通常、当社の現在のサイトのように、製品リストやカタログリストなどの独立した Web サイトを構築する場合、テーマやプラグインのコンテンツはすべて使用し、外観でガジェットを使用することはほとんどありません。たとえば、外観でガジェットを検索する場合、フレームレス ノートブックをガジェットにインストールするだけで、ガジェット コンテンツが追加されます。
さて、中に入ると、例えばここにいくつかのツールを追加できることがわかります。追加すると、フレームレスに関連するいくつかの小さなツールが表示されます。たとえば、下にプルダウンすると、Woocmmerce の小さなツールが見つかります。ツール:
完全にオフにすることもできますが、実際の状況によっては、内部のガジェットを使用する必要がある場合はオフにしないでください。これは WordPress と Woocmmerce のコンテンツです。オフにする必要はありません。さて、パフォーマンス プラグインの基本設定はこれで終わりです。
Perfmatters リソース パフォーマンスの最適化。
これは主に JS と CSS の最適化です。このプラグインには、JS 管理機能という非常に強力な機能があります。これをオンにすると、独立したステーションに使用できる魔法のような操作が見つかります。各ページの JS ファイルと CSS ファイルを管理するということは、たとえば、一部のページで不要な JS ファイルや CSS ファイルを閉じることができることを意味します。
たとえば、これで保存が完了し、自由にページを開くことができるようになりました。たとえば、編集ページに入るために「会社概要」ページを開きます。もちろん、このページの上部にはツールバーがあるはずです。このツールバーで、[スクリプト マネージャー] をクリックすると、現在のページに読み込む必要があるすべての JS ファイルと CSS ファイルを管理できます。
たとえば、このページのすべてのプラグインをここで確認できます。たとえば、このページで通貨を切り替える必要がありますか? 通貨を切り替えてもページ上のすべてのコンテンツには影響しないため、多くの場合、これは不要です。通貨がないため、このページで閉じてから、現在の URL インターフェイスですべてを閉じると、このページにこのプラグインが表示されなくなります。
他のものについても同じことが言えます。たとえば、このページにはお問い合わせフォームがありません。このページの connect form7 プラグインに関連するすべての JS と CSS をオフにすることもできます。次に、他のものについても同じことが言えます。1 つずつ見つけることができます。不要なものを見つけたら、閉じてから閉じて保存します。このようにして、各ページの JS ファイルと CSS ファイルをターゲットを絞って閉じることができます。Web ページの速度に最も影響を与えるのは JS ファイルであり、CSS ファイルにももちろん影響があるためです。ここでは、主に JS と CSS を最適化しています。
さて、会社概要ページに戻ります。もちろん、閉じるプラグインはこのページでは不要なので、ここでは効果がありません。他のページでも同様です。たとえば、ホームページの場合は、ホームページページをターゲットにして、その JS または CSS ファイルも管理できます。
たとえば、スクリプト マネージャーのホームページをクリックした場合、通貨を切り替える必要がありますか? ホームページには製品があり、製品には価格がありますが、ホームページにはお問い合わせフォームがないため、閉じることができます。オフにすると、レポーターは他のすべての URL ではなく、現在の URL を選択する必要があります。オフにするだけです。このようにして、各ページを最適化できます。これは、パフォーマンス最適化プラグインの最も強力な場所です。
次は、すべての js を遅延することです。通常、これはチェック マークを付けます。実際のアクションは何でしょうか。つまり、できるだけ多くの JS ファイルを下部に配置する必要があります。Web ページを読み込むと、ソース コードが表示されます。Web ページを読み込むと、ブラウザーは現在表示されているコードしか認識できないため、これらのコードは上から下、左から右に読み込まれます。重要でない js ファイルを下部に配置すると、最初の画面ページの読み込みが大幅に改善されます。したがって、いわゆる JS の読み込みの遅延については、チェック マークを付ける必要がありますが、同時にフォームが下部に表示されます。このフォームの JS は上部に読み込む必要があるため、これをオフにして除外する必要があります。
次はもう少し深刻です。どういう意味ですか?それは遅延読み込みです。最初のものは遅延読み込みです。どのように延期されても、最終的には読み込まれます。読み込み順序が異なるだけで、遅延読み込みは異なります。遅延読み込みとは、顧客が操作していない場合は読み込まれないことを意味します。はい、顧客が操作したときだけです。たとえば、ページを開くためにクリックすると、必要なjsが読み込まれます。操作にはいくつかの操作があるため、操作時に注意する必要があります。1つ目は、すべてのjsファイルが遅延されることです。つまり、どれも読み込まれません。速度は最速ですが、セカンダリメニューやショッピングバーなどの特別な効果がある場合など、対応する問題が発生する可能性があります。ポップアップ効果がなくなる可能性があるため、通常はここでフルロードを使用しません。フルロードを使用する場合でも、次のような必要なプラグインを除外する必要があります。 エレメンター またはその他のプラグイン。
もちろん、他のものを除外することもできます。誰もが注意を払う必要があります。もちろん、除外にはいくつかの説明があります。疑問符をクリックすると、それを説明する公式ドキュメントがいくつかありますが、このドキュメントの目的はあなたを手放すことです。それらの重要でないjsファイルを選択して読み込み操作を遅らせると、いくつかの問題が発生します。たとえば、今ページを開いて更新すると、キーボードのF12キーを押してデバッグモードをオンにします。一般的なブラウザにはデバッグモードがあり、リソースの読み込み中に読み込まれたリソースが見つかります。次に、ページを読み込むときに、読み込む必要のあるすべてのコンテンツを更新します。以下で確認できます。たとえば、いくつかのCSSとファイルが読み込まれます。、画像など、一部のコンテンツが読み込まれます。ここでコンテンツを選択し、この位置に遅らせる必要があるものを入力できます。
たとえば、Google の統計情報や FB ピクセルなど、よく使用する一部の js ファイルはブロックされる可能性があります。ブロックされる特定の js ファイルについては、こちらの記事を参照してください。Google の統計情報であるこの js ファイルや、Google の第 4 バージョンの統計情報など、たくさん書きました。他にも、Google 広告や FB など、これらをブロックしても問題はありません。
よくわからない場合は、これを選択しないでください。
CSS が有効になっていません。また、先ほどページを開きました。このファイルを見ると、どのファイルが読み込まれ、どのファイルが読み込まれていないかがわかります。たとえば、CSS ファイルを読み込みます。CSS ファイル内のファイルの多くは使用されていないため、この時点では、使用されていないファイルを削除するだけで済みます。この方法では、読み込み速度に影響はなく、ブロックできます。
もちろん、下に読み込む必要がある CSS の一部を除外することもできます。直接確認することもできます。
次は、彼がツールを提供してくれることです。たとえば、FBピクセル、トラックコード、Google統計コードを頻繁に追加する場合、ヘッダーにコードを追加する必要があります。テキストに直接追加するだけです。ヘッダーの下部にあるコードはフッター用です。コンテンツに応じて追加できます。これが本文で、これがフッターです。コンテンツを追加できますが、通常は使用しません。次に、保存します。主にJSファイルとCSSファイルに影響を与えるコンテンツは何ですか?
これは主に、Web ページの速度の 2 つの重要な側面に影響します。たとえば、Google パフォーマンス分析ツールと、先ほど分析したレポートを開いています。このパフォーマンス分析、たとえばパフォーマンス スコアには、6 つの主要な項目があります。決定する必要がありますが、ここでは 5 つの項目しか表示されていないため、展開して見てみましょう。
1 つ目は、最初のテキストを描画することです。これは何を意味するのでしょうか? 私たちがページを開いたとき、顧客がページを開いたときに、最初のファイルが読み込まれる、つまり、その時間です。
さて、次は、このページを開いたときに読み込まれる最大のファイルです。たとえば、現在のページで最大のファイルは、このバナー画像で、比較的大きいです。ビデオがある場合は、それが最大のビデオになるため、この 2 つが最も時間がかかります。通常の最適化では、この 2 つの項目を最適化することになり、他の項目は実際には特に大きな影響はありません。
たとえば、ツリー ダイアグラムを見ると、ユーザーがツリー ダイアグラムを開いてから、メニューが読み込まれ、バナーが読み込まれ、最初のバナーが読み込まれるまで、ツリー ダイアグラムは空白のままです。したがって、この速度は、最初の画像またはテキストの読み込み時間であるパフォーマンス スコアに重大な影響を及ぼします。これが最も大きな影響を与えます。
メインカラーのコンテンツを減らすために、JS または CSS の読み込みを遅らせただけです。理解するだけでよいので、チュートリアルの内容に従ってブロックしました。
さて、これはリソースのコンテンツ設定に関するものです。
Perfmatters リソースのプリロード。
ページの読み込み速度を改善したいとします。これにはいくつかの方法があります。1 つ目は、不要なものをすべて削除すること、2 つ目は重要でないものの読み込みを遅らせること、そして 3 つ目は重要なものを事前に読み込むことです。この場合、Web ページ全体の速度が向上します。
プリロードとは、つまり、いくつかのページがより重要であるということです。それらをプリロードします。そして、ここでプリロードすることができます。たとえば、特定のフォントや CDN をプリロードする場合は、それらを書き込むことができます。この場所に DNS アドレスを書き込むこともできますが、DNS アドレスはまだ設定していません。設定する場合は、書き込むだけです。
さて、次に行うことは、いくつかの画像を事前に読み込むことです。たとえば、2 つの画像を事前に読み込むことができます。この場合、それらを保存します。その後、ユーザーがページを開くと、いくつかのページが事前に読み込まれるため、速度がある程度向上します。
Perfmatters 画像の遅延読み込み設定。
遅延読み込みは、一部の画像が一度に表示されずに徐々にフェードアウトする場合、またはユーザーが見ていない場合は読み込まれない場合に発生します。この場合、通常は iPhone 参照を含めてこれをオンにする必要があります。たとえば、YouTube ビデオを挿入する場合、特に YouTube サムネイルを遅延読み込みすることもできますが、一部のコンテンツを除外することもできます。
さて、次は DOM 構造です。DOM は Web ページ構造です。ツリー構造を指します。確認してみてください。もう 1 つは、一部の写真です。たとえば、頻繁にアップロードする製品写真の幅と高さを設定していません。写真には高さと幅がありますが、コードで設定して入力していません。ここで追加できますが、その目的は何でしょうか。
目的は、画像が突然大きくなったり小さくなったりしてパフォーマンスの変化を引き起こすのを防ぐことです。これは最適化なので、この数を増やします。もう 1 つはフェードインとフェードアウトです。確認できます。背景画像の読み込みもあります。これも追加します。さて、これは追加してから保存した後の遅延読み込みです。
Perfmatters Google フォントのローカライズ設定。
これは主にGoogleフォントに関するものです。通常のページにはGoogleフォントがあります。たとえば、ソースコードを開いてフォントを検索すると、ここに表示されます。ここでは、Googleフォントを導入しています。フォントは、実際には、Googleほど大きな会社の場合、通常の状況では、引用したフォントは非常に速く読み込まれるはずです。それでも、GoogleのCDNは現在比較的遅いため、リソースのダウンロードは非常に遅く、独立ステーションの読み込み速度に大きな影響を与えます。
したがって、通常の状況では、Web ページで使用する必要のあるフォントである Google フォントを直接サーバーにダウンロードします。つまり、ローカルの Google フォントにダウンロードして、ダウンロードが完了したら、これもチェックされます。これら 2 つは統合されています。もちろん、これはローカルにダウンロードするだけですが、CDN にダウンロードすることもできます。いわゆる CDN については後で説明します。サイト上の変更されていない素材を別のサーバーにバインドできます。この場合、2 つのサーバーが稼働していることに相当し、そのサーバーはコンテンツを配信して使用できるようにすることができます。CDN に書き込みます。CDN がない場合は、書き込みません。
次は、ローカルフォントを削除することです。これは主に、たとえば後でテーマを変更した場合、別のテーマで使用されるフォントが異なる可能性があるため、この時点で事前に削除する必要があります。最後の1つは直接無効にすることです。これを使用することはお勧めしません。使用すると、Webページのフォントが異常に表示されます。
Perfmatters CDN 機能設定;
CDN は主にコンテンツ配信です。たとえば、現在の Web サイトはサーバー上に配置されており、Web サイトのコンテンツの一部には CSS ファイルと JS ファイルが含まれています。これらはすべて固定されています。これらのコンテンツを分離して別のサーバーに配置することができます。これは、いわゆる動的分離と静的分離を使用します。分離後、別のサーバーが CSS ファイルと JS ファイルを読み込み、現在のサーバーはデータのみを読み込むため、速度が非常に速くなります。
もちろん、CDNに関しては、後ほど無料のCloudFlareという別のツールを使用して追加方法を説明しますので、後で使用するツールも含めて、ここで設定する必要はありませんし、ここで管理する必要もありません。
最後はGoogleの統計ツールです。通常、これは必要ありません。独立したステーションにコンテンツを追加したくありません。たとえば、統計については、Googleの統計の背景を入力するだけで確認できます。ここに参加する必要はありません。以下にいくつかのツールがあります。このツールは主に一部のデータとデータベースをクリアするためのものです。今のところ必要ないので、気にする必要はありません。いくつかの設定をインポートおよびエクスポートします。これには、メニューのボタンを非表示にしたり、非表示にしたりすることが含まれます。
Perfmatters データベースのクリーニング;
これはデータベースのクリーンアップです。データベースのクリーンアップでは、まず 2 つのステップを実行する必要があります。最初のステップでは、データベース内の不要な冗長コンテンツを検出し、それをチェックします。チェックした後、クリアします。使用のたびにクリアするだけでよく、ときどきクリアしてもかまいません。
必要ないと判断された場合は、これらがクリアされます。クリアされたので、心配する必要はありません。次は認証です。ここで入力する必要はありません。次はサポートです。これは、Perfmatters プラグインの使用に関するチュートリアルです。