WordPressで注目画像を設定し最適化する方法

コンテンツ管理システム CMS )には、ウェブサイトにビジュアルを取り入れるためのさまざまな機能があり、そのひとつがWordPressのフィーチャー画像です。うまく書かれたテキストと組み合わせて使えば、コンテンツの価値を大幅に高めることもできます。

WordPressのFeatured Imagesとは?

WordPressのフィーチャー画像は、投稿やページに表示されるメイン画像です。この画像は通常、投稿の上部やソーシャルメディアで共有する際に表示されます。

画像[1] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com|プロのWordPress修理サービス、グローバルリーチ、迅速な対応

WordPressの注目画像を追加する方法

WordPressのフィーチャー画像の追加は簡単です。投稿やページごとに画像をアップロードするか選択するだけです。

WordPressのページや投稿に注目画像を追加する方法

注目画像は、ほとんどのWordPressテーマでデフォルトで有効になっています。また、Gutenbergブロックエディタを使って手動で投稿やページに追加することもできます。

以下の手順に従ってください:

1.パネル掲示 → 新規追加 投稿 をクリックし、ブロックエディタを開きます。または、既存の投稿またはページを選択してエディタに入ります。

画像[2] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

2.ブロックエディターに右サイドバーが表示されるはずです。

3.下にスクロール特集画像セクションをクリックし特集画像の設定.

画像[3] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

4.特集画像をWordPressにアップロードするか、メディアライブラリの画像から選択します。フィーチャー画像を選択した後アネックス詳細セクション代替テキストを追加する。

画像[4] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

5.画面右下の特集画像の設定.

特集画像が設定されました。エディタパネルには表示されません。特集画像セクションをクリックするか、投稿プレビューで確認してください。をクリックするオプションが追加されました。"画像を置き換える"別の画像に置き換えるか注目画像の削除投稿やページからフィーチャー画像を削除する。

画像[5] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

WordPressの注目画像サイズの設定方法

適切なフィーチャー画像のサイズを選ぶことは重要です。ページ全体の見栄えを良くし、投稿のサムネイルが他のプラットフォームでもきれいに見えるようにします。

WordPressの特集画像のサイズはお好みで選べますが1200×628ピクセルもしかしたら16:8.4アスペクト比から始めるとよいでしょう。特にモバイル端末では、より小さな画像を使用することで読み込み時間を短縮することができます。

WordPressテーマのデフォルトの特集画像サイズ設定は、あなたの好みに合わないかもしれません。以下のいずれかの方法で画像サイズを変更してください。

1.クラシック・テーマ

WordPressに画像をアップロードすると、WordPressの設定に4種類のデフォルト画像サイズが表示されます:

  • サムネイル(150ピクセル四方)
  • ミディアム(幅・高さとも最大300ピクセル)
  • 大(最大幅・高さ1024ピクセル)
  • フルサイズ(元画像)

WordPressテーマによっては、これらのデフォルト画像サイズのいずれかを特集画像として使用しています。以下の手順でサイズを変更できます:

1.フィーチャー画像のあるブログ記事を開いてサイズを確認します。ブログのフィーチャー画像上で右クリックし、ブラウザの道具をチェックする。

2,読ませる<img>マークアップ内の画像クラス。例えば、以下の特集画像のサイズは width="480" height="300" です。

画像[6] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com|専門家のWordPress修理サービス、グローバルなリーチ、迅速な対応

3.WordPressのダッシュボードを開き、以下のページに移動する。設定 → メディア.お好みの画像サイズに変更し、" をクリックします。変更を保存".

画像[7] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

画像のサムネイルを再生成する場合はサムネイル再生成アドバンス WordPressのプラグインで可能。

  • まず、パネル"プラグイン""新しいプラグインの追加検索フィールドに「reGenerate Thumbnails Advanced」と入力し、「Enter」キーを押して確定します。
  • をクリックする。今すぐインストールさらにアクティブ化.
画像[8] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

からページを更新した後"ツール" → "サムネイルの再生成"にアクセスし、プラグイン・パネルの"リ・ジェネレーション" .既存のすべての画像のWordPressサムネイルのサイズを自動的に変更します。

画像[9] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

2.ブロックテーマ

サイトエディターを修正するのテンプレートで、WordPressのフィーチャー画像のサイズを変更することができます。テンプレートを開くには、以下の手順に従ってください:

1、WordPressのダッシュボードから外観 → テーマファイルエディタ。

2,変更するファイルを選択する::

  • エディタで変更したいテーマを選択します。
  • 通常、フィーチャー画像のコードは シングル.php もしかしたら ページ.php ファイル、または時には functions.php のようなテンプレート・セクション・ファイルです。 コンテンツ.php 真ん中。

3,特集画像のコードを修正する::

  • 対応するPHPファイル(通常は the_post_thumbnail() または同様の機能。
  • すでに存在する画像サイズを指定することができます(たとえば サムネイルそしてミディアムそして大きい もしかしたら フルまたは add_image_size() ある functions.php ファイルで新しい画像サイズを作成します。例
add_image_size('custom-size', 800, 600, true)
add_image_size('custom-size', 800, 600, true); 
add_image_size('custom-size', 800, 600, true);

そして the_post_thumbnail() 関数は、この新しいサイズを指定するときに使用する:

the_post_thumbnail('custom-size').
the_post_thumbnail('custom-size').
the_post_thumbnail('custom-size').

4,更新とテスト::

5,調整スタイル(オプション)::

  • 画像のスタイリング(余白、フレームなど)をさらに調整する必要がある場合は、CSSで行うことができます。これらのスタイルは通常、テーマの スタイル.css ファイルが設定されている。

WordPressで自動的に注目画像を設定する方法

使うクイック特集画像このプラグインを使えば、デフォルトのフィーチャー画像を簡単に作成できる。

まず、パネル"プラグイン""新しいプラグインの追加をクリックし、検索フィールドに「Quick Featured Images」と入力し、「Enter」キーを押して確定します。インストールとアクティベーション.

ページを更新した後、ワードプレスのダッシュボードから注目の画像 → デフォルトの画像

画像[10] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

2つ目のルールは、投稿やページの最初の写真をフィーチャー画像として指定します。

画像[11] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

また、デフォルトのフィーチャー画像を割り当てるカスタムルールを作成することもできます。

の3番目のステップをクリックする。「画像の選択をクリックし、デフォルトのフィーチャー画像を選択します。完了したら「変更を保存.

投稿とページ一覧にサムネイルプレビューを追加する方法

WordPressの管理画面には、投稿者や公開日、カテゴリー、コメント数などの投稿やページに関する情報が表示されます。また、「Quick Featured Image」プラグインをインストールしている場合は、このリストにサムネイルを表示させることができるので、どのコンテンツにフィーチャー画像が設定されているのかが一目でわかります。

ダッシュボードから注目の画像 → 設定.で投稿一覧の注目画像欄セクションでカード歌で応えるウェブページ.次に、ページの一番下をクリックします。変更を保存します。

画像[12] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com(フォトンフラックス・ドットコム)|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応

投稿に移動 → すべての投稿投稿リストに移動すると、注目画像のプレビュー用の新しいカラムが表示され、古い注目画像を変更、編集、削除することができます。

画像[13] - WordPressのフィーチャー画像の設定と最適化 - Photonflux.com|専門家のWordPress修理サービス、グローバルリーチ、迅速な対応

WordPressのFeatured Imagesを有効にする方法

ほとんどのWordPressテーマは注目画像をサポートしており、どの投稿やページにも画像をアップロードすることができます。しかし、以下のような特集画像に対応していないものもあります。手動で有効にする必要がある。

クラシック・テーマ

以下のコード・スニペットをテーマのfunctions.phpファイルを使用して、手動でWordPressテーマに特集画像のサポートを追加することができます:

add_theme_support( 'post-thumbnails' ).
add_theme_support( 'post-thumbnails' ).
add_theme_support( 'post-thumbnails' ).

テーマがフィーチャー画像をサポートし、エディター上で設定が可能になるはずです。しかしテーマ・サポートの追加フラグはサポートのみを有効にし、フロントエンドに画像を表示しません。

すべての投稿とページに特集画像を表示させるには、テーマのテンプレートに以下のコード・スニペットを追加します:

<?php the_post_thumbnail(); ?>
<?php the_post_thumbnail(); ?>
<?php the_post_thumbnail(); ?>

投稿やページに画像を表示するには、適切なテンプレートにコードを追加します。シングル.php歌で応えるページ.php任意のカスタムテンプレートファイルにPHPコードを適用することもできます。また、任意のカスタムテンプレートファイルにPHPコードを適用することもできます。

に移動する。"外観" → "テーマファイルエディタ "でテーマファイルエディタを使用する。右側の列でテンプレートファイルを見つける。

画像[14] - WordPressでフィーチャー画像を設定し最適化する方法 - Photonflux.com|専門家のWordPress修理サービス、グローバルなリーチ、迅速な対応

WordPressのフィーチャー画像の選び方

正しいイメージの使用

WordPressのフィーチャー画像は、コンテンツを適切に表現する必要があります。ベストプラクティスのひとつは、ブログと同じスタイルのユニークなデザインのフィーチャー画像を作成することです。

もし、あなたがこれからブログを作ろうとしているのならCC0 ライセンス画像サイトクリエイティブ・コモン 適切な特集画像が見つかります。またペクセル歌で応えるアンスプラッシュwordpressやwordpressのような素材プラットフォームでCC0の画像を探す。写真カタログ投稿者によってアップロードされた何千ものCC0画像が含まれています。

画像[15] - WordPressでフィーチャー画像を設定し最適化する方法 - Photonflux.com|専門家のWordPress修理サービス、グローバルなリーチ、迅速な対応

フィーチャー画像の最適化

PNG、JPG、GIFなど、さまざまな形式の画像ファイルを最適化するには、非可逆圧縮や可逆圧縮など、さまざまな画像圧縮方式を使用します。

おすすめの画像最適化プラグインをご紹介します:

画像[16] - WordPressでフィーチャー画像を設定し最適化する方法 - Photonflux.com|専門家のWordPress修理サービス、グローバルなリーチ、迅速な対応

はんけつをくだす

WordPressにはフィーチャー画像のサポートが組み込まれており、自動的にフィーチャー画像を設定することもできます。画像を最適化し、代替テキストを設定して追加することで、SEOが向上します。


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事を書いた人: Xiesong
終わり
好きなら応援してください。
クドス0 分かち合う
xiesongのアバター - Photon Flux|プロフェッショナルによるWordPress修理サービス、ワールドワイド、迅速対応
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし