web-dev-qa-db-ja.com

WordpressへのZurbの交換の実装

私は、Wordpressでレスポンシブ画像を表​​示するための最善の方法を見つけようと、頭を痛めています。 Zurbは、Foundationフレームワーク用の新しいJavaScriptプラグインをリリースしました。私は私のカスタムテーマでFoundationを使用していますが、注目の画像をこれでどのように機能させるかについては不明です。 WPと連携するための手助けはできますか？

http://zurb.com/playground/foundation-interchange

Ps。明確にしたいだけです。イメージをレスポンシブにすることについて厳密には話していません。私はその方法を知っていますが、私はWPがスクリーンサイズやデバイスに基づいて作成する異なるサイズの画像をロードすることについて話しています。

post-thumbnailsresponsive
3
Anthony Myers

テーマのサムネイルをまだ有効にしていない場合は、この断片をfunctions.phpに追加します。

add_theme_support('post-thumbnails');

それからこのコードを追加してください。

add_image_size( 'responsive-small', 300, 500 );
add_image_size( 'responsive-large', 768, 500 );

これがどのように動作するのかです：

function( 'unique_identifier', width, height);

今楽しい部分です。テンプレートでこれを使うには：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php 
    $smallsrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'responsive-small' );
    $largesrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'responsive-large' );
?>
<img src="<?php echo $smallsrc[0]; ?>" data-interchange="[<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 1px))], [<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 768px))], [<?php echo $largesrc[0]; ?>, (only screen and (min-width: 1280px))]"> 
<?php endwhile; endif; ?>
2
Myk Klemme

昔の質問ですが、post_thumbnail_html用のフィルタを追加することですべての画像をレスポンシブにするという解決策を共有したいと思いました。

add_filter('post_thumbnail_html', 'slug_responsive_img', 5, 5);
//Image sizes for Interchange
add_image_size( 'fd-lrg', 1024, 99999);
add_image_size( 'fd-med', 768, 99999);
add_image_size( 'fd-sm', 320, 9999);

function slug_responsive_img($html, $post_id, $post_thumbnail_id, $size, $attr) {
    //make image links
    $attachment_id = $post_thumbnail_id;
    $default = wp_get_attachment_image_src($attachment_id);
    $size = 'fd-sm';
    $small = wp_get_attachment_image_src($attachment_id, $size);
    $size = 'fd-med';
    $med = wp_get_attachment_image_src($attachment_id, $size);
    $size = 'fd-lrg';
    $lrg = wp_get_attachment_image_src($attachment_id, $size);
    //create image tag with queries
    $html = '<img src="'.$default[0].'"';
    $html .= 'data-interchange="['.$default[0].', (default)],';
    $html .= '['.$small[0].', (only screen and (min-width: 320px))],';
    $html .= '['.$med[0].', (only screen and (min-width: 768px))],';
    $html .= '['.$lrg[0].', (only screen and (min-width: 1024px))],';
    $html .='">';
    return $html;
}
5
JPollock