back to home

هر روز وب‌هایی رو میدیدم که چند رنگه کردن و به نظرم کار جالبی اومد.منم تصمیم به این‌کار گرفتم و یادم اومد که قبلن یه تم ترجمه کردم که این قابلیت‌ رو داشت و حالا هم برای شما خلاصه‌ش کردم.

باید اول یه فایل جی‌اسکریپت به تم‌تون اضافه کنید. {دانلود} بعد از دانلود باید آدرس رو تو هیدر قرار بدید،مثل مثال:
<?php wp_head(); ?>
<script type="text/javascript" src="آدرس فایل جی‌اسکریپت آپلود شده"></script>
</head>

استایل مورد نظرتون رو بنویسین.مثلن من برای رنگ قهوه‌ای از این استفاده کردم:
div.side-sec h3 {font-size: 1em;color:#fff;text-transform: uppercase;background-color:#663300;height:15px;}
a:link {text-decoration: none;color:#996633;}
a:visited {text-decoration: none;color:#996633;}

که استایل‌هایی که توی این ذکر میکنین جایگزین استایل اصلی‌شون تو پوسته استایل می‌شه.

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

یک)

کدهای زیر رو به استایل اضافه کنید:
#style-switcher {padding-right:5px 0;}
#style-switcher a {width:10px;height:10px;display:block;float:right;margin:0 3px;border:1px solid #fff;}
a#turquoise-color {background-color:#99CCFF;}
a#red-color {background-color:#CF6333;}
a#gold-color {background-color:#BF9B3B;}
a#green-color {background-color:#639F27;}
a#brown-color {background-color:#663300;}
a#black-color {background-color:orange;}

دو)

حالا باید یه چیز دیگه‌ای رو هم به هیدر اضافه کنید.مثلن برای استایل green.css میزنیم:

<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/green.css" media="screen" title="green" />

سه)

و در آخر این رو هم مثلن بذارین توی سایدبار:
<div id="style-switcher">
<a id="green-color" class="styleswitch" title="سبز" onclick="setActiveStyleSheet('green'); return false;" href="#"></a>
</div>
همین،وبلاگ‌تون چند رنگه شد.البته هنوز دو رنگه‌س،خودتون میتونید هر چند رنگ که بخواین بهش اضافه کنید :)

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

برای استفاده از جی‌اسکریپت توی وردپرس باید این کد استفاده‌ش رو داخل پوسته هیدر تم خودتون قرار بدید و در بین wp_head() و head که باید آدرس فایل جی‌اسکریپت‌تون توش قرار بگیره.مثله:
<script language="javascript" type="text/javascript" src="http://wizengamot.ir/wp-content/themes/simple%20paper/nicetitle.js"</script>
برای راحتی بیشتر کار میتونید دقیقن از همین آدرس هم استفاده کنید و اون رو روی هاست خودتون آپلود نکنید.
بعد باید به قسمت استایل تم خودتون کدی رو اضافه کنید:

div#qTip { padding: 3px; border: 1px solid #666; display: none; background: #fff; color: #000000; font: 11px tahoma; position: absolute; z-index: 1000; direction:rtl;}
بدون شک شما میتونی طبق خواست‌تون این کد رو تغییر بدید و از هر نظری با سلیقتون سازگارش کنید و فقط نیاز به یکم سی‌اس‌اس بلد بودن داره

اگه سوالی داشتین خوشحال میشم کمکتون کنم :)