RICK式アフィリエイト実践記

カテゴリー：ウィジェット系

- WordPressに記事をお気に入りに登録する機能を実装する方法
2017/01/08
WordPressについて - プラグインの紹介 - ウィジェット系 - WP Favorite Posts
記事の概要以前、お気に入りの記事のリストを登録して保存できるi2iブログパーツの「あとで読む」を実装していましたが、SSLには対応していませんでした。代替案を探 ...
記事を読む
- 「Search & Filter」のデザインを変更してみた
2017/01/06
WordPressについて - プラグインの紹介 - ウィジェット系 - Search & Filter
記事の概要以前キーワード・カテゴリ・カスタム分類で検索できる「Search&Filter」を紹介しました。詳細は下記記事を御覧ください。しかし、デフォルトでのデ ...
記事を読む
- WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置する方法
2016/11/30
WordPressについて - プラグインの紹介 - ウィジェット系 - Search & Filter
記事の概要この記事ではWordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「DesignsAndCode」様の「Search&Fi ...
記事を読む
- WordPressでカスタムタクソノミーをウィジェットに表示する方法
2016/11/28
WordPressについて - プラグインの紹介 - ウィジェット系 - Custom Post Type Widgets
記事の概要この記事ではWordPressのカテゴリーやタグに分類を追加できる「thingsym」様の「CustomPostTypeWidgets」を紹介します。 ...
記事を読む

WordPressに記事をお気に入りに登録する機能を実装する方法

投稿 2017/01/08 更新 2017/01/09
WordPressについて - プラグインの紹介 - ウィジェット系 - WP Favorite Posts

記事の概要

以前、お気に入りの記事のリストを登録して保存できるi2iブログパーツの「あとで読む」を実装していましたが、SSLには対応していませんでした。

代替案を探していたら「WP Favorite Posts」というプラグインで実装できそうだったのでその実装方法を紹介します。

「WP Favorite Posts」とは？

WordPressにお気に入りの記事のリストを登録して保存でき、ユーザーがその記事をあとで読めるようになる機能を追加できるプラグインです。

「WP Favorite Posts」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。

手順3

”プラグイン”の中の”新規追加”をクリックします。

手順4

画面右上の検索欄に”Search & Filter”と入力します。

手順5

下記画像のプラグインを探して”インストール”をクリックします。

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「WP Favorite Posts」の設定方法

今回はカテゴリを並び替える方法について解説します。カテゴリ型のカスタム分類も同様の手順で並び替えられます。

手順1

WordPressの管理画面の左メニューの”設定”にカーソルを持っていき、”WP Favorite Posts”をクリックします。

手順2

オプションは特に編集する必要はないでしょう。強いて言えば、お気に入りの表示数を設定するくらいでしょう。

手順3

ラベルの文言設定を編集します。デフォルトでは英語なので日本語に書き換えておきましょう。

手順4

高度な設定は特に弄る必要はないでしょう。

手順5

お気に入りに追加・削除するリンクを設置する場所に以下のコードを貼り付けます。ウィジェットに設置する場合は「PHP Text Widget」を導入しましょう。

<?php wpfp_link() ?>

手順6

お気に入りリストを設置する場所に以下のコードを貼り付けます。ウィジェットに設置する場合は「PHP Text Widget」を導入しましょう。

<?php wpfp_list_favorite_posts(); ?>

私の場合

私は「Kaeten WP」を使用しています。「Kaeten WP」には豊富なフリースペースや記事装飾が内蔵されています。

私はこの機能を活用し、2箇所に設置しています。

記事内下部フリースペース

<h2 class="h2-03-main mb1">あとでじっくり読みたい方はこちら</h2>
<div class="tac">
<?php wpfp_link() ?>
</div>

左サイドバーウィジェット

<div align="center">
<div class="box-02">
<?php wpfp_list_favorite_posts(); ?>
</div>
<?php wpfp_link() ?>
</div>

まとめ

この記事ではWordPressにお気に入りの記事のリストを登録して保存でき、ユーザーがその記事をあとで読めるようになる機能を追加できる「WP Favorite Posts」を紹介しました。

このプラグインを導入することでユーザーはあとで読もうと思った記事を登録しておくことができます。

ユーザビリティを重視する方はぜひ導入してみてください。

カテゴリー

WordPressについて - プラグインの紹介 - ウィジェット系 - WP Favorite Posts

タグ

「Search & Filter」のデザインを変更してみた

投稿 2017/01/06
WordPressについて - プラグインの紹介 - ウィジェット系 - Search & Filter

記事の概要

以前キーワード・カテゴリ・カスタム分類で検索できる「Search & Filter」を紹介しました。詳細は下記記事を御覧ください。

WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置する方法

記事の概要この記事ではWordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「DesignsAndCode」様の「Search & Filter」を紹介します。「Search & Filter」とは？WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できるプラグイン

趣味を活かしたアフィリエイト実践記

しかし、デフォルトでのデザインはラベルと各種ボックスが離れていたり、中途半端に横並びになったりと気に入らない点がありました。

この記事では「Search & Filter」のCSSをいじった結果、納得のいくCSSができたため、そのCSSを紹介します。

「Search & Filter」のCSSを編集する方法

現在使用しているテーマの子テーマの「Style.css」を編集するなり、カスタムCSSを搭載するプラグインをしようして追加するなりして以下のソースコードを追加してください。

/** Search & Filter 開始 **/
body
{
    display:block;
}
.searchandfilter p
{
    display:block;
  
}
.searchandfilter ul
{
    display:block;
}
.searchandfilter li
{
    list-style: none;
    display:block;
    margin-bottom: 1em;
  
}

.widget-area .searchandfilter li, .widget-area .searchandfilter p
{
    display:block;
}
.searchandfilter
{
    text-align: center;
}


.searchandfilter label
{
    display:block;
}
.searchandfilter h4
{
    margin-top:0px;   
    margin-bottom:0px;
    font-size:14px;
}

.searchandfilter ul > li > ul:not(.children)
{
    margin-left: auto;
    margin-right: auto;
}

.searchandfilter input[type="text"]
{
    width: 100%;
  　height: 40px;
}
/** Search & Filter 終了 **/

まとめ

この記事では「Search & Filter」のCSSのカスタマイズ例を紹介しました。

各パーツが横並びにならないようにし、ラベルと各種ボックスの間をなくし、各種ボックスと次のラベルの間を1文字分開けるように設定しました。

私はこのデザインで納得することができました。どのデザインかというと、左サイドバーの”検索”ウィジェットのデザインです。

「Search & Filter」を使っているけどデザインが気に入らない方はこのCSSを使用してみてください。

カテゴリー

WordPressについて - プラグインの紹介 - ウィジェット系 - Search & Filter

タグ

WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置する方法

投稿 2016/11/30 更新 2017/01/09
WordPressについて - プラグインの紹介 - ウィジェット系 - Search & Filter

記事の概要

この記事ではWordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「DesignsAndCode」様の「Search & Filter」を紹介します。

「Search & Filter」とは？

WordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できるプラグインです。

「Search & Filter」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。

手順3

”プラグイン”の中の”新規追加”をクリックします。

手順4

画面右上の検索欄に”Search & Filter”と入力します。

手順5

下記画像のプラグインを探して”インストール”をクリックします。

手順6

「Search & Filter」による検索の設置方法

手順1

設置したい場所にショートコードを設置します。ここでは検索キーワード,サークル（カテゴリ）,ジャンル（カスタム分類）による検索を設置します。

				
					
						検索キーワード
サークル

手順2

設置した結果以下のように並びます。

まとめ

この記事ではWordPressにキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「Search & Filter」を紹介しました。

このプラグインを導入することでユーザーの検索による幅が広がると思います。

ユーザビリティを重視する方はぜひ導入してみてください。

追記

導入したところデザインに気に入らない部分があったのでCSSをカスタマイズしました。詳細は下記記事を参照してください。

「Search & Filter」のデザインを変更してみた

記事の概要以前キーワード・カテゴリ・カスタム分類で検索できる「Search & Filter」を紹介しました。詳細は下記記事を御覧ください。しかし、デフォルトでのデザインはラベルと各種ボックスが離れていたり、中途半端に横並びになったりと気に入らない点がありました。この記事では「Search & Filter」のCSSを

趣味を活かしたアフィリエイト実践記