Google
読者です 読者をやめる 読者になる 読者になる

TECHHOT

色々書いてます。プログラミングのことも使えるかなと思ったら書きます。個人でブログとは関係なく運営しているワークショップのことについてもいずれはまとめて書いていきます。

スポンサーリンク

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

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

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

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

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



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


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

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

f:id:anmitsux:20160308213228j:plain

表示結果は以下の画像

f:id:anmitsux:20160308213304j:plain

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

f:id:anmitsux:20160308213907j:plain

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

デザイン変更

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

1.ドットを消す
2.アイキャッチを表示
3.ボックス形式で表示

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

ドットを消す

f:id:anmitsux:20160308214503j:plain
このお気に入りリストはwpfp-spanクラスなので

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

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

f:id:anmitsux:20160308215124j:plain

アイキャッチ

通常だと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>";

結果は以下の通り
f:id:anmitsux:20160308220845j:plain

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

ボックス形式で表示

私が言うボックス形式とは
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に追加すると
f:id:anmitsux:20160308222507j:plain
タイトルが下に来ました

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

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


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;
}

結果はこのとおり
f:id:anmitsux:20160308224207j:plain

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


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

cssに以下を記述します。

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

f:id:anmitsux:20160308225139j:plain

下線が消えました。

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

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

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

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

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

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

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

通常通りの設定だと「remove」をクリックすると外れます。
f:id:anmitsux:20160308230116j:plain

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

f:id:anmitsux:20160308230211j:plain
本当は赤の部分に配置したいのです。

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

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;
}	 

f:id:anmitsux:20160308232952j:plain

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

あと「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」の文字色です。

f:id:anmitsux:20160308234110j:plain

下線が消えてます。

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


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

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


おまけ

私は、楽しさをもとめました。
f:id:anmitsux:20160308235243g:plain

広告を非表示にする