Osclassで商品(広告)の写真を表示しないカスタマイズ-余分な画像は消す!

Osclasswizardsで商品画像を消すカスタマイズ

Osclassにて出品を行う場合に、現物とは限りません。サービスの提供や、情報商材の場合も多くあります。その場合には、出品広告に画像(写真)を掲載が不要であることも考えられます。

しかし、Osclassの人気テーマ「OsclassWizards」では画像登録を行わなかった場合、このようにNO PHOTO AVAILABLEという画像が表示されてしまいます。すべての広告にこれが表示されてしまったら、ちょっとカッコ悪いですよね…

そんなわけで、この商品の画像を一切表示させないようなOsclassのカスタマイズを紹介します。

スポンサーリンク

テーマファイルの編集

編集をするファイルは、

  • osclasswizards/item.php (90行目)
  • osclasswizards/loog-grid.php 41行目
  • osclasswizards/loop-list.php 41行目
  • osclasswizards/loop-search-grid.php 3か所
  • osclasswizards/loop-search-list.php 3か所

の5つです。

item.php (90行目)

item.phpの以下の部分を削除します。

<?php if( osc_images_enabled_at_items() ) { ?>
<div class="item-photos">
  <div class="row">
    <?php
  if( osc_count_item_resources() > 0 ) {
      $i = 0;
  ?>
    <div class="col-md-10"> <a href="<?php echo osc_resource_url(); ?>" class="main-photo" title="<?php echo osc_esc_html(__('Image', OSCLASSWIZARDS_THEME_FOLDER)); ?> <?php echo $i+1;?> / <?php echo osc_count_item_resources();?>"> <img class="img-responsive" src="<?php echo osc_resource_url(); ?>" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" /> </a></div>
    <div class="col-md-2">
      <div class="thumbs">
        <?php for ( $i = 0; osc_has_item_resources(); $i++ ) { ?>
        <a href="<?php echo osc_resource_url(); ?>" class="fancybox" data-fancybox-group="group" title="<?php echo osc_esc_html(__('Image', OSCLASSWIZARDS_THEME_FOLDER)); ?> <?php echo $i+1;?> / <?php echo osc_count_item_resources();?>"> <img src="<?php echo osc_resource_thumbnail_url(); ?>" width="75" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" class="img-responsive"/> </a>
        <?php } ?>
      </div>
    </div>
    <?php } else{?>
    <div class="col-md-10"> <a href="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" class="main-photo" title="<?php echo osc_esc_html(__('Image', OSCLASSWIZARDS_THEME_FOLDER)); ?> 1 / 1"> <img class="img-responsive" src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" /> </a></div>
    <div class="col-md-2">
      <div class="thumbs"> <a href="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" class="fancybox" data-fancybox-group="group" title="<?php echo osc_esc_html(__('Image', OSCLASSWIZARDS_THEME_FOLDER)); ?> 1 / 1"> <img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" width="75" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" class="img-responsive"/> </a> </div>
    </div>
    <?php } ?>
  </div>
</div>
<?php } ?>

loop-grid.php (41行目)

loop-grid.phpの以下の部分を削除します。

<div class="figure">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_item_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } ?>
    <?php } ?>
    <span class="ribbon"> <i class="fa fa-star"></i> </span>
  </figure>
</div>

loop-list.php

loop-list.phpの以下の部分を削除します。ただし、1つの広告がやたらと横長になってしまい、見た目が美しくありません。

画像を表示しない場合には、リスト形式ではなく、グリッド形式を採択した方がよさそうです。

<div class="col-sm-4 col-md-3">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_item_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } ?>
    <?php } ?>
  </figure>
</div>

loop-search-grid.php (3か所)

loop-search-grid.phpの修正場所は3か所あります。下記3つの部分を削除してください。

<div class="figure">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_item_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } ?>
    <?php } ?>
  <span class="ribbon"> <i class="fa fa-star"></i> </span> </figure>
</div>
<div class="figure">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_premium_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_premium_url() ; ?>" title="<?php echo osc_esc_html(osc_premium_title()) ; ?>"><img class="img-responsive" src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_premium_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_premium_url() ; ?>" title="<?php echo osc_esc_html(osc_premium_title()) ; ?>"><img class="img-responsive" src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_premium_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
      <?php } ?>
    <?php } ?>
  <span class="ribbon"> <i class="fa fa-star"></i> </span> </figure>
</div>
<div class="figure">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_item_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } ?>
    <?php } ?>
  <span class="ribbon"> <i class="fa fa-star"></i> </span> </figure>
</div>

loop-search-list.php

loop-search-list.phpも3か所の編集が必要です。下記3つの部分を削除してください。そして、リスト形式よりもグリッド形式の方が見た目は良さそうです。

<div class="col-sm-4 col-md-4">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_item_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } ?>
    <?php } ?>
  </figure>
</div>
<div class="col-sm-4 col-md-4">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_premium_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_premium_url() ; ?>" title="<?php echo osc_esc_html(osc_premium_title()) ; ?>"><img class="img-responsive" src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_premium_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_premium_url() ; ?>" title="<?php echo osc_esc_html(osc_premium_title()) ; ?>"><img class="img-responsive" src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_premium_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
      <?php } ?>
    <?php } ?>
  </figure>
</div>
<div class="col-sm-4 col-md-4">
  <figure>
    <?php if( osc_images_enabled_at_items() ) { ?>
      <?php if(osc_count_item_resources()) { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } else { ?>
        <a class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_esc_html(osc_item_title()) ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_esc_html(osc_item_title()) ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" class="img-responsive"></a>
      <?php } ?>
    <?php } ?>
  </figure>
</div>

まとめ

今回のカスタマイズは、単純にコードを削除するだけでOKです。

画像を表示しない場合には、グリッド形式のレイアウトがおすすめです。

コメント