WordPress にコメント アバターのカスタム デフォルトと遅延読み込みを実装する、wordpress avatar_PHP チュートリアル

WordPress、WordPress アバターのカスタムデフォルトと遅延読み込みを実装します

WordPress のデフォルトコメントアバターをカスタマイズします
Gravatra アバターを設定していないコメント投稿者の場合、WordPress は背景に設定したデフォルトのアバターを表示します。これには、謎の人物、空白、デフォルトの Gravatar ロゴなどが含まれます。ただし、これらのアバターには共通の欠点があります。それは、あまり美しくなく、あまり見にくいということです。たとえば、記事を読むためにブログにアクセスしたが、その記事にコメントした読者のアバターはすべて、小さなモンスターやレトロなど、WordPress によって自動的に生成された「見苦しい」アバターであ​​ることが保証されている場合、あなたはそのようなことになります。まだこのブログの記事に興味がありますか?答えはイエスだと思います！では、自分のブログに属し、自分のブログに適したデフォルトの WordPress アバターをデザインしたり、見つけたりすることについて考えたことはありますか?さて、Zhou Liang はみんなの食欲をそそるわけではありませんが、プラグインを使用せずに WordPress のデフォルトのコメント アバターをカスタマイズする方法について話しましょう。

方法は非常に簡単で、以下に提供するコードを、使用しているテーマのfunctions.phpファイルに追加します。

リーリー

上記のコードの /images/tweaker.jpg は、カスタマイズされたデフォルト アバターの相対パスです。画像のアドレスは自分で変更できます。使用しているテーマの画像ファイルの下にアバターを配置することをお勧めします。

WordPress コメントアバターの遅延読み込み
HTML構造を変更する

前述した新しいブラウザーの問題のため、HTML 画像を記述する通常の方法は使用できなくなり、代わりに src 属性にプレースホルダーを記述し、実際の画像アドレスを data-original 属性に記述する必要があります。 WordPress アバターのコード構造は次のようになります。

リーリー

WordPressでは、元の出力アバターは以下の通りです。

リーリー

ここで、次のように Lazy Load プラグインに適した構造に変更する必要があります。

リーリー

ローディング画像またはデフォルトのアバターをプレースホルダー画像として使用することをお勧めします。

遅延ロードのサポートを追加しました

footer.php を開き、Lazy Load プラグインを追加して、 の前に呼び出します。

リーリー

もちろん、これを行う前に、Web サイトに jQuery がロードされていることを確認する必要があります。完全な手順については、Lazy Load について私が翻訳した記事を参照してください。

Lazy Loadを使用するメリットとデメリット

Lazy Load を使用する理由 画像の読み込みを遅らせてページの読み込み速度を向上させることができることは以前からご存知だったかもしれませんが、これは主に速度の問題であり、たとえば Web サイトの SEO にとっても非常に重要です。 : 記事ページがあり、N 人が返信していますが、これらの返信者のアバターは記事の内容と何の関係もないことがよくあります。検索エンジンに無関係な写真が多数含まれることは望ましくありません。

言い換えると、電子商取引 Web サイトを構築している場合、商品説明に豊富なグラフィック情報が含まれており、検索エンジンによってクロールされることが望まれますが、これらの画像はサイズが大きいことが多く、タオバオの読み込み速度に影響します。また、ページのパフォーマンスを向上させるためにすべての処理が遅れていますが、これは SEO に大きく依存しているプラ​​ットフォームにとっては良いことではないかもしれません。

画像の読み込みを遅らせるかどうかを選択します。コンテンツの重要性とページのパフォーマンスを測定するには、バランスをとることが重要です。

http://www.bkjia.com/PHPjc/1075079.htmlwww.bkjia.com本当http://www.bkjia.com/PHPjc/1075079.html技術記事 WordPress にコメント アバターのカスタム デフォルトと遅延読み込みを実装し、WordPress アバターとデフォルトのコメント アバターをカスタマイズします。Gravatra アバターを設定していないコメント投稿者のために、Wor...

。