ワードプレス(WP)のYARPPでABテスト失敗したからリデザイン

serial今まで何回もプラグインの見直しを行なっていますが、必ず生き残るのが関連記事表示プラグインのYARPP。記事の最後に「関連記事」を表示してくれます。

当ブログではYARPPのデザインを何度か変更してきていますが、最後のABテストの結果が思わしくなかったので元に戻すことに。単純に元に戻すのも面白みがないのでリデザインしました。

通算4回目のデザイン変更になります。その変化を振り返ってみたいと思います。

スポンサーリンク

 

1. 最初の変更 CSS3で枠を追加

最初は単に外枠をCSS3で追加しただけです。中身は初期状態のリスト表示のまま。当時は他にも手を回す箇所が沢山あって、とりあえずこれでいいかと思っていました。今見るとかなり寂しいですね。

ワードプレス(WP)で関連記事表示「Yet Another Related Posts Plugin」をCSS3でデザイン

yarpp1-570x257

 

 

2. アイキャッチ画像付きに変更

ブログ運営も慣れてきて、次はアイキャッチ画像を追加してタイル表示に切り替えました。下の記事でCSSやYARPPのテンプレートが読めます。

ワードプレス(WP)の関連記事プラグインYARPPをアイキャッチ画像+CSS3にリデザイン

 

 

3. はてブ数を表示&リスト表示で表示件数を増加

これが前回の変更。記事が増えてきたので、はてブ数を表示させて人気記事が分かりやすいように。あとは思い切ってリスト表示に戻し、表示件数を増やしてみてABテストしてみました。

YARPPのテンプレートはこちらになります。

yarpp-template-list.php
<div id="yarp_list">
    <h2>関連記事</h2>
    <?php if (have_posts()):?>
    <ul>
    <?php while (have_posts()) : the_post(); ?>
        <?php if (has_post_thumbnail()):?>
        <li>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
        <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" border="0" style="vertical-align: middle;"></a>
        </li>
        <?php endif; ?>
    <?php endwhile; ?>
    </ul>
    <?php else: ?>
    <p>関連記事はありません。</p>
    <?php endif; ?>
</div>

 

 

4. 直帰率増加(T_T) 元に戻しつつ+はてブ数を表示

ABテストは2週間計測して平均3%ほど直帰率が増えました。微妙に誤差とは言い切れない数値なので元に戻すことに。ついでにアイキャッチ画像+はてブ数という仕様にしてみました。

またしばらく様子見です。

 

yarpp-template-4.php
<div id="yarp4">
    <?php if (have_posts()):?>
    <h2>こちらもどうぞ</h2>
    <ol>
    <?php while (have_posts()) : the_post(); ?>
        <?php if (has_post_thumbnail()):?>
        <li>
        <a href="<?php the_permalink() ?>" class="item" title="<?php the_title_attribute(); ?>"><div class="thumb"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" border="0" class="hatena"><?php the_post_thumbnail(array(110,110)); ?></div><?php the_title(); ?></a>
        </li>
        <?php endif; ?>
    <?php endwhile; ?>
    </ol>
    <?php else: ?>
    <?php endif; ?>
</div>
CSS
#yarp4{
    overflow: hidden;
}

#yarp4 ol{
    margin: 0;
    padding: 0;
    list-style: none;
}

#yarp4 ol li a.item{
    text-align: center;
    width: 120px;
    height: 220px;
    padding: 0 5px;
    display: block;
    margin: 0 10px 10px 0;
    float: left;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;

    border: 1px solid #bbbbbb;
    *border: 0;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

}

#yarp4 ol li div.thumb{
    position: relative;
    margin: 10px 5px 5px 5px;
}

#yarp4 img.wp-post-image{
    vertical-align: bottom;
    border-radius: 3px;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#yarp4 img.hatena{
    position: absolute;
    bottom: 0;
    right: 0;
}

#yarp4 ol li a:hover img.wp-post-image{
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}

 

 

スポンサーリンク