نحوه ایجاد امتیاز ستاره در html css. رتبه بندی ستاره CSS نصب افزونه FiveStarRating
به همه به درس بعدی خوش آمدید موضوع جالبرتبه بندی ستاره جی کوئری نامی است که به نظر من باید این اسکریپت را با دقت بیشتری توصیف کند. و بنابراین، اول از همه، بیایید با چرایی نیاز به رتبه بندی و معنای استفاده از آن در سایت ها شروع کنیم. خب، اولاً، این وضعیت اجتماعی پاسخ به هر مطلبی است که علاقه را برمی انگیزد، چه خوب و چه بد. ثانیاً، این یک ارزیابی است و فرض کنید، یک نظرسنجی کوچک از اینکه آیا این موضوع اصلاً جالب است یا خیر. ثالثاً ، همانطور که در سایت ما ، سطح پیچیدگی موضوع وجود دارد ، اگرچه در اینجا ما قبلاً از پیچیدگی به طور خاص برای مبتدیان ، توجه داشته باشید ، و نه از پیچیدگی برای توسعه دهندگان با تجربه انجام می دهیم ، زیرا ممکن است آنها به سادگی به این مطالب علاقه نداشته باشند. و در اصل، علاقه ای به دریافت فیلمنامه تمام شده ندارند. بنابراین، برای من شخصا، رتبه بندی یک ارزیابی از مطالبی است که علاقه را برانگیخته است. به عنوان مثال، شما علاقه مند به خرید هستید تلفن همراهیا چیز دیگری، شما به یک فروشگاه آنلاین رفتید و می توانید محبوبیت آن را بر اساس رتبه بندی آن ارزیابی کنید.
حالا بیایید در مورد فیلمنامه به طور کلی و در مورد ایده های من صحبت کنیم. در اصل تصمیم گرفتم فیلمنامه را به دو قسمت تقسیم کنم، فکر می کنم خیلی ها به هر دو قسمت اول و دوم علاقه مند خواهند شد، اما آنها را ترکیب نکردم بلکه آنها را در دو مقاله مختلف منتشر کردم. اولاً چون هر دو قسمت با هم کاملاً قابل توجه خواهند بود و ثانیاً مایلم نظرات یا شاید مشاوره یا سؤالات شما را در مورد قسمت دوم ببینم و ثالثاً در قسمت دوم مطمئناً نه تنها استفاده خواهد شد. جی کوئری. به طور کلی، در قسمت اول می خواهم برای شما داستانی در مورد سایتی که می توانید از آن تهیه کنید، تهیه کنم جی کوئریافزونه از این اسکریپتو در قسمت دوم، با کلیک روی ستاره در پایگاه داده بدون راه اندازی مجدد، رتبه را وارد کنید. بنابراین، اگر به قسمت دوم علاقه مند هستید، منتظر لایک ها و نظرات شما هستم.
خوب، بیایید شروع کنیم. ابتدا باید حتما به وب سایت رسمی این افزونه مراجعه کرده و آن را دانلود کنید. خوب، همچنین، مستندات مربوط به راه اندازی خود افزونه و بهینه سازی آن را با دقت مطالعه کنید عملکرد عادیاسکریپت پس از بررسی باید یک فایل داشته باشید jquery.raty.js، در صورت امکان jquery.raty.css، اگر لازم باشد و تصاویر پیش فرض وجود داشته باشد، فقط سه تا از آنها وجود دارد. باز هم می گویم، این همه به طور پیش فرض و طبق استاندارد است!
قسمت اول.
اتصال فایل های js و css. HTML. تصاویر. طبق استاندارد، فایل استایل را قرار می دهیم demo.css و کتابخانه مورد نیاز برای کار jquery.min.js jquery.raty.js، افزونه و فیلمنامه ما.
rate.js سپس، به ریشه اسکریپت، سه تصویر را که به طور پیش فرض آمده اند اضافه کنید: star-on.png - امتیاز کامل، star-off.png - بدون امتیاز، star-half.png - امتیاز نصف اگر تصاویر خود را دارید و می خواهید از آنها استفاده کنید، می توانید آنها را ایجاد کنید، مثلاً همانطور که من انجام دادم. من یک پوشه ایجاد کردم img و دو عکس در آنجا آپلود کرد: rating_activ.png - ستاره فعال، rating_passiv.png
- ستاره فعال نیست. حالا بیایید به ادامه مطلب برویم HTML
کد و من می خواهم بلافاصله توجه داشته باشم که ما فقط سه نمونه را طبق استاندارد منتشر خواهیم کرد که بقیه موارد را می توانید در وب سایت رسمی پیدا کنید که در منبع مطالب ذکر شده است.
مثال اول وقتی روی ستاره کلیک می کنید، بلافاصله پنجره ای به نام متد ظاهر می شودهشدار()
، که در آن می توانیم ببینیم روی کدام ستاره کلیک کرده ایم و کدام رتبه را انتخاب کرده ایم.
مثال دوم - امتیاز نصف اگر تصاویر خود را دارید و می خواهید از آنها استفاده کنید، می توانید آنها را ایجاد کنید، مثلاً همانطور که من انجام دادم. من یک پوشه ایجاد کردم.
وقتی روی ستاره کلیک می کنید، امتیاز نیز محاسبه می شود. برای نمایش، تصاویر من به شکل ستاره نصب شده است که در پوشه قرار دارد
مثال سوم.
شایان ذکر است که وقتی کلیک می کنید، تمام ستاره ها در رتبه بندی که روی آنها کلیک کرده اید ذخیره می شوند، اما نه در پایگاه داده، بلکه در قسمت مشتری. بنابراین، تصمیم گرفتم در مورد بخش دوم بحث کنم، جایی که امکان ایجاد یک صرفه جویی کامل در رتبه بندی ها و به طور کلی شمارش کلیک ها وجود دارد. یعنی امتیاز کلی در پایگاه داده ذخیره خواهد شد.
قسمت دوم. جی کوئریجی کوئری.
حالا می توانیم نگاهی بیندازیم
بخشی در مورد رتبه بندی ستاره. مجدداً این جمله را می آورم که ما فقط سه مثال را در نظر می گیریم که به طور معمول استاندارد هستند.
چگونه آنها کار می کنند، چه چیزی، چگونه و چرا، قبلاً در بالا به تفصیل توضیح داده ام، بنابراین من فقط به جزئیاتی می پردازم که ممکن است برای شما روشن نباشد. $(document).ready(function())($(".rate1").raty(( کلیک کنید: تابع(امتیاز، evt) ( هشدار("ID: " + this.id + "\nscore: " + امتیاز ); target: ".name"، نکات: ["بسیار بد"، "بد"، "بسیار خوب"، "خوب"، "بسیار خوب"]، ));زیر کلاس نرخ 1، تابع را با پارامترها اجرا می کنیم نمرهو وقتی روی ستاره کلیک می کنید، بلافاصله پنجره ای به نام متد ظاهر می شود EVT . در مورد اول با روش بدست می آوریمنام، و دوم شناسه، تعداد ستاره های نمایش داده شده را تنظیم می کنیم، یا بهتر است بگوییم ده عدد از آنها خواهد بود، و تصاویر را نه به طور پیش فرض، بلکه به صورت خودمان قابل اجرا می کنیم، در جایی که ستاره خاموش- ستاره ای است که فعال نیست، اما StarOn- فعال زیر کلاس نرخ 3، تعداد ستاره های نمایش داده شده را تنظیم می کنیم و ستاره پیش فرض را از صفحه نمایش عمومی پنهان می کنیم - خیلی بد، مقدار کل وضعیت را به پنج تنظیم کنید.
بخش سوم.
کتابخانه jquery.raty.js.
اجازه دهید به طور خلاصه در مورد خود افزونه صحبت کنیم. اگر این موضوع برای شما بسیار جالب شد یا نتوانستید آن را به طور کامل درک کنید، ما آن را به صورت جداگانه و با جزئیات تجزیه و تحلیل می کنیم، شاید بعد از قسمت دوم، اگر یکی باشد، یا شاید به عنوان یک قسمت جداگانه برای افزونه. خوب، صادقانه بگویم، کافی است حتی یک سند کوچک بخوانید و همه چیز بلافاصله روشن می شود. نکته اصلی که باید به آن توجه کرد تنظیمات پیش فرض است.
Cancel: false، cancelClass: "raty-cancel"، cancelHint: "لغو این رتبه!"، cancelOff: "cancel-off.png"، cancelOn: "cancel-on.png"، cancelPlace: "left"، کلیک کنید: تعریف نشده ، نیمه: نادرست، نیمه نمایش: درست، نکات: ["بد"، "ضعیف"، "معمولی"، "خوب"، "زیبا"]، نماد محدوده: تعریف نشده، موس: تعریف نشده، اضافه ماوس: تعریف نشده، noRatedMsg: "رده بندی نشده است هنوز!"، شماره: 5، تعداد حداکثر: 20، مسیر: تعریف نشده، دقت: نادرست، فقط خواندنی: نادرست، دور: (پایین: 0.25، کامل: 0.6، بالا: 0.76)، امتیاز: تعریف نشده، امتیاز نام: "امتیاز"، single: false، فاصله: true، starHalf: "star-half.png"، starOff: "star-off.png"، starOn: "star-on.png"، starType: "img"، target: undefined، targetFormat: "(امتیاز)"، targetKeep: نادرست، targetScore: تعریف نشده، targetText: ""، targetType: "اشاره"
همانطور که می بینید من قبلا از برخی از این تنظیمات در اسکریپم استفاده کرده ام، به این توجه کنید! اگر چیزی را متوجه نشدید، می توانید آن را در نظرات بنویسید. با تشکر از توجه شما، برای همه در توسعه موفق باشید!
اگر خواننده دائمی وبلاگ من هستید، ممکن است قبلاً متوجه شده باشید که رتبه بندی مقالات را تغییر داده ام.
دلیل اصلی تغییر رتبه این بود که رتبه بندی به صورت ستاره های "عدد صحیح" نمایش داده می شد، خوب، حداکثر می توان نیم ستاره را نمایش داد. یعنی اگر امتیاز یک مقاله 4.75 بود، باید یا 4.5 ستاره یا 5 نمایش داده شود که خیلی به من نمی خورد.
بنابراین تصمیم گرفته شد پلاگین خودم را در جی کوئری بنویسم تا امتیازی به شکل ستاره ایجاد کنم.
پس از ایجاد پلاگین مورد نیاز، برنامه نویسی را شروع کردم. در نتیجه، من به یک افزونه جی کوئری بسیار خوب برای امتیاز دهی به شکل ستاره رسیدم که خوشحال می شوم آن را با شما به اشتراک بگذارم.
برای استفاده از این افزونه در وب سایت خود، ابتدا باید به آن متصل شوید کتابخانه جی کوئریو خود افزونه ما کتابخانه jQuery را نه به روش معمول، بلکه از مخزن Google متصل خواهیم کرد.
window.jQuery || document.write("");
این کدباید بین تگ های سایت شما قرار گیرد.
می توانید در مورد اینکه چرا باید جی کوئری را از مخزن گوگل متصل کنید، بخوانید.
همچنین برای اینکه افزونه به درستی کار کند، باید سبک های زیر را به هم وصل کنید:
همه اینها را در کد منبع پیدا خواهید کرد.
پس از اتصال تمام استایل ها و کتابخانه های لازم، می توانید با خود افزونه تماس بگیرید. برای این کار باید یک div را در جای مناسب صفحه خود مثلاً با کلاس وارد کنید رتبه بندی:
اکنون می توانید افزونه را در این عنصر به این صورت فراخوانی کنید:
$("div.rating").rating();
در این حالت افزونه با تنظیمات پیش فرض فراخوانی می شود و در نتیجه 5 ستاره پر نشده ایجاد می شود.
برای تنظیم تعداد مشخصی از ستاره های سایه دار، باید یک فیلد ورودی مخفی با نام داخل عنصر خود وارد کنید. نام "وال"، که حاوی مقدار رتبه شما خواهد بود:
اگر اکنون افزونه را فراخوانی کنید، رتبه زیر ایجاد می شود:
پس از کلیک کاربر بر روی ستاره مورد نظر، با در نظر گرفتن انتخاب انجام شده، امتیاز مجدداً محاسبه می شود (تعداد ستاره های سایه دار تغییر می کند) و تعداد رای ها نیز تغییر می کند.
اگر چندین رتبه‌بندی در یک صفحه وجود دارد و باید داده‌ها را به سرور ارسال کنید، فیلد ورودی مخفی دیگری با نام برای شناسایی رتبه‌بندی استفاده می‌شود. نام = "vote-id":
معنی از این رشتهبه همراه نتیجه رای گیری به سرور منتقل می شود. به این ترتیب می توانید رتبه بندی را شناسایی کرده و ارزش رتبه مورد نیاز خود را به روز کنید!
حالا بیایید در مورد تنظیمات این افزونه صحبت کنیم و چگونه می توانید آنها را تغییر دهید!
| fx | شناور |
اثر هنگام نگه داشتن ماوس روی ستاره.
|
| تصویر |
مسیر رسیدن به تصویر ستاره لازم به ذکر است که تصویر باید به صورت اسپرایت ساخته شود، یعنی. در بالای تصویر یک ستاره وجود دارد که برای ستاره های پر نشده نمایش داده می شود. در زیر آن یک ستاره وجود دارد که با نگه داشتن نشانگر ماوس نشان داده می شود. و در پایین آن یک ستاره وجود دارد که برای ستاره های سایه دار نمایش داده می شود. اگر تصمیم به تغییر ستارگان دارید، این ترتیب باید حفظ شود. همچنین توجه شما را به این نکته جلب می کنم که ارتفاع و عرض یک ستاره باید برابر باشد. در غیر این صورت امتیاز به درستی نمایش داده نمی شود |
|
| ستاره ها | 5 | |
| حداقل | 0 | حداقل مقدار رتبه بندی که کمتر از آن کاربر نمی تواند رای دهد |
| عناوین | [ "صدا"، "رای دادن"، "رای" ] |
آرایه ای از اسم ها که برای شمارش آرا نمایش داده می شود |
| فقط خواندنی | نادرست | |
| آدرس اینترنتی |
آدرس صفحه ای که درخواست AJAX با نتیجه رای گیری به آن ارسال می شود |
|
| نوع | پست |
نوع درخواست AJAX پیش فرض پست است. اگر نیاز به ارسال درخواست GET به سرور دارید، این مقدار را روی - get تنظیم کنید |
| لودر |
مسیر تصویری که در حین ارسال درخواست AJAX به سرور نمایش داده می شود |
|
| کلیک کنید |
یک تابع سفارشی که وقتی کاربر روی ستاره کلیک می کند فراخوانی می شود. اولین پارامتر تابع، خود شی رتبه بندی و دومین پارامتر نتیجه رای کاربر خواهد بود |
|
| پاسخ به تماس |
عملکرد برگشت به تماس زمانی که یک درخواست AJAX با موفقیت تکمیل شود، فراخوانی می شود. یک پارامتر پاسخ را به عنوان ورودی می پذیرد - پاسخ سرور |
فرض کنید درخواستی را در سرور پردازش می کنید و رتبه بندی یک یادداشت را به روز می کنید. در این حالت می توانید پیغام “Thank you. رای شما شمرده شده است، رتبه بندی ستاره را دوباره بسازید و تعداد رای دهندگان را در مرورگر کاربر به روز کنید.
اما اغلب، قبل از به‌روزرسانی رتبه، باید بررسی کنید که آیا این شخص به این مقاله رای داده است یا خیر. و اگر شخصی قبلاً به این یادداشت رای داده است ، باید یک هشدار در مرورگر کاربر نمایش داده شود و ارزش رتبه بندی و تعداد رای دهندگان را به روز نکنید.
بنابراین، برای اینکه افزونه به درستی کار کند، سرور باید یک شی json به شکل زیر را برگرداند:
اگر وضعیتبرابر با مقدار خواهد بود - باشه، سپس رتبه بندی ستاره به روز می شود و تعداد رای دهندگان مجددا محاسبه می شود، در غیر این صورت یک پیام هشدار به سادگی نمایش داده می شود.
این پلاگین جهانی است که من برای نمایش رتبه بندی یادداشت ها به شکل ستاره ارائه کردم.
در مورد نحوه ایجاد یک کنترل کننده رتبه بندی به شکل ستاره در این مقاله نوشتم.
اگر این افزونه برای شما مفید بود، می توانید در نظرات زیر از من تشکر کنید. از این طریق می دانم که زحمات من بیهوده نیست.
اگر پیشنهاد یا سوالی برای بهبود این افزونه دارید در نظرات بنویسید.
امیدوارم برای شما مفید باشد!
به روز رسانی از 1391/03/14:
- تمام فیلدهای مخفی که به ظرف رتبه بندی اضافه می کنید به طور خودکار به سرور منتقل می شوند.
- پارامتر عرض حذف شد. اکنون عرض یک ستاره به صورت خودکار تعیین می شود.
- یک تابع پاسخ به تماس اضافه شده است که پس از تکمیل موفقیت آمیز درخواست AJAX فراخوانی می شود.
همه چیز از زمانی شروع شد که تصمیم گرفتم رتبه بندی پست های وبلاگم را تغییر دهم.
اگر خواننده دائمی وبلاگ من هستید، ممکن است قبلاً متوجه شده باشید که رتبه بندی مقالات را تغییر داده ام.
بنابراین تصمیم گرفته شد پلاگین خودم را در جی کوئری بنویسم تا امتیازی به شکل ستاره ایجاد کنم.
بنابراین تصمیم گرفته شد پلاگین خودم را در جی کوئری بنویسم تا امتیازی به شکل ستاره ایجاد کنم.
- رتبه باید به درستی نمایش داده می شد، یعنی اگر رتبه من 4.78 بود، تعداد ستاره های سایه دار باید مناسب باشد.
- امکان انتخاب افکت هنگام قرار دادن ماوس روی ستاره. این به این معنی است که کاربر چه نوع امتیازی می تواند بدهد. یعنی وقتی نشانگر ماوس را روی ستارگان قرار می‌دهید، باید روی آنها یا با ستاره‌های کامل، یا نیم ستاره، یا در مقادیر مطلق به دنبال نشانگر ماوس نقاشی شده باشند.
- امکان تنظیم ستاره های خود
- امکان تعیین آدرس اینترنتی که نتیجه رای گیری به آن ارسال می شود
- امکان تعیین تعداد ستاره های نمایش داده شده در رتبه بندی
- کاهش خودکار نتایج رای گیری (به عنوان مثال: 1 رای، 2 رای، 5 رای)
- امکان تنظیم اسم خود برای نتایج رای گیری
- امکان تعیین حداقل مقدار رتبه بندی که کمتر از آن کاربر نمی تواند رای دهد
- امکان اجرای یک تابع سفارشی هنگام کلیک روی یک ستاره
پس از ایجاد پلاگین مورد نیاز، برنامه نویسی را شروع کردم. در نتیجه، من به پلاگین جی کوئری بسیار خوب برای امتیاز دهی به شکل ستاره رسیدم که خوشحال می شوم با شما به اشتراک بگذارم.
برای استفاده از این افزونه در وب سایت خود، اولین کاری که باید انجام دهید این است که خود کتابخانه jQuery و خود افزونه را متصل کنید. ما کتابخانه jQuery را نه به روش معمول، بلکه از مخزن Google متصل خواهیم کرد.
window.jQuery || document.write("");
این کد باید بین تگ های سایت شما قرار گیرد.
می توانید در مورد اینکه چرا باید جی کوئری را از مخزن گوگل متصل کنید، بخوانید.
همچنین برای اینکه افزونه به درستی کار کند، باید سبک های زیر را به هم وصل کنید:
همه اینها را در کد منبع پیدا خواهید کرد.
پس از اتصال تمام استایل ها و کتابخانه های لازم، می توانید با خود افزونه تماس بگیرید. برای انجام این کار، باید یک div را در جای مناسب صفحه خود، به عنوان مثال، با کلاس رتبه بندی وارد کنید:
اکنون می توانید افزونه را در این عنصر به این صورت فراخوانی کنید:
$("div.rating").rating();
در این حالت افزونه با تنظیمات پیش فرض فراخوانی می شود و در نتیجه 5 ستاره پر نشده ایجاد می شود.
برای تنظیم تعداد مشخصی از ستاره های سایه دار، باید یک فیلد ورودی مخفی با کلاس val را در داخل عنصر خود وارد کنید، که حاوی مقدار امتیاز شما باشد:
اگر اکنون افزونه را فراخوانی کنید، رتبه زیر ایجاد می شود:
پس از کلیک کاربر بر روی ستاره مورد نظر، با در نظر گرفتن انتخاب انجام شده، امتیاز مجدداً محاسبه می شود (تعداد ستاره های سایه دار تغییر می کند) و تعداد رای ها نیز تغییر می کند.
اگر چندین رتبه‌بندی در یک صفحه وجود دارد و باید داده‌ها را به سرور ارسال کنید، فیلد ورودی مخفی دیگری با کلاس vote-id برای شناسایی رتبه‌بندی استفاده می‌شود:
مقدار این فیلد به همراه نتیجه رای گیری به سرور ارسال می شود. به این ترتیب می توانید رتبه بندی را شناسایی کرده و ارزش رتبه مورد نیاز خود را به روز کنید!
حالا بیایید در مورد تنظیمات این افزونه صحبت کنیم و چگونه می توانید آنها را تغییر دهید!
| fx | شناور | اثر هنگام نگه داشتن ماوس روی ستاره.
|
| تصویر | مسیر رسیدن به تصویر ستاره لازم به ذکر است که تصویر باید به صورت اسپرایت ساخته شود، یعنی. در بالای تصویر یک ستاره وجود دارد که برای ستاره های پر نشده نمایش داده می شود. در زیر آن یک ستاره وجود دارد که با نگه داشتن نشانگر ماوس نشان داده می شود. و در پایین آن یک ستاره وجود دارد که برای ستاره های سایه دار نمایش داده می شود. اگر تصمیم به تغییر ستارگان دارید، این ترتیب باید حفظ شود. همچنین توجه شما را به این نکته جلب می کنم که ارتفاع و عرض یک ستاره باید برابر باشد. در غیر این صورت امتیاز به درستی نمایش داده نمی شود |
|
| عرض | 32 | عرض یک ستاره |
| ستاره ها | 5 | تعداد ستاره های نمایش داده شده در رتبه بندی |
| عناوین | [ "صدا"، "رای دادن"، "رای" ] |
آرایه ای از اسم ها که برای شمارش آرا نمایش داده می شود |
| فقط خواندنی | نادرست | رتبه بندی حالت عملکرد پیش فرض نادرست است. اگر روی true تنظیم شود، امکان رای دادن وجود نخواهد داشت |
| حداقل | 0 | حداقل مقدار رتبه بندی که کمتر از آن کاربر نمی تواند رای دهد |
| آدرس اینترنتی | آدرس صفحه ای که درخواست AJAX با نتیجه رای گیری به آن ارسال می شود |
|
| نوع | پست | نوع درخواست AJAX پیش فرض پست است. اگر نیاز به ارسال درخواست GET به سرور دارید، این مقدار را روی - get تنظیم کنید |
| لودر | مسیر تصویری که در حین ارسال درخواست AJAX به سرور نمایش داده می شود |
|
| کلیک کنید | یک تابع سفارشی که وقتی کاربر روی ستاره کلیک می کند فراخوانی می شود. اولین پارامتر تابع، خود شی رتبه بندی و دومین پارامتر نتیجه رای کاربر خواهد بود |
فرمت خروجی پیام سفارشی
فرض کنید درخواستی را در سرور پردازش می کنید و رتبه بندی یک یادداشت را به روز می کنید. در این حالت می توانید پیغام “Thank you. رای شما شمرده شده است، رتبه بندی ستاره را دوباره بسازید و تعداد رای دهندگان را در مرورگر کاربر به روز کنید.
اما اغلب، قبل از به‌روزرسانی رتبه، باید بررسی کنید که آیا این شخص به این مقاله رای داده است یا خیر. و اگر شخصی قبلاً به این یادداشت رای داده است ، باید یک هشدار در مرورگر کاربر نمایش داده شود و ارزش رتبه بندی و تعداد رای دهندگان را به روز نکنید.
بنابراین، برای اینکه افزونه به درستی کار کند، سرور باید یک شی json به شکل زیر را برگرداند:
اگر وضعیت برابر با مقدار - OK باشد، رتبه بندی ستاره به روز می شود و تعداد رای دهندگان دوباره محاسبه می شود، در غیر این صورت یک پیام هشدار به سادگی نمایش داده می شود.
این پلاگین جهانی است که من برای نمایش رتبه بندی یادداشت ها به شکل ستاره ارائه کردم.
می توانید دمو را ببینید
در پست در مورد بهبود عوامل رفتاری(لینک در پایین پست) نوشتم که محتوایی که ارزش افزوده ایجاد می کند به افزایش زمانی که بازدیدکننده در سایت می گذراند کمک می کند.
هدف آن نه تنها نگه داشتن خوانندگان در سایت و افزایش تعداد صفحات مشاهده شده، بلکه افزایش اعتماد به سایت شما و شخص شما (اگر سایت متعلق به نویسنده باشد) است.
چه چیزی ممکن است یک بازدیدکننده را جلب کند و او را در سایت نگه دارد؟ 1. محتوا:- مقالات جالب
- خدمات مناسب مرتبط با موضوع سایت.
- تصاویر و ویدیوهای ویژه در مقالات.
- اطلاعات در مورد سایت و نویسنده - صفحه نویسنده.
- امکان تماس با نویسنده – فرم تماس، ایمیل یا تلفن.
- فرصتی برای بیان نظر خود در مورد مقاله یا امتیاز دادن به آن:
- نظر بدهید و به آن پاسخ دهید.
- لایک کنید یا پیوندی به مقاله در صفحه خود اضافه کنید شبکه اجتماعی– دکمه های شبکه های اجتماعی
- یک ارزیابی مستقیم از مواد ارائه دهید - یک امتیاز.
- رای گیری در موضوعات مختلف
- هدایایی برای خوانندگان و کاربران، مسابقات و تبلیغات.
امروز در مورد نحوه اضافه کردن یک رتبه بندی ساده "ستاره ای" از پست ها به وب سایت خود بدون استفاده از پلاگین های پیچیده و سنگین صحبت خواهم کرد. علاوه بر این، رتبه‌بندی ما دارای نشانه‌گذاری میکرو برای رتبه است، به این معنی که ستاره‌های آن در Google SE (نتایج موتور جستجو) نمایش داده می‌شود و توجه را به قطعه سایت جلب می‌کند. مثل این:
و شانس اینکه کاربر بر روی یک قطعه با ستاره کلیک کند بسیار بیشتر است، بنابراین با کمک آنها می توانیم CTR (نرخ کلیک) صفحات را در نتایج جستجو افزایش دهیم.
داشتن رتبه در یک سایت همچنین می تواند به ورود آن به YAN (شبکه تبلیغاتی Yandex) کمک کند - مدیران آن همیشه به خدمات اضافی منبع توجه می کنند.
به عنوان یک قاعده، رتبه بندی با استفاده از افزونه WP-PostRatings ایجاد می شود.
من بحث نمی کنم، این پلاگین بسیار کاربردی است و به شما امکان می دهد بیشترین پیاده سازی را انجام دهید رتبه بندی های مختلف، اما در عین حال، او:
قبلاً 288 بار دانلود شده است
باز کنید ↓
برای باز کردن قفل محتوا، کد آخرین نامه ای که برای شما ارسال شده است را وارد کنید.
پس از باز کردن بایگانی، یک پوشه رتبه بندی و فایل ها دریافت خواهید کرد:
Functions.php,
- footer.php،
- single.php و
- style.css.
پوشه رتبه بندی باید به پوشه تم شما اضافه شود.
و کد را از فایل های functions.php، footer.php، single.php و style.css به ترتیب به فایل های functions.php، footer.php، single.php و style.css تم خود منتقل کنید.
در functions.php و footer.php - تا ابتدای فایل، در style.css - تا انتهای فایل.
در single.php بعد از تگ
می‌توانید به سایر برچسب‌های ریز نشانه‌گذاری مقالات در http://schema.org/Article نگاه کنید و موارد مورد نیاز خود را اضافه کنید.
پس از این، پست، با رتبه بندی اضافه شده به آن، می تواند در اعتبارسنجی نشانه گذاری بررسی شود:
Google - https://developers.google.com/structured-data/testing-tool/ و
Yandex - http://webmaster.yandex.ua/microtest.xml.
در نهایت، پیشنهاد می کنم یک وبینار در مورد حذف سایت ها از AGS با استفاده از محتوایی که ارزش افزوده ایجاد می کند تماشا کنید.
برای نمایش ستاره، از کد اعشاری نماد ستاره در HTML استفاده می کنیم، یعنی: ☆.
HTML ☆☆☆☆☆هنگامی که ماوس را روی ستاره مربوطه می‌کشید، باید یک ستاره زرد جامد را به ستاره "توخالی" فشار دهیم. آسان: فقط یک ستاره جامد را با استفاده از یک عنصر شبه در بالای ستاره توخالی قرار دهید.
CSS .rating > span:hover:before ( محتوا: "\2605"؛ موقعیت: مطلق؛ )ما به طور مطلق ستاره جامد را قرار می دهیم و بنابراین، ستاره ما ستاره توخالی را می پوشاند.
اما تا اینجا همه چیز برای ما فقط برای هر ستاره خاص کار می کند. و وظیفه ما، برای تجربه کاربری بهتر، پر کردن تمام ستاره ها است (بر اساس اینکه ماوس به کدام ستاره اشاره می کند). به عنوان مثال، اگر کاربر ماوس را روی ستاره 4 قرار دهد، باید 4 ستاره، اگر در 5، سپس 5 و غیره نمایش داده شود.
هیچ راهی برای انتخاب قبلی از طریق CSS وجود ندارد عنصر مجاور. با این حال، راهی برای انتخاب عناصر فرزند بعدی، از طریق .
اگر به معنای واقعی کلمه کاراکترها را معکوس کنیم (قطعه در این مورد به ما کمک می کند - )، سپس می توانیم از یک ترکیب کننده مرتبط برای انتخاب تمام ستاره هایی که قبل از ستاره روی ماوس، اما بعد از آن در HTML ظاهر می شوند، استفاده کنیم.
رتبه بندی CSS ( unicode-bidi: bidi-override; جهت: rtl; ) .rating > span:hover:before, .rating >بنابراین ما یک الگوی کاربر پسند رتبه بندی ستاره با استفاده از کد کمی ایجاد کرده ایم. در زیر آمده است کد کامل CSS برای کارکرد رتبه:
رتبه بندی CSS ( unicode-bidi: bidi-override; جهت: rtl; ) .rating > span (نمایش: inline-block; موقعیت: نسبی؛ عرض: 1.1em; ) .rating > span:hover:before, .rating > span:hover ~ span:before ( محتوا: "\2605"؛ موقعیت: مطلق؛ ) استفاده واقعیبه احتمال زیاد، بدون مشارکت جاوا اسکریپت امکان پذیر نخواهد بود. هنگامی که کاربر روی یک ستاره کلیک می کند، یک درخواست ajax به سرور ارسال می شود و ویجت کلاسی را دریافت می کند که از طریق آن تعداد ستاره انتخاب شده نمایش داده می شود. آیا واقعاً نمی توان برای پیاده سازی چنین سیستم ستاره ای به جاوا اسکریپت اعتماد کرد، اگر در همه جای سایت از آن استفاده شود؟ اگر برنامه شما کاملاً به جاوا اسکریپت وابسته است، این گزینه مطمئناً مناسب است. اما، اگر سایت شما نیاز به کار بدون نیاز دارد با استفاده از جاوا اسکریپت، پس این رتبه بندی ستاره به کار بسیار بیشتری نیاز دارد. می توانید مثال Lea Verous را ببینید که از دکمه های رادیویی به عنوان بخشی از فرم استفاده می کند و از جاوا اسکریپت استفاده نمی کند.
