カテゴリー:ウィジェット系の記事一覧

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

ポイントサイト・アンケートサイト・趣味を起点としたアフィリエイトの実践記です。

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

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

記事の概要

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

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

「WP Favorite Posts」とは?

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

「WP Favorite Posts」の導入方法

手順1

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

手順2

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

手順3

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

手順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」を紹介しました。

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

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

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

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にキーワード・タグ・カテゴリ・カスタム分類による検索を設置できる「DesignsAndCode」様の「Search & Filter」を紹介します。

「Search & Filter」とは?

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

「Search & Filter」の導入方法

手順1

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

手順2

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

手順3

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

手順4

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

手順5

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

手順6

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

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

手順1

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

  • サークル

手順2

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

まとめ

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

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

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

追記

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

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

WordPressでカスタムタクソノミーをウィジェットに表示する方法

custom-post-type-widgets

記事の概要

この記事ではWordPressのカテゴリーやタグに分類を追加できる「thingsym」様の「Custom Post Type Widgets」を紹介します。

「Custom Post Type Widgets」とは?

WordPressのカスタムタクソノミーをウィジェットに表示できるプラグインです。

「Custom Post Type Widgets」の導入方法

手順1

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

手順2

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

手順3

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

手順4

画面右上の検索欄に”Custom Post Type Widgets”と入力します。
custom-post-type-widgets_001

手順5

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

手順6

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

「Custom Post Type Widgets」の設置方法

手順1

WordPressの管理画面の”外観”にカーソルを持っていき、”ウィジェット”をクリックします。
custom-post-type-widgets_003

手順2

カテゴリ型のカスタクソノミーの場合はカテゴリー(カスタム投稿タイプ)を、タグ型のカスタムタクソノミーの場合はタグクラウド(カスタム投稿タイプ)をウィジェットの任意の位置にドラッグ&ドロップします。
custom-post-type-widgets_004

手順2

カテゴリ型のカスタクソノミーの場合はカテゴリー(カスタム投稿タイプ)を、タグ型のカスタムタクソノミーの場合はタグクラウド(カスタム投稿タイプ)をウィジェットの任意の位置にドラッグ&ドロップします。
custom-post-type-widgets_004

手順3

ウィジェットの設定を行った後”保存”をクリックすると完了です。
custom-post-type-widgets_005

まとめ

この記事ではWordpressに「Custom Post Type Widgets」でカスタム分類ウィジェットを設置する方法を書きました。

カスタム分類を作成した時にはぜひ設定しておきたい設定です。

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss