رضا آنلاین http://www.rezaonline.net/blog وبلاگ شخصی رضا شیخله Tue, 21 Feb 2012 13:20:22 +0000 fa hourly 1 http://wordpress.org/?v=3.2.1 افزونه فارسی شمارشگر دانلود-wp-download-mirror-counter http://www.rezaonline.net/blog/wp-download-mirror-counter-plugin.html http://www.rezaonline.net/blog/wp-download-mirror-counter-plugin.html#comments Fri, 17 Feb 2012 20:23:40 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=208 توی این چند روزه تصمیم گرفتم یک افزونه دیگه برای وردپرس بنویسم .
کار این افزونه اینه ، شما فایل های دانلودی رو اضافه میکنید بهش و با استفاده از آی دی اون فایل ، و استفاده از ShortCode افزونه در هر جای نوشته/برگه میتونید لینک دانلود اون فایل رو بذارید . همچنین یک ShortCode دیگه برای نمایش تعداد دانلود های اون فایل در نظر گرفتم که بطور مجزا میتونید در نوشته/برگه استفاده کنید.

وجه قابل تمایز این افزونه با افزونه های دیگه ، سادگی کار با اون و سبکی اون هست .
همچنین قابلیت اضافه کردن 5 لینک دانلود برای هر فایل از سرورهای مختلف رو داره .
یعنی مثلاً شما میتونید فایلتون رو هم توی چندین سایت آپلود کنید و به Mirrorها اضافه کنید (لینک کمکی دانلود) . که البته با دانلود فایل از هر کدام از سرورها ، باز تعداد دانلود شمارش میشه .
یک قابلیت جالب دیگه هم اینکه ، اگه مثلاً شما برای یک فایل 5 تا لینک کمکی بذارید ، و بعد از چند مدت یکی از لینک‌های کمکی رو پاک کنید ، در صورتیکه به همون آدرس برید ، اگر سرورهای دیگه وجود داشته باشه بطور تصادفی کاربر رو به یکی از سرورها هدایت میکنه ، پس نگران نباشید .

در کل این افزونه خیلی به درد سایتهای دانلود میخوره که معمولاً برای فایلهای دانلودیشون ، چندین لینک کمکی دارن . اینطوری میتونن اطلاعات تعداد دانلودهاشونم داشته باشن .

دانلود افزونه wp-download-mirror-counter شمارشگر دانلود (15)
افزونه در مخزن wordpress.org ثبت شد . (دانلود)

لطفاً اگه در عبارات انگلیسی استفاده شده ، خطایی دیدید بگید تا تصییحش کنم. چون من زبانم زیاد خوب نیست! :(

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/wp-download-mirror-counter-plugin.html/feed 5 آموزش ساخت یک آپلودر ساده فایل http://www.rezaonline.net/blog/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%be%d9%84%d9%88%d8%af%d8%b1-%d8%b3%d8%a7%d8%af%d9%87-%d9%81%d8%a7%db%8c%d9%84.html http://www.rezaonline.net/blog/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%be%d9%84%d9%88%d8%af%d8%b1-%d8%b3%d8%a7%d8%af%d9%87-%d9%81%d8%a7%db%8c%d9%84.html#comments Tue, 24 Jan 2012 20:27:53 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=192 خیلی از دوستانی که وبلاگ دارن حتماً براشون پیش اومده که یک فایل رو آپلود کنن.
جدای از مسائل فایل منیجر خود هاست و یا اکانت ftp ، یه آپلودر جمع و جور بعضی وقتها لازم میشه.
مثلاً یه قسمت از هاستتون رو اختصاص بدید به عکسهایی که استفاده میکنید و یا اینکه از یک هاست مجانی برای ذخیره سازی موقت فایلها استفاده کنید.

خب بریم سراغ اصل مطلب
فرض رو بر این میگیرم که شما یه هاست دارید و مثلاً یک ساب دامین رو به یه دایرکتوری از هاستتون دادید. مثلاً up.rezaonline.net
کسانیکه مایلند از هاست های مجانی استفاده کنن byethost.com , 110mb.com , a-w.ir و خیلی سرویسهای دیگه هستن که هاست مجانی میدن که php رو ساپورت میکنه . (که 190درصد همشون آمریکایی ان !)

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

فایلها رو به این صورت میچینیم.

توی رووت یه فایل index.html یک فایل upload.php و یه پوشه upload که البته توی پوشه upload یک فایل index.html خالی بذارید تا مثلاً اگه کسی خواست تموم فایلهای توی اون دایرکتوری رو ببینه ، نتونه.

خب محتویات فایل index.html واقع در رووت رو اینجوری میذاریم
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Upload" />
</form>
خب میبینید که یک فرمه که action رو میده به upload.php  هم چنین باید حتماً متد post باشه چون با get نمیشه فایل رو فرستاد بعد اینکه حتماً باید enctype=”multipart/form-data” باشه .
سطر بعدیش یه لیبله که اشاره به فیلد فایل داره.
سطر سوم هم که یک فیلده از نوع فایل که name برابر file هست ! این name رو توی فایل پی اچ پی لازم داریم. چون با استفاده ازمقدار name میتونیم به محتویات اون فیلد دسترسی پیدا کنیم.
آخرم یک دکمه میذاریم تا با زدنش فایل به upload.php بره.

خب حالا میرسیم به محتویات فایل upload.php

در اینجا تموم اطلاعات ارسالی از طریق فرم رو میتونیم با استفاده از آرایه $_FILES دریافت کنیم برای مثال نام فایل میشه $_FILES["file"]["name"]
حجم فایل میشه $_FILES["file"]["size"]

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

حالا باید یه تابع بنویسیم که از اسم فایل ، بتونه فرمتش رو تشخیص بده .
این کد رو  داخل فایل upload.php بذارید.
function _check_type($getname){
$filename=explode('.',$getname);
$index=count($filename)-1;
return $filename[$index];
}
کار این تابع اینه که اسم فایل رو میگیره ، فرمتش رو برمیگردونه.

حالا میاییم یه شرط میذاریم و میگیم اگه فرمت فایل این چیزا نبود و همچنین حجم فایل بیشتر از 2 مگ نبود فایل رو آپلود کن ، در غیر اینصورت پیغام فایل آپلود نشد رو بذار.
یه چیز اینجوری
if (شرطها){
آپلود کردن فایل
}else{
echo "فایل " . $_FILES["file"]["name"] . "<br />";
echo "آپلود نشد .";
}
حالا میاییم به جای کلمه شرط ها ، شرطها رو مینویسیم بطور مثال من فایلهای html , htm ,php رو محدود کردم همچنین محدودیت حجم2 مگابایت!
if (( _check_type($_FILES["file"]["name"])!='html' and
_check_type($_FILES["file"]["name"])!='htm' and
_check_type($_FILES["file"]["name"])!='php' )and
($_FILES["file"]["size"] < 200000))
{
آپلود کردن فایل
}else{
echo "فایل " . $_FILES["file"]["name"] . "<br />";
echo "آپلود نشد .";
}
حالا میمونه آپلود کردن فایل!
الان اگه فایلی فرستاده بشه ما باید چک کنیم که آیا چنین فایلی با این اسم قبلاً آپلود شده! اگه شده اسم این فایل فعلی رو تغییر بدیم
اگرم نشده همین اسم براش بمونه!
اسم رو توی متغیر newfilename میریزیم!
نکته لازم اینه که تابع time() یک عدد 10 رقمیه غیرتکراریه که بهش میگن برچسب زمانی!
این تابع مقدار ثانیه های سپری شده از تاریخ اول ژانویه 1970 تا زمان حال رو برمیگردونه که از اون برای نمایش زمان فعلی استفاده میشه .

if (( _check_type($_FILES["file"]["name"])!='html' and
_check_type($_FILES["file"]["name"])!='htm' and
_check_type($_FILES["file"]["name"])!='php' )and
($_FILES["file"]["size"] < 200000))
{
if (file_exists("upload/" . $_FILES["file"]["name"]))
$newfilename =time().'-'.$_FILES["file"]["name"];
else
$newfilename = $_FILES["file"]["name"];
آپلود کن
}else{
echo "فایل " . $_FILES["file"]["name"] . "<br />";
echo "آپلود نشد .";
}
حالا میرسیم به بخش آپلود کن

if (( _check_type($_FILES["file"]["name"])!='html' and
_check_type($_FILES["file"]["name"])!='htm' and
_check_type($_FILES["file"]["name"])!='php' )and
($_FILES["file"]["size"] < 200000))
{
if (file_exists("upload/" . $_FILES["file"]["name"]))
$newfilename =time().'-'.$_FILES["file"]["name"];
else
$newfilename = $_FILES["file"]["name"];
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" .$newfilename);
echo 'فایل: <a href="http://up.rezaonline.net/upload/'.$newfilename.'" target="_blank">'.$newfilename.'</a> آپلود شد .';
}else{
echo "فایل " . $_FILES["file"]["name"] . "<br />";
echo "آپلود نشد .";
}
خب فایل رو که توی پوشه موقت ذخیره شده رو میبریم به پوشه upload در نهایت آدرس لینک دانلود فایل رو نمایش میدیم.

حالا باید محتویات فایل upload.php این شکلی باشه
<?php
function _check_type($getname){
$filename=explode('.',$getname);
$index=count($filename)-1;
return $filename[$index];
}
if (( _check_type($_FILES["file"]["name"])!='html' and
_check_type($_FILES["file"]["name"])!='htm' and
_check_type($_FILES["file"]["name"])!='php' )and
($_FILES["file"]["size"] < 200000))
{
if (file_exists("upload/" . $_FILES["file"]["name"]))
$newfilename =time().'-'.$_FILES["file"]["name"];
else
$newfilename = $_FILES["file"]["name"];
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" .$newfilename);
echo 'فایل: <a href="http://up.rezaonline.net/upload/'.$newfilename.'" target="_blank">'.$newfilename.'</a> آپلود شد .';
}else{
echo "فایل " . $_FILES["file"]["name"] . "<br />";
echo "آپلود نشد .";
}
?>

خب تموم شد به همین راحتی! نمونه این آپلودر هم میتونین اینجا up.rezaonline.net ببینید.
سورس برنامه رو هم میتونین از لینک زیر دانلود کنین.
آپلودر ساده (25)

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%be%d9%84%d9%88%d8%af%d8%b1-%d8%b3%d8%a7%d8%af%d9%87-%d9%81%d8%a7%db%8c%d9%84.html/feed 10 تغییر استایل نظرات مدیر ، نظرات یکی در میان و پینگ بک ها در نظرات وردپرس http://www.rezaonline.net/blog/%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-%d9%86%d8%b8%d8%b1%d8%a7%d8%aa-%d9%85%d8%af%db%8c%d8%b1-%d8%8c-%d9%86%d8%b8%d8%b1%d8%a7%d8%aa-%db%8c%da%a9%db%8c-%d8%af%d8%b1-%d9%85.html http://www.rezaonline.net/blog/%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-%d9%86%d8%b8%d8%b1%d8%a7%d8%aa-%d9%85%d8%af%db%8c%d8%b1-%d8%8c-%d9%86%d8%b8%d8%b1%d8%a7%d8%aa-%db%8c%da%a9%db%8c-%d8%af%d8%b1-%d9%85.html#comments Sat, 12 Nov 2011 20:27:41 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=175 احتمالاً در خیلی از نظرات سایتهای وردپرسی دیدید که نظراتی که جواب مدیر هستن به صورت مجزا نشون داده میشن و یا حتی نظرات یکی در میون خاصیت alt میگیرن .

اگر شما از فرم استاندارد برای نظرات استفاده میکنید ، یعنی مستقیم از کد <?php wp_list_comments(); ?> استفاده میکنین خیلی راحت میتونین به هر کدام از نظرات استایل مشخص رو بدید.
استفاده از تابع لیست نظرات باعث میشه که به طور خودکار ، هر نظر کلاس مشخصی بگیره
.comment-author-admin
کلاس نظرات مدیر
.comment
کلاس نظرات فرد - اولین نظر ، سومین نظر ، پنجمین نظر و الی آخر
.alt
کلاس نظرات زوج - دومین نظر ، چهارمین نظر ، ششمین نظر والی آخر
.pingback
پینگ بک های مطلب

حالا شما میتونید به راحتی با استفاده از این کلاسها ، نظرات مختلف رو بصورت مجزا نشون بدید.
نمونه استایل زیر مثلاً (مشابه استایل فعلیه نظرات وبلاگ منه)

.comment-author-admin{background: #808080 ; color: #EEE;}
.comment{background: #D8D8D8; color: #4E4E4E;}
.alt{background: #F3F3F3 ; color: #4E4E4E;}
.pingback{background: #FFEBC1 ; color: #4E4E4E;}

حالا تکلیف اونا چیه که با فرم استاندارد (همون تابع لیست نظرات) ، نظرات رو نچیدن!؟
راه حل داریم ! به قول یکی از دوستان ، وردپرس خوب حوصله داشته واسه هرچیزی یه تابعی نوشته !
خب راه حل این دوستان اضافه کردن تابع <?php comment_class() ?> به div یا li و … مورد نظر ، نظرات هست!
این تابع بصورت خودکار چنین چیزی اضافه میکنه.

class="comment odd alt thread-odd thread-alt depth-1"

که با استفاده از کلاسهای بالا (که برای حالت استفاده از تابع لیست نظرات بود!) میتونین برای هر نظر استایل دلخواهی پیاده کنین!
موفق باشید
در ضمن اون نظرات هم واسه قشنگی نیست ، کلیک کن روش و بهم بگو نظرت چیه؟

پستهای تصادفی:

]]> http://www.rezaonline.net/blog/%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84-%d9%86%d8%b8%d8%b1%d8%a7%d8%aa-%d9%85%d8%af%db%8c%d8%b1-%d8%8c-%d9%86%d8%b8%d8%b1%d8%a7%d8%aa-%db%8c%da%a9%db%8c-%d8%af%d8%b1-%d9%85.html/feed 14 کتاب آموزش و معرفی ویژگی‌های Css3-نوشته خودم! http://www.rezaonline.net/blog/css3_ebook_persian.html http://www.rezaonline.net/blog/css3_ebook_persian.html#comments Fri, 11 Nov 2011 21:38:06 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=172



خب اینبار یه کتاب براتون آماده کردم(نوشتم) که چند تا از property های جدید Css3 رو آموزش میده.
حقیقتاً این کتاب به درد کسائی که میخوان تازه Css رو یاد بگیرن نمیخوره ، بلکه به درد کسائی میخوره که با Css2 و html کار کردن و مسلط هستن !

سرتیترهای کتاب :

پشتیبانی مرورگرها
پسوند اختصاصی مروگرها (moz , o , webkit)
Border-radius – گرد کردن گوشه
Text-shadow – سایه متنی
Box-shadow – سایه غیر متنی
Multiple background images – بک گراوند(پس زمینه) چند تکه ای
Opacity – روشنتر کردن عکس
RGBA – رنگ شیشه‌ای!
Rotate – چرخش اجزا
Scale – بزرگنمایی
Skew – کج کردن اجزا
Animation – انیمیشن ساده با Css3 با استفاده از ویژگی transition

این کتاب با فرمت pdf در 30 صفحه تهیه شده که شما میتونید دانلود کنید (حجم 700 کیلوبایت)
دانلود کتاب آموزش و معرفی ویژگی(property)های سی‌اس‌اس3 (320)

* دوستانی که این کتاب رو در سایت و وبلاگشون برای دانلود قرار میدن ، حتماً اسم نویسنده و لینک rezaonline.net/blog رو درج کنن تا مام خوشحال بشیم!
(تهدید!) در غیر اینصورت قسمت دوم که بخش تکمیلی این کتاب هست هیچ وقت نوشته نمیشه!
از ما گفتن بود !
به قول یکی از دوستان ، اول لینک نظرات واسه قشنگی نیست! واسه اینه که نظرت مهمه! پس نظرت چیه؟

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/css3_ebook_persian.html/feed 24 قالب سپیدک وردپرس طراحی خودم مجانی http://www.rezaonline.net/blog/free-sepidak-wp-theme.html http://www.rezaonline.net/blog/free-sepidak-wp-theme.html#comments Mon, 24 Oct 2011 16:14:20 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=166
قالب سپیدم وردپرس

بالاخره نوبت ما هم رسید!
خیلی ها میگن این قالب فعلی بنده ، قالب شیک و خوشکلی هست ما هم تصمیم گرفتیم یه حالی به همه بدیم البته هیچ کی نمیدونه که این یکی از کارهای ساده بنده هست!
خب بگذرین الان میتونید قالب رو از اینجا دانلود کنید و همچنین پیشنمایش قالب رو از اینجا ببینید.
لطفاً نظرتون رو در مورد قالب بگید

پستهای تصادفی:

]]> http://www.rezaonline.net/blog/free-sepidak-wp-theme.html/feed 28 افزونه پشتیبانی تیکت support-tickets فارسی+تاریخ شمسی http://www.rezaonline.net/blog/persian-support-tickets-wp-plugin.html http://www.rezaonline.net/blog/persian-support-tickets-wp-plugin.html#comments Fri, 14 Oct 2011 09:32:49 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=161 در دنیای مجازی ، انعطاف و فزونی افزونه های وردپرس، این سیستم را به جایی رسانده که حتی برای سایتهای ارائه دهنده هاستینگ نیز استفاده میشود!
در چنین سایتهایی حتماً بخش پشتیبانی تیکت ها باید وجود داشته باشد و افزونه support-tickets در وردپرس همچین کاری را انجام میدهد.
طرح کار اینچنین است :

فرم مورد نظر را بسازید و در یک برگه با عنوان تیکت قرار بدهید
فرد سوال پرسیده شده در صورت رجوع به برگه با فرم ارسال تیکت رو به رو میشود
بعد از تکمیل فرم و ارسال آن آدرس تیکت به صورت مثلاً

http://yoursite.com/?page_id=48&ticket=4&accesskey=3fChAVrbPN8Y

در می آید که برای رجوع به پاسخ باید فرد سوال پرسیده شده حتماً باید accesskey=3fChAVrbPN8Y اختصاصی را درج کند . یعنی صرفاً با تکیه بر آی دی تیکت یعنی آدرس http://yoursite.com/?page_id=48&ticket=4& نمیتواند به محتوا و پاسخ ها دست یابد ، باید حتماً بغیر از آی دی تیکت ، کلید دسترسی هم وارد کند یعنی مثلاً http://yoursite.com/?page_id=48&ticket=4&accesskey=3fChAVrbPN8Y و این قابلیت خیلی جالبی است!
یعنی شخص ارسال کننده تیکت به هر فردی که مایل باشد میتواند آدرس کامل تیکت را بدهد تا به او پاسخ بدهد البته مدیر سایت کاملاً از مدیریت وردپرس تمام تیکت را مدیریت (بستن ، حذف ، پاسخ و … ) میکند.

این افزونه به غیر از سایتهای هاستینگ نیز میتواند در سایتهای دانلود ، آموزش و … استفاده شود

دوستان میتوانید افزونه فارسی شده را از لینک زیر دانلود کنید

لینک دانلود افزونه support-tickets فارسی (122)

همچنین در بخش ویرایش تیکت ها لیست پاسخ تیکت ها نوشته میشود که تاریخ ثبت شدن و نمایش دادن تیکت به میلادی است که در صورت نیاز اگر مایلید آن تاریخ را به شمسی تغییر دهید باید حتماً افزونه wp-jalali در سایتتان فعال باشد همچنین تغییرات زیر را اعمال کنید.
در داخل محتویات افزونه در داخل پوشه admin فایل edit-ticket.php را ویرایش کنید
در خط 117 عبارت
<?php echo $message->create_time; ?> را پیدا کنید این عبارت رو پاک کنید و کدهای زیر را دانلود و جایگزین کنید
دانلود کد جایگزین تاریخ میلادی به تاریخ شمسی برای افزونه support-tickets
(اگر افزونه فارسی را از همین بلاگ دانلود کرده اید کد در فایل موجود است نیاز به دانلود نیست!)
توجه کنید که برای نمایش تاریخ شمسی باید حتماً افزونه wp-jalali نصب و فعال باشد.

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/persian-support-tickets-wp-plugin.html/feed 8 حرکت انیمیشنی لینک با css3-قسمت دوم http://www.rezaonline.net/blog/moving-link-to-front-with-animation-in-css3_.html http://www.rezaonline.net/blog/moving-link-to-front-with-animation-in-css3_.html#comments Fri, 07 Oct 2011 15:37:01 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=156 در این درس یاد میگیرم

چگونه با خاصیت padding و margin  متنی(لینکی) رو بصورت انیمیشن به حرکت در بیاریم

همونطور که میدونید (یا شایدم نمیدونید)  padding به فاصله داخلی یا حاشیه داخلی میگن
و margin فاصله خارجی یا حاشیه خارجی!
حالا فرقشون چیه فرض کنید شما دو تا div دارید که چسبیدن به هم. با استفاده از margin یکیشون یا هردوتاشون میتونید بینشون فاصله بندازید.
و حالا فرض کنید اگه توی همون div یه متنی بنویسید قطعاً چسبیده به یک طرف قرار میگیره شما میتونی با استفاده از خاصیت padding یه حاشیه بدید که متنهای داخل div یه فاصله ای از کناره ها داشته باشن.
من توی عکس پائینی دو تا div رو توی دوحالت نبود margin و padding و وجود این دو خاصیت نشون دادم.

همچنین میشه padding و  margin  رو به کدهای ریزتری تبدیل کرد مثلا padding:4px به


padding-right:4px;
padding-left:4px;
padding-top:4px;
padding-bottom:4px;

و هر کدوم از کدها رو میشه جداگونه بکار برد.
نکته جالب اینکه هر کدوم از کدهای کوچک رو میشه تنهایی بکار برد و نه تنها برای div بلکه برای تمامی کدها نظیر table  , a , p , input , li و …
حالا ما میخواییم یه کار جالب انجام بدیم.

سریعاً یک div با کلاس و آی دی درست کنید و محتویاتش رو چند تا لینک بذارید
<div class="reza-sh19" id="my-iran">
<a href="http://rezaonline.net" target="_blank">لینک اول</a> <br>
<a href="http://rezaonline.net" target="_blank">لینک دوم</a> <br>
<a href="http://rezaonline.net" target="_blank">لینک سوم</a> <br>
<a href="http://rezaonline.net" target="_blank">لینک چهارم</a> <br>
<a href="http://rezaonline.net" target="_blank">لینک پنجم</a> <br>
</div>
استایل رو هم براش استایل زیر رو بذارید مثلاً
.reza-sh19{
background:rgb(245,245,245);
margin:20px;
padding:8px;
width:350px;
font-family:tahoma;
font-size:8pt;
text-align: right;
direction:rtl;
line-height:1.6em
}

میخوایم کاری کنیم که وقتی موس روی لینکها رفت ، اون لینک آروم 4پیکسل بره جلو و وقتی موس رو برداشتیم بگرده
خب فکر کنم دیگه بدونید برای اینکه بخوایم وقتی موس روی لینک رفت کاری انجام بشه باید توی my-iran a:hover#استایل رو بنویسم!
برای حرکت به جلو یعنی 4 حرکت به چپ باید padding-right:4px رو اعمال کنیم بهمراه کدهای انیمیشن سازی css3

کدهای زیر رو به استایل اضافه کنید!
دانلود کد
همانطور که از کد مشخصه وقتی موس رو لینک میره ، لینک 4 پیکسل از راست فاصله میگیره یعنی در اصلی 4پیکسل به چپ میره.
این حرکت در مرورگرهایی که css3 رو پشتیبانی میکنن به آرامی و در مرورگرهایی که فاقد توانایی css3 هستن بصورت آنی اتفاق می افته!
همچنین میشه از این کد توی لیستها نیز استفاده کرد!

دانلود مثال دوم : حرکت لینک به جلو (56)

دوستان میتونید با توجه به قالبتون از این کد توی لینکهای وبلاگ و سایتتون استفاده کنید.
فقط کافیه xxxx a:hover# و xxxx a:link# رو پیدا کنید و کدهای مورد نیاز رو بهش اضافه کنید!
کسی مشکلی داشت در خدمتم

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/moving-link-to-front-with-animation-in-css3_.html/feed 5 حرکت ، چرخش و انیمیشن در css3-قسمت اول http://www.rezaonline.net/blog/motion-rotation-and-animation-in-css3_1.html http://www.rezaonline.net/blog/motion-rotation-and-animation-in-css3_1.html#comments Wed, 05 Oct 2011 15:59:30 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=152
رضاآنلاین .نت

در این درس یاد خواهیم گرفت:

چگونه یک div بسازیم و با استایل به آن شکل و شمایل بدیم.
چگونه اجزا ، بخصوص تصاویر را با استفاده از درجه کج کنیم.
چگونه با قرار گرفتن موس روی عکس ، به آن انیمیشنی بدهیم ، مثلاً چرخش عکس
چگونه با نگه داشتن کلیک روی عکس به آن انیمیشن بدهیم.
و…

در این درس سعی شده به زبانی کاملاً ساده توضیحات لازم ارائه شود.
نترسید ، فقط کافیست قدم به قدم این درس را دنبال کنید …
سایت شما قطعاً با استفاده از Css3 زیباتر خواهد شد ، پس چرا زیبایش نکنیم؟

همونطور که عرض کردم در این درس سعی شده ، اساس کار بر این باشد که شما اطلاعات چندانی در مورد html و css ندارید.

*نکات اولیه:
هر کدی که شروع میشود ، باید تمام شود (البته همیشه استثنا وجود دارد ! )
تگ کد div یه خط فرضی ، دور اجزای داخلی خودش میکشد ، که شما میتوانید با استایل دادن به div اجزای داخلی اون رو زیبا کنید.
هر div میتواند یک class و id بگیرد.
با استفاده از class و id میتوانید استایل مورد نظر را برروی div اعمال کنیم.

برای مثال من یک مستطیل میخواهم که پس زمینه اش سیاه باشد و متنهای داخلی آن سفید. در ضمن عرض 350 پیکس داشته باشد و ارتفاعش خودکار باشد، همچنین فاصله از سمت راست 3پیکس و فاصله از سمت چپ 2 پیکسل باشد و در داخلش ، فاصله داخلی 4 پیکسل داشته باشد. متن نوشته شده از راست باشد و فونت تاهما و اندازه 8pt در ضمن rtl باشد. یک بوردر هم که بصورت خط صاف باشد به عرض یک پیکس و رنگ نارنجی دوش باشد.

حاصل این چنین است ابتدا کد div را مینویسم و به آن یک کلاس اختصاص میدهیم سپس در داخل فایل استایل کارهایی را که میخواهیم رویش انجام میدهم.

اینم div ما


<div class="asghar" id="shanbe">
سلام
<br>
من متن داخل این div هستم...</div>
کد br مخفف بریک است ، یعنی خط را میشکند و به خط بعدی میرود. این کد از دسته کدهایی است که نیاز به پایان ندارد!
حالا قرار است به divمان شکل و شمایل بدهیم.
داخل فایل style.css میرویم (البته روشهای دیگری هم هست مثلاً در بالای /head استایل را داخل style و /style بنویسیم.
حالا نرید توی اون فایل مشکلی نیست :P
توی هدر عبارت زیر رو بنویسید

<style type="text/css">
.asghar{
background:black;
color:white;
width:350px;
height:auto;
margin-right:3px;
margin-left:2px;
padding:4px;
text-align:right;
font-family:tahoma;
font-size:8pt;
direction:rtl;
border: solid 1px orange;
}
</style>

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

برای مثال ما میتونیم برای استایل دهی به div از آی دی اون استفاده کنیم یعنی توی کد استایل به جای asghar. بنویسیم shanbe# بعد استایل رو بنویسیم اما ترجیحاً با کلاس کار کنید چون آی دی رو لازم داریم :)

همانطور که میدانید در داخل div به غیر از نوشته چیزهای دیگری هم نظیر عکس و لینک قرار میگیره که میتونیم به اونها هم استایل دلخواه رو بدیم.

مثلاً میخوایم وقتی لینکی توی div قرار گرفت رنگش سبز بشه و حالت bold داشته باشه و وقتی موس روی اون رفت رنگش قرمز بشه و زیرش یه خط کشیده بشه و وقتی کلیک چپ موس روی لینک قرار گرفت رنگش قهوه ای بشه و خط زیرش حذف بشه.

به ترتیب به شکل زیر کدها رو به استایل اضافه میکنیم
اینجاست که باید از آی دی div استفاده کنیم!


#shanbe a:link{
color : green;
text-decoration : none;
font-weight : bold;
}
#shanbe a:hover{
color : red;
text-decoration : underline;
font-weight : normal;
}
#shanbe a:active {
color : brown;
text-decoration : none;
}
در ضمن یک لینک را به داخل div اضافه کنید مثلاً لینک به رضا آنلاین

<br>
<a href="http://rezaonline.net">مرکز طراحی قالب وردپرس - رضا آنلاین</a>
خب حالا برای استایل دادن به عکس داخل div میتونیم به همون صورت لینک عمل کنیم
بطور مثال ، من میخوام عکسهای توی div یه کمی کمرنگ باشن و دورشون یه بوردر سفید باشد با ضخامت 2 پیکسل ، در ضمن حاشیه داخلی 8 پیکسل داشته باشه و رنگ پس زمینه اش زرد باشه. وقتی موس روی عکس بره پس زمینه اش قرمز بشه و عکس پررنگ بشه و وقتی روش کلیک چپ نگه داشته شد پس زمینه اش آبی بشه!

به ترتیب کدهای زیر رو به استایل اضافه کنید.
#shanbe img {
opacity :0.6;
border : 2px solid white;
padding : 8px;
background: #FFFF00;
}
#shanbe img:hover {
border : 2px solid white;
padding : 8px;
background: red;
opacity :1.0;
}
#shanbe img:active {
border : 2px solid white;
padding : 8px;
background: blue;
opacity :1.0;
}
در ضمن یه عکس هم به div اضافه کنید

<br>
<img src="http://آدرس عکس.jpg"/>

خب نکات اولیه در مورد استایل نویسی و html تموم شد!
شما باید بتونید div بسازی و خصوصیات اجزای داخل اون رو بوسیله استایل مشخص کنید.
اگه این قسمت رو یاد گرفتید بریم سراغ مرحله بعد! (اگرم یاد نگرفتید باید پیشنهاد کنم سریعاً کتابهای دوره دبستان را تهیه کرده و هنوز تو کف بابا آب داد بمونید!)

* چرخش عکس بصورت انیمیشن:
سریعاً یه div دیگه درسته کنید و به اون کلاس و آی دی بدید و داخلش یه عکس بذارید

<div class="only-kurdestan" id="sanandaj">
<img src="http://آدرس عکس.jpg"/></div>

استایل div رو به شکل زیر درست کنید.
پس زمینه خاکستری ، فاصله خارجی از بالاو طرفین 20 پیکسل ، فاصله داخلی 8 پیکسل ، عرض 350 پیکسل

.only-kurdestan{
background:#E4E4E4;
margin:20px;
padding:8px;
width:350px;
}

حالا میخوایم عکس مورد نظر رو یه تکونی بدیم ، مثلاً وقتی موس روی عکس قرار گرفت به طرف چپ یه دور بزنه و بره سرجاش ، وقتی روی موس کلیک نگه داشته شد به راست 2 دور بزنه برگرده سر جاش ، مدت زمان انجام انیمیشن هم برای اولی سه ثانیه برای دومی 2 ثانیه! یعنی دومی که دو دور میزنه سریعتر!
خب بریم سراغ استایل کد زیر رو دانلود کنید و به استایل اضافه کنید ، در ضمن سایر خصوصیات بوردر و پس زمینه و … رو میتونید خودتون اضافه کنید! من فقط کد خشک و خالی انیمیشن رو مینویسم تا تکرار مکررات نشه!
دانلود کد
کدهای معرفی شده کد های انیمیشن css3 هستن و فقط توی مرورگرهایی که css3 رو پشتیبانی میکنن اجرا میشن مثل موزیلا6 ، کروم ، سافاری و…

اگه دقت کرده باشین ما بوسیله خاصیت transition در استایل میتونیم به تغییرات انیمیشن بدیم.
عکس در حالت کلی براش استایلی تعریف نشده پس طبق حالت پیشفرض میمونه در حالتی که موس روش میره مجبوره که -360 درجه بچرخه و مجبوره این کار رو توی 3 ثانیه انجام بده! پس سه ثانیه حرکت داریم اما اگه خواص ثانیه رو از استایل مورد نظر حذف کنیم تغییر وضعیت یعنی -360 درجه چرخش بصورت آنی اتفاق می افته و اگه ریاضی بلد باشین -360 درجه یعنی همون حالت 0 درجه و عکس هیچ حرکتی نمیکنه! پیشنهاد میکنم خاصیت تاخیر ثانیه رو حذف کنید و با درجه ای مثل 180 تغییرات رو مشاهده کنید!
* در این درس چیز زیادی گفته نشد و بیشتر پایه ای بود
در درس بعدی کارهای زیباتر و خارقالعاده تری انجام میدیم.
همچنین میتونید مثالهایی رو که اینجا گفته شد دانلود کنید.

دانلود مثال اول : چرخش تصویر با انیمیشن در سی‌اس‌اس3 (83)

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/motion-rotation-and-animation-in-css3_1.html/feed 11 محدودیت تعداد مطالب ، در صفحه نخست ، دسته ، آرشیو و … بصورت مجزا http://www.rezaonline.net/blog/custom-post-limits-code-and-plugin.html http://www.rezaonline.net/blog/custom-post-limits-code-and-plugin.html#comments Mon, 29 Aug 2011 11:49:18 +0000 رضا شیخله http://www.rezaonline.net/blog/custom-post-limits-code-and-plugin.html فرض کنید شما توی سایتتون چند تا دسته دارید مثلاً اخبار ، وردپرس ، افزونه و … و همچنین تمایل دارید مثلاً توی صفحه اول سایتتون 5 مطلب نمایش داده بشه و توی صفحه دسته اخبار ، تمامی مطالب و توی صفحه دسته وردپرس 10 مطلب و …
خب برای اینکار میشه از یک کد ساده وردپرس استفاده کرد.
<?php query_posts('showposts=5'); ?>
این کد رو درست قبل از شروع حلقه وردپرس بذارید. یعنی یک خط بالاتر از
<?php while (have_posts()) : the_post(); ?>
همونطور که توی کد مشخص هست میتونید تعداد مطالب رو خودتون مشخص کنید.
حالا مثلاً میخواید تعداد مطالب صفحه اول سایتتون رو محدود کنید تغییرات رو توی فایل index.php اعمال کنید و اگرم میخواید مثلاً تعداد مطالب یک دسته خاص مثلاً اخبار رو محدود کنید باید ابتدا یک کپی از فایل category.php بگیرید و به category-id.php تغییر بدید که id همان شناسه (عدد) دسته اخبار هست ، بعد توی این فایل حلقه مطالب رو پیدا کنید و کد رو قبل از اون بذارید.

و اما یک راه حل ساده تر!
شما میتونید با استفاده از افزونه Custom Post Limits محدودیت هایی رو برای نمایش تعداد مطالب در هر دسته اعمال کنید.
علاوه بر اون شما میتوانید این محدودیت تعداد نمایش مطالب رو در صفحه نخست ، در صفحه مطالب نویسنده ها ، در آرشیوهای روزانه و ماهانه ، در صفحه نتایج جستجو و حتی در صفحه تگها اعمال کنید.

لینک دانلود افزونه Custom Post Limits | از سایت wordpress.org

/ رضا شیخله

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/custom-post-limits-code-and-plugin.html/feed 0 آموزش فارسی سازی افزونه وردپرس – قسمت دوم http://www.rezaonline.net/blog/persian-wp-plugin-2.html http://www.rezaonline.net/blog/persian-wp-plugin-2.html#comments Thu, 21 Jul 2011 16:13:20 +0000 رضا شیخله http://www.rezaonline.net/blog/?p=111 توی مطلب قبلی در مورد فارسی سازی افزونه‌هایی که دارای فایل po. و pot. هستن توضیح دادیم و گفتیم که فارسی سازی این افزونه ها به راحتی با استفاده از برنامه poedit قابل انجام است.
حال نوبت آن رسیده که اگر افزونه ای بدون فایل po. یا pot. بود چکار کنیم و چگونه این فایل را بسازیم…

قبل از هر چیز پیشنهاد میکنم اگر تمایل دارید برای افزونه ای فایل po بسازید قبلش توی گوگل سرچ کنین شاید کسی قبل از شما این فایل رو ساخته باشه و فقط آماده ترجمه فارسی شما باشه.
مثلاً اگه میخواید توی اینترنت برای فایل po. افزونه مثلاً wp-polls سرچ کنین ، توی گوگل بنویسید wp-polls.po سپس نتایج رو بررسی کنید!

شروع کار ، ابتدا ویرایشگر مناسبی دانلود کنید سپس افزونه ای رو که فاقد فایل زبان و فاقد هر گونه فایل po. و pot. و mo. رو آماده کنید. برای مثال برای سادگی کار من افزونه شمارش صفحات wp-page-numbers رو پیشنهاد میکنم.

افزونه رو دانلود کنید و فعال کنید ، سپس باید حدس بزنید متنهای نمایشی در این افزونه که در قسمت مدیریت وردپرس برای شما نمایش داده میشه در چه فایلی هست؟
(این افزونه فقط یک فایل php. داره پس تموم رشته های متنی در این فایل هستش)

اگر شما خواستید افزونه ای رو فارسی کنید ، حتماً چک کنید که چند تا فایل php. دارای رشته متنی هستن! خیلی ساده است توی فایل افزونه فایلهای php. رو باز کنید و عنوان متنی افزونه رو جستجو کنید و یا دنبال یک رشته متنی بگردید ، دیگه چه جوری بگم…!!!؟
اگه بازم نتونستید تشخیص بدید که کدوم فایل دارای رشته متنی هست ، شناسه و رمز عبور وبلاگ یا سایتتون رو برام بفرستید تا بهتون بگم کدوم فایله! P:

بعد از مشخص کردن فایل که حالا مثلاً ما میدونیم برای این افزونه فایل ، wp-page-numbers.php دارای رشته های متنی است ، فایل رو (با ویرایشگر مناسب) باز میکنیم.
در بالاترین خط بعد از<?phpعبارت زیر رو میذاریم.

add_action('init', 'init_textdomain');
function init_textdomain(){
load_plugin_textdomain('page-number',PLUGINDIR . '/' .
dirname(plugin_basename (__FILE__)) . '/zaban');
}

مثل عکس زیر
please wite...

تاکیید میکنم اگر هر چند تعداد فایل php حاوی رشته متنی بود باید این کد به اول همشون اضافه بشه!
خب این که به افزونه حالی میکنه که توی پوشه zaban داخل افزونه فایلی به اسم page-number-fa_IR.mo هست که زبان فارسی افزونه است! (برای سایر زبانها پسوند fa_IR متفاوت است).
حالا گیریم افزونه فهمید ولی آیا این فایل واقعاً هست؟!

قدم بعد توی پوشه افزونه wp-page-numbers یک پوشه جدید میسازیم به اسم zaban.

بعد این فایل رو دانلود کنید. این فایل حاوی فایل page-number.pot هست که شما باید اون رو داخل پوشه zaban که داخل افزونه wp-page-numbers هست بگذارید.

خب بیایید کل ماجرا رو از اول بررسی کنیم!

شما باید توی افزونه wp-page-numbers یک پوشه داشته باشید به اسم zaban که اون پوشه هم حاوی فایلی باشه به اسم page-number.pot که ابتدای این فایل یه سری کد باشه. داخل پوشه افزونه wp-page-numbers هم یه فایلی هست به اسم wp-page-numbers.php که باید ابتدای این فایل هم کد معرفی فایل زبان افزونه باشه!
چک کنید ببنید درسته اگر نه مشکل رو پیدا کنید و اگر درسته بریم سراغ مرحله بعد!!

حالا نوبت اون رسیده که فایل pot. رو کامل کنیم و رشته های متنی رو که میخواییم ترجمه کنیم وارد کنیم!

فایل page-number.pot رو با ویرایشگر مناسب باز کنید. اگه دقت کنید در اول این فایل چند خط توضیحات هست که میتونین اطلاعات خودتون رو وارد کنین در ضمن یادتون باشه که حتماً Encoding رو روی UTF-8 بذارید.

بعد از انجام دادن این کار آخر متن رو نگاه کنید عبارت

#: wp-page-numbers.php:325
msgid "Page Number Themes"
msgstr "قالبهای نمایش شماره صفحات"

رو میبینید.

این چند خط رو توضیح میدم این یعنی توی فایل wp-page-numbers.php خط 325 عبارت Page Number Themes هست که ترجمه پیشفرضش قالبهای نمایش شماره صفحات هست.
البته نیازی نداره که ترجمه پیشفرضش رو بنویسیم چون وقتی آخر کار با برنامه poedit افزونه رو ترجمه میکنیم تموم ترجمه ها رو دوباره مینویسم ، من برای توجیه بهتر اینو نوشتم.
حال نوبت این رسیده که چجوری به فایل wp-page-numbers.php بفهمونیم که در خط 325 به جای عبارت Page Number Themes دنبال ترجمه اش بگرده!

خب فایل wp-page-numbers.php رو باز میکنیم و به جای عبارت Page Number Themes توی خط 325 عبارت
<?php _e(‘Page Number Themes’, ‘page-number’); ?>
رو می‌ذاریم.
این به فایل wp-page-numbers.php حالی میکنه که وقتی به این خط رسید ابتدا فایل page-number-fa_IR.mo رو بررسی کنه ببینه واسه عبارت Page Number Themes ترجمه هست ، که اگر هست ترجمه رو نشون بده اگرم نیست همون Page Number Themes رو نشون بده!

خب تا اینجا متوجه شدید چی شد؟

برای تست این خط ترجمه میتونین فایل page-number.pot رو توی پوشه zaban با برنامه poedit بازکنید ، ترجمه رو وارد کنید سپس فایل رو ذخیره کنید ، همچنین با ذخیره فایل ، فایل page-number.mo خودکار ساخته میشه که باید اونو به page-number-fa_IR.mo تغییر نام بدید بعد بیایید توی تنظیمات وردپرس افزونه رو انتخاب کنید و تغییرات رو ببینید.

 

rezaonline.net

درست کار میکنه؟

اگر نه بررسی کنید:

1- داخل فایل page-number.pot عبارت معرفی زبان رو نوشتید؟
2- داخل فایل wp-page-numbers.php بطور درست پارامتر معرفی ترجمه رو نوشتید؟
3- فایل page-number.pot رو با poedit باز کردید و ذخیره کردید؟
4- فایل page-number.mo درست شده ، آیا آنرا به page-number-fa_IR.mo تغییر داده اید؟
5- فایل page-number-fa_IR.mo باید در پوشه zaban باشد آیا هست؟

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

تا حالا 95% راه رو رفتید حالا میمونه بقیه متن ها!!
توی قسمت تنظیمات وردپرس روی افزونه page numbers کلیک کنید رشته متنی بعدی که باید ترجمه بشه Use themes? هست.
حالا فایل wp-page-numbers.php رو باز کنید توی خط 328 این Use themes؟ رو میتونید پیدا کنید خب حالا این متن رو به <?php _e(‘Use themes?’, ‘page-number’); ?> تغییر بدید و فایل رو ذخیره کنید. سپس فایل page-number.pot موجود در پوشه zaban رو باز کنید و به آخر صفحه زیر
#: wp-page-numbers.php:325
msgid "Page Number Themes"
msgstr "قالبهای نمایش شماره صفحات"
عبارت
#: wp-page-numbers.php:328
msgid "Use themes?"
msgstr ""
رو اضافه کنید.

برای سایر رشته های متنی هم به همین صورت ، سپس در آخر فایل رو ذخیره کنید و با برنامه poedit باز کنید ، ترجمه ها رو وارد کنید و فایل رو ذخیره کنید ، سپس فایل page-number.mo ساخته شده را به page-number-fa_IR.mo تغییر بدید.

خب اگه تموم رشته های متنی رو به همین صورت وارد کنید که دیگه تموم افزونه فارسی میشه و شما فایل زبانش رو ساختید!
این روش استاندارد ساخت فایل زبان افزونه است که به دیگر دوستانی که قصد دارن افزونه رو به زبانی دیگر ترجمه کنن کمک میکنه و در ضمن از مزیت های این روش اینه که میتونین برای هر افزونه ای فایل زبانهای زیادی بسازی مثلاً یکی فارسی باشه ، یکی کردی ، یکی عربی ، یکی روسی ، یکی… بسه دیگه!!!

در ضمن من بطور کامل افزونه رو فارسی کرده ام ، اگر لازم دونستید برای بررسی و مقایسه با فایل زبان خودتون دانلود کنید.

دانلود افزونه wp page number فارسی (185)

/ امیدوارم تا اینجای کار ، ماهیگیری رو یاد گرفته باشید و ممنون میشم اگه دعای خیری نصیب ما کنید تا ما هم خوشحال بشیم.

مطالب مرتبط:

]]> http://www.rezaonline.net/blog/persian-wp-plugin-2.html/feed 4