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

این امکان در وردپرس به راحتی امکان پذیر است. فقط کافی است یک کوئری ِ ساده قبل از شروع ِ حلقه ی وردپرس قرار دهید. مانند زیر:

<?php $posts = query_posts($query_string . '&orderby=title&order=asc'); ?>
//Begin The Loop
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>

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

• هدیه‌ی نوروزی » پوسته‌ی Modern Orange و یک عدد فونت زیبا
• پوسته ی فارسی کروم برای وردپرس
• پوسته ی فارسی bella برای وردپرس
• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » یک
• استایل‌دهی به آخرین پست در وردپرس

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

اما به هرحال از حدود ۲ ماه پیش واقعا تصمیم گرفتم که روی این پوسته کار کنم و کم کم از طراحی گرافیکش شروع کردم و بعدش هم کدنویسی و خلاصه تا همین امروز باهاش سر و کله می زدم :)
البته این چیزی که الان دارید می بینید (اگر نمی بینید کنترل+اف۵ بزنید)، یک جور نسخه بتا یا یک همچین چیزی است و هنوز تمام چیزهایی که می خواستم را روی آن اعمال نکرده ام که به تدریج اضافه می کنم.

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

اما خب از این ها گذشته، دانستن نظر شما برایم مهم تر است :)

• نمایش پست ها بر اساس حروف الفبا در وردپرس
• هدیه‌ی نوروزی » پوسته‌ی Modern Orange و یک عدد فونت زیبا
• پوسته ی فارسی کروم برای وردپرس
• پوسته ی فارسی bella برای وردپرس
• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » سه

هدیه ی نخست، پوسته ی Modern Orange برای وردپرس می باشد که همین امروز ترجمه اش کردم. طراحش هم آقای آنتونی می باشد که البته خودش می گوید مرا آنتو صدا کنید :) حقیقتش پوسته ی فوق العاده ای است از لحاظ استاندارد بودن و با مرورگرهای IE6، IE7، IE8، Opera، Firefox، Chrome و Safari هیچگونه مشکل خاصی ندارد و متناسب نمایش داده می شود. قابل استفاده روی وردپرس ۲٫۷ و دارای فایل RTL.css و بدون فایل زبان می باشد.

پوسته ی modern orange

(more…)

• پوسته ی فارسی کروم برای وردپرس
• راهی آسان برای واردکردن خودکار خوراک‌ها به وبلاگ وردپرسی‌تان
• نمایش پست ها بر اساس حروف الفبا در وردپرس
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• پوسته ی فارسی bella برای وردپرس

پوسته ی کروم برای وردپرس

لینک کمکی: اگر روزی لینک دریافت بالا کار نکرد، این لینک را امتحان کنید!

مشخصات پوسته:

نام: Chrome tweaks
طراح: Chrome tweaks و Alexandru Cosmin
فارسی سازی استایل: امیر tnt و علیرضا
نوع طرح پوسته: ساده، رنگبندی روشن، سه ستونه، کم حجم
تگ ها: سفید، آبی، کروم، دارای فایل rtl، ابزارک، سه ستونه، ساده، simple، gravatars، widgets، widget ready، wp-PageNavi

امکانات پیش فرض پوسته:

اختصاص دادن قسمتی از سایدبارها برای قرار دادن تبلیغات با سایزهای ۳۰۰×۲۵۰ پیکسل و ۱۲۵×۱۲۵ پیکسل
نمایش نظرات اخیر بازدیدکنندگان به همراه خلاصه ای از متن نظر
دارای استایل کپشن برای عکس ها
پشتیبانی از gravatar
پشتیبانی از ابزارک ها
پشتیبانی از افزونه ی wp-PageNavi
سازگار با نسخه ی ۲/۶ وردپرس

پ.ن.۱- اگر مشکلی وجود داشت و یا پیشنهادی داشتید مرحمت کنید و کامنت بگذارید تا سر فرصت انجام بدم :)

• هدیه‌ی نوروزی » پوسته‌ی Modern Orange و یک عدد فونت زیبا
• راهی آسان برای واردکردن خودکار خوراک‌ها به وبلاگ وردپرسی‌تان
• نمایش پست ها بر اساس حروف الفبا در وردپرس
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• پوسته ی فارسی bella برای وردپرس

پوسته ی فارسی bella برای وردپرس

• نمایش پست ها بر اساس حروف الفبا در وردپرس
• هدیه‌ی نوروزی » پوسته‌ی Modern Orange و یک عدد فونت زیبا
• پوسته ی فارسی کروم برای وردپرس
• استایل‌دهی به آخرین پست در وردپرس
• راهی آسان برای واردکردن خودکار خوراک‌ها به وبلاگ وردپرسی‌تان

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

۱٫ ذهن آرام: معمولا اکثر طراحان وب، ساعت ها خود را درگیر کدنویسی و طراحی میکنند و طبیعی هست که بعد از گذشت مدت زمان قابل توجهی، ذهن خسته شود و دیگر نتواند به کار ادامه دهد. اکثر اوقات هم عیب و ایرادات، در چنین مواقعی ایجاد می شوند و با ذهن و فکر خسته نمی توان مشکلی را حل نمود. پیشنهاد میکنم برای چند ساعت استراحت کنید و به کارهای متفرقه بپردازید تا ذهنتان باز شود!

۲٫ دقت در بررسی: باید با دقت هرچه تمام به مشکلی که پیش آمده نگاه کنید. ببینید که کدام قسمت از قالب دارای مشکل هست و کدهای مربوط به همان قسمت را بررسی نمایید تا مشکل را پیدا کنید!

۳٫ تایید پرونده ی سی اس اس: روش دوم کمی وقت گیر و غیر اصولیست. روش راحت تر و سریع تر و معمول تر آن است که به سایت w3c بروید و پرونده ی سی اس اس خود را به تاییدکننده ی سی اس اس بدهید تا مشکلات را پیدا و به شما نشان دهد!

۴٫ تایید پرونده ی اکس اچ تی ام ال: ممکن است مشکل پیش آمده به دستورات سی اس اس ارتباطی نداشته باشد و اشکال در کدهای اکس اچ تی ام ال باشد. بنابر این بد نیست که پرونده ی اکس اچ تی ام ال خود را نیز در تایید کننده ی اکس اچ تی ام ال سایت w3c مورد بررسی قرار دهید.

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

۱٫ جداسازی: آن قسمت از کدهایی که مشکل ایجاد کرده اند را از مابقی کدها جدا کنید! تک تک خاصیت های به کار رفته را بررسی کنید. مقدارهای مختلف را امتحان کنید. تا شاید بالاخره راه حل را پیدا کردید! اما این پایان کار نیست! راه های زیادی هنوز هستند که شما را به جواب نزدیک تر میکنند… (توصیه میکنم که تا پایان کار این مورد یعنی جداسازی کدهای مشکل ساز از دیگر کدها را رعایت کنید تا کارتان راحت تر شود).

۲٫ جستجو: سایت های زیادی هستند که ترفتدها و راه حل هایی برای رفع مشکلات مختلف ارائه میکنند. می توانید در این سایت ها به دنبال راه حلی برای مشکلات خود باشید. در زیر تعدادی از این سایت ها را می توانید ببینید:

• SitePoint CSS Reference
• Position is everything
• Css discuss
• Css-tricks
• گوگل!

۳٫ مشورت: میتوانید در انجمن هایی که برای این منظور ایجاد شده اند، مشکل خود را مطرح کنید و از طراحان دیگر کمک بگیرید. در زیر تعدادی از انجمن های فعال را که میتوانند موثر واقع شوند را می بینید:
فقط نکته ای که قابل اهمیت هست این است که به قوانین انجمن ها احترام بگذارید و آن ها را رعایت کنید تا خدای ناکرده، دچار مشکل نشوید!

• انجمن مووبل تایپ فارسی
• انجمن وردپرس فارسی
• انجمن مجید آنلاین
• انجمن پرشیا سی ام اس
• css-tricks forums

• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » یک
• گرادینت متن با سی اس اس
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس
• هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا

خب بریم سراغ اولین پوسته:

Blue-block

این پوسته، کامل شده ی همون پوسته ای هست که برای خودم طراحی کردم! به نظرم به درد کسایی که به دنبال یه پوسته ی ساده و در عین حال قشنگ، هستند میخوره.

دریافت کنید (با حجم ۱۶۵ کیلوبایت)

ubuntu

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

دریافت کنید (با حجم ۱۶۴ کیلوبایت)

نصب پوسته: برای نصب هر پوسته، بعد از اینکه دریافتش کردید، پوشه ی پوسته ی مورد نظر رو کپی کنید بعد به درایو ویندوزتون برید و مسیر زیر رو طی کنید و در اونجا پوشه ی پوسته ی موردنظر رو بریزید!

C:\Documents and Settings\username\Local Settings\Application Data\GoogleGoogle Talk\theme\suser\chat

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

پ.ن.۱- پوسته ی اوبونتو تقدیم میشود به خاله حدیث اوبونتویی مهربان!

• رُبات‌های تحت وب درخدمت شما هستند!
• نمایش پست ها بر اساس حروف الفبا در وردپرس
• یک طراح وب، رخت ِ نو بر تن می کند!
• هدیه‌ی نوروزی » پوسته‌ی Modern Orange و یک عدد فونت زیبا
• چگونه پدر ِ ویروس New Folder.exe را در بیاوریم؟!

کدام مرورگرها؟!
وجود مرورگرها و وسیله های مختلف، باعث شده که این روزها بیش از پیش نگران این باشیم که قالب طراحی شده مان در این مرورگرها و وسیله ها چطور دیده میشه. بغیر از این، افزایش رزولوشن در مانیتورها ی جدید و واید شدن آنها نیز از جمله مسائلی هست که نمیتوان به سادگی از آن عبور کرد.
در مرحله ی اول، قالب سایت شما باید در مرورگرهایی مثل اینترنت اکسپلورر ۶ و ۷ (و ترجیحا ۸)، فایرفاکس و اُپرا که از مرورگرهای پرمصرف هستند، یک شکل و یکسان نمایش داده شود. پس قالب خود را حتما در این مرورگرها تست کنید.
البته اگر به سیستم های عامل دیگری به جز ویندوز دسترسی دارید (مانند مک و لینوکس) بد نیست که قالب سایت خود را در مرورگرهای سافاری و کنکرر نیز تست نمایید. (لازم به ذکر است که سافاری، بر روی ویندوز هم قابل نصب است!)
البته با وجود ناسازگاری هایی که مرورگرهایی مثل IE (خصوصا نسخه ی ۶ آن) دارند کمی یکسان سازی مشکل میشود. اما نگران نباشید، هک ها و ترفندهایی وجود دارند که با استفاده از آن ها میتوان بسیاری از این مشکلات را برطرف نمود! (در این راستا، این مقاله را نیز به شما توصیه میکنم!).

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

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

گام دوم: از کدنویسی کثیف و درهم بپرهیزید!
یادتان باشد که هرگاه به دستوری احتیاج بود، آن را بنویسید، در غیر این صورت لزومی ندارد که از دستورات تکراری و بی مورد استفاده کنید! به مثال زیر توجه کنید:

.content {
Padding: 5px;
Margin: 10px;
Padding-right: 8px;
Font: bold 130% Arial, Times New Roman;
Text-align: right;
Direction: rtl;
Font-size: 18px;
}

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

.content {
Padding: 5px 8px 5px 5px;
Margin: 10px;
Font: bold 120% Arial, Times New Roman;
Text-align: right;
Direction: rtl;
}

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

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

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

• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » دو
• روش های خلاصه نویسی در سی اس اس
• چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » سه
• گرادینت متن با سی اس اس