wp-favorite-postsのカスタマイズ｜デザインを弄ってみた

皆さんこんにちは。あんみつです。

さて更新頻度が低すぎるサイトにお越しいただいた皆さん、今回は私の性分に合わないまじめな話をします。

内容はタイトルにある通りwordpressにあるプラグインwp-favorite-postsのデザインについて書きます。

どうも他のサイトでwp-favorite-postsについて説明しているところが、少なく自分でもかなり悩んだので私の記事を見て助かる人が少しでも増えるといいです。

その前にこのサイトで仕様を理解してからデザインは弄っていきましょう。
www.nxworld.net

お気に入りリストを固定ページに表示｜デザイン変更

お気に入りリストは固定ページにおいて[wp-favorite-posts]を記述すると表示されます。

表示結果は以下の画像

デザインは何もいじっていない状態です。
アイテムを追加すると

リスト形式なので最初に・←これがついてますね実に煩わしいです。

デザイン変更

以下の３つに分けてデザインを変えていきます。

１．ドットを消す
２．アイキャッチを表示
３．ボックス形式で表示

cssに追加するコードを記述します。

ドットを消す

このお気に入りリストはwpfp-spanクラスなので

.wpfp-span li{
	list-style:none;
        display:block;
}

リストの・←これが消えます。

アイキャッチ

通常だとwpfp-page-template.phpの26行～32行目は以下のように記述されている

 echo "<ul>";
        while ( have_posts() ) : the_post();
            echo "<li><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a> ";
            wpfp_remove_favorite_link(get_the_ID());
            echo "</li>";
        endwhile;
        echo "</ul>";

これをアイキャッチを表示するために以下のコードに変えます。

echo "<ul>";
        while ( have_posts() ) : the_post();
	  echo "<li>" . get_the_post_thumbnail( ) ." <span><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a></span>";
            wpfp_remove_favorite_link(get_the_ID());
            echo "</li>";
        endwhile;
        echo "</ul>";

結果は以下の通り

アイキャッチは表示されたでしょうか？

ボックス形式で表示

私が言うボックス形式とは
Unite Gallery Wordpress
のような表示のことなんですが、現状のデザインでは、ほど遠いと言えます。

それでは少しでも近づくように<div>で囲んでみましょう。

echo "<ul>";
        while ( have_posts() ) : the_post();
	  echo <li><article><div class="eyecatch">' . get_the_post_thumbnail( ) ." <span><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a></span>";
            wpfp_remove_favorite_link(get_the_ID());
	  echo "</div></article>";
            echo "</li>";
        endwhile;
        echo "</ul>";

上記のコードに変え、続いてお気に入り記事のタイトルをアイキャッチの下に配置します。

.wpfp-span li span{
	margin:10px;
  	font-size: 9px;
  	display:block;
  	float:left;
	}
.wpfp-span li img{
  	display:block;
  }

cssに追加すると

タイトルが下に来ました

ここで、デザインにあまり力を入れていない謎の考えをもつ人には現状で満足できそうですが、私はこんなのでは満足しません。

ブロック形式で表示するためにブロックの周りに影を付けてみます。

cssに追加します。

article div.eyecatch{
	background-color: #fff;
	margin-bottom: 30px;
	box-shadow: 0 2px 5px #999;
	overflow: hidden;
  	float:left;
  	margin-right:10px;
 	position:relative;
}

結果はこのとおり

しっかり、影がついてます。

・・・タイトルの下線が気になります。

cssに以下を記述します。

.wpfp-span li span a{
	margin: 0px;
        text-decoration: none;
        outline: none;
  	color: #333;
	padding: 10px;
}

下線が消えました。

ついでにタイトルにカーソルが合わさった時、文字色を変えましょう。

.wpfp-span li span a:hover{
   color:#EA3382;
	  }

ホバー状態で文字色がちょっとエッチなピンク色になるように変えました。

以上でボックス形式にデザインを変える通常の説明は終わります。

ここからはさらに細かくremoveをお気に入りリストの左上に配置することでユーザビリティを向上させます。

お気に入りリストの左上にリストから外すボタンを配置する

お気に入りリストから外す際、外すリンクがあるはずです。

通常通りの設定だと「remove」をクリックすると外れます。

私はこの「remove」を左上に配置するのに多少悩みました。

本当は赤の部分に配置したいのです。

でもねこれ意外と簡単なんです。

wpfp-page-template.phpの26行目のコードを見てください。

echo "<ul>";
        while ( have_posts() ) : the_post();
	  echo '<li><article><div class="eyecatch">' . get_the_post_thumbnail( ) ." <span><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a></span>";
            wpfp_remove_favorite_link(get_the_ID());
	  echo "</div></article>";
            echo "</li>";
        endwhile;
        echo "</ul>";

この記事通りに記述していれば上のようなコードになっているはずです。

echo "<ul>";
        while ( have_posts() ) : the_post();
	  echo '<li><article><div class="eyecatch">' . get_the_post_thumbnail( ) ." <span><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a></span>";
            
	  echo'<div class="deleteblock"><p>';
	  	wpfp_remove_favorite_link(get_the_ID());
	  echo'</p></div>';
	  
	  echo "</div></article>";
            echo "</li>";
        endwhile;
        echo "</ul>";

このコードに変えてください。
wpfp_remove_favorite_link(get_the_ID());をdeleteblockclassで囲みました。

スタイルを変えます。

article div.eyecatch div.deleteblock{
  font-size: 12px;
  text-decoration: none;
  position:absolute;
  top:0;
  left:auto;
  background-color: #fff;
}	 

画像のように左上に配置されていれば成功です。

あと「remove」の下線も煩わしいので消しましょう。

wp-favorite-posts.phpの442行目を見てください。

function wpfp_remove_favorite_link($post_id) {
    if (wpfp_is_user_can_edit()) {
        $wpfp_options = wpfp_get_options();
        $class = 'wpfp-link remove-parent';
        $link = "<a id='rem_$post_id' class='$class' href='?wpfpaction=remove&amp;page=1&amp;postid=". $post_id ."' title='".wpfp_get_option('rem')."' rel='nofollow'>".wpfp_get_option('rem')."</a>";
        $link = apply_filters( 'wpfp_remove_favorite_link', $link );
        echo $link;
    }
}

$class='wpfp-link remove-parent';と書いてますね。
これは「remove」のクラスを指してます。

このコードをクラスで指定しやすいように少し変えてみます。

function wpfp_remove_favorite_link($post_id) {
    if (wpfp_is_user_can_edit()) {
        $wpfp_options = wpfp_get_options();
        $class = 'wpfp-link_remove-parent';
        $link = "<a id='rem_$post_id' class='$class' href='?wpfpaction=remove&amp;page=1&amp;postid=". $post_id ."' title='".wpfp_get_option('rem')."' rel='nofollow'>".wpfp_get_option('rem')."</a>";
        $link = apply_filters( 'wpfp_remove_favorite_link', $link );
        echo $link;
    }
}

どこを変えたかって？wpfp-link remove-parentをwpfp-link_remove-parentにしただけです。アンダーバー付けただけです。

スタイルを変えます。

.wpfp-link_remove-parent{
    text-decoration:none;
　  color:#000;

}
	

colorは「remove」の文字色です。

下線が消えてます。

以上でユーザビリティを高める「remove」ボタン配置方法でした。

追記
article div.eyecatch div.deleteblockの中身を変えることで「remove」のデザインは変わります。

例えばradiusを使って円で囲んだりできます。「×」

おまけ

私は、楽しさをもとめました。