دسته‌ها
ترفند وردپرس

تصاویر بندانگشتی در وردپرس

سلام

از وردپرس ۲٫۹ یک امکان خیلی خوب به وردپرس اضافه شد و اون امکان اضافه کردن تصاویر بندانگشتی (یا همون thumbnail) به پست ها بود که از خیلی وقت پیش کلی راه کار و پلاگین براش ارائه شده بود و خب نیازش واقعن حس میشد.

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

۱- افزودن امکان نمایش thumbnail به قالب وبلاگ

اولین کاری که باید بکنیم (و امکانش از ورژن ۲٫۹ به وردپرس اضافه شده) اینه که به وردپرس بفهمونیم قالب ما از تصاویر بندانگشتی پشتیبانی میکنه و یه سری تنظیمات لازم که بسته به کارمون میتونه متفاوت باشه رو انجام بدیم

در functions.php  موجود در فولدر تم مربوطه میریم و کد زیر رو وارد میکنیم:

<?php
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
}
?>

خط اول یک شرط میکنه که اگر تابع add_theme_support که از ورژن ۲٫۹ اضافه شده وجود داشت (یعنی وردپرس ما به روز بوده و کمتر از ۲٫۹ نیست) از تابع استفاده کنه و به وردپرس بفهمونه که قالب از امکان نمایش thumbnail بهره میبره.

البته شاید زیاد نیازی به اون if  هم نباشه و میتونیم یک راست کد زیر رو وارد کنیم:

<?php add_theme_support('post-thumbnails'); ?>

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

حالا با قرار دادن کد زیر در هرجای قالب ( به طور مثال فایلهای single.php  یا index.php یا هرجای دیگه که حلقه ی مطالب قرار دارد) میتونیم تصویر مربوط به هر پست رو نمایش بدیم.

<?php the_post_thumbnail(); ?>

توجه کنید که این کد رو باید داخل حلقه ی پست ها قرار بدین ( حلقه چیست؟ )، اگه چیز زیادی از حلقه نمیدونین کد

<?php the_content(); ?>

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

این تابع هم مانند دیگر توابع آرگومان هایی داره که بررسی میکنیم،

Medium : این آرگومان حجم کمتری از تصویر رو در وبلاگ قرار میده که میتونه به سرعت لود صفحه کمک کنه.

the_post_thumbnail('medium');

Large : این آرگومان هم بالاترین کیفیت موجود رو استفاده میکنه.

the_post_thumbnail('large');

و در آخر برای تنظیم سایز تصاویر از حالت زیر میتونیم استفاده کنیم:

the_post_thumbnail( array(100,100) );

به همین راحتی!

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

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

موفق و خوشحال باشین

بای

دسته‌ها
ترفند مرورگر اینترنت

یک ترفند ساده برای کوتاه کردن آدرس در اپرا

سلام

من یه اخلاقی دارم وقتی به کسی (یا حتی چیزی) علاقه مند بشم، هرچی که بشه همیشه پای علاقه ام میمونم (البته نه خیلی افراطی که بخوام بت بسازم!) یکی از اون چیزها که من خیلی دوست دارم اپرا است!

اون قدیم ها که شما یادتون نمیاد! زمان جوونیه ما که مرورگر های ما محدود بودن به IE و مرورگرهایی که بر اساس IE ساخته میشدن و ما با سرعت لاکپشتی وبگردی میکردیم یه مرورگری هم بود که امکاناتی ارائه میداد که مایکروسافت خوابش هم نمیدید! اما به هر حال زیاد معروف نشد و زیاد هم اونجور که باید و شاید روش تبلیغات نشد تا اینکه فایرفاکس اومد و به هر صورت الان اینی شد که میبینین

من انکار نمیکنم که حالم از فایرفاکس به هم میخوره اما به کسانی که ازش استفاده میکنن احترام میزارم 😀

به هر حال میخواستم یه ترفند کوچک برای اپرایی ها بنویسم که خودم بیشتر از اینکه ازش استفاده کنم ازش لذت میبرم!

شما حتمن به غیر از گوگل و یاهو از سیستمهای جستجوی خود سایتها هم استفاده میکنین، مثلن از ۴shared برای پیدا کردن موزیک مورد علاقه ی خودتون یا هر سایت دیگه ای…

اما اگه ما بخواهیم این کار رو ساده تر کنیم میتونیم با اپرا بریم با ۴shared.com و بعد با دو کلیک و دو ثانیه وقت این سایت رو به قسمت جستجوهای مرورگر اضافه کنیم:

و یا یه کار جالبتر کنیم، و به جای اضافه کردن یه گزینه ی جستجو به سایت مورد نظر برای کوتاه کردن آدرس بریم، مثلن من به bit.ly میرم و در اونجا همین کار رو تکرار میکنم:

میبینید که ۴shared و bit.ly به منوی جستجو ها اضافه شدن، ما میتونیم لینکی که میخواهیم کوتاه کنیم رو اینجا paste کنیم و بعد:

حالا ما توی هر سایت یا آدرسی باشیم میتونیم اول آدرسش در نوار آدرس بنویسیم bit (یا هر چیزی که هنگام ساختن custom search با عنوان keyword وارد کردیم) و enter کنیم!

اگه انتظار پست های فضایی دارین از من و این وبلاگ و میاین و میبینین یه چیز خیلی معمولی گفتم واقعن متاسفم! ببخشید که انقدر گرفتارم و دیر به دیر آپ میکنم و وقتی هم آپ میکنم انتظارتون رو براورده نمیکنم

موفق باشین

دسته‌ها
ترفند جی کوئری

یک افکت ساده و زیبای جی کوئری برای تصاویر

سلام

من خیلی وقته پست جدید ندادم و مطالبم بعد از سری آموزشهای طراحی وردپرس دیگه بسیار کم شدند و ۲ دلیل بیشتر نداره!

اول اینکه هرچی میخوام بنویسم یا ترجمه کنم یک نفر از دوستان وبلاگنویس بهتر و کاملتر از من به اون موضوع میپردازن و دوم اینکه بسیار کم وقت دارم برای نوشتن توی وبلاگ! به هر حال امروز یه مطلب آموزشی جی کوئری مینویسم که خیلی دوستش دارم و توی آخرین طرحی که برای یکی از دوستان انجام گرفت ازش استفاده کردم(تقریبن!) برای استفاده از جی کوئری لازم نیست که بگم باید از سایت jQuery.com آخرین ورژن این کتابخانه ی فوق العاده رو دانلود کنید و باز هم لازم نیست که بگم باید این فایل js رو در صفحه وبتون باید وارد کنید(که همه ی اینها در دموی انتهای مطلب انجام شده و به راحتی میتونید تقلب کنید!)

ما میخواهیم یک کار ساده اما زیبا کنیم و اون اینه که یک عکس رو تبدیل کنیم به یک عکس دیگه (با حرکت اشاره گر موس به روی تصویر) برای این کار میتونیم از css و خاصیت background و با استفاده از یک hover ساده انجام بدیم اما ما میخواهیم که این تبدیل به صورت آرام و به قول اجنبی ها fade و animated باشه! خوب همونطور که گفتم اول جی کوئری رو وارد میکنیم:

 

<script type=’text/javascript’ src=’http://yoursite.com/jquery.js’></script>

 

توی این کد فرض شده که فایل جی کوئری در پوشه ی اصلی سایت آپلود شده مثل تمام زمان هایی که میخواهیم از جی کوئری استفاده کنیم باید یک یا چند تابع هم داشته باشیم:

<script>

$(document).ready(function(){

    $("img.a").hover( function() {

         $(this).stop().animate({"opacity": "0"}, "slow");

         }, function() {

         $(this).stop().animate({"opacity": "1"}, "slow");

    });

});

</script>

و استایل (سی اس اس) هم:

 

<style>

   div.fadehover { position: relative; }

   img.a { position: absolute; left: 0; top: 0; z-index: 10; } 

   img.b { position: absolute; left: 0; top: 0; }

</style>

 

و این هم کد اصلی صفحه ( کد html )

 

<div class=”fadehover”>

      <img src=”cbavota-bw.jpg” alt=”” class=”a” />

      <img src=”cbavota.jpg” alt=”” class=”b” />

</div>

 

توضیحات واضحات!

یک سری توضیحات کوچیک اما کلیدی میدم بقیش رو خودتون بفهمین دیگه!

در کد اول (تابع جی کوئری) به خط سوم دقت کنید:

 

$(“img.a”).hover()

 

ما اینجا تگ img رو که class اون a هست هدف قرار دادیم  و opacity هم شفافیت هست که عددی بین ۰ و ۱ میتونه باشه slow هم در زبان انگلیسی به معنای آرام میباشد!! یعنی آروم fade میشه!

استایل هم نیاز به توضیح نداره(حتمن توی سری آموزش طراحی وردپرس یاد گرفتین یه چیزایی)

در کد آخر( html) هم ما دوتا عکس _که آدرسشون رو باید دقت کنین درست وارد کنید_ قرار دادیم که در صفحه اصلیمون قرار بگیرن

برای دریافت دمو روی لینک زیر کلیک کنید

jQuery fade effect demo (2214 دانلود ها)

منبع،تقریبن!:bavotasan.com

دسته‌ها
ترفند

نمایش بهتر توییت های فارسی

سلام

حدود ۲ هفته پیش مطلبی خوندم در مورد استفاده از اسکریپتهای گریس مانکی(که تا اون موقع اسمش هم نشنیده بودم!)  اگه شما هم  نمیدونین اصلن چی هست این گریس مانکی پیشنهاد میکنم این مطلب رو بخونید.

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

من اسکریپتهای بسیار دوست داشتنی و کاربردی در این سایت پیدا کردم که وبگردی رو برای ما خیلی لذت بخش تر میکنه، از اسکریپتهای بازی travian (تراویان) گرفته تا اسکریپتهایی که امکان دانلود ویدئو از youtube رو به ما میدن و اونهایی که Gmail مارو زیبا تر و Google مارو بسیار بهتر میکنند!

خودم هم خواستم عقب نیفتم از قافله و یک اسکریپت بسیار ساده نوشتم که توییت های فارسی که همیشه برای من آزار دهنده بودن رو “راست چین”، “راست به چپ” و “با فونت تاهوما” که برای فارسی بسیار مناسبتره نشون میده.

کافیه اسکریپت رو دانلود کنید و بعد از نصب به twitter برین و از توییت های فارسی دوستانتون لذت ببرین.

اسکریپتی که گفتم برای twitter به همراه یک سری از کدهای مورد علاقه ی خودم رو در لیست زیر میبینین

  1. اسکریپت خود من برای توییتر: RTLtweets (526 دانلود ها)
  2. دانلود ویدئو از سایت های مختلف اشتراک ویدئو مثل youtube , google video , my space و غیره: Download Video
  3. هر کلمه ای رو که با موس انتخاب کنید در صفحه تمام اون کلمات highlight میشن(فقط در فایرفاکس): Text Highlighter
  4. شمارنده ی ۴shared رو با این اسکریپت میتونین ۰ کنید و دیگه معطل اون چند ثانیه هم نشید! : ۴shared download delay bypass
  5. اسکریپت googleFX که صفحه ی گوگل شما رو بسیار جالب میکنه: Google Fx
  6. اسکریپتی که gmail شما رو زیباتر میکنه و همینطور ساده تر!(ادیت شده توسط من برای سازگاری بهتر با زبان فارسی): GMail Professional skin

همه ی این اسکریپت ها از سایت userscript قابل دریافت هستن، برای ورژنهای جدیدتر میتونید به این سایت برین اما فعلن اینها آخرین ورژن ها هستن که توی یک فایل zip برای دانلود میزارم اینجا

دریافت اسکریپت های گریسمانکی (519 دانلود ها)

برای دانلود اسکریپت من هم به لبنک زیر برین رو روی install کلیک کنید،در اپرا باید اسکریپت رو سیو کنید در فولدر opera-scripts و در فایر فاکس هم کافیه روی install کلیک کنید.

RTLtweets (526 دانلود ها)

آپدیت:اسکریپت زیر برعکس اسکریپت بالا عمل میکنه و در حالت پیشفرض توییت هارو راست به چپ نشون میده که ممکنه بیشتر به دردتون بخوره!

RTLTweets2 (470 دانلود ها)