WordPress | Использование imagehover на Featured Images

Question

Я не большой про-Pro, но я знаю свой путь в основных сценариях/настройке/редактировании и прочее, когда дело доходит до CMS. Прямо сейчас, я использую WordPress для своего сайта. Я изменил тему, и все работает довольно хорошо (это в режиме построения).

Однако есть одна вещь, которую я пытался выполнить, но я не могу заставить ее работать.

WordPress имеет эту функцию под названием Featured Image. Это изображение/миниатюра, которую вы можете включить в статью. То, что я пытаюсь сделать здесь, состоит в том, чтобы превратить этот Featured Image в изображение. Поэтому, когда люди двигают мышью по (черно-белому) изображению, он превращается в другое (цветное) изображение.

Одна из вещей, которые мне удалось выяснить, - это использовать плагин WordPress, называемый Multiple Post Thumbnails. Он позволяет добавить 2 избранных изображения (миниатюры) в одну статью. В этом случае: черно-белое изображение и цветное изображение.

Теперь вот что, на самом деле можно найти какой-то учебник о том, как активировать эту модификацию, но я не могу заставить ее работать. URL: http://www.scratchinginfo.net/hover-two-featured-images-wordpress-via-multiple-post-thumbnails-plugin/

Так что мои два вопроса:

1. Есть ли лучше (проще) путь для достижения этой imagehover?
2. Что касается учебника:

я использовал копировать/вставить на весь код и добавить его в свои файлы/темы. Все, что он дал мне, было бланк-страницей. Мне пришлось удалить и отредактировать код из кода functions.php (например, название темы), чтобы заставить его работать вообще (это означает: чтобы показать мою страницу вообще):

Учебное пособие:

if (class_exists('MultiPostThumbnails')) { 
    new MultiPostThumbnails(
     array(
      'label' => 'Colored Image', 
      'id' => 'colored-image', 
      'post_type' => 'post' 
     ) 
    ); 
} 

только появляется что-то вроде этого:

if (class_exists('MultiPostThumbnails')) { 
new MultiPostThumbnails(
    array(
     'label' => 'Colored Image', 
     'id' => 'colored-image', 
     'post_type' => 'post' 
    ) 
); 
} 

Как я уже сказал, я не могу заставить его работать. Настройка этого куска кода оставляет меня там, где я начал. Черно-белые изображения (только с изображением 1).

Я использую эту тему Cosmox: http://cosmox.ozythemes.com/. Я создал страницу с несколькими изображениями/эскизами (которые являются «Избранными изображениями») партнеров (лиц) друг под другом. Когда вы просматриваете эти изображения, отображается текстовое поле с информацией. Это в основном то же самое, что и раздел WHATS NEW.

Надеюсь, есть простое решение к этому;)

Спасибо так много!

@dingo_d:

foreach($myposts as $post) : the_post(); $more = 0; 
     echo '<li>'; 
     echo ' <div class="item-wrapper">'; 
     echo '  <div>'; 
     if (has_post_thumbnail()): 
      $upload_dir = wp_upload_dir(); 
      $custom = get_post_custom(); $custom = get_post_meta($custom["_thumbnail_id"][0]); 
      $custom = unserialize($custom['_wp_attachment_metadata'][0]); $upload_folder = dirname($custom['file']); 
      if(isset($custom['sizes']) && !empty($custom['sizes'])) { 
       echo '<img src="'. $upload_dir['baseurl'] . '/' . $upload_folder . '/' . $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%"/>';  
      }else{ 
       echo '<img src="'. $upload_dir['baseurl'] . '/' . $custom["file"] . '" width="100%"/>';   
      } 
     else: 
      //no image image 
      echo '<img src="' . OZY_BASE_URL . 'images/no-image310x140.png" width="100%"/>'; 
     endif; 
     echo '   <div class="hover"></div>'; 
     echo '  </div>'; 
     echo '  <span class="cfnt" align="center">'; 
         the_title(); 
     echo '  </span>'; 
     echo ' </div>'; 
     if($xml->description=='1') echo '<div class="desc"><span class="cfnt">' . get_the_title() . '</span><p>' . strip_tags(get_the_content('','')) . '</p></div>'; 
     echo "</li>"; 
    endforeach; 

EDIT 2:

echo '<img src="'. $upload_dir['baseurl'] . '/' . $upload_folder . '/' . $custom['sizes']['portfolio-featured-thumb-460']['file'] . '" width="100%" class="nohover" /><img alt="imagehover" src="URL TO HOVER IMAGE" class="hover" />'; 

Answer 1

Из приведенного выше вашего вывода кода должно быть что-то вроде этого (в HTML)

<li> 
    <div class="item-wrapper"> 
     <div> 
      <img src=""/>  
      <div class="hover"></div> 
     </div> 
     <span class="cfnt" align="center"></span> 
    </div> 
     <div class="desc"><span class="cfnt"></span><p></p></div> 
</li> 

Под изображением там представляет собой пустой div с классом hover, который вы можете использовать в конъюнктуре с эффектом this, до m ake ваше изображение сначала будет черным, а затем будет отображаться при наведении.