uCartの商品画像を角丸にする。

2009 年 9 月 4 日

uCartの商品画像を角丸にする事ができたので、ご報告です。

力技なので、別な方法があるとよいのですが。

角丸には、corner.jsを使用します。

http://gigazine.net/index.php?/news/comments/20070420_corner_js/

uCartでは、商品画像は、wp_get_attachment_image() を用いて表示しています。

この関数は、/wordpress/wp-includes/media.phpで定義され、クラスは

‘class’?? ?=> “attachment-$size”

と決められております。

(吐かれるソース例:class=”attachment-100×100″)

corner.jsでは、classの指定で角丸を反映しますので、このままでは角丸になりません。

そこで、以下の方法で商品画像のクラスを変更します。

  1. wp_get_attachiment_image()をベースに新たな関数を作る。
  2. uCartのwp_get_attachiment_image()呼び出しを、新たな関数に変更する。

※wp_get_attachiment_image()を直接修正しても実現はできますが、wpのソースを直接いじるのは避けたかったので、uCartに手を加えることにしました。

手順:

  1. wp_get_attachiment_image()をベースに新たな関数を作る。
    1. /wordpress/wp-includes/media.php の530行目から556行目をコピーし、使用テーマの functions.php の最下部に貼り付ける。
    2. 関数名を変更する。
      例) function wp_get_attachment_image
      → function my_wp_get_attachment_image_corner
    3. コピペの上下をPHPタグ(<?php、?>)で囲む。
    4. class指定を変更する。
      例) ’class’?? ?=> “attachment-$size”,
      → ’class’?? ?=> “corner iradius16”,
  2. uCartのwp_get_attachiment_image()呼び出しを、新たな関数に変更する。
    1. usc-e-shop\functions\template_func.php 368行目を変更する。
      例) $html = wp_get_attachment_image( $pictids[$number], array($width, $height), false );//'<img src=”#” height=”60″ width=”60″ alt=”” />’;
      → $html = my_wp_get_attachment_image_corner( $pictids[$number], array($width, $height), false );//'<img src=”#” height=”60″ width=”60″ alt=”” />’;

実装サンプル:http://hsksyusk.hostei.com/wordpress/archives/category/item/itemgenre/nyankot

参考:http://y2web.net/blog/inet/wp/gallery-customize-618/

<?php

function my_wp_get_attachment_image_corner($attachment_id, $size = ‘thumbnail’, $icon = false) {

$html = ”;
$image = wp_get_attachment_image_src($attachment_id, $size, $icon);
if ( $image ) {
list($src, $width, $height) = $image;
$hwstring = image_hwstring($width, $height);
if ( is_array($size) )
$size = join(‘x’, $size);
$attachment =& get_post($attachment_id);
$attr = array(

カテゴリー: 未分類
関連記事