آموزش ساخت جعبه جادویی اشتراک در وردپرس

۹ ۰۲ ۱۳۸۸

جعبه جادویی اشتراک زنگوله را حتمآ زیر هر پست دیده اید. فکر می کنم حدود هشت – نه ماه پیش برای تسهیل مراحل مشترک شدن درستش کردم که انصافآ هم تاثیر خوبی روی وبلاگ داشته. خوشبختانه دیدم که چند تا وبلاگ دیگه هم از همین طرح استفاده کردند و قید تصاویر و نوشته هایی که به صورت دستی به آخر هر پست اضافه می کردند را زدند! البته جعبه اشتراک زنگوله از تکنولوژی ویژه ای برخوردار است که گمان نکنم در وبلاگ دیگه ای به کار گرفته شده باشه. :))

امکان تغییر متن داخل جعبه به راحتی و نسبت به محتوای هر پست!

مثلآ در پست «می خوای وقتی ایمیل برات میاد یک چراغ واقعی روی میزت چشمک بزنه؟» متن جعبه را به صورت زیر تنظیم کردم:

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

برخی از مثال های دیگر متن دلخواه برای جعبه اشتراک را می توانید در پست های زیر ببینید:

- داستان یک «مشترک گرامی و یک سو تفاهم بامزه!»
- هشت سوالی که باید قبل از انتشار هر پست از خودتان بپرسید
- نهایت امنیت وردپرس با 15 ترفند امنیتی

دوستان زیادی از اون موقع تا الان با من تماس گرفتند و درخواست کردند آموزش ساخت این جعبه را به آنها بدهم ، جواب همگی را از طریق ایمیل تا جایی که در توانم بود دادم اما خوب یقینآ جواب های ایمیلی به اندازه یک پست وبلاگی کامل به درد بخور نیست. پس همانطور که به دوستان از طریق ایمیل هم قول دادم آموزش کامل و دقیق ساخت آن را منتشر کردم که همه از آن استفاده کنند.

حالا اگر تصمیم خودتان را برای ساختن یک جعبه اشتراک جادویی گرفته اید ادامه پست را با دقت دنبال کنید:

* متاسفانه انجام این ترفند برای کاربران wordpress.com که امکان تغییر کد پوسته را ندارند ممکن نیست.
* آشنایی ابتدایی با HTML و PHP به شدت توصیه می شود.

اولین کاری که باید بکنید دستکاری کد فایل single.php قالب وبلاگ تان است ، باید قسمتی که می خواهید جعبه را قرار دهید پیدا کنید. مثلآ من از قالب freshy استفاده می کنم و می خواهم جعبه را زیر لینک به مطلب قبلی و بعدی قرار دهم. پس با دیدن کد فایل single.php می فهمم که قسمتی که من باهاش کار دارم زیر این خطوط است:

<p class="navigation"> <span class="alignleft"><?php previous_post_link('« %link') ?></span> <span class="alignright"><?php next_post_link('%link »') ?></span> </p>

خوب حالا جایی که باید کد خودمو اضافه کنمو پیدا کردم ، کد زیر را زیر کد های بالا اضافه می کنم:

<div style="direction:rtl; border: 1px solid rgb(230, 219, 85); padding: 5px; margin-top: 10px; background:transparent url(http://YOURSITE.COM/background.jpg) repeat; background-color: rgb(255, 251, 204); font-size:16px; font-family:'Times New Roman';"> <?php $subtext=get_post_meta($post->ID, "subtext", true); if ($subtext<>null) { echo "<b>".get_post_meta($post->ID, "subtext", true)."</b>"; echo "<form action=\"http://www.feedburner.com/fb/a/emailverify\" method=\"post\" target=\"popupwindow\" onsubmit=\"window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=YOUR-FEEDBURNER-NUMBER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true\"> <img style='border:0px;' align=right src=http://YOURSITE.COM/email.gif><font size=2 face=tahoma>به وسیله‌ی ایمیل:</font></img> <br> <input type=\"text\" style='width:190px;' name=\"email\" /> <input type=\"submit\" value='مشترک کن مرا' /> <input type=\"hidden\" value=\"http://feeds.feedburner.com/~e?ffid=YOUR-FEEDBURNER-NUMBER\" name=\"url\" /> <input type=\"hidden\" value=\"TITLE-HERE\" name=\"title\" /> <input type=\"hidden\" name=\"loc\" value=\"en_US\" /> <br><font face=Tahoma size=2px>ایمیل شما نزد ما محفوظ و اشتراک تان هر لحظه با یک کلیک قابل انصراف است.</font></form> <br><a href=http://feeds.feedburner.com/zangoole><img style=border:0px; align=right src=http://YOURSITE.COM/rss.png></a><b> یا به وسیله‌ی<a href=http://feeds.feedburner.com/YOUR-FEEDBURNER-ID> فـیـد (خوراک)</a></b></div>"; } else { echo "<b>مشترک سایت من شوید تا حتی یک مطلب را هم از دست ندهید!</b>"; echo "<form action=\"http://www.feedburner.com/fb/a/emailverify\" method=\"post\" target=\"popupwindow\" onsubmit=\"window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=YOUR-FEED-NUMBER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true\"> <img style='border:0px;' align=right src=http://YOURSITE.COM/email.gif><font size=2 face=tahoma>به وسیله‌ی ایمیل:</font></img> <br> <input type=\"text\" style='width:190px;' name=\"email\" /> <input type=\"submit\" value='مشترک کن مرا' /> <input type=\"hidden\" value=\"http://feeds.feedburner.com/~e?ffid=YOUR-FEEDBURNER-NUMBER\" name=\"url\" /> <input type=\"hidden\" value=\"TITLE-HERE\" name=\"title\" /> <input type=\"hidden\" name=\"loc\" value=\"en_US\" /> <br><font face=Tahoma size=2px>ایمیل شما نزد ما محفوظ و اشتراک تان هر لحظه با یک کلیک قابل انصراف است.</font></form> <br><a href=http://feeds.feedburner.com/YOUR-FEEDBURNER-ID><img style=border:0px; align=right src=http://YOURSITE.COM/rss.png></a><b> یا به وسیله‌ی<a href=http://feeds.feedburner.com/YOUR-FEEDBURNER-ID> فـیـد (خوراک)</a></b></div>"; } ?>

بدیهی است که مقدار های زیر را باید نسبت به فید برنر و سایت خودتان تغییر دهید:

YOUR-FEEDBURNER-ID

TITLE-HERE

YOUR-FEEDBURNER-NUMBER

YOURSITE.COM

کد بالا چطوری کار می کنه؟

اگر با php و html آشنا باشید که یقینآ تا الان دوزاری تان افتاده. حالا به طور خلاصه نحوه کارکرد کد بالا را برای دوستان گرامی مبتدی تر توضیح میدم که هم یک جعبه قشنگ اشتراک داشته باشید هم بدانید که چطور کار می کند.

کد بالا با کمک قابلیتی در وردپرس نوشته شده به نام «زمینه های دلخواه» یا Custom Fields ، آموزش های کامل مربوط به آن را می توانید در وبلاگ گناهکار بخوانید.

کد ما میاد اول قیافه جعبه را تعریف می کنه که رنگش چطوری باشه عکس هاش کجا باشن و این جور چیزا… بعد میاد یک زمینه دلخواه تعریف می کنه میگه اگر زمینه دلخواه subtext تنظیم شده بود متنی که نویسنده نوشته را در جعبه نشون بده ، اگر subtext تنظیم نشده بود متن ثابت که همان «مشترک زنگوله شوید تا حتی یک پست را هم از دست ندهید!» است نشان داده شود.

با این حساب اگر شما دوست نداشته باشید متن خاصی بنویسید لازم نیست کار اضافه ای بکنید ولی اگر بخواهید متن خاصی بنویسید از قسمت زمینه های دلخواه (زیر قسمتی که پست را می نویسید) یک زمینه دلخواه با نام subtext تعریف می کنید و متنی که می خواهید بنویسید در قسمت «مقدار» وارد می کنید. مثلآ تصویر زیر را ببینید:

اصل کد همینه و بقیش فقط اندازه و جای دکمه و تکست باکس و کد فیدبرنر برای اشتراک ایمیلی است.

می توانید ابتکار بزنید و در قسمت «مقدار» کمی کد html قاطی کنید و از تصاویر هم استفاده کنید.

ابتکار حد و مرزی ندارد!

بله ، واقعآ ندارد! می توانیم با استفاده از افزونه Feed Count اگر تعداد مشترکین فیدی خوبی دارید آن را به نمایش بگذارید تا دیگران را ترغیب کنید که مشترک وبلاگ تان شوند.

اول وارد اکانت فید برنر تان شده و از قسمت Publicize گزینه Awareness API را فعال کنید.

حالا افزونه Feed Count را نصب و فعال کنید و از قسمت تنظیمات > feed count تنظیمات آن را درست کنید.

حالا باید کد فایل feedcount.php را کمی دستکاری کنید تا همانطور که می خواهید عمل کند. متاسفانه امکان این که من مرحله به مرحله آنها را نشان بدهم وجود ندارد چون هر کس می تواند به روش خودش کد را ویرایش کند.

برای مثال من کد را دستکاری کردم که اگر تعداد مشترکین بیش از 4400 بود و من در زمینه دلخواه subtext نوشته بودم feed ، متن «شما هم به جمع xxxx مشترک زنگوله بپیوندید!» نمایش داده شود که به جای x ها تعداد مشترکین به طور خودکار جایگزین می شود و شرط اول (بزرگتر بودن از 4400) از نمایان شدن این متن در شرایطی که تعداد مشترکین افت ناگهانی می کند یا حتی صفر می شود جلوگیری می کند.

و تعریف کرده ام که اگر تعداد مشترکین کمتر از 4400 بود (یعنی یک مشکلی پیش اومده…) همان متن «مشترک زنگوله شوید تا حتی یک مطلب را هم از دست ندهید!» نمایش داده شود.

نتیجه را ببینید: