前言介紹

• 這款 WordPress 外掛「Responsify WP」是 2014-07-28 上架。
• 目前有 800 個安裝啟用數。
• 上一次更新是 2018-06-07，距離現在已有 2522 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
• 外掛最低要求 WordPress 3.8.1 以上版本才可以安裝。
• 有 18 人給過評分。
• 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

stefanledin |

外掛標籤

sizes | srcset | picture | picture element | responsive images |

內容簡介

Responsify WP 是關心響應式圖片的 WordPress 外掛程式。

功能

使用帶有 srcset/sizes 屬性的 img 標籤。
... 或者是 picture 元素。
支援使用或不使用 Picturefill。
支援高解析度圖片（Retina）。
自訂媒體查詢。
挑選要使用的圖片尺寸。
響應式背景圖片。

展示

Responsify WP 可找到特色圖片和內容中的所有圖片，使它們具有響應式特性。
例如，您可能會有一個長得像這樣的模板:

這會輸出像這樣:

Hello world

Lorem ipsum dolor sit amet...

但在啟用外掛程式後，它會變成以下這樣:

Hello world

Lorem ipsum dolor sit amet...

srcset="thumbnail.jpg 150w,
medium.jpg 300w,
large.jpg 1024w"
alt="圖片描述">

您也可以選擇通過 picture 元素來使用它:

Hello world

Lorem ipsum dolor sit amet...

它也可用於高解析度（Retina）圖片:

Hello world

Lorem ipsum dolor sit amet...

上述示例的不同圖像版本的標準尺寸為 thumbnail、medium、large 和 full。
媒體查詢是基於「前一個」圖像的寬度。
任何圖像的自訂尺寸也會被找到並使用。

設定

您可以從 RWP 設定頁面選擇外掛程式應使用哪些圖像尺寸。
這些設置可以在範本中被覆寫。

// 使用 get_posts()
$posts = get_posts( array(
'post_type' => 'portfolio',
'rwp_settings' => array(
'sizes' => array('large', 'full')
)
) );
foreach( $posts as $post ) {
// ...
}

// Using WP_Query()
$query = new WP_Query( array(
'post_type' => 'portfolio',
'rwp_settings' => array(
'sizes' => array('large', 'full')
)
) );
while( $query->have_posts() ) {
$query->the_post();
// ...
}
?>

原文外掛簡介

Responsify WP is the WordPress plugin that cares about responsive images.
Features

Use img with srcset/sizes attributes.
…or the picture element.
Works with or without Picturefill.
Supports high resolution images (retina).
Custom media queries.
Handpick which image sizes to use.
Responsive background images.

Demo
Responsify WP finds featured images and all images inside the content and makes them responsive.
For example, you might have a template that looks like this:

That will output something like this:

Hello world

Lorem ipsum dolor sit amet...

But once you have activated the plugin, it will look like this instead:

Hello world

Lorem ipsum dolor sit amet...

You can also choose to use the picture element instead:

Hello world

Lorem ipsum dolor sit amet...

It also works with high resolution (retina) images:

Hello world

Lorem ipsum dolor sit amet...

The different versions of the image in the examples above is in the standard thumbnail, medium, large and full sizes.
The media queries are based on the width of the “previous” image.
Any custom sizes of the image will also be found and used.
Settings
You can select which image sizes that the plugin should use from the RWP settings page.
These settings can be overwritten from your templates.
'portfolio',
'rwp_settings' => array(
'sizes' => array('large', 'full')
)
) );
foreach( $posts as $post ) {
// ...
}

// Using WP_Query()
$query = new WP_Query( array(
'category_name' => 'wordpress',
'rwp_settings' => array(
'sizes' => array('large', 'full')
)
) );
if ( $query->have_posts() ) {
// ...
}
?>

Available settings:

Select which image sizes to use.
Set/override attributes.
Set custom media queries.
Turn on/off retina.
Ignore image formats.

Functions
RWP provides a number of functions that can generate responsive images in your templates.
Let’s say that you have the following markup for a very large header image:

As you probably know, the_post_thumbnail() will create a regular tag with the full-size image in this case.
But you don’t want to send a big 1440px image to a mobile device. This can easily be solved like this:

ID );

// Generate an tag with srcset/sizes attributes.
echo rwp_img( $thumbnail_id );

// Generate a element
echo rwp_picture( $thumbnail_id );
?>

Website
http://responsifywp.com.
Demo
http://responsifywp.com/demo.
Documentation and examples
https://github.com/stefanledin/responsify-wp.
Requirements

PHP 5.3

各版本下載點

• 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
• 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Responsify WP」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

---

1.4.0 | 1.4.1 | 1.4.2 | 1.4.3 | 1.5.0 | 1.5.1 | 1.5.2 | 1.6.0 | 1.6.1 | 1.6.2 | 1.6.3 | 1.6.4 | 1.6.5 | 1.7.0 | 1.7.1 | 1.7.2 | 1.7.3 | 1.8.0 | 1.9.0 | 1.9.1 | 1.9.2 | 1.9.3 | 1.9.4 | 1.9.5 | 1.9.6 | 1.9.7 | 1.9.8 | 1.9.9 | trunk | 1.9.10 | 1.9.11 |

延伸相關外掛（你可能也想知道）

暫無相關外掛推薦。