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

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

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

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

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

همونطور که میدونید مونیتورهای نسل جدید، اکثرا عریض (wide) شده اند و رزولوشن در آنها افزایش یافته. این مورد بسیار مهم و قابل اهمیت است! چرا که اگر شما در مقدار دهی به حاشیه بلوک های اصلی قالب، از واحد مناسبی استفاده نکنید، قطعا دچار مشکل می شوید!
واضح تر میگویم. به عنوان مثال مونیتور شما دارای رزولوشن ۱۰۲۴×۷۶۸ هست! قالب خود را طراحی میکنید. بعد همین قالب را در رزولوشن ۱۲۰۰×۸۰۰ نگاه میکنید! بر خلاف انتظارتان محتوای قالب به سمت چپ یا سمت راست صفحه نزدیک شده است! در صورتی که در حالت عادی باید وسط صفحه قرار داشته باشد! اما نگران نباشید! خیلی راحت میشود مشکل را برطرف کرد. درواقع شما واحد مناسبی را برای مقداردهی به حاشیه ها (margin) انتخاب نکرده اید! مثلا از واحد px یا em استفاده کرده اید!
حالا چکار باید بکنیم؟!
باید از واحد درصد – % – استفاده کنید! مثلا بجای اینکه بگویید:

Margin-left: 370px;

بگویید:

Margin-left: 30%;

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

در تصویر زیر، طراح با استفاده از واحد پیکسل، به بلوک ها فاصله داده. در رزولوشن ۱۰۲۴×۷۶۸، هیچ مشکلی دیده نمیشه و همه چیز سر جاش هست:

اما همین طرح در رزولوشن ۱۲۰۰×۸۰۰، به سمت راست نزدیک شده:

طراح به اشتباه خودش پی برد و واحد درصد – % – رو جایگزین واحد پیکسل – px – کرد:

با تغییر رزولوشن، هیچ جابجایی ای در قالب ایجاد نشد و همه چیز همونطور هست که باید باشه:

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

ضمنا یک موردی رو هم بگم. استفاده از واحد em برای مقداردهی به حاشیه ها و غیره، اصلا توصیه نمیشه. کاربرد این واحد بیشتر برای تعیین اندازه ی فونت است!

خب، برای این قسمت، تا همینجا کافیه. اگر جالب نبود، بگذارید به حساب بی تجربگی بنده ;)

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

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

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

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