اموزش ساخت افزونه وردپرس

اموزش ساخت افزونه وردپرس – انتخاب و اشتراک

افزونه ای که میسازیم چگونه کار میکند؟

وقتی که شما در حال خواندن مطالبی هستید  قطعا میدانید که میتوانید قسمتی از متن را انتخاب (highlight ) کنید. خوب این قابلیت جالبتر میشود اگر وقتی که متن را انتخاب می کنیم ایکون کوچکی کنار متن ظاهر بشود و به ما این امکان را بدهد که متن انتخابی را در شبکه های اجتماعی مانند تویتر منتشر کرد. امروز آموزش وردپرس جدیدی را برای شما اماده کرده ایم اموزش ساخت افزونه وردپرس  تا بتوانید اینکار را انجام بدهید و افزونه وردپرس اختصاصی خودتون رو بسازید.

اموزش ساخت افزونه وردپرس - افزونه ای که قرار است باهم بسازیم این امکان را میدهد که ایکون تویتر را کنار متن انتخابی ظاهر شود تا کتربر به سادگب ان را اشتراک دهد

اموزش ساخت افزونه وردپرس – افزونه ای که قرار است باهم بسازیم این امکان را میدهد که ایکون تویتر را کنار متن انتخابی ظاهر شود تا کاربر به سادگی ان را اشتراک دهد

افزودن “انتخاب و اشتراک” به سایت وردپرس شما

راه ساده برای اینکه قابلیت “انتخاب و اشتراک” را به وردپرس اضافه کنید این است که به پایین این صفحه اسکرول کنید و افزونه ای که ما ساخته این را دانلود کنید و در سایت خود نصب و فعال کنید و کار تمام است! لازم به ذکر است این افزونه از کلاس های استاندارد وردپرس استفاده میکند و فقط در صفحه یه نمایش کامل مطلب “single post” کار میکند. پوسته شما هم باید از کلاس های استاندارد وردپرس استفاده کند اگر هم استفاده نکند افزونه به خوبی کار نمیکند.

اموزش ساخت افزونه وردپرس

ساخت افزونه خالی

در پوشه افزونه ها در ادرس wp-content/plugins یک پوشه جدید با نام “select-and-tweet” ایجاد کنید و یک فایل خالی در داخل پوشه با نام select-and-tweet.php بسازید . داخل این فایل محتوای زیر را وارد میکنیم با اموزش ساخت افزونه وردپرس همراه باشید.

افزودن ابزار ها

تمام کاری که در این مرحله باید انجام دهیم باید اینه که چند ابزار کوچک را به فایل PHP اصلی اضافه کنیم. که وقتی از ایکون تویتر استفاده کنیم در فایل CSS  و JAVASCRIPT مورد استفاده قرار میگیرد. نام فایل ها:

  • select-and-tweet.css
  • select-and-tweet.js

پس از ساخت این فایل ها این فایل را دانلود کنید و در پوشه افزونه extract کنید. حالا باید یه پوشه با نام fonts که شامل چهار فایل است. قبل از اینکه کدی در فایلهای css , js وارد کنیم اجازه بدهید ابتدا یک سری کد در فایل اصلی select-and-tweet.php وارد کنیم.

 

نکته مهم اینکه از انجا که ما از jQuery استفاده کرده ایم باید مطمن شویم که فایل بارگذاری شده است و اینکار را در خط ۴ در پارامتر سوم بررسی کرده ام. همچنین true در پارامتر پنجم مطمئن میشویم که فایل در فوتر (footer) بارگذاری شود زیرا قبل از ان لازم نیست.

اموزش ساخت افزونه وردپرس – درک کار جاوا اسکریپت

اساسا، ما زمانی می خواهیم ایکن تویتر را نشان دهیم که کاربر بخشی از متن را انتخاب مرده باد. پروسه ی انتخاب کردن با  رویداد mousedown  (فشار دادن کلیک ماوس ) شروع می شود و با mouseup (رها کردن کلیک ماوس) پایان میابد. ما باید مطمئن شویم که کلیک کاربر راست کلیک نباشد و ایکون فقط با چپ کلیک نشان داده شود (در هر دو حالت منوی پیش فرض مرورگر باید نمایش داده شود و اختلال ایجاد نشود)  و باید بیش از ۳ کاراکتر را انتخاب کرده باشد. این کار مانع از کلیک اهسته و یا انتخاب اتفاقی میشود.

اول بیاید دو تابع کمکی بسازیم. اولی برای اینکه اگر کلیک راست است کاری نکند و دوم برای اینکه متن را به ما return کند.

در اینجا هر دو تابع را قرار میدهیم.

با این کد کار تمام است! اکنون در اموزش ساخت افزونه وردپرس باید مواردی را در دو رویداد قرار دهیم: رویداد های mouseup و mousedown در پایین کد کامل این قسمت را قرار میدهیم.

توجه کنید که هر دوی این رویداد ها به کلاس .entry-content بستگی دارد برای اینکه مطمئن شویم که کاربر از محتوای پست متن را انتخاب کرده است نه از سایر قسمت ها مانند سایدبار و یا فوتر.

رویداد mousedown خیلی مهم است. دو خط اول محل دقیق شروع انتخاب را پیدا میکنند.این مکان بعدا برای قرار دادن محل دکمه اشتراک گذاری استفاده میشود که در کلاس twtshare استفاده میشود اموزش ساخت افزونه وردپرس.

بخش اصلی رویداد mouseup بهاین میپردازد که اگر طول متن انتخاب شده کمتر از ۳ کاراکتر است ( یا برابر ۳)  و یا کلیک فشار داده شده راست کلیم است کاری انجام داده نشود و ایکون تویتر نشان داده نشود. اگر همه چیز درست بود با محل بالا و سمت چپ پایان انتخاب را میگیریم. در ادامه اموزش ساخت افزونه وردپرس با این اطلاعات ما میتوانیم با محاسبه میانگین نقطه شروع انتخاب و پایان انتخاب محل وسط انتخاب را بدست می اوریم.

در ادامه اموزش ساخت افزونه وردپرس قدم بعدی این است که ادرس اشتراک متن url تویتر را پیدا کنیم. با افزودن .split[0] در پایان رشته هایی را که لازم نداریم را حذف میکنیم همچنین اگر هم شما حواستید چیزی به ان اضافه کنید میتوانید در این قسمت وارد کنید. سپس رشته انتخاب شده به حداکثر ۱۰۷ کاراکتر برش داده میشود. ممکنن است شما بخواهید نام کاربری تویتر خود را نیز به متن اضافه کنید برای اینکار کد مشابه st = st + ‘ @webtazan’; را در انتهای رشته اضافه کنید.

دکمه اشتراک متن را با یک لینک ساده با کلاس .twtshare ساخته ایم.

شیوه نامه برای دکمه اشتراک

شیوه نامه کوتاه و شیرین است و شامل کدهایی برای ساخت ایکون در کلاس .twtshare و تعدادی کد برای داشتن انیمیشن دکمه و در پایین آن را تقدیم شما می کنم:

دانلود افزونه انتخاب و اشتراک – اموزش ساخت افزونه وردپرس

در زیر ما این افزونه را که در مقاله اموزش ساخت افزونه وردپرس ساخته ایم به صورت کامل و در قالب یک فایل فشرده برای دانلود قرار میدهیم. برای دانلود افزونه اینجا کلیک کنید. در ضمن منتظر دیدگاه های شما کاربران عزیز وبتازان هستیم

منبع

نظرات