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

در سری آموزشی قبلی نحوه طراحی یک قالب ساده در فتوشاپ و سپس تبدیل این قالب PSD به HTML و CSS را فرا گرفتید. در مجموعه ی حاضر، قصد داریم در تکمیل آموزش قبلی، قالب استاتیک طراحی شده را به قالب بلاگفا تبدیل کنیم.

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

»» مشاهده جلسه نخست طراحی قالب استاتیک ««

»» دریافت کدهای قالب استاتیک طراحی شده ««

هر سیستم وبلاگدهی دارای کدهای اختصاصی می باشد که اطلاعات و تنظیمات را دریافت و درون قالب نمایش میدهند. این کدها که با علائم خاصی آغاز میشوند در هر سیستم متفاوت هستند. برای مثال ممکن است در یک سیستم بلاگدهی این کدها با علامت % مشخص شوند و در دیگری با علامتی دیگر.

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

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

قسمت سربرگ یا header

نخستین بخش قالب فعلی، لینکهای موجود در منوی بالایی است که دارای کد HTML زیر می باشد:

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

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

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

به همین ترتیب برای لینکهای بعدی نیز عمل خواهیم کرد، پس خواهیم داشت:

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

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

ملاحظه میکنید که ما تغییری در کدهای HTML و کلاسهای css آنها ایجاد نمیکنیم، تنها متون نوشته شده را با کدهایی که در بلاگفا نقش نمایش این نوشته ها را بر عهده دارند جایگزین میکنیم.

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

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