طراحی با استانداردهای وب یکی از بحثهای داغ طراحان و توسعه دهندگان حرفه ای است. و اکثر طراحان سعی در انطباق خود با این استانداردها دارند و هر روز به نتایج بهتری دست پیدا میکنند.
همچنین برنامه نویسان و توسعه دهندگان سیستمهای مدیریت محتوای تحت وب نیز تمرکز خود را بر روی استاندارد سازی قرار داده و از امتیازات برتر هر CMSی استاندارد بودن برنامه و تولید خروجی های استاندارد میباشد.
در این میان قالبها یا پوسته ها در این سیستمها نقش به سزایی دارند. و در واقع خروجی استاندارد یک برنامه با یک قالب استاندارد و حرفه ای کامل میشود. در نتیجه اکثر قالبهای طراحی شده برای سیستمهای حرفه ای استاندارد هستند . پس ما نیز به عنوان طراحان و توسعه دهندگان وب باید این شرایط را حفظ کنیم و قالبها را به شکل استاندارد بومی سازی یا فارسی سازی کنیم.
در این مقاله به روند بومی سازی یا فارسی سازی قالب سیستم مدیریت بلاگ وردپرس میپردازیم که این مراحل برای هر قالب و CMS دیگری صدق میکند.
از کجا شروع کنیم ؟
تمامی قالبهای استاندارد اصل جدایی ظاهر از ساختار (و گاها رفتار) را رعایت میکنند. در نتیجه هر قالب دارای حداقل یک فایل شیوه نامه (Style Sheet) میباشد که عمده فعالیت ما بر روی این قسمت متمرکز میشود.
برای فارسی سازی بهتر است قالب را در محیطی تحت کنترل و با حداکثر امکانات نصب کنیم. منظور از امکانات محتوای مناسب و کافی برای آزمایش بخشهای مختلف قالب و امکانات آن میباشد که در این مورد برای ورپرس باید وبلاگی با مثلا 20 مطلب ، 7 دسته بندی تو در تو ، چند صفحه و آرشیوماهانه برای 4 ماه داشته باشیم.
تذکر : در این مقاله توضیحاتی کلی در مورد مراحل فارسی سازی قالبها و نکات قابل توجه ارائه شده است و فرض بر این است که شما به قدر کافی به مباحث طراحی وب مانند CSS و XHTML و روشهای کار آشنایی دارید.
گام اول : جهت و چیدمان نوشته ها
اولین مسئله ای که در مورد قالبهای انگلیسی وجود دارد جهت یا Direction نوشته هاست.که در زبان انگلیسی از چپ به راست و در زبان فارسی از راست به چپ میباشد. از آنجاییکه جهت و زبان پیش فرض مرورگرها برای نمایش صفحات انگلیسی LTR میباشد در قالبهای انگلیسی نیازی به تعریف جهت نوشته ها نیست که برای فارسی سازی باید به بخشهای مورد نظر این ویژگی را اختصاص دهیم.
اما چطور و کجای صفحه ؟!
شاید ساده ترین راه اضافه کردن این ویژگی به body یا html به نظر بیاید ، ولی راه های بهتری هم هست !
تغییر جهت نوشته ها توسط عنصرbody نوار عمودی پیمایش (Scrollbar) را به سمت چپ میبرد. ممکن است کل ساختار صفحه را به هم بریزد و از آنجاییکه بالاترین عنصر از لحاظ نمودار درختی ساختار شیئی سند است تمامی عناصر دیگر صفحه این خاصیت را از body به ارث میبرند و احتمالا همین موضوع مشکلات فراوانی ایجاد میکند ! بهترین راه تغییر جهت متن در بخشهای خاص دارای متن است. در وبلاگها معمولا دو بخش اصلی با متن زیاد وجود دارد : بخش محتوای اصلی یا بدنه مطالب و بخش نوار کناری وبلاگ. بهترین راه تغییر جهت متن به طور موضعی در این قسمتهاست.
برای پیدا کردن و هدف قرار دادن عنصر مورد نظر در شیوه نامه میتوانید از نوار ابزار قدرتمند فایرفاکس با عنوان WebDeveloper Toolbar استفاده کنید !
در بعضی موراد برای قالبهای انگلیسی و برای بخش خاصی جهت چیدمان یا text-align تعریف شده که برای متن فارسی باید از چپ به راست تغییر کند. دقت کنید که این مورد هم مثل جهت متن باید در محل مناسب اعمال شود.
در نهایت بهتر است جهت و چیدمان عناصری مانند Code و Blockquote را چپ به راست بکنید تا در صورت نیاز به قرار دادن متن انگلیسی یا کد در صفحه مشکلی ایجاد نشود.
گام دوم : ساختار صفحه ، فواصل و کادرها
مرحله بعد پرداختن به ساختار کلی صفحه و فواصل است. معمولا در اکثر قالبها نیازی به تغییر ساختار و شکل کلی قالب و محل قرار گرفتن بلوکهای مختلف نیست. در مورد فواصل هم اغلب توسط دو ویژگی margin و padding برای فاصله گرفتن متن از کناره های کادر و جایگیری مناسب عناصر استفاده میشود که باید فواصل موثر در زیبایی و جهت زبان فارسی را شناسایی و تغییر دهیم.
مثلا به احتمال زیاد در اکثر قالبها متن اصلی را به اندازه 20px از سمت چپ و 10px از سمت راست فاصله میدهند که باید جای این مقادیر عوض شود.
نکته قابل توجه این است که لزومی به تغییر تمامی فواصل نیست و قطعا کار عاقلانه ای نخواهد بود اگر تمامی margin-leftها را به margin-right تغییر دهیم و …
گام سوم : اندازه و نوع فونتها
حال که جهت نوشته ها راست به چپ تنظیم شده و فواصل به درستی تعیین شده باید نوع و اندازه فونتهای فارسی را مشخص کنیم. معمولا خواناترین فونتها برای متنهای اصلی فونت Tahoma با اندازه ای در حدود 9px تا 11px و فونت Arial با اندازه ای بین 12px تا 14px میباشد که بسته به سلیقه شما و شکل کلی قالب این مورد را تعیین میکنید. در اینجا شما با تجربه وبگردی و طراحی خود باید بهترین و مناسبترین فونت را برای متنها و عنواین انتخاب کنید. مثلا میدانید که فونت Tahoma برای عنواین درشت و با اندازه بالای 12px ظاهر زیبایی ندارد و یا فونت Arial و Times برای متنهای معمولی و با اندازه کمتر از 14px مناسب و خوانا نیستند. همچنین برای متنهای توضیحی و فرعی مانند اطلاعات طمان ارسال مطلب ، نظرات و … بهتر است از اندازه فونت کوچکتری استفاده شود.
مرحله نهایی : بخشهای گرافیکی و ریزه کاری ها
در این مرحله باید به بخشهای گرافیکی توجه کنید. بعضی عناصر گرافیکی صفحه تیز با توجه به جهت متن طراحی شده اند و ممکن است نیاز به چرخش یا برعکس کردن داشته باشند. مانند فلشهایی که اغلب در کنار عنوان مطالب وبلاگ یا شکل کوچکی که در کنار آیتمهای لیست موارد نوار کناری قرار میگیرند.
مسئله بعدی درباره تصاویر گرافیکی پس زمینه محل قرار گیری آنهاست که اکثر در سمت چپ عنوان یا آیتم لیست قرار گرفته اند که باید به سمت راست منتقل شود.
نکات قابل توجه در فارسی سازی !
ممکن است مواردی پیش بیاید که وضعیت قرارگیری یا شکل ضاهری یک عنصر و یک بخش خاص را نتوانید با انتخابگرهای موجود شیوه نامه کنترل کنید و شکل دهید. در این موارد حتی الامکان سعی کنید با استفاده از انتخابگرهای (Selector) حرفه ای و پیشرفته عنصر مورد نظر را هدف قرار دهید و نحوه نمایش آنرا کنترل کنید و تنها در صورتی که امکان کنترل نبود به ساختار قالب یک تگ div یا span با کلاس مورد نظر اضافه کنید و توسط شیوه نامه به آن شکل دهید. بهتر است تمامی مواردی که به شیوه نامه اضافه میکنید را در یک بخش جدا و ترجیحا در انتهای شیوه نامه قرار دهید و با استفاده از Commentها در CSS مشخص کنید که در آینده پیگیری و تغییر آن راحتتر باشد.
نکته آخر اینکه ممکن است لازم باشد متنها و پیغامهایی را درون فایلهای قالب ترجمه کنید. اولا اینکه مطمئن شوید از ویرایشگر متن استاندارد با پشتیبانی UTF-8 استفاده میکنید و دوما سعی کنید که ترجمه مناسبی از متنها ارائه کنید و از کلمات رسمی استفاده کنید.
در آخر سعی کنید قالب فارسی شده را با مروگرهای مختلفی مانند IE ، FireFox و Opera آزمایش کنید و مشکلات احتمالی پیگیری و رفع کنید. و به سلیقه خودتان در صورت نیاز تغییرا ت کوچکی در فواصل و اندازه ها اعمال کنید.
در پایان اگر درست کار کرده باشیم شکل و ظاهر کلی قالب اصلی با متن انگلیسی با قالب فارسی شده ما باید یکی باشد ! 
corelist.net
وبلاگ شخصی علی ستاری
سلام.
دستت دردنکنه , علی جون .
طبق معمول گل کاشتی
با سلام و احترام.
علی جان، پرداختن به این موضوع بسیار لازم بود. دستت درد نکند.
در بخش همه چیز درباره وردپرس هم به آن لینک داده شد. فقط یک پیشنهاد. به نظرم تا جایی که من خبر دارم کسی تا به حال درباره چگونگی ساخت لینکدونی برای وردپرس مقاله ای ننوشته اگر فرصتش را داری لطفا در این مورد هم اطلاع رسانی کن. متشکرم.
افشین خان راست میگه آقا علی اگه لینکدونی رو راه بندازین خیلی حال دادین به ملت..
سلام آقای ستاری!
خیلی جالب و مفید بود.
آقای ستاری لطفا در مورد css hack بنویسید!
یا حق
خیلی خیلی ممنون
جالب بود علی جان
اگه واست مقدوره یه سری پلاگین واسه فایرفاکس مثل همین WebDeveloper Toolbar معرفی کن. کار باهاش خیلی حال می ده …
واقعا عالی بود …
بازپینگ: Firefox
از همه دوستان عزیز به خاطر لطفون متشکرم !
~افشین : خیلی کار پیچیده ای نیست و با پلاگین wp-recent-link درست میشه .. ولی بازم چشم ..مینویسم
~ مرتضی الوانی : تا الان یه 5 – 6 تایی معرفی کردم .. بازم چیز جالبی ببینم چشم
~ میلاد قیصری : اتفاقا یک مقاله دارم تهیه میکنم تا یک هقته الی 10 روز آینده منتشر میشه … (شنبه هفته آینده میتونید تویه هفته نامه علم روز بخونیدش ! )
این آخریه هم Pingback هست ! کار یه اجنبیه !
با سلام و احترام.
ممنون علی جان.
راستی من سایت http://wp-plugins.net را برای دانلود پلایگنی که معرفی کردی دیدم اما حداقل با این اسم چیزی پیدا نکردم. آیا اسم پلاگین دقیقا همین است؟
باز هم ممنون
پیدا کردم.
در این آدرس می توان این پلاگین را پیدا کرد.
http://rebelpixel.com/projects/wp-recent-links
ممنون
آقا درود!
ببخشید که بیربط نظر میدم ولی خواستم بگم که ما دوباره برگشتیم!
سلام
حالتون خوبه
وبلاگ بسیار خوبی دارید
من لینک شما را به وبلاگم اضافه کردم
امید وارم شما هم به من لینک دهید
وبلاگ بدی نیست مثل شما به سی اس اس خیلی علاقه دارم
موفق باشید
بای
دستت درد نکنه علی آقا …
نوشتن چنین مقاله ای لازم بود … درباره لینکدونی هم ، یکی به من یه proposal بده یعنی بگه چه خصوصیاتی باید به صورت استاندارد داشته باشه … سعی می کنم یه plug-in براش بنویسم ، نمی شه ؟؟؟
سلام علی جان
منم به جمع وبلاگ نویسان بی درو پیکر بیکار پیوستم
وبلاگ من با نام ماورای وب
منتظرت هستم
http://ultra.sama-mahabad.com
از وبلاگ فایرفاکس دیدن کنید
http://www.mozilla.mihanblog.com
ممنون ار اینکه به من سر زدید
میشه تبادل لینک کنیم؟؟؟
ممنون
http://ultra.sama-mahabad.com
به نام خدا با تشکر فراوان
این سایتی که من دیدم واقعا مفید بود و من خواسته خودم را در این سایت گرفتم امیدوارم که در اینده شاهد موفقیت های بیشتر شما باشیم
آقا خسته نباشی من استفاده کردم
آقا خیلی استفاده بردیم مرسی
عالیه واقعا عالیه مرسی مرسی :d
با تشکر از اطلاعات مفیدتان،
می خواستم بپرسم چطور میشود تاریخ از میلادی به ایرانی تبدیل کرد.
سلام
وبلاگ خوبی داری
اگر خواستبی تبادل لینک کنیم در وبلاگم نظر بده
متشکرم
salam
ba arz khasteh nabashid khedmat shoma va hamkaranatan.
ma siti ra rah andazi kardeh im be nam 7eghlim ke dar rabeteh ba akhbar gardeshgari(khadamat mosaferati, jazebeh haye gardeshgari, mahsoolat farhangi) mibashad az shoma khaheshmandim akhbari ke dar in zamineh darid be soorat roozaneh email konid ta ma in akhbar ra ba gheid nam manba dar sitemoon darj konim .
az hamkari shoma besiar sepasgozarim.
7eghlim
سلام استاد
عرضم به حضور شما که بازم ممنون نکات خوبی را گوشزد فرموده بودید.
عرضم به حضور همه بلاگر های زبل که یک جایی هست که ورد پرس رو برامون نصب کرده ،چندا پلاگین هم گذاشته، یک عالمه تم های زشت غیر فارسی هم داره، ولی خوب برعکس همه بلاگهای دیگر که یک قالب دارند، اینجایی که حرفش رو میزنم برای یک بلاگ وردپرسی چهار فایل اصلی جهت ویرایش دارد که یکیشون همون CSS خودمونه.
من اینجوریش کردم
سلام مطالب واقعا جالب است …..
من تشکر می کنم …..
با سلام خدمته دوستانه عزیزم من یک سایت در زمینه ورزش کوهنوردی ساختم که عکسهای زیبایی در آن است خوشحال می شوم اگر از سایت من بازدید کنید و در ضمن من مایل به تبادل لینک هم هستم http://WWW.HAMTANAB.COM
سلام
ببخشید عزیز من با css اصلا آشنایی تدارم
میشه یک مقاله مبتدیانه اما کامل بنویسید
مثلا مثله mashhad team که برای php nuke نوشته
مرسی
خدانگهدار
آقا خیلی با حال
دمتون گرم
با تشکر
با سلام
لطفا توضیح دهید که در میهن بلاگ چگونه می توان به وبلاگ خود صفحه جدید اضافه کرد تا مانند یک سایت دارای چند صفحه باشد
و دیگری اینکه اگر من یک برنامه در داخل کامپیوترم داشته باشم چگونه اون رو داخل وبلاگم بگذارم(منظورم چه سایتی فضای رایگان برای این کار ارائه می دهند.)
و آخرین سوال اینکه این که وبلاگ ها را با چه برنامه ای طراحی میکنند
خیلی ممنون وحید حسینخانی
چگونه در وبلاگ نرم افزار قرار دهیم
slaaam
mer30
خیلی دوست دارم باهات تبادل لینک کنم..
خیلی باحالی بیمزه
من جدیدا وردپرس 2.5 را نصب کردم ولی نتوانسته ام انرا فارسی کنم . مشکل من در مکان آپلود فایل language در فولدرهاست . فولدری به این نام نیافتم تا این فایل را آپلود کنم . تغییرات را در فایل کانفیگ داده ام لطفا مرا کمک کنید.
چگونه لینکی به وبلاگم اضافه کنم که وقتی ان را زدم بتوان به صفحه ای رفت که ویرایش آن در اختیار خودم باشد
دستت درد نکنه خیلی ممنون. نمی دونم چطور ازت تشکر کنم
به وبلاگ من هم یه سری بزن
نظر هم یادت نره
سلام
آیا با تبادل لینک موافقید؟
با سلام یک قالب فا رسی خوب برای بلاگر می خواستم لطفا یک سایت معرفی کنید
در ضمن درhttp://GulfMLM.blogspot.com منتظرتان هستم
نکته: این وبلاگ در حین نگارش می باشد.
I think this one doesn’t make any sense: breungles, mentioned somewhere
با سلام
لطفا توضیح دهید که در بلاگفا چگونه می توان به وبلاگ خود صفحه جدید اضافه کرد تا مانند یک سایت دارای چند صفحه باشد
مثل همیشه عالی عالی مثل گل قالی
سلام دوست عزیز
لطفا منو راهنمایی کنید و به سوالات زیر پاسخ بدین:
۱- این سایت http://newwpthemes.net دقیقا از چه پلاگینی برای نمایش تمهای خودش استفاده کرده ؟
۲- اصولا چه جوری میشه فهمید که یک سایت با سیستم ودپرس از چه پلاگینهایی استفاده کرده ؟
سپاس فراوان
انصافا شما خودت با این توضیحات میتونی یه قالبو فارسی کنی ؟ !