WordPressで画像を改善する方法

WordPressで画像を改善する方法


画像が大きすぎてインターネット経由で読み込めないので、久しぶりです。今日、ウェブサイトはそれらなしでは存在できません。長年にわたってインターネットの速度は劇的に向上していますが、ブログの写真を管理することが重要です.

サイトに画像を簡単にアップロードできるからといって、準備をせずに画像をアップロードできるとは限りません。最適化されていない画像は、実際、多くの点でサイトに損害を与える可能性があります。訪問者があなたのことを考える方法に影響を与えることから、あなたのウェブサイトの速度やSEOランキングまで。それでもまだ考えていない場合は、WordPressで画像を改善するいくつかの方法を紹介します.

このガイドでは、これから説明します。

  • WordPress用に画像を最適化してサイトを高速化し、SEOを改善する方法
  • WordPressがJPEG画像を圧縮する方法を変更する
  • WordPress用の最も人気のある画像最適化プラグイン
  • 動画と画像に遅延読み込みを追加する
  • 前後の画像を魅力的な方法で表示する
  • インタラクティブな画像の作成方法–描画、説明、リンクの追加
  • 追加の画像サイズを再生成する方法
  • jQueryを使用して幅と高さの画像属性を削除する
  • メディアアップローダーでカスタム画像サイズを作成する方法
  • 任意のWebサイトの自動スクリーンショットを作成し、画像として投稿に公開します

Contents

WordPress用に画像を最適化してサイトを高速化し、SEOを改善する方法

WordPress用に画像を最適化する必要があるのはなぜですか?努力すると、次のことが期待できます。

  • より速いサイト
  • より良いSEO
  • 小さいバックアップ
  • 帯域幅の使用量が少ない
  • 幸せなユーザー

画像を最適化できる段階がいくつかあることも知っておく必要があります。ブログにアップロードする前でも写真を管理できます。アップロード後にも実行できます。.

サイトで画像をすばやくテストする

最適化に取り掛かる前に、サイトの速度とパフォーマンスをすばやく確認できます。リストのいずれかのツールを使用することで、サイトの画像がどのような形であるかをすばやく知ることができます.

使いたい GTmetrix サイトの読み込みを遅くしている正確な画像も表示されます.

アップロード前にWordPress用に画像を最適化する

ブログを作成している間、ほとんどの人は画像を最適化するために必要なすべての手順を実行しません。通常、人々はカメラまたはスマートフォンから写真を撮る、インターネットから写真をダウンロードする、またはコンピューターソフトウェアを使用して写真を作成する.

彼らはフォーマット、画像の大きさ、ファイル名については考えていません。絵がよければ、インターネットの準備ができていると彼らは思います。画像を確認しないと、災害に向けて構築していることになります.

画像のサイズを変更する

画像のサイズを変更する

各画像の幅と高さを確認する前に、WordPress Webサイトに画像をアップロードしないでください。たとえば、最大700pxで画像を表示する場合、幅の広い画像をアップロードする必要はありません。これを行うと、出力は同じになりますが、サイトが遅くなる大きなファイルになります。 WordPressは追加サイズを作成しますが、それはアップロード前に画像を準備しない言い訳にはなりません.

画像のサイズ変更はすばやく簡単です。 Microsoft Paintのような無料のツールがたくさんあります。次のような画像のサイズを変更するための無料のオンラインツールを見つけることもできます 簡単なサイズ変更.

画像の寸法はテーマごとに異なります。どちらを使用すればよいかわからない場合は、WordPressテーマを詳しく調べて画像を調べ、ドキュメントを検索するか、サポートに問い合わせてください.

品質を変える

寸法を変更した後、画像の品質を変更することを検討する必要があります。ソフトウェアに応じて、画像の品質を変更するさまざまな方法があります。たとえば、常に人気のあるPhotoshopでは、Web用の画像を保存できます。このオプションを使用すると、低品質で画像を保存できますが、サイトに合わせて最適化されます.

また、画像をJPEGとして保存することを選択した場合、Photoshopは品質レベルの選択を要求します。この場合、品質を12から8に下げると、画像のサイズが大幅に縮小されますが、品質の違いはそれほど大きくありません。.

それでもソフトウェアを使用して写真の品質を変更していない場合は、無料でオンラインで試すことができます 小さなPNG ツール。写真をアップロードして、どんな違いがあるか見てみましょう.

適切なフォーマットを選択する

サイズや品質を変更した後でも、フォーマットの変更を検討する必要があります。手始めに、正しいフォーマットを選択するだけで、画像から数キロバイトを取り除くことができます。.

画像フォーマット

一般的なルールは非常に簡単です。写真がある場合は、JPEGにしてください。ロゴ、ベクター画像、または非常に単純なコンピューター生成グラフィックがある場合は、PNGを使用してください。グラデーションのない非常に小さい画像がある場合、または上記のような単純なアニメーションを表示したい場合は、GIFを使用できます。一般に、PNG画像はJPEG画像よりもかなり大きくなるため、形式を変更するとメリットがあります.

多くの場合、サイズの違いは予想できますが、画像を再構成しても品質に大きな違いはありません。次にPNG写真をアップロードする前に、写真を撮ってJPEGとして保存して、違いを確認してください。詳細な説明については、 PNG、JPEG、GIF、SVGの違い.

ファイル名に注意

ファイル名は重要ではないように聞こえるかもしれませんが、実際にはそれを十分に認識しておく必要があります。画像ファイルの名前には、SEOに関する貴重な情報が含まれています。他の人がGoogleや他の検索エンジンであなたの画像を見つけられるようにしたい場合は、適切な名前を付ける必要があります.

スペースを使用せずに画像に名前を付けることをお勧めします。ページと画像をランク付けする場合は、キーワードを含めることを忘れないでください。たとえば、カリフォルニア州フェラーリの写真をアップロードする場合、ファイル名は「ferrari-california.jpg」にする必要があります。 WordPressのSEOプラグインを使用している場合、キーワードのaltタグをチェックすることはすでに知っています。はい、本当に適切なイメージ名を持つことが重要です.

アップロード後に画像をWordPress用に最適化する

コンピューターで画像を準備したら、アップロードを続行できます。うまくいけば、あなたの画像はちょうどいいサイズと品質です。形式とファイル名が正しいことを確認しました。アップロード後、WordPressは追加情報を要求します。メタ情報をスキップしないでください。画像の詳細を入力して、簡単に整理し、SEOの準備をします.

タイトル、説明、代替テキスト、キャプション

専門性の面倒を見ながら、SEOを忘れないでください。タイトルと説明は必ずメディアに追加してください。これは、WordPressのメディア管理に役立ち、SEOの向上にも役立ちます。また、画像を正しく表示できない訪問者に表示されるaltタグも忘れないでください。これはユーザーに役立つだけでなく、SEOにも役立ちます。ページのランクが上がり、ユーザーは新しい画像を見つけやすくなります.

キャプションは常に必要なわけではありませんが、追加の説明が必要な画像(スクリーンショットなど)には必ずキャプションを追加してください.

WordPressで画像を編集する

画像をさらに編集する必要があることに気付いた場合は、ファイルをアップロードした後でもWordPressで編集できることを知っておく必要があります。. 画像の回転、切り取り、拡大縮小を変更する あなたはすでにアップロードしました。サムネイルのみ、またはその他すべてのサイズを編集することもできます。 WordPressのネイティブエディターは非常にシンプルですが、時々節約できます.

すべてのサムネイルを再生成

これまでのテクニックのほとんどは、まだアップロードしようとしている新しい画像ファイルに役立ちます。しかし、WordPressサイトにすでにアップロードされているファイルが数千とまではいかなくても数百ある場合はどうでしょうか。心配しないでください。これらの画像を最適化してサイズを変更できます.

簡単な解決策として、100万人以上のユーザーが使用している無料のサムネイルの再生成プラグインに興味があるかもしれません。画像をより詳細に制御したい場合は、画像の最適化に最適なWordPressプラグインのいくつかをチェックする必要があります。このプラグインについては、この記事の次の行で説明します。.

追加の画像サイズを再生成する方法

WordPressプラグインを使用する

もちろん、サイトの画像を最適化するのに役立つWordPressプラグインは数十あります。下にスクロールして、画像の最適化に最適なWordPressプラグインを表示します.

必要に応じて画像を遅延読み込み

時には、写真の品質はサイズよりもはるかに重要になります。これは、写真を一流にしたい写真家に当てはまります。ファイルのサイズや品質を低下させるリスクはありません。それでも、最適化を忘れる必要はありません。この場合、WordPress用に画像を最適化するには、遅延読み込みを検討する必要があります.

遅延読み込みは、ユーザーが必要な場合にのみ画像を読み込む手法です。 (それらにスクロールします)。たとえば、1つの記事に高品質の写真を20枚アップロードした場合、サイトのパフォーマンスが大幅に低下します。しかし、画像を遅延読み込みすると、記事は高速になり、写真は必要なときにだけ読み込まれます–ユーザーが画像にアクセスした瞬間.

レスポンシブな画像

WordPressのほとんどのテーマはレスポンシブですが、必ずしも画像がレスポンシブであることを意味するわけではありません。小さな画面に大きな画像を読み込ませたくないので、サイトに追加の画像サイズを登録する必要があります。テーマでレスポンシブな画像を使用していない場合は、その仕事のために専門家を雇うことを検討してください。.

ソーシャルメディア向けに画像を最適化する

画像がソーシャルメディアで適切に表示されるようにするには、追加の手順を実行して、メタタグとスキーママークアップを最適化する必要があります.

YoastのようなSEOプラグインを使用している場合は、設定を確認することを忘れないでください。たとえば、Yoastでは、ソーシャルメディアに関連するいくつかの設定を行うことができます。したがって、SEO->ソーシャルに移動し、Facebook、Twitter、Google +、Pinterestに情報を入力します.

さらに多くの画像が必要で、追加のソーシャルメディアWebサイト用に画像を最適化する場合は、チェックアウトしてください WPSSO –ソーシャル共有最適化およびSEOプラグイン用の正確なメタタグ+スキーママークアップ.

WordPressがJPEG画像を圧縮する方法を変更する

一連のJPEG画像をWordPressウェブサイトにアップロードしている場合、元の品質が失われていることに気づいたかもしれません。 WordPressのせいなのか疑問に思っているなら、今あなたはあなたの答えを持っているでしょう–はい、それは!

JPEG形式で画像をアップロードしたら, WordPressは自動的に圧縮を変更します 画像の品質を落とすことを決定します。具体的には、WPはJPGEで90%の圧縮を使用します。投稿のサムネイルとして使用したり、投稿に表示したりするためだけに画像が存在する場合、それはすばらしいことですが、写真をアップロードする場合は、写真を可能な限り最高の状態にしたいのです。?

幸いなことに、これを変更するのに必要なコードは1行だけです。.

JPEG画像の圧縮を停止します。

JPEG画像を圧縮したくない場合は、次のコードをコピーしてfunctions.phpファイルに貼り付けます。

add_filter( 'jpeg_quality'、function($ arg){return 100;});

変更を保存することを忘れないでください、そして、あなたは新しい画像をアップロードする準備ができています.

一方、画像はそれほど大きな問題ではないかもしれません。したがって、それらをさらに圧縮して、サイトのロードにかかる時間を節約することができます。そのコード行の最後の番号を変更すると、新しくアップロードされた画像の品質が変更されます.

JPEG画像をさらに圧縮:

数値が小さいほど、より多くの画像が圧縮されます。たとえば、これらのJPEGをさらに圧縮するには、次のコードが必要になります。

add_filter( 'jpeg_quality'、function($ arg){return 80;});

忘れないでください。デフォルトの圧縮レベルは90です.

重要:これは、functions.phpにコードを貼り付けた後にアップロードする画像にのみ影響します。ライブラリに既にある画像のサイズと品質を変更するには、プラグインが必要です。追加の画像サイズを再生成する方法をご覧ください.

WordPress用の最も人気のある画像最適化プラグイン

この記事の冒頭で、WordPress用に画像を最適化してサイトを高速化し、SEOを改善する方法について説明しました。ご覧のとおり、使用できる方法はいくつかあります。ブログにアップロードする前でも、画像に注意することが重要です。しかし、写真がすでにサイトに掲載されている場合、すべての画像を個別に再最適化して、もう一度アップロードすることが不可能になる可能性があります.

心配しないでください。そもそもそうすることを誰も期待していない。 WordPress用の最も人気のある画像最適化プラグインをお見せしますので、数分お待ちください。.

画像を最適化するには、リストからプラグインを選択するだけです。あなたはそれを設定し、プラグインがあなたのために行うことを選択する必要があります。その後、リラックスして、選択したプラグインに作業を委任することができ、メディアファイルの整理を開始できます。.

次のプラグインは、WordPressサイトの画像を圧縮するのに役立ちます。彼らはサイトの読み込みをより速くし、最終的にあなたがSEOを改善するのを助けます.

WPスマッシュ

価格:無料

700,000以上のアクティブインストールがあるWP Smushは、WordPressの最高の画像最適化プラグインの1つである必要があります。さまざまな圧縮技術を使用して画像をすばやく最適化できます。 WP Smushで画像を圧縮することの素晴らしい点は、画像の品質が低下しないことです。信じられませんか?プラグインをテストする.

WordPress用の画像の準備について説明したとき、サイズ変更は最適化プロセスの重要な部分であると述べました。このプラグインを使用すると、WP Smushで最大サイズを設定できるため、そのことを心配する必要はありません。その後、ライブラリに追加する前に、すべての大きな画像が自動的に縮小されます.

この素晴らしいプラグインは、JPEG、GIF、PNGファイルで動作します。すべてのディレクトリで機能し、添付ファイルを自動的に処理し、マルチサイトでも機能します。各画像を手動で操作したり、50個の画像を一括編集したりできます。さらに良い結果とオプションが必要な場合は、WP Smush PROをチェックしてください.

EWWW画像オプティマイザー

価格:無料

面白い名前の後ろに、WordPressで最も人気のある画像最適化プラグインの1つがあります。前述のものと同様に、EWWW Image Optimizerは、品質に影響を与えることなく画像を圧縮できます。プラグインで数秒でサイトを高速化できると考えると、すでにプラグインをダウンロードする準備が整っています。これを行うと、画像を一括で最適化できるようになり、GRAND FlaGallery、NextCellent、NextGENなどのギャラリーでも独自の一括最適化ページを取得できます.

WordPressでWP_Image_Editorクラスを使用するすべての画像は、 自動的に最適化, 他のすべてに対して手動で魔法をかけることができます。最適化したいフォルダーを選択できるようになりました。これの詳細、およびクラスを使用するプラグインについては、公式を開いてください EWWW画像オプティマイザーページ WordPressリポジトリ.

JPEGおよびPNG画像の圧縮

価格:無料

小さな圧縮画像

WordPressロゴを持っているかわいいパンダがこのプラグインについてもっと知りたくない場合、私たちは何ができるかわかりません。そして、パンダが見慣れたものになっているのは、TinyPNGウェブサイトで画像を圧縮するのに役立つものと同じだからです。ええ、その動物は私たちが当初考えていたよりも用途が広いようです。しかし、プラグインに焦点を当てましょう.

このプラグインを使用すると、パンダは自動的に画像を最適化します。新しいプラグインをアップロードするたびに、プラグインが処理を引き継ぎます。それでも、メディアライブラリに移動するだけで、個々の画像を最適化したり、一括で最適化したりできます.

JPEGおよびPNG画像の圧縮は、アニメーション化されたPNGもサポートし、マルチサイトで完全に機能します。これはWooComerceと互換性があり、WPオフロードS3に問題はありません。.

プラグインのすばらしいところは、すべての画像に最大の幅と高さの属性を設定できることです。メタデータが何をするかについて心配していたとしても、心配しないでください。パンダはすべての情報をそのまま保持します.

ファイルサイズの制限はなく、ダッシュボードウィジェットを設定でき、WordPressモバイルアプリでも動作します。これらすべての理由から、Compress JPEG&PNG画像には100,000を超えるアクティブインストールがあり、WordPressに最適な画像最適化プラグインのリストにスポットを当てる価値があります.

不気味

価格:無料

不気味

このプラグインのカバー画像はあなたを怖がらせるかもしれませんが、少し時間をとって、Imsanityのすべての機能を見てください。ああ、プラグインの名前すらすごいですね。プラグインの名前に問題がなければ、提供するものがたくさんあることがわかります。.

Imsanityは画像を自動的に拡大縮小し、最大サイズを設定できるほか、一括サイズ変更オプションも備えています。ブログに何百もの写真があり、最適化が必要な場合、これは重要です.

この無料のプラグインは、プラグインの設定にあまり苦労したくない場合に最適なオプションです。必要なのは、Imsanityをインストールしてアクティブ化し、いくつかのオプションを設定することだけです。画像の最適化に向けた独自の方法を管理します.

BMP画像をJPGに変換できるオプションが気に入りました。少し前に誤ってアップロードしたBMPファイルがたくさんある場合に備えて、これは命の恩人になります.

ShortPixel画像オプティマイザ

価格:無料

ShortPixel画像オプティマイザ

30,000を超えるアクティブインストールがあるShortPixel Imageは、WordPressで最も人気のある画像最適化プラグインの1つです。プラグインには機能が満載されており、最適化する画像が多いサイトには必須の機能です.

ShortPixel Image Optimizerは、JPG、PNG、GIF、PDFドキュメントを最適化するだけでなく、 JPEG、PNG、GIF画像をWebPに変換. プラグインは他のギャラリープラグインとうまく連動し、サイトがHTTPとHTTPSのどちらを使用しているかは関係ありません。それはあなたが画像からEXIFデータを削除することを可能にします(写真家が持っているのが好きなもの).

プラグインはすでに最適化されている画像を認識するため、必要に応じてスキップします。自動最適化を許可または禁止し、この素晴らしいプラグインを使用して多くのことを実行できます。リポジトリの公式ページをチェックして、すべての機能を確認してください.

Optimus – WordPress Image Optimizer

価格:無料

Optimus

前述のプラグインと同じように、OptimusはWordPress用に画像を最適化し、画像の品質に影響を与えることなくそれを行います。プラグインで自動的に処理するか、オプションをオフにして必要な場合にのみ画像を最適化できます.

Optimusはマルチサイトで機能し、WordPress eコマースサイトに慣れ親しんでおり、WordPressモバイルアプリとWindows Live Writer向けに完全に最適化されています。それはあなたがコードの行に触れる必要なしにあなたのサイトをスピードアップします。プラグインはさらに多くの機能を提供しますが、プレミアムバージョンを選択する必要があります。詳細については、WordPressプラグインリポジトリの公式ページにアクセスしてください.

WordPressで動画と画像の遅延読み込みを追加する

ウェブサイトに大量のビデオや画像素材を追加し始めると、読み込みが遅くなるのは明らかです。どこから来たかに関係なく、ビデオや大きな画像はサイトの重要な役割を果たし、訪問者はすべてのコンテンツをロードするのに必要な時間よりはるかに長く待機します。 WordPressの場合、それは大した問題ではありません。状況を簡単に修正する方法を次に示します.

PHPの使い方がわかっている場合は、画像の遅延読み込みの追加と、同僚が書いた無限スクロールに関するすばらしい記事があります。 エレガントなテーマ.

そうでない場合は、次の数行で、最も人気のある遅延読み込みプラグインのいくつかについて説明します。 サイトの読み込みを速くする. そして、あなたは多くをする必要さえありませんが、プラグインをインストールして、いくつかの簡単なステップでそれを設定する必要があります.

ビデオの遅延ロード

価格:無料

ビデオの遅延ロード

YoutubeやVimeoの動画がたくさんある場合は、このプラグインのインストールを検討してください。プラグインを設定すると、プラグインがビデオに画像を配置するため、ウェブサイトの読み込みがはるかに速くなります。訪問者がビデオにスクロールすると、この画像は[再生]ボタンの上に表示されます。クリックすると、ビデオの読み込みと再生が始まります。簡単なデモは開発者のサイトで見ることができます.

WP YouTube Lyte

価格:無料

WP YouTube Lyte

このプラグインは、その作業をすばやく簡単に実行します。インストールしたら、YouTube動画へのリンクを追加するか、ショートコードを使用してリンクを追加します。通常のビデオ、プレイリストを追加するか、選択したビデオからオーディオのみを追加するかを選択できます。その後、Youtubeビデオに遅延読み込みを有効にする画像が表示されます。画像をクリックするだけで、ビデオまたはオーディオを開始できます.
開発者のサイトでデモを見る.

a3遅延ロード

価格:無料
デモ1
デモ2

a3遅延ロード

これはモバイルサイト専用です。モバイルデバイスで訪問者に見せたい画像や動画がたくさんある場合は、a3 Lazy Loadをご覧ください。それはあなたがあなたの画像とビデオにレイジーローディングを追加することを可能にし、プラグインはあなたがロードしているコンテンツをスクロールしている間ユーザーに現れるトランジション効果を選択することさえも可能にします.

管理領域では、遅延読み込みするコンテンツのオンとオフを簡単に切り替えることができます。オンになっている場合は、訪問者がコンテンツのその部分にスクロールしたときにのみコンテンツがロードされます.
1000枚の画像を備えた見栄えの良いデモがあり、スクロールすると一度だけ読み込まれます。このプラグインの遅延読み込みビデオもあるので、上のリンクをクリックすると表示できるビデオデモがあります。.

BJレイジーロード

価格:無料

BJレイジーロード

ビデオのサポートが不要で、画像の遅延読み込みのみが必要な場合は、このWPプラグインをチェックしてください。インストールして設定すると、画像、サムネイル、Gravatarの写真、さらにはiframeまでがプレースホルダーに置き換えられます。前述のプラグインと同様に、ユーザーがアクセスしたときにのみコンテンツをロードします.

それが遅延ロードしたい画像またはビデオであるかどうかにかかわらず、上記のプラグインのいずれかがほんの一瞬で役立ちます。それらはすべて無料ですので、少なくとも1つのプラグインを試さないで、肩の重さがどれだけかかるかを確認するための言い訳はありません。もちろん、同じ機能を持つ他の多くのプラグインがあり、それらをすべて閲覧して試すことができます.

前後の画像を魅力的な方法で表示する

変更前/変更後の画像の多くの例をすでにご覧になっていると思います。あなたのことはわかりませんが、「前後」というフレーズを目にしたときに最初に頭に浮かぶのは、トレーニングプログラムの前後に人が体を見せてくれるフィットネストレーニングプログラムです.

考えてみれば、ほとんどのWebサイトは単純なアプローチを使用して違いを紹介しています。両方の画像を取得し、それらを隣り合わせに配置したり、上下に配置したりしています。同じ結果が必要な場合は、すでにその方法を知っているため、この記事を読むことはできません。.

これを問題の前後に解決する視覚的に素晴らしい方法があり、それがあなたの手の届くところにあると私たちが言ったとしたら?さて、セットアップがあれば、最終的な結果が本当に素晴らしいので、デベロッパーを称賛します.

二十二

価格:無料

二十二

Twenty Twentyは、WordPressプラグインリポジトリで無料でダウンロードできるこの素晴らしいプラグインの名前です.

プラグインを使用すると、1つの画像を他の画像の上に配置し、スライダーを使用して画像を非表示/表示できます。デモを見てください。そうすれば、私たちが話していることがわかります。.

さて、この小さなプラグインに夢中になったら、この素晴らしい効果を作成する方法を見てみましょう。デモ効果を再現するのは比較的簡単ですが、基本的なHTMLの使い方を知っておく必要があります。行こう:

  1. 新しい投稿を作成するか、既存の投稿を開きます
  2. 2つの画像を投稿に挿入します。ビジュアルエディタで作業している場合は、画像が上下に表示されるはずです。テキストエディターで作業している場合は、次のようなコードが表示されます。
  3. 
    
    
    
  4. 最初の画像の前に[twentytwenty]タグを入力してください
  5. 2番目のタグの後に[/ twentytwenty]タグを入力します
  6. あなたはあなたのテキストエディタで次のようなものになるでしょう:

    [twentytwenty]
    
    
    
    [/ twentytwenty]
    
  7. 最良の結果を得るには、写真が同じサイズであることを確認してください
  8. 投稿をプレビューまたは公開して、写真の前後の見事な視覚効果をお楽しみください

インタラクティブな画像の作成方法–描画、説明、リンクの追加

今日、マルチメディアなしでウェブサイトを運営することは困難です。画像、動画、音楽は、ほぼすべてのウェブサイトの一部です。平均的なインターネットユーザーは視覚刺激に大きく依存しているため、サイトの視覚部分とインタラクティブ部分に注意する必要があります。画像付きの記事を受け取る 視聴回数が94%増加 なしのものより。また、ウェブサイトのマルチメディアがコンテンツマーケティングの投資収益率を向上させることはすでに知られている事実です.

サイトの画像を管理するように説得する必要がないことを願っています。記事で画像を使用しなくても(そうすべきです)、注目の画像を使用しますよね? WordPressサイトの画像の管理、写真関連のテーマの設定、InstagramのWordPressサイトへの接続など、さまざまなギャラリープラグインが用意されています。しかし、よりインタラクティブなコンテンツを作成したい場合はどうでしょうか?

手始めに、ユーザーが気に入るビフォーアフターイメージエフェクトを追加することに関心があるかもしれません。 AutomatticがVRをWordPress.comに導入した後、人気が高まっているWordPressのバーチャルリアリティを忘れないでください。それでも、不足しているものがあります。クリック可能なパーツでインタラクティブな画像を作成することは可能ですか?はい、可能です。これがどれほど楽しくて簡単かをお見せします.

注意を引く

価格:無料
デモ

このプラグインの最初のお気に入りは、完全に無料であることです。 WordPressリポジトリの他のプラグインと同様に、数分でプラグインをダウンロード、インストール、アクティブ化できます。無料版では、1つのインタラクティブな画像を操作できます。さらに必要な場合は、PROバージョンを選択する必要がありますが、これについては後で説明します.

プラグインは応答性が高く、インタラクティブな画像がどのデバイスでも正しく表示されることを心配する必要はありません。画像は画面サイズに合わせて拡大縮小されるだけでなく、最新および古いほとんどのブラウザー(デスクトップおよびモバイル)で機能します。 Draw Attentionは、新しいブラウザで表示されるときにキャンバス要素を使用しますが、古いブラウザにロードすると、イメージマップにフォールバックします.

特徴

この単純なプラグインがいかに強力であるかを示す例に入る前に、描画注意から何が期待できるかを見てみましょう。

  • ドロー –画像をアップロードすると、その上に形状を描画する機会が与えられます。選択可能/クリック可能になる画像の任意の部分を選択します
  •  –ホットスポットをサイトのデザインに合わせることができるように色をカスタマイズします
  • ホバーのハイライト –ユーザーが選択した部分にカーソルを合わせると、画像の別の部分を表示します
  • 詳細を表示 –画像の選択した部分に関する詳細情報を表示します
  • URLに移動 –ユーザーが選択をクリックした場合にユーザーを任意のURLにリダイレクトする

注意を引く設定

例–ハワイのインタラクティブマップ

デモサイトの例を使用して、Draw Attentionで正確に何ができるかを示します。では、プラグインで作成したハワイのインタラクティブマップがどのように見えるか見てみましょう.

あなたがしなければならない最初のことは、ハワイ諸島のイメージを見つけることです。移動した後 注意を引く->画像の編集, 右側のサイドバーのエリアに画像をアップロードする必要があります。画像が読み込まれると、楽しみが始まります.

ここでは、ハイライトの色(色、境界線、不透明度など)を選択し、「詳細情報ボックス」のスタイル(画像、タイトル、テキストの色など)を設定します。画像のすべての色を手動で選択したくない場合は、右側のサイドバーからカラースキームをすばやく選択できます.

注意を引く-WordPressでインタラクティブな画像を作成する方法

最も魔法の部分は ホットスポットエリア 設定画面。ここで、画像をフルサイズでロードします。あとは、描画を開始して新しいホットスポットを作成するだけです。ポイントはいくつでも追加できます。つまり、包括的な選択範囲を自由に作成できます。ホットスポットをいくつでも作成でき、それぞれが独自の設定を持つことができます.

したがって、この例では、アイランドの1つを選択する必要があります。島のタイトルを選択し、説明と、ユーザーがホットスポットにカーソルを合わせたときに表示される追加の画像(上記のGIF画像の右側の部分)を追加します.

インタラクティブにしたいアイランドごとにこのプロセスを繰り返す必要があります。ホットスポットの準備ができたら、右側からショートコードをコピーします。ショートコードを投稿、ページ、ウィジェット、または新しいインタラクティブマップを表示したい場所に貼り付ければ完了です。ユーザーが選択項目をクリックした後に他のページにリダイレクトする場合は、説明ではなくURLを選択するだけです。そのように簡単!

PROバージョン

画像が1つだけ必要な場合、無料バージョンは完璧ですが、 PROバージョン 必要な数だけインタラクティブな画像をサイトに配置できます。これは最も重要な考慮事項ですが、PROバージョンでは複数の画像よりも多くの画像が得られます.

レイアウトオプション機能を使用すると、画像の選択した部分に関する詳細情報を表示できます。たとえば、ユーザーが画像の選択した部分にカーソルを合わせるとポップアップするライトボックスまたはシンプルなツールバーに情報が表示されます.

また、20の事前定義済みカラーパレットがあるため、すべての色を手動でカスタマイズする必要はありません。 PROバージョンは1つのサイトライセンスで74ドルかかりますが、複数のインタラクティブイメージが必要な場合、これは非常に簡単です.

追加の画像サイズを再生成する方法

WordPressテーマに新しい画像サイズを登録するのは比較的簡単です。画像の大きさをシステムに伝え、名前を付け、トリミング方法を決定したら、自由に画像を自由に配布できます。しかし、古い画像はどうですか?

私たちが示したテクニックのいずれかを使用した場合、新しい画像のために芝生を準備しました。投稿のサムネイルに新しく登録した画像サイズを使用するか、投稿者が投稿でそれらを使用できるようにするか, 新しいルールは、変更後にアップロードされた画像にのみ適用されます functions.phpファイル内。古い画像を変更するには、サムネイルの再生成プラグインを使用することをお勧めします.

サムネイルを再生成:

価格:無料
  1. に行く プラグイン->新規追加
  2. 「サムネイルを再生成」を検索します
  3. プラグインをインストールしてアクティブ化する
  4. 案内する ツール->再生。サムネイル

すべての画像のサイズを変更する場合は、[すべてのサムネイルを再生成]ボタンをクリックして、プラグインがハードワークを実行するのを待ちます.

追加の画像サイズを再生成する方法

サイズを変更する画像を表示する場合、または一部の画像のみのサイズを変更する場合は、メディアライブラリにアクセスして、[一括操作]の下に新しいオプションがあり、ギャラリー.

プラグインの良い点は、元の画像が削除されないことです。テーマで使用できる新しい画像サイズのみが作成されますが、元の画像は後で使用するために残されるか、不要になった場合は手動で削除します.

それでおしまい。新しいサムネイルを楽しんだり、チェックアウトしたりしてください シンプルな画像サイズ 同じことができるプラグイン.

jQueryを使用して幅と高さの画像属性を削除する

WordPress投稿に画像を追加すると、システムは高さと幅の属性を画像に自動的に追加します。それは通常は良いことですが、すべての画像がこれらの属性を取得するという事実が気に入らない場合があります.

アップロードの時点で属性をすぐに削除したい場合は、前回示した簡単な関数を使用して実行できます。.

ただし、記事を読んだり、関数を自分で試したりした場合、関数がWPシステムにインストールされた後にアップロードされた画像にのみ影響を与えることに気付きました。すでに画像が挿入された投稿でいっぱいのデータベースがある場合、前述の関数は古い画像属性ではあまり役に立ちません.

おそらく、すべての画像を手動で処理して、幅と高さを1つずつ削除することはできないため、投稿に埋め込まれている既存のすべての画像の属性を取り除く別の関数が必要になる可能性があります。その場合、数行のjQueryコードで幅と高さの画像属性を自動的に削除する簡単な方法を紹介しようとしているため、正しい位置にいます。前のフレーズで怖がらないでください。jQueryが何であるかを知る必要すらありません。次の3つのステップを実行するだけで、簡単に完了できます。.

幅と高さの画像属性を削除します。

  1. テーマフォルダからheader.phpファイルを開きます
  2. このコードをコピーして貼り付けます そして タグ:
  3.  
  4. 変更内容を保存

これで完了です。コードは、画像を含む投稿を開いた後にその魔法を実行し、そこから幅と高さのタグを削除します.

メディアアップローダーでカスタム画像サイズを作成する方法

Media Uploaderを使用してWordPressの画像を処理している場合は、画像に多数のオプションが表示されているはずです。多くの間で、あなたはあなたの記事に送ることができる画像サイズを選択することができます.

サムネイル、中、大、フルサイズのオプションから選択できますが、これらのオプションにはすべて事前定義された値があります。そのため、カスタムテーマを使用している場合、多くの場合、各画像の幅と高さを何度も何度も変更することに悩まされています.

実際、そうする必要はありません。開発者にとって素晴らしいツールであるadd_image_size()と呼ばれるきちんとした小さな関数があります。そしてこの記事の後で、あなたもそれが役に立つでしょう.

テーマにカスタム幅があり、そこにぴったり収まるように画像を簡単に埋め込んだとします。幅が666pxであるとしましょう(幅をこの数値に設定した理由については説明しません。選択してください)。そのためには、Media Uploaderにラジオボタンを追加する必要があります。以下のコードでは、元のサイズの半分のサイズをもう1つ追加します.

  1. functions.phpファイルを開きます
  2. 次のコードをコピーして貼り付けます。
  3. function custom_image_sizes(){
    add_image_size( 'one-size'、333、333、true);
    add_image_size( 'another-size'、666、666、true);
    }
    
    add_action( 'init'、 'custom_image_sizes');
    
    function show_image_sizes($ sizes){
    $ sizes ['one-size'] = __( 'Custom Size 1'、 'isitwp');
    $ sizes ['another-size'] = __( 'Custom Size 2'、 'isitwp');
    $ sizesを返します。
    }
    
    add_filter( 'image_size_names_choose'、 'show_image_sizes');
  4. 変更内容を保存
  5. メディアアップローダーから画像を追加してみてください。「添付ファイルの表示設定」に新しいサイズオプションが表示されます。

任意のWebサイトの自動スクリーンショットを作成し、画像として投稿に公開します

Webサイトのサムネイルを表示したい場合は、そのWebサイトにアクセスするか、画面を印刷するか、プログラムまたはブラウザーのアドオンを使用してスクリーンショットを撮る必要があります。次に、画像を変更し、適切なサイズに切り取り、WordPressにアップロードして、投稿でスクリーンショットを使用できるようにする必要があります。.

そのスナップショットを時々撮る必要がない場合、それは問題にはなりませんが、別のWebサイトのスクリーンショットをより頻繁に使用している場合は、素晴らしい機能があり、時間と神経を節約する.

ガイドのこの部分では、必要なWebページのスナップショットを撮るために使用できるショートコードを作成する完全な機能を紹介します.

自動スクリーンショットを作成:

  1. functions.phpを開きます
  2. 次のコードをコピーして貼り付けます。
  3. function wp_webscreen($ atts、$ content = NULL){
    extract(shortcode_atts(array(
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600'、//幅
    "h" => '450' //高さ
    )、$ atts));
    
    $ img = ''。 $ alt。 」';
    $ imgを返す;
    }
    add_shortcode( "screen"、 "wp_webscreen");
  4. 配列のデフォルト変数を変更する
  5. 変更内容を保存

この関数は、WordPress Webサイトの任意の場所で簡単に使用できるショートコードを作成します。たとえば、投稿、サイドバーウィジェット、またはフッターでWebページのスクリーンショットを使用する場合でも、適切な場所にショートコードをc / pするだけです。

[画面のurl =” http://www.firstsiteguide.com” alt =” fsg” w =” 600″ h =” 450″]

この機能の優れている点は、画像を動的URLとして保存することです。つまり、ショートコードでスナップショットを作成すると、将来自動的に更新され、ショートコードで指定されたWebサイトの現在の外観が常に表示されます。.

ショートコードのパラメータを直接変更できることに注意してください。別のURLのスナップショットを取得する場合、または別の次元でスナップショットを取得する場合は、functions.phpファイルのコードを変更する必要はありません。.

例:

Googleのスクリーンショットを撮って200×400ピクセルの大きさにしたいとします。

[画面のurl =” http://www.google.com” alt =” Google” w =” 200″ h =” 400″]

ショートコードをボタンに保存して、ボタンをクリックするだけで投稿に挿入できるようにすることで、すべてをさらに簡単にすることができます.

結論

WordPressサイトの画像を改善するために、説明したすべてのプラグインと機能をインストールする必要はありません。しかし、画像を最適化したり、何らかの方法でそれらをより良くするのに役立つ少なくともいくつかのヒントを見つけたことを願っています.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Liked Liked