Tween

لطفاً مشترک http://feeds.feedburner.com/tweener شوید!

در این سری مقالات قصد دارم به نحوه ساخت افزونه برای سیستم قدرتمند وردپرس بپردازم. ابتدا به مقدمات می‌پردازیم و در مقاله‌های بعدی چندین افزونه خواهیم نوشت.

بخش اول: مقدمات

افزونه چیست؟
Codex وردپرس، افزونه را این‌گونه تعریف می‌کند:
افزونه وردپرس برنامه یا مجموعه‌ای از یک یا چندین تابع است که با زبان PHP نوشته شده باشند و به امکانات و یا سرویس‌هایی را به وردپرس می‌افزایند. این‌کار به کمک واسط برنامه‌نویسی افزونه وردپرس (Plugin Application Program Interface) صورت می‌گیرد. +

مشخصا، برای دنبال کردن مطالب شما باید آشنایی اولیه با PHP و نیز خود سیستم وردپرس داشته باشید (کتابچه راهنمای کامل وردپرس فارسی را ببینید).

ابتدا باید یک ایده‌ی کلی از آن‌چه افزونه شما می‌خواهد انجام دهد داشته باشید و سپس باید یک نام (که ترجیحاً منحصر به‌فرد باشد) برای آن انتخاب کنید. برای اطمینان از یکتایی نام، مخازن (Repository) افزونه‌ها را بررسی کنید و یا از گوگل کمک بگیرید.
به شاخه wp-content/plugins بروید و یک فایل php با نام دلخواه ایجاد کنید. کدهای افزونه می‌توانند در یک یا چندین فایل قرار بگیرند و خود افزونه نیز ممکن است تعدادی فایل‌های جانبی (تصاویر، کدهای جاوااسکریپت، شیوه‌نامه‌ها، فایل‌های زبان و…) داشته باشد. در چنین شرایطی برای ممانعت از شلوغ‌بازی در /plugins یک دایرکتوری مجزا برای افزونه درست کرده و فایل‌های افزونه را در آن‌جا قرار می‌دهیم.
می‌دانید که برای شناسایی پوسته‌ها توسط وردپرس باید اطلاعاتی را به ابتدای فایل style.css خود اضافه کنیم تا وردپرس آن را به عنوان یک پوسته شناسایی کند. برای افزونه‌ها نیز این مطلب صدق می‌کند. فایل php اصلی افزونه خود را باز کرده و اطلاعات زیر را در آن قرار دهید:

[php]
<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin’s Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
*/
?>
[/php]

عناوین واضح‌اند. تنها تعریف لازم همان Plugin Name است و بقیه اطلاعات تنها برای نمایش در جدول صفحه مدیریت افزونه‌ها استفاده می‌شوند.
به صفحه مدیریت افزونه‌ها در محیط مدیریت بروید، می‌بینید که وردپرس افزونه را شناسایی کرده و آن را در لیست افزونه‌های غیرفعال قرار می‌دهد. روی دکمه «فعال کردن» کلیک کنید و افزونه را فعال کنید.
چه تغییراتی رخ داد؟ هیچ! هنوز به وردپرس نگفته‌ایم چه‌کار کند.
تبریک می‌گویم. اولین افزونه خود را نوشتید!

پی‌نوشت. لحن نوشته رسمی بود. فکر نکنم اصلاً از این جور نوشتن خوشم بیاد! در آموزش‌های بعدی لحن رو عوض می‌کنم. |)

۸ راه برای این‌که وردپرس را برای مشتریانتان خوشایندتر کنید. اگر شما از وردپرس به عنوان یک CMS (سیستم مدیریت محتوا) برای ساخت وبگاه مشتریانتان استفاده کرده باشید، احتمالاً با این مشکل مواجه شده‌اید: استفاده از وردپرس برای افراد عادی مشکل است. بله، محیط آن کاربر پسند است، ولی گویا نه به اندازه کافی برای کسانی که برای باز کردن پیوندها دوبار کلیک می‌کنند یا برای ورود به وب‌سایت‌ها آدرس آن‌ها را در گوگل وارد می‌کنند. برای آن‌که نگه‌داری وبگاه توسط خود مشتریان را برایشان راحت‌تر کنید، از پیشنهادات زیر کمک بگیرید:

1. نصب یک نسخه توسعه یافته از ویرایشگر پیشرفته
   برای جلوگیری از پرسش‌های مانند «فلان دکمه کجاست؟» این افزونه را نصب کنید. این افزونه یک صفحه تنظیمات نیز برای مدیریت دکمه‌های قابل نمایش در اختیارتان می‌گذارد.
2. افزودن ویرایشگر بصری برای ابزارک‌ها
   می‌دانید چه اتفاقی می‌افتد وقتی مشتری شما برای اولین بار سعی می‌کند تصویری را به سایدبار اضافه کند؟ با شما تماس می‌گیرد، غالبا آن‌هم زمانی که مشغول کاری بس مهم‌تر هستید. wordpress plugin to add rich-text widgets به محیط ویرایش متن ابزارک‌ها، ویرایشگر بصری اضافه می‌کند.
3. مدیریت صفحات را آسان‌تر سازید
   مدیریت صفحات در وردپرس برای کاربران عادی مشکل است. این افزونه واسط آسانی با قابلیت بکش و ولش (drag n drop) برای کاربران فراهم می‌کند.
4. به آن‌ها امکان مدیریت ناوبری (navigation) بدهید
   برای وب‌سایت‌های کوچک‌تر چندان ضروری به نظر نمی‌رسد ولی اگر منوی راهبری و ناوبری شما ترکیبی از صفحات و شاخه‌ها باشد، این افزونه امکان مدیریت آن‌ها را در یک واسط کاربری آسان فراهم می‌کند.
5. اختیارات آن‌ها را محدود کنید.
   احتمالا، مشتریان شما از تعدادی از قابلیت‌های وردپرس هرگز استفاده نمی‌کنند، پس چرا به آن دسترسی داشته باشند؟ Adminize می‌تواند سطح دسترسی به بخش‌های مختلف محیط مدیریت را محدود کند. این به نوبه خود امکان خراب کردن و بهم ریختن محیط مدیریت را کاهش می‌دهد.
6. واسط کاربری محیط مدیریت را ساده کنید.
   افزونه Admin Trim Interface می‌تواند واسط کاربری محیط مدیریت وردپرس را خلوت‌تر و در نتیجه امکان یافتن آن‌چه کاربران به دنبالش هستند را برای آن‌ها ساده نماید.
7. به آن‌ها امکان مدیریت فرم‌های تماس را بدهید.
   یکی از افزونه‌های زیر را امتحان کنید:
   • cforms II مدیریت آسانی دارد ولی اگر به این نکته اهمیت می‌دهید، امکان ارتقا خودکار ندارد.
   • Contact Form 7
8. به آن‌ها امکان دسترسی به آمار را از درون محیط مدیریت بدهید
   به این دلیل ساده: اکثر مشتریان به مدیریت چندین حساب کاربری برای سرویس‌های مختلف آشنایی ندارند. افزونه‌های پیشنهادی:
   • Google Analyticator که سرویس Google Analytics را به محیط مدیریت می‌آورد.
   • Feed stats آمار Feebburner را با محیط وردپرس مجتمع می‌کند.

منبع

اهمیت داشتن URLهای تمیز نیازی به توضیح نداره، علاوه بر این‌که کاربران راحت‌تر اون‌ها رو به‌خاطر می‌سپارن و اهمیتش از نظر SEO، مشکلات آدرس‌های پویا رو ندارند.

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

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.php [L,QSA]

این، آدرس‌های مشابه domain/about.php رو به domain/about تبدیل می‌کنه.
و،

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

آدرس‌های domain/index.php?q=about رو به domain/about

چطور استفاده کنم؟

در ریشه وب‌سایت یک فایل با نام .htaccess بسازید و این‌ها رو توشون کپی کنید یا اگه این فایل موجود بود این‌ها رو به اول فایل اضافه کنید.

ابتدا یه عذرخواهی بکنم از سالار عزیز، این نوشته به درخواست ایشون نوشته شد، منتهی خیلی دیر! نمی‌دونم چرا تازگی‌ها خیلی بدقول شدم…

در این آموزش می‌خوایم جلوه‌ای که در طراحی وب بسیار معمول شده رو پیاده کنیم. بیاید از جعبه بزنیم بیرون!
ابتدا باید جعبه و روبان‌مون رو طراحی کنیم. یه آموزش تصویری خوب در این رابطه رو در این‌جا ببینید.
این آموزش هم نحوه ساخت روبان‌هایی با گوشه‌های نرم رو آموزش می‌ده.

خوب، الان باید به فکر یه ساختار منطقی برای ارائه محتوا باشید. مثلاً این:

[html]
<div class="widget">
<h3>پیوندها</h3>
<ul>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
</ul>
</div>
[/html]

تصویر روبان‌مون رو به عنوان پس‌زمینه h3 معرفی می‌کنیم. تکنیک اینه که به h3مون position:relative بدیم. position:absolute و position:fixed عنصر رو از ساختار فعلی سند (جریان سند = documnt flow) خارج می‌کنن ولی با position:relative عنصر هنوز در همون موقعیت فعلیش می‌مونه و می‌تونیم شی رو نسبت به موقعیت فعلیش به میزان دلخواه جابه‌جا کنیم. این جابه‌جایی رو با top, right, bottom, left تعریف می‌کنیم. پس به‌جز تعریف‌های آرایشی، برای به‌دست آوردن این جلوه به تعریف‌های زیر نیاز داریم:

[css]
h3 {
width: 200px; /* به میزان دلخواه */
position: relative; /* مورد نیاز */
left: -30px; /* یعنی شی رو به میزان سی پیکسل به سمت چپ بکش */
background: url(images/ribbon.png) no-repeat; /* تصویر روبان */
}
[/css]

این width رو باید به اندازه (طول جعبه + اندازه‌ای که می‌خوایم از دو طرفه بیرون بزنه) باید تعریف کنیم. دقت کنید که در css بالا ما مقدار right رو تعریف نکردیم. اگه می‌خوایم از سمت راست هم بیرون بزنه باید مقدار width رو زیاد کنیم و نباید right رو تعریف کنیم (از لحاظ منطقی هم این‌کار معنایی نداره). اگه هم مقدار right و هم مقدار left رو تعریف کنیم مرورگر اگه در سند چپ به راست باشیم مقدار left و اگه سند راست به چپ باشه مقدار right رو استفاده می‌کنه و اون یکی رو در نظر نمی‌گیره. اگه هر دو مقدار top و bottom تعریف شده باشه مرورگر همیشه مقدار top رو استفاده می‌کنه.

درباره تفاوت انواع positionها این‌جا رو بخونید: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

یه استفاده معمول از position:relative برای تعریف position:absolute نسبت به یه عنصر دیگه‌ست. توضیحات بیشتر رو در این‌جا ببینید: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

برای طراحی یک وب‌سایت سرگرمی، عبارت joke رو در Google Images جستجو کردم تا به عکسی با عنوان Ill Never Get It رسیدم. ایده‌ی اولیه، ساخت قالبی است که بشود افقی پیمایشش کرد. منتهی این تصویر باید به پایین پنجره مرورگر می‌چسبید (پایین صفحه مرورگر صخره و بالا، آسمان). تکنیک‌ استفاده شده به این صورت هست:

[html]
<div id="wrapper">

<div id="content">
<div class="content first">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content last">
</div>
</div> <!– #content –>

</div><!– #wrapper –>
[/html]

و شیوه‌نامه:

[css]
#wrapper {
position: absolute;
right: 0; bottom: 0;
height: 767px; width: 100%;
}

#content {
background: url(images/bg.png) repeat-x right center;
width: 4000px; height: 767px;
text-align: justify;
color: #d1c9a9;
}
[/css]

#wrapper با position:absolute و bottom:0 به پایین صفحه می‌چسبونیم. با width:100% طولش رو به اندازه عرض پنجره مرورگر تنظیم می‌کنیم. درون این یه div دیگه با شناسه #content هست. طول این با width: 4000px به اندازه مورد نیاز تنظیم شده و اون تصویر اولیه به عنوان تصویر پس‌زمینه به این یکی داده می‌شه. الان هم به پایین صفحه چسبیده و هم می‌شه افقی پیمایش کرد. این شیوه در هر سه مرورگر Opera, FF, IE بدون مشکل کار می‌کنه، در کروم (من از نسخه ۰٫۴ استفاده می‌کنم، شاید در نسخه‌های جدید اصلاح شده باشه) اگه تگ html خاصیت dir=rtl داشته باشه (یعنی سند راست به چپ باشه) خود نوار پیمایش حذف می‌شه ولی اگه چپ به راست باشه این مشکل وجود نداره.
من در این‌جا برای تنظیم مکان جعبه‌هایی که قراره محتوا رو نگه‌دارند (.content) از float استفاده کردم ولی می‌شه مکان اون‌ها رو با position:absolute و یا relative در مکان دلخواه قرار داد.

مشاهده دمو - دریافت فایل

تاملات

تاملات، وبلاگ گردانندگان آکادمی فانتزی

منتظر نظرات و پیشنهادات شما هستم.

پریروز در Web Resources Depot معرفی مدیا پلیر یاهو رو دیدم. یه فایل جاوااسکریپتی که کاملاً مستقل عمل می‌کنه و به شما امکان می‌ده یه پخش‌کننده صدای خیلی خوشکل توی سایت‌تون داشته باشید. تصمیم دارم از این در پروژه‌ی که فعلاً مشغول کار برش هستم استفاده کنم، بنابراین بد ندیدم این‌جا هم معرفیش کنم.

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

[html]
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
[/html]

همین! این اسکریپت به طور خودکار لینک‌های به فایل‌های صوتی رو پیدا می‌کنه و یه دکمه پخش در کنار اون‌ها قرار می‌ده.
خود پخش‌کننده در گوشه‌ی صفحه قرار می‌گیره بنابراین مزاحم بازدیدکننده نمی‌شه. رابط کاربری هم با فلش نیست و HTML هست بنابراین (اگرچه من امتحان نکردم) ولی باید بشه به‌راحتی با CSS ظاهر رو دستکاری کرد.
خود اسکریپت به‌رایگان در سایت یاهو میزبانی شده. مزایای این میزبانی مشابه میزبانی گوگل از کتابخانه‌های جاوااسکریپتیه. مطلبی از سایت Nano3oft با عنوان «جی‌کوئری سایت من را سنگین و کند می‌کند، نمی‌کند؟» این مزیت‌ها رو شرح داده.

بی‌ربط نوشت:

یه کانتستی بود این‌جا، برنده ۲۵ دلار کوپن برای سایت Point Banners شدم، که همون‌طور که از اسمش مشخصه بنر طراحی می‌کنه. کسی نیاز به طراحی بنر نداره تا کوپن رو براش بفرستم؟

گفتم جفت‌یابی یاد ارسطو افتادم. ارسطو معتقد بود در ابتدای جهان، زن و مرد یکی بودند و بسیار قدرت‌مند. خدایان که از وضع موجود می‌ترسیدند انسان رو به دو نیمه زن و مرد تقسیم کردند و به این ترتیب قدرتش رو ازش گرفتند. ارسطو معتقد بود هر شخصی یه نیمه جدا افتاده از خودش داره و تنها با پیدا کردن اون شخص قدرت اولیه‌ش رو به‌دست میاره.
بازی جفت‌یابی رو معادل Matching Game در نظر گرفتم. (کسی معادل خوبی سراغ نداره؟) روند بازی بسیار ساده‌ست: باید کارت‌های مشابه هم‌دیگه رو پیدا کرد. ابتدا یه چیزی بود برای تست تابع data در جی‌کوئری، بعد یه خورده آرایشش کردم تا شد این.

× رخداد مورد استفاده window.load هست چون در این‌جا، باید قبل از اجرای کدها از لود شدن تصاویر اطمینان حاصل می‌شد.

× برای تصادفی کردن مکان تصاویر در DOM ابتدا نظرم این بود که عناصر رو در یه آرایه ذخیره کنیم، ترتیب عناصر آرایه رو به هم بریزیم و بعد دوباره تبدیل به عناصر دامش بکنیم. با جستجوی گوگل متوجه نوشته James در این رابطه و افزونه مفیدی که برای jQuery نوشته بود شدم. اون تابع shuffle از اون‌جا اومده.
× از متغیر stat برای ردگیری تعداد کلیک‌های کاربر استفاده شده، با کلیک اول فقط کارت نمایش داده می‌شه و با کلیک دوم ارزیابی همانندی تصاویر و برنده شدن بازیکن انجام می‌شه.
× تصاویر مورد استفاده در بازی شکل‌های پیش‌فرض فتوشاپ هستند.

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

در هر حال، همان‌طور که گفتم فقط برای تست چند تا تابع jQuery بود بنابراین همین‌جوری که هست ولش می‌کنم.

مشاهده دمو – دانلود سورس بازی

امروز نوشته‌ای دیدم از James padolsey، این‌جا: http://james.padolsey.com/javascript/fun-with-jquerys-animate/
به طور خلاصه گفته استفاده از تابع animate در jQuery محدود به پویاسازی خاصیت‌های CSS نیست و می‌شه ازش برای تغییر مقدار مشخصه‌ها (propery) در یک شی (در جاوااسکریپت اشیا به این صورت تعریف می‌شن: {propery: value} ) استفاده کرد.

مثال:

[js]
var from = {property: 0};
var to = {property: 100};

jQuery(from).animate(to, {
duration: 100,
step: function() {
console.log( ‘Currently @ ‘ + this.property );
}
});
[/js]

مثال گویای همه‌چیز هست ولی چند تا توضیح می‌دم: یه شی بی‌نام به جی‌کوئری داده می‌شه و به عنوان اولین آرگومان تابع animate مقداری که باید به اون‌جا برسه (to) تعریف می‌شه. آرگومان بعدی تابع هم شی بی‌نامیه که سایر تنظیمات تابع animate بهش داده می‌شه. اون duration:100 مقدار زمان به میل‌ثانیه‌ست و می‌شد اونو از این شی بی‌نام خارج کرد و به عنوان آرگومان دوم به تابع داد. ترتیب آرگومان‌ها در animate به یکی از این دو روشه:

[js]
/* #1 */
jQuery(‘something’).animate({prop:1}, duration, easing, callback);

/* #2 */
jQuery(‘something’).animate({prop:1},{
easing: easing,
duration: duration,
complete: callback
});
[/js]

با step یه تابع بی‌نام بهش می‌دیم تا با هر بار تغییر مقدار فراخوانی بشه. در این تابع خود مقدار رو با یه رشته متنی به کنسول می‌فرستیم. دقت کنید که console.log فقط در فایرفاکس و با افزونه فایرباگ کار می‌کنه.

کارهایی که می‌شه با این انجام داد واقعاً نامحدوده (تنها عامل محدوده‌کننده تخیله). با این روش می‌شه هر چیزی رو به صورت انیمیشن درآورد.