WordPressにお気に入り機能を実装したい!プラグインなしでお気に入りボタンなどの設定をお願いします

WordPressにお気に入り機能をプラグインなしで実装お願いします

お気に入り機能

今回ご紹介する事例のお問い合わせ内容は、下記の通りです。

お問合せ内容

Y様(主婦業)

【依頼内容】Wordpressのカスタマイズ

【カスタマイズ内容】
・お気に入りボタンの設置
・お気に入り登録した記事を一覧にして表示
・プラグインではなく、コーディング希望

WordPressでレシピサイトを運営しています。

ユーザーがお気に入りで登録した記事があとでまとめて見れるように、記事を一覧で表示させてください。

どのような形で表示すればいいのか、まだ決めかねているので、アドバイスお願いします!

テレコム東京の対応

対応

Webサイトにおける「お気に入り機能」とは、サイトを閲覧していて気に入ったページや商品があった場合、ブラウザに登録しておく機能のことです。

これにより、閲覧後にお気に入りに登録したページを探すことなく、すぐにアクセスすることができ、いつでも簡単に閲覧することができます。

お客様のご希望により、今回は「cookie」を使用して、お気に入り機能を実装することにしました。

cookieとは

「cookie」とは、webサイトやサーバーにアクセスしたユーザー情報を、ブラウザに一定の期間保存するための機能のことで、Webサイトに入力したIDなどの情報が記録されます。

例えば、一回サイトを離れてしまっても「cookie」によって、訪問の度にIDを入力したり、商品をカートへ入れ直したりすることなく、ショッピングなどの続きができるようになります。

今回の仕様では、「お気に入りボタン」をクリックすると、ボタンを設置しているページのIDをcookieで取得して、お気に入りに追加されることになります。

以上の点を踏まえて、弊社では、下記のような対応をさせていただきました。

実際の対応

事前にお客様からお聞きした情報は以下の通りです。

必要な情報

  • レンタルサーバーのログイン情報
  • WordPressのログイン情報
  • お気に入りボタンのサンプルコード

WordPressのバージョンなどに問題がないことを確認したうえで、以下の作業内容によりお客様のご要望を実現することができました。

作業内容

    1. サイト内調査・お打ち合わせ
    2. jQuery本体をダウンロード後、FTPからアップロード
    3. HTMLのhead内にコード記述
      ※「jquery.cookie.js」を記述しました。
    4. PHPのショートコード用ファイルを作成
      ※「お気に入りボタン」と「登録したページ一覧」のPHPをショートコード化しました。
    5. 「お気に入り登録ボタン」のPHPコードを表示させたい場所に記述
      ※1記事のみ設置しました。
    6. CSSへ「お気に入り登録ボタン」のコード記述
    7. cookie判別のjQueryのコード記述
    8. 固定ページの新規作成
      ※「登録したページ一覧」のPHPコードを記述しました。
    9. CSSへ「登録したページ一覧」のコード記述
      ※デザインを調整しました。
    10. 動作確認、最終確認して作業完了
    11. 30日間の無料保証サポート

今回は、弊社で用意したコードで無事に実装することができました。

お気に入りボタン」をクリックすると、ボタンの表示が「お気に入りに登録済み」へ変わり、分かりやすいように色も変わるように設定しました。

お打ち合わせにより、全ページにボタンを設置して、お気に入りに登録した記事は、固定ページに一覧で表示されるようにしました。

依頼費用を低コストで抑えたいというご要望により、ボタンの設置作業は、設定方法をお伝えしたうえで、お客様に作業していただきました。

スポンサーリンク

このケースの見積もり金額

見積もり

今回ご紹介したケースの場合、弊社では6万5,000円(税別)にて対応いたしました。

業者によって設定されている価格が異なり、同じ作業内容であっても高額な見積もりを出される場合もありますので、依頼先を検討する際には必ず他社見積りを取りましょう

今回ご紹介したようなケース以外にもホームページのことでお困りの場合は、お気軽に弊社までお問い合わせください

弊社にお問い合わせいただく70%は、専門知識を持たれていない読者様からです。

わかりやすい言葉でご説明させていただくように心がけておりますので、お気軽にご相談くださいね。

下記の画像をクリックしていただくと、無料診断フォームに遷移します。

関連記事

f B!

PUSH A(プッシュエース)でプッシュ通知を配信中


プッシュエースの登録方法については、下記の記事でご紹介しています。


記事はこちら

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です