WordPress でのサムネイルの使用と関連テクニック、wordpress summnails_PHP チュートリアル-PHPチュートリアル-php.cn

WordPress でのサムネイルの使用と関連テクニック、wordpress summnails_PHP チュートリアル

WBOY

リリース： 2016-07-12 09:04:04

オリジナル

1087 人が閲覧しました

WordPress でのサムネイルの使用と関連テクニック、WordPress サムネイル

ブログではサムネイルを使用する機会が多く、記事一覧ページ、記事の下の関連記事、カテゴリーページのカテゴリー写真、さらには一部のブログでは、テキストを軽視し、記事のインデックスとして滝状の写真を使用することが非常に流行しています。

ウェブマスターは、サムネイルが注目を集める可能性があることを知っており、サムネイルを使用するより良い方法を常に探しています。この記事では、WordPress でサムネイルを呼び出す一般的に使用される 2 つの方法と、その適用可能なシナリオを紹介します。

記事の最初の写真を呼び出してください

WordPress Media は、サムネイル、中サイズ、大サイズ、元の画像を含む 4 つの画像を生成するための画像のアップロードを常にサポートしています。これは、おそらく記事内で異なるサイズの画像を呼び出すことを容易にするためです。ただし、サムネイルを直接呼び出す方法はありません。ただし、記事の最初の画像はサムネイルとして見つかります

最初の画像は記事 ID に基づいて見つけることができます。ここでのメソッドは次のように記述できます。画像がアップロードされていない場合は、空の文字列が返されます。リーリー
呼び出しコードは以下の通りです

リーリー

アイキャッチ画像機能

WordPress 2.9以降、WordPressには記事のアイキャッチ画像機能が提供され、アップロードした画像を記事のアイキャッチ画像として設定したり、異なる環境で使用する画像のサイズを複数設定したりすることができます。 :

1. WordPress テーマにアイキャッチ画像のサポートを追加し、アイキャッチ画像のサイズとエイリアスを設定します。リーリー

上記のコードをfunctions.phpファイルに追加し、テーマに注目の画像のサポートを追加し、画像の2つのサイズ(180x180と120x120)を設定できます。 Add_image_size は特徴的な画像サイズを定義するために使用されます。WordPress Codex を参照してください。実際には 4 つのパラメーターがあります。

最初のパラメータ: アイキャッチ画像のサイズエイリアス。異なるサイズのサムネイルを呼び出すために使用されます。

2番目のパラメータ: 画像の幅

3番目のパラメータ: 画像の高さ
4 番目のパラメーター: このパラメーターは、画像のトリミング方法を指定するために使用されるブール値です。

下の図は 2 つのサムネイルを示しています。元の画像は 1024x768 で、左側のサムネイルは add_image_size('xxx', 120, 120, true); を使用しています。一方、右側の画像は add_image_size('xxx', 120, 120, false); を使用しています。

2. アイキャッチ画像があるかどうかを判断し、サムネイルを表示します。リーリー 20151124152542644.jpg (350×140) 上記のコードは、記事にアイキャッチ画像があるかどうかを判断し、存在する場合は、サムネイルのエイリアスを表示します。サムネイルを空白のままにすることもできます。先ほど推奨したエイリアスを使用すると、さまざまな状況で異なるサムネイルを使用できます。たとえば、記事リストページで 180x180 のサムネイルを表示するには the_post_thumbnail('recommend'); を使用します。記事下部の関連記事エリアにある 120x120 のサムネイル。

3. 記事作成時に特徴的な画像を設定します

テーマにアイキャッチ画像のサポートを追加した場合、記事の編集ページで画像をアップロードした後、[投稿に挿入] ボタンの横にある [アイキャッチ画像として使用] リンクを見つけて、画像をアイキャッチ画像として設定できます。

追記: WordPress のサムネイルを上手に使いましょう

WordPress はブログだけでなく、多くの場合、WordPress は CMS (コンテンツ管理システム) としても使用され、特に情報プラットフォームでは、均一なサイズのサムネイルを追加することがよくあります。同じサイズの小さな画像をアップロードするか、phpThumb などのツールを使用してサムネイルを生成することで、画像を記事に追加できます。 20151124153144742.png (600×100)

WordPress は 2.7 からマルチメディア機能が大幅に向上し、WP の組み込み画像ウェアハウスを使用する人が増えています。これらのユーザーにとって、サムネイルの作成はそれほど難しくなく、画像をアップロードするときにデフォルトで 150x150 の仕様が生成されます。小さい画像（画像の高さ/幅が 150px 未満の場合は、元の高さ/幅を使用します）この機能を最大限に活用して、この画像を記事リストにサムネイルとして追加できます。この処理には独自のメリットと利点があります。短所、利点はシンプルさとインテリジェンス (毎回サムネイルを入力する必要がない)、欠点はサーバートラフィックを消費することです。

Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.

<&#63;php
 $args = array(
 'numberposts' => 1,
 'order'=> 'ASC',
 'post_mime_type' => 'image',
 'post_parent' => $post->ID,
 'post_status' => null,
 'post_type' => 'attachment'
 );
 
 $attachments = get_children($args);
 $imageUrl = '';
 
 if($attachments) {
 $image = array_pop($attachments);
 $imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
 $imageUrl = $imageSrc[0];
 } else {
 $imageUrl = get_bloginfo('template_url') . '/img/default.gif';
 }
&#63;>
<a href="<&#63;php the_permalink() &#63;>"><img class="left" src="<&#63;php echo $imageUrl; &#63;>" alt="<&#63;php the_title(); &#63;>" width="150" height="150" /></a>

ログイン後にコピー

这段代码会去找第一个上传的图片缩略图 (如果第一个图片被删除, 则找第二个的, 如此类推...),然后在文章列表 index.php, 存档页面 archive.php 和搜索页面 search.php 中调用, 调用代码如下.

<&#63;php include('thumb.php'); the_content('Read More...'); &#63;>

ログイン後にコピー

这段代码是把图片放在文章内容前面, 图片如何摆放需要用 CSS 调整一下布局, 这里就不多说了.

总结

WordPress 2.9 之前不存在特征图片 (Featured Image) 的概念, 必须通过第一种方式找到图片附件. 用这种方式获取缩略图的好处是一劳永逸, 以后你不用关心要文章的使用什么缩略图, 是否存在缩略图. 但这同样也是它的缺点, 不能指定特定图片为缩略图. 如果某文章第一个图片是缩略图, 但因为文章更新, 将第一个图片删除了, 再上传. 那本来第二个图片就成为了新的缩略图, 但有可能第二个图片效果不好, 不适合作为缩略图也没是没有办法的, 因为你根本没有办法使用特定图片.

Featured Image 功能很强大, 除了可以指定图片作为特征图片, 还能够使用多个尺寸的图片以适合不同的场合, 你要做的仅仅是每次写文章时别忘了设定特征图片. 当你想去除所有缩略图时, 也仅是将 functions.php 文件的 add_theme_support('post-thumbnails'); 即可.

我现在没有用 Featured Image, 一直用的是取第一个图片的方法, 因为我的图片质量不高, 一直没指定图片需求, 懒得去改了.