فرض کنید آدرس سایت شما mysite.ir است و نام پوشه قالب شما mytheme ، اول از هر چیز به آدرس mysite.ir/wp-content/themes/mytheme برید.
فکر کنم یه اررور خوشکل مشکل میبینید ! دلیلش اینه که با ورود به دایرکتو ییی ری سایت ، فایل index.php قالب بطور مجزا اجرا میشه و طبعاً توابعی رو که نیاز داره ،نیست و خطا میده . اگر از پیوند یکتای حالت پیشفرض استفاده میکنید ، باید بگم تمامی تک تک فایلهای قالب رو میشه اجرا کرد و خطا ها رو نشان داد .

و اما راه حل افزودن کد زیر به بالای تک تک فایلهای php قالب است .
<?php defined('TEMPLATEPATH') or exit('No Access') ;?>

مساله بعدی اینکه اگر از پوشه هایی داخل قالب استفاده میکنید حتماً یک فایل index.html بدون محتوا داخلشون قرار بدید.

و اما در مورد افزونه ها !
بسیاری از افراد برای افزایش بازدهی وردپرس ، اقدام به نصب هزار و یک افزونه میکنن که این مصداق بستن طناب به گردن برای بالا رفتن از صخره است !

خود هسته وردپرس از ساختار منظم و مهندسی شده ای برخوردار است اما این ساختار مربوط به خود هسته است و افزونه ها صرفاً بار اضافی هستند !

مثال میزنم ، فرض کنید الان وبلاگ من با 10 مطلب در صفحه نخست با 40 کوئری تمام اطلاعات را میگیرد!
حال فرض کنید افزونه‌ای مثل همین wp-post-view را نصب کرده ام . میدانید که این افزونه تعداد بازدیدهای هر مطلب را نشان میدهد.
خود افزونه (و هر افزونه ی دیگری) توانایی تطابق با حلقه را ندارند ، چون اصلاً این کار شدنی نیست لذا اطلاعات را از هر بار گردش حلقه دریافت میکنن !
ساده بگم با یک درخواست نمیتوانن تعداد بازدیدهای هر 10 مطلب را برگردانند ، لذا چون داخل حلقه و صرفاً از یک گردش حلقه استفاده میکنن پس 10 بار درخواست اطلاعات داریم که هر بار بین 3 یا 4 کوئری اجرا میشود که در بهترین حالت میشود 30 کوئری!

حالا صفحه نخست من با چند کوئری تمامی اطلاعات را میگیرد؟ 70 کوئری !
درست است شاید بگید میزان حجم اطلاعاتی که در هر درخواست گرفته میشود کم است اما هر چه تعداد کوئری ها کمتر باشد ، بازدهی سایت بیشتر است .

حالا این یک افزونه خیلی ساده بود بسیاری از افزونه ها در هر حلقه چندین درخواست را ارسال میکنن! و بقیه رو خودت بگیر …
لذا از حداقل افزونه ها استفاده کنید!

مسئله جالب و خنده دار دیگه اینکه بسیاری از دوستان رو دیدم که چنیدن افزونه کش (cache) رو روی کول وردپرس سوار میکنن بدون اینکه بدونن کش چیه اصلاً !

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

اگر با سیستمی مثل موبیل تایپ (movabletype)  کار کرده باشید،میبینید که مثلاً آدرس mysite.ir/cat-8 یک آدرس دینامیک نیست و این دایرکتوری با محتواش ، در فضای هاست توسط خود موبیل تایپ ساخته شده است !

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

بنده به شخصه از هیچ افزونه‌ی کشی استفاده نمیکنم و نیازی نمیبینم .
اما یه چیز دیگه،خود وردپرس چندتاتابع کار با کش داره که میتونین توی افزونه هاتون ازش استفاده کنین !
wp_cache_add و wp_cache_get
دو تابع خوشکلی هستن که میتونین ازشون استفاده کنین .
در ضمن بد نیست سری به فایل cache.php واقع در پوشه wp-includes بزنید !
بعضی چیزها باید تجربی به دست بیاد

موفق باشید

مطالب مرتبط:

• افزونه فارسی شمارشگر دانلود-wp-download-mirror-counter
• افزونه پشتیبانی تیکت support-tickets فارسی+تاریخ شمسی
• محدودیت تعداد مطالب ، در صفحه نخست ، دسته ، آرشیو و … بصورت مجزا
• افزونه فارسی مطالب مرتبط وردپرس wordpress-related-posts-plugin
• افزونه wp-polls فارسی

نکته بعدی اینکه در همین فایل به ثابتهای AUTH_KEY , SECURE_AUTH_KEY , LOGGED_IN_KEY , NONCE_KEY , AUTH_SALT , SECURE_AUTH_SALT , LOGGED_IN_SALT , NONCE_SALT مقداری دلخواه و مجزا بدهید . بطور مثال ترکیب عدد با حروف بزرگ و کوچک! مثلاً 12Ap48pxAs مقدار خوبی میتواند باشد .
علت امر این است که این ثابتها صرفاً بعنوان پیپر و سالت به هش مقادیر چون کوکی و سشن و پسورد اضافه میشوند و امکان کرک کردن و هک کردن و سرقت اطلاعات کاربران را سختتر میکنند .
بلفرض مثال کلمه عبور شما یک کلمه ساده باشد مثل love ، هش آن براحتی توسط کتابخانه هایی که شامل میلیونها هش است قابل یافت است اما فکر نکنم هش love12Ap48pxAs را کسی جایی داشته باشد!

تغییر ثابتهای AUTH_KEY , SECURE_AUTH_KEY , LOGGED_IN_KEY , NONCE_KEY , AUTH_SALT , SECURE_AUTH_SALT , LOGGED_IN_SALT , NONCE_SALT با مقادیر یکتا یک امر الزامی است ، که در 99 سایتهای وردپرسی بدون تغییر مانده است !

نکته بعدی ثابت WP_DEBUG که اگر آنرا با TRUE یا 1 مقدار دهی کنید تمامی خطاهای وردپرس نشان داده میشود! این حالت برای رفع عیب یابی و توسعه پیشنهاد میشود .

خب اکنون که اطلاعات را وارد کردید فایل را ذخیره کرده و اقدام به نصب کنید .
دقت کنید که در هنگام نصب نام کاربری را برابر admin قرار ندهید . چون در اینصورت کرک کردن سایت راحتتر میشود!

بعد از پایان یافتن عملیات نصب به قسمت کاربران بروید و کاربرانی را با اسم admin و اسم خودتان مثلاً reza ایجاد کنید و حتماً نقش آنها را برابر “Subscribe” یا “مشترک” قرار دهید (که پائینترین سطح دسترسی است .)
علت این امر این است که هکر یا کرکر اولین گزینه های نام کاربری را admin میزند که با این امر تا حدودی شخص هکر منحرف شده و وقت خود را صرف پیدا کردن رمزی میکند که نام کاربری آن admin است که بلفرض بتواند رمز را هم پیدا کند چیزی جز یک کاربر سطح پائین را هک نکرده در صورتیکه که هدفش هک کردن مدیر سایت بوده ، اونجاست که دیگه بوی دماغ سوخته میاد

امیدوارم از این مطلب استفاده کرده باشید .
پروژه ای با عنوان کارگاه رضاآنلاین در حال تحلیل و بررسی که انشاالله اواسط خرداد کلید میخورد و مرداد ماه مشغول فعالیت میشود .
اینو گفتم از همین الان باخبر باشید

مطالب مرتبط:

• وردپرس پیشرفته – قسمت دوم – پوسته و افزونه

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

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

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

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

مطالب مرتبط:

• افزونه پشتیبانی تیکت support-tickets فارسی+تاریخ شمسی
• افزونه فارسی مطالب مرتبط وردپرس wordpress-related-posts-plugin
• افزونه wp-polls فارسی
• محدودیت تعداد مطالب ، در صفحه نخست ، دسته ، آرشیو و … بصورت مجزا
• وردپرس پیشرفته – قسمت دوم – پوسته و افزونه

اگر شما از فرم استاندارد برای نظرات استفاده میکنید ، یعنی مستقیم از کد <?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"

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

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

• افزونه wp-polls فارسی
• معرفی سیستم مدیریت محتوای الکسیس elxis
• افزونه فارسی مطالب مرتبط وردپرس wordpress-related-posts-plugin
• قالب سپیدک وردپرس طراحی خودم مجانی
• حرکت انیمیشنی لینک با css3-قسمت دوم

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

پشتیبانی مرورگرها
پسوند اختصاصی مروگرها (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 (623)

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

مطالب مرتبط:

• حرکت ، چرخش و انیمیشن در css3-قسمت اول
• حرکت انیمیشنی لینک با css3-قسمت دوم

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

• آموزش نصب الکسیس در لوکال هاست
• فراخوان انتشار پست ویژه‌ی روز جهانی وبلاگ
• حرکت انیمیشنی لینک با css3-قسمت دوم
• ماجرای فارسی سازی statpresscn
• افزونه پشتیبانی تیکت 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 فارسی (196)

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

مطالب مرتبط:

• افزونه فارسی شمارشگر دانلود-wp-download-mirror-counter
• افزونه فارسی مطالب مرتبط وردپرس wordpress-related-posts-plugin
• افزونه wp-polls فارسی
• محدودیت تعداد مطالب ، در صفحه نخست ، دسته ، آرشیو و … بصورت مجزا
• آموزش فارسی سازی افزونه وردپرس – قسمت دوم

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

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


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 هستن بصورت آنی اتفاق می افته!
همچنین میشه از این کد توی لیستها نیز استفاده کرد!

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

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

مطالب مرتبط:

• حرکت ، چرخش و انیمیشن در css3-قسمت اول
• کتاب آموزش و معرفی ویژگی‌های Css3-نوشته خودم!

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

چگونه یک 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 بنویسیم.
حالا نرید توی اون فایل مشکلی نیست
توی هدر عبارت زیر رو بنویسید

<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 (132)

مطالب مرتبط:

• حرکت انیمیشنی لینک با css3-قسمت دوم
• کتاب آموزش و معرفی ویژگی‌های Css3-نوشته خودم!

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

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

/ رضا شیخله

مطالب مرتبط:

• افزونه فارسی شمارشگر دانلود-wp-download-mirror-counter
• افزونه پشتیبانی تیکت support-tickets فارسی+تاریخ شمسی
• افزونه فارسی مطالب مرتبط وردپرس wordpress-related-posts-plugin
• افزونه wp-polls فارسی
• وردپرس پیشرفته – قسمت دوم – پوسته و افزونه