در این صفحه، همانطور که از عنواناش پیداست، قصد داریم مراحل سادهی فارسیسازی یک پوستهی بلاگر را دنبال کنیم.
در قدم بعدی، باید قابلیت پذیرش زبان فارسی در پوسته را بررسی کنیم. بلاگر برای گنجاندن زبانهای سهگانهی عربی، عبری و فارسی در پوستههای از اِلمان languageDirection استفاده میکند. این اِلمان، مشخص میکند که سمت وسوی متنهای اصلی، نظرات و سایدبار (Sidebar) وبلاگ از راست به چپ باشد، کاری که قبلتر با گنجاندن Direction:rtl در کدهای CSS پوستهها انجام میدادیم.
» نکته: همهی پوستههای پیشفرض بلاگر، این اِلمان را دارند.
برای اطمینان از وجود این اِلمان در پوستهها، با ابزاری مثل NotePad پوسته را باز کنید. در خط ابتدایی، نسخهی XML و کدینگ پوسته را میبینید و در دو خط بعد نوع پوسته را.
در خط چهارم و در شروع تگ html این اِلمان را -در صورت وجود خواهید دید؛ به شکل زیر.
اگر در کدهای پوستهای که برای فارسیسازی انتخاب کردهاید چنین اِلمانی وجود ندارد، اضافهاش کنید. به خاطر داشته باشید که پوستههای زیادی هستند که چینش (Layout) آنها در عمل و با اضافه کردن این اِلمان، به هم میریزد. انتخاب اینکه از خیر اضافه کردن این اِلمان بگذرید و یا زحمت زیادتری برای فارسیسازی پوسته بر خود هموار کنید، با خود شماست. در قدمهای بعدی، خواهیم دید که چگونه کدهای دلخواهمان را به کدهای پیشفرض اضافه کنیم.
برای اینکه راحتتر بتوانیم پوسته را ویرایش کنیم، باید بدانیم دنبال اصلاح چه بخشهایی از پوسته هستیم. در ادامه تصویری از وبلاگی را میبینیم که پس از انتخاب زبان فارسی در تنظیمات به این روز افتاده است.
همانطور که از ظاهرش پیداست میشود همین حالا هم فارسی نوشت و مشکل خاصی هم نیست، اما هدف ما در اینجا بررسی اِلمانهای مختلف یک صفحه و ویرایش مناسب کدهای آنهاست. باید اِلمانهای مورد نظرمان را تکتک پیدا و کدها را به شکل دلخواه اصلاح کنیم، اما چگونه؟
اگر از مرورگر فایرفاکس -
که پیشنهاد میکنیم دانلودش کنید- استفاده میکنید میتوانید از افزونههای
Firebug یا
CSSViewer استفاده کنید. همینطور برای دیدن تغییرات به صورت آنی، پیشنهاد میکنیم از
EditCSS استفاده کنید. در ادامه میبینیم که این ابزارها چگونه کار میکنند.
در تصویر زیر میبینید که با
Firebug چگونه میشود اِلمانهای صفحه را یافت. بهطور مثال در تصویر دنبال پیدا کردن تگ عنوان وبلاگ هستیم که در اینجا h1.title است که در ادامه چگونگی ویرایش آن و تغییر به شکل دلخواه را خواهیم دید.
در تصویر زیر، چگونگی یافتن اِلمانها را با
CSSViewer میبینید.
و اما
Editcss که یک افزونه برای مشاهدهی آنی تغییرات در کدهای CSS یک سایت یا وبلاگ است. با زدن روی دکمهاش -که به راحتی میتوانید جایاش را تعیین کنید- روشناش کنید. در سایدبار فایرفاکس کدهای CSS وبلاگ را خواهید دید. در اینجا قصد داریم تغییر کوچکی در نوع، اندازه، رنگ و چینش فونت عنوان وبلاگ ایجاد کنیم و تغییرات را در همان لحظه ببینیم. برای یک تغییر دقیق، میبایست
آدرس تگ را به درستی مشخص کنیم.
.titlewrapper h1.title {
font: bold 18pt "B Nazanin", Verdana, Arial;
color: #1e1bff;
text-align: right;
}
قصدمان، اضافه کردن فونت B-Nazanin بود به عنوان فونت اول. توضیح سادهی این کدها این است که در صورت وجود این فونتها در فونتهای کامپیوتر مقصد -مشاهده کننده-، عنوان وبلاگ با این فونتها نمایش داده میشود. در صورت نبود فونت اول، با فونت بعدی نمایش داده میشود. با کدهای بالا، چیزی شبیه به زیر را خواهید دید.
همانطور که میبینید به سادگی تغییر دلخواهمان را ایجاد کردیم اما همهی فارسیسازی این نیست. در چنین صفحهای، اِلمانهای اصلی که میبایست تغییر کنند اینها هستند. البته قبل از شروع ویرایش از پوستهی فعلیتان پشتیبان تهیه کنید و تیک "گسترش الگوهای عناصر صفحه" را هم بزنید.
1ـ عنوان وبلاگ، در بخش Header کدهای پوسته پیدایش میکنید. کدهایی به شکل زیر میبینید.
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
در زبان فارسی نیازی به نوشتن عنوان با حروف بزرگ نیست پس text-transform را حذف میکنیم و مقدار letter-spacing را صفر میگذاریم تا فاصله بین حروف را از بین ببریم. مابقی عناصر را به دلخواه تغییر میدهیم. اما در کدهای پوستههای بلاگر عناصری هم هستند که نوع، رنگ و اندازهی فونتها را تعیین میکنند، مانند چیزی که در کدهای بالا در مقابل font میبینید. اینها در واقع ابزاری هستند در دست شما که نوع فونت و رنگ آن را از تنظیمات پوسته و بدون دستکاری در کدها تغییر دهید. به آن هم خواهیم پرداخت اما اجازه بدهید در اینجا فونت را به دلخواه خودمان تغییر بدهیم و نتیجه را ببینیم.
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
letter-spacing:0;
font: bold 200% "B Nazanin", Verdana, Serif;
text-align:right;
}
نتیجه را در تصویر زیر میبینید.
2ـ توضیح عنوان وبلاگ یا description:
اینبار اجازه دهید به گونهای دیگر توضیحات را ویرایش کنیم. ابتدا در کدهای CSS چینش این اِلمان را راست تعیین میکنیم و همچون عنوان وبلاگ، text-transform را حذف و مقدار letter-spacing را صفر میکنیم. اما فونت را تغییر نمیدهیم. به جای آن، در بخش
Variable_Definition فونت Tahoma را با اندازهی 90 درصد به descriptionfont اضافه میکنیم.
کدهای تغییر یافته برای هر یک را در ادامه میبینید.
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-align:right;
letter-spacing:0;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
تغییرات برای
descriptionfont را در کدهای زیر توپر و با خطی در زیرش میبینید.
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 90% Tahoma, 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 90% Tahoma, 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
3ـ متن اصلی یادداشت
در بدنهی اصلی یادداشتها، چند تغییر کوچک داریم، تغییر در جای قرار گرفتن تاریخ یادداشت، تغییر فونت عنوان یادداشت، تغییر فونت بدنهی یادداشت، و تغییرات در پانوشت یادداشتها.
تصویر قبل از تغییرات را در زیر میبینید.
هدفمان، انتقال تاریخ به سمت چپ، تغییر فونت عنوان به B-Nazanin در اندازهی 130 درصد، تغییر فونت بدنه به Tahoma در اندازهی 12px (معادل 10pt) و اضافه کردن کدهایی برای چینش صحیح تصاویر در متن به صورت خودکار، و اصلاح کدهای پانوشتهای یادداشت است.
» برای اصلاح تاریخ کدها را به شکل زیر اصلاح میکنیم.
h2.date-header {
margin:1.5em 0 .5em;
direction: ltr;
text-align: left;
}
» برای اصلاح عنوان یادداشتها
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font: bold 130% B Nazanin, Verdana, Arial;
line-height:1.4em;
color:$titlecolor;
}
» برای تغییر فونت یادداشتها
.post-body {
margin:0 0 .75em;
line-height:1.6em;
font: normal 12px Tahoma;
}
.post-body p {
margin:0 0 .5em;
line-height:1.6em;
}
ویژگی دوم در اینجا برای "پاراگرافها" تعریف شده؛ در نرمافزارهای وبلاگپراکنی نظیر لایو-رایتر، یا در هنگام نوشتن در نرمافزاری چون Word، با تقه زدن روی کلید Enter، در واقع به یک پاراگراف پایان دادهاید و پاراگراف دیگری را شروع کردهاید. با کدهای بالا، فاصلهی بین پاراگرافها از هم و فاصلهی خطوط نوشتار در پاراگراف را معبن میکنیم. اینکه چه فاصلهای مناسب است دست خودتان است اما بگذارید توضیح کوتاهی در موردش بنویسم. em فاصلهایست تقریبی، و میتوانید از عدد ثابتی چون 18px استفاده کنید. یا میتوانید مقدار همین پارامتر را بیشتر کنید.
اما تصاویر در پوستهها، چند خط زیر را هم به کدهایمان اضافه میکنیم. این کدها، جای تصویر را در پوسته به طور خودکار اصلاح میکنند، کافیست در هنگام انتشار عکس، چینش آن را معین کنیم.
.post img[align="right"] {
margin: 0 0 0 10px;
}
.post img[align="left"] {
margin: 0 10px 0 0;
}
.post img[align="center"] {
margin: 10px 5px;
}
این چند خط تعیین میکنند که فاصلهی تصویر از متن کناری چقدر باشد.
» پانوشت یادداشتها
این یکی کمی بیشتر کار میبرد، چون قصد داریم سوای کمی دستکاری در CSS، کدهای اصلی در بدنهی وبلاگ را هم کمی جابجا کنیم.
ابتدا چون دیگر اِلمانها، ویژگی text-transform را حذف و مقدار letter-spacing را صفر میکنیم. و برای تغییر نوع و اندازهی فونت هم در بخش
Variable_Definition تغییراتی به شکل زیر ایجاد میکنیم.
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
letter-spacing:0;
font: $postfooterfont;
line-height: 1.4em;
}
<Variable name="postfooterfont" description="Post Footer Font" type="font"
default="normal normal 85% Tahoma, 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 85% Tahoma, 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
اما کار به همین جا ختم نمیشود، میتوانیم چیدمان عناصر پانوشتها را هم تغییر دهیم. دنبال post-footer بگردید. اِلمانهای اصلی را که در پوستههای پیشفرض در
دو خط نوشته شدهاند در ادامه میبینید.
1ـ اولی post-author است که شما در نمایش نهایی به شکل "ارسال شده توسط..." میبینید. کارش اعلام نویسندهی یادداشت است.
2ـ دومی post-timestamp که "مهر زمان" ارسال یادداشت را میزند پای آن و چگونگی نمایشاش بستگی به انتخاب شما در تنظیمات وبلاگتان دارد.
3ـ سومی در ویرایش جدید پوستهها reaction-buttons است، همان
واکنشسنج بلاگر که در موردش در اخبار بلاگر نوشتیم.
4ـ چهارمی star-ratings است؛ خوانندههای وبلاگ به کمک این ستارهها به یادداشتتان رتبه میدهند، شاید کارکردش مشابه با واکنشسنج باشد.
5ـ پنجمی post-comment-link است، لینک به نظرات وبلاگ.
6ـ ششمی post-backlinks است، لینک به دنبالکها یا "یادداشتهای مرتبط با یادداشت شما" که لینکی هم به مطلب شما دارند.
7ـ هفتمی هم post-icons است؛ شامل دکمهی ارسال یادداشت با ایمیل و دکمهی ویرایش سریع.
اینها همهی چیزهایی هستند که در کدهای خط اول قرار دارند، در post-footer-line-1. اما در خط دوم، برچسبهای یادداشت قرار دارند که با post-labels مشخص میشوند. خط سوم هم خالیست که میتوانید از آن برای اضافه کردن مثلا دکمههای برای شبکههای اجتماعی استفاده کنید؛ دکمهی ارسال مطلب به بالاترین، شاید. یا جابجایی در دو خط اول که در ادامه قصد داریم همین کار را انجام دهیم. تصویر پانوشت یادداشتها یا post-footer را پس از اصلاحات اولیه و قبل از اعمال تغییرات نهایی در زیر میبینید. قصدمان این است که لینک نظرات و دنبالکها را بکنیم و ببریم در خط دوم و برچسبها را به خط سوم انتقال بدهیم.
ابتدا از کدهای خط دوم که برچسبها در آن قرار میگیرند یک نسخه بالای خط سوم میچسبانیم و 2 را به 3 تغییر میدهیم، اما در این تغییر، علامت "،" را به مدد کدهای یونیکدش جایگزین "," میکنیم. در واقع برچسبها را به جای "کاما" با "ویرگول" از هم جدا میکنیم. مثل کدهای زیر:
<div class='post-footer-line post-footer-line-3'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>،</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
بعد از این مرحله، کدهای مربوط به نظرخواهی و دنبالک را میکَنیم (Cut) و به جای کدهای برچسب در خط دوم میچسبانیم، چیزی شبیه کدهای زیر.
<div class='post-footer-line post-footer-line-2'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/><data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'>
<data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
</div>
تصویر نهایی پانوشت را هم در زیر میبینید.
ویرایش بخش یادداشت تمام شد که تصویر نهاییش چیزی میشود شبیه به زیر:
» خب، به نظر میرسد حداقل از شکل و شمایل اولیهاش بهتر شده. همانطوری که حتما تا حالا متوجه شدهاید ویرایش یک پوسته و انجام تغییرات دلخواه در آن کار بسیار سادهایست، تنها حوصله میخواهد و وقت، همین.
در ادامه به سراغ اصلاح بخش نظرات در پوسته میرویم.
4ـ اصلاح نظرات
در بخش نظرات، اِلمانی وجود دارد به نام comment-body که شامل مشخصات متن نظرات است. میتوانید به راحتی نوع، اندازه، رنگ و چینش فونتها را تعیین کنید. اما در اینجا قصد داریم سوای تغییر این مشخصات، نظرات صاحب وبلاگ را از نظرات سایرین جدا کنیم. برای اینکار، باید یک اِلمان جدید ایجاد کنیم و سوای تعریف مشخصات، در کدهای بدنه هم دست ببریم.
اِلمانی تعریف میکنیم به نام comment-body-author که مشخص کنندهی نظرات صاحب وبلاگ است؛ در برابر comment-body که مشخصات عمومی نظرات را نشان میدهد. فرض کنید در comment-body معین میکنیم که نظرات را با پسزمینهی آبی و با فونت 10Pt تاهوما نمایش بده و در comment-body-author پسزمینه را سبز تعیین میکنیم.
اتفاقی که در عمل هنگام اجرا میافتد این است: ابتدا کنترل میشود که نظر ارسال شده از طرف چه کسیست، اگر از طرف صاحب وبلاگ است با پسزمینهی سبز و مشخصات تعیین شده نمایش داده میشود و اگر نه، با مشخصات عمومی نظرات.
پس کدها را به شکل زیر -یا هر شکل دلخواه دیگری- تعریف میکنیم:
.comment-body-author {
margin: 3px auto 0 auto;
padding: 0 0 15px 0;
line-height: 1.5em;
background: url(http://symoniri.googlepages.com/cgreen-btm-3col-rounders-3-1-persian.PNG) no-repeat 0% 100%;
width: 384px;
}
.comment-body-author p {
background: #cfe1ad url(http://symoniri.googlepages.com/cgreentop-3col-rounders-3-1-persian.PNG) no-repeat 0% 0%;
padding: 8px 9px 5px 9px;
margin: .1em 0 0 0;
color: #000;
text-align: justify;
}
.comment-body {
margin: 3px auto 0 auto;
padding: 0 0 15px 0;
line-height: 1.5em;
background: url(http://symoniri.googlepages.com/cbluebtm-3col-rounders-3-1-persian.PNG) no-repeat 0% 100%;
width: 384px;
}
.comment-body p {
background: #b7e0ff url(http://symoniri.googlepages.com/cbluetop-3col-rounders-3-1-persian.PNG) no-repeat 0% 0%;
padding: 8px 9px 5px 9px;
margin: .1em 0 0 0;
color: #000;
text-align: justify;
}
توضیح کوتاه، قصد داریم به کادر نظرات تصویر هم اضافه کنیم. برای همین از p به عنوان یک جزء کوچک استفاده میکنیم.
مثلا در comment-body-author تصویر پایینی را مشخص میکنیم و با p تصویر بالایی را. هدف ایجاد چیزی ست شبیه به تصیر پایین.
کدهای پیشفرض نمایش نظرات در بلاگر اینها هستند.
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
کدهای پایین را با کدهای بالایی جابجا میکنیم.
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
» توضیح:
در کدهای سری دوم، طرز کار این است که اگر
نویسندهی نظر با
نویسندهی یادداشت یکی بود، نظر ارسالی با پسزمینهی سبز نمایش داده شود، در غیر این صورت با پسزمینهی آبی.
اِلمانهای دیگر بخش نظرات را در ادامه مرور میکنیم و نمونهای از کدهای اصلاحی را نقل میکنیم.
یک، comments h4، فاصلهی بین حروف را صفر و مشخصهی حروف بزرگ را حذف میکنیم. چون نوع و اندازهی فونت هم مشخص نیست خودمان تعریف میکنیم.
#comments h4 {
margin:1em 0;
font: bold 130% Arial, Verdana, Times New Roman;
line-height: 1.4em;
letter-spacing:0;
color: $sidebarcolor;
}
دو، محدودهی comments-block که شامل اِلمانهایی چون comment-author برای نام نویسندهی نظر، comment-body-author و comment-body که قبلتر در موردشان نوشتیم و comment-footer که بهطور معمول تاریخ ارسال نظر و دکمهی حذف نظر در آن قرار میگیرد.
خب، تا اینجا یک سمت پوسته به طور کامل اصلاح شد، در ادامه به سراغ نوار کناری یا Sidebar وبلاگ میرویم.
5ـ اصلاح نوار کنار وبلاگ یا Sidebar
در این بخش، فقط به اصلاح برخی اِلمانهای Profile نیاز داریم و افزودن مشخصهی فونت به نوار کناری و یک اِلمان تازه برای عنوان ابزارکها.
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
font:normal 12px Tahoma;
}
.sidebar h2 {
font: bold 130% Arial, Verdana, Times new Roman;
letter-spacing:0;
}
در profile هم طبق معمول، فاصلهی بین حروف را صفر و ویژگی نمایش با حروف بزرگ را حذف میکنیم. در صورت تمایل میتوانید فونت را هم تغییر دهید.
6ـ اصلاح پانوشت وبلاگ یا Footer
آخرین مرحلهی اصلاح یک پوسته، اصلاح پانوشت یک وبلاگ است؛ جایی که معمولا جملاتی در باب اهمیت کپیرایت و لینک دادن به مطالب وبلاگ و مذمت دزدیهای وبلاگی درج میشود. باز هم طبق معمول و عادت همیشگی، فاصلهی بین حروف را صفر و ویژگی نمایش با حروف بزرگ را حذف میکنیم. اینبار چینش حروف و نوع فونت را هم به دلخواه تغییر میدهیم.
#footer {
width:660px;
clear:both;
margin:0 auto;
padding:15px 10px 5px;
line-height: 1.6em;
text-align: right;
font: normal 12px Tahoma;
color: #666;
}
این، یک راهنمای ساده است برای اصلاح پوستههای بلاگر. بر پایهی همین نکات کوچک که با هم مرور کردیم میتوانید هر پوستهای را برای فارسینویسی تغییر دهید؛ مطابق میلتان،
مثل این وبلاگ که با همین راهنما به این شکل درآمده.