دسته‌ها
آموزش ها برجسته معرفی گرافیک

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

حتما شما هم با اپلیکیشن معروف اینستاگرام که یکی از پر دانلود ترین برنامه های اپ استور اپل، اپلیکیشن سال ۲۰۱۱ و بزرگترین شبکه اجتماعی موبایلی دنیا با حدود ۱۵ میلیون کاربر است آشنایی دارید، برنامه ای که با چند “تاچ” ساده تصاویر شمارو ویرایش میکنه و شکل و شمایل خوبی به عکسهای معمولی و روزانه شما میده و به شما حس خوب عکاس بودن رو میده  : )) و البته امکان به اشتراک گذاری این تصاویر با دوستانتون هم در اختیار شما قرار میده.

ادیت مناسب تصاویر یکی از مهمترین بخشهای عکاسیه، شاید یه عکس معمولی رو عالی کنه و یا یه عکس بد رو قابل تحمل! اما خب این کار آسونی هم نیست، شاید برنامه های فوق العاده ای مثل ادوبی لایت روم  این کار رو برای عکاسها و علاقه مندان به عکاسی آسون‌تر کرده باشن اما باز هم برای کاربران معمولی کار چندان آسونی نیست که ویرایش های حرفه ای داشته باشن و بعضی وقتها این ادیت ها باعث خرابتر شدن تصویر هم میشن، اما برنامه ای مثل اینستاگرام  میاد، درست دستش رو میذاره روی این نقطه و یک سری ادیت های آماده و زیبا برای کاربران فراهم میکنه و بعد میشه یکی از موفق ترین برنامه های بزرگترین مارکت اپلیکیشن های موبایل، یعنی اپ استور…

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

اکشن های فوتوشاپ سلسله کارهایی هستن که روی تصویر انجام میشن و با همین نام (اکشن) ذخیره میشن تا بعدا بشه ازشون به راحتی استفاده کرد تا نیازی به انجام کارهای تکراری نباشه.

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

Program Files\Adobe\Adobe Photoshop X\Presets\ Actions

توضیح اینکه X ورژن فتوشاپ شماست، به طور مثال برای من به جای X نوشته شده :CS5

لینک دانلود:

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

منابع:

http://instagr.am/

articles.businessinsider.com/2011-12-08/tech/30489467_1_android-apps-ipad

blog.spoongraphics.co.uk/articles/10-photoshop-actions-to-create-instagram-style-effects

dbox.tumblr.com/post/5426249009/instagram-filters-as-photoshop-actions

دسته‌ها
برجسته جی کوئری وردپرس

ساخت اسلاید شو برای وردپرس

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

برای ساخت اسلایدشو از جی کوئری استفاده خواهیم کرد و همین طور از پلاگین jQuery Cycle Plugin که یکی از کاربردی ترین پلاگین های جی کوئری هست…

برای اینکه ما از جی کوئری و پلاگین jQuery Cycle در قالب استفاده کنیم باید کارهای زیر رو انجام بدیم:

جی کوئری رو از لینک زیر دانلود کنیم:

http://docs.jquery.com/Downloading_jQuery

پیشنهاد من اینه که نسخه Minified رو دانلود کنید که یک min. قبل از js. داره و حجم کمتری نسبت به نسخه اصلی داره

و پلاگین Cycle رو هم  از لینک زیر دریافت کنید:

http://malsup.com/jquery/cycle/download.html

دو فایل جاوا اسکریپتی که دانلود کردیم رو داخل پوشه ی قالب مورد نظرمون ذخیره میکنیم . (میتونیم فایلها رو در فولدری با نام اختیاری در پوشه ی قالب ذخیره کنیم )

بعد نوبت میرسه به لود کردن این دو فایل در قالب، فایل header.php رو باز میکنیم و کدهای زیر رو در اون مینویسیم:

<script src="<?php bloginfo('template_directory'); ?>/jquery.min.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/jquery.cycle.all.min.js "></script>

نکته ۱: این کدها باید جایی بالاتر از تگ <head> قرار بگیرن.

نکته ۲: اگر فایلهای جاوااسکریپت رو در فولدری در زیر مجموعه ی فولدر قالب ذخیره کردین توجه داشته باشین که آدرس درستی به فایلها بدین، برای مثال اگر فایلها رو در فولدر js ذخیره کردین آدرس فایل جی کوئری ما به صورت زیر خواهد بود:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

خب تا اینجای کار رو که اکثر دوستانی که با تم ها سر و کار دارن حتمن بلد بودن و اگر هم نبودن انقدر ها سخت نبود که نفهمن، هرچند بقیه ی پست هم آنچنان پیچیده نخواهد بود 🙂

حالا فایل متنی زیر رو دانلود کنید و با فرمت php در فولدر قالب ذخیره کنید، یعنی فایلی با نام slideshow.php در فولدر قالب مورد نظر خواهیم داشت.

wp_slideshow (1414 دانلود ها)

برای اینکه اسلاید شو رو در قسمتی که دوست داریم در قالب قرار بدیم، به قسمت مورد نظر سایتمون رفته و کد زیر رو وارد میکنیم:

<?php include(TEMPLATEPATH.'/slideshow.php')?>

کد بالا وارد فولدر قالب شده و slideshow.php رو در قسمتی که کد نوشته شده ایمپورت یا همان include  میکند.

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

برای اینکه به پلاگین جی‌کوئی Cycle بفهمونیم که اسلایدشوی ما کدام قسمت صفحه مون هست باید آی دی تگ اسلاید شوی خودمون رو بهش بفهمونیم، برای اینکار میتونین از مثال های بسیار ساده و پرشمار سایت خود پلاگین در اینجا هم کمک بگیرید!

برای اینکار در جایی بالاتر از تگ هدر، که معمولن در فایل header.php قرار داره کد زیر رو وارد میکنیم:

 

<script>

jQuery(document).ready(function(){
jQuery(‘#slideshow’).cycle({

fx: ‘fade’,

timeout:4000
});
});

</script>

 

 

ما  در اینجا تگی با آی دی slideshow رو هدف قرار دادیم و افکت مورد نظرمون هم fade هست و روی هر عکس ۴ ثانیه صبر میکنه(میتونین در اینجا افکتهای مختلف این پلاگین رو ببینین و در کد خودتون اعمال کنید)  تمام آپشن های پلاگین هم در این صفحه قرار دارن، برای استفاده از هرکدام هم باید با یک , جداشون کنین.

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

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

سلام

از وردپرس ۲٫۹ یک امکان خیلی خوب به وردپرس اضافه شد و اون امکان اضافه کردن تصاویر بندانگشتی (یا همون 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 (2191 دانلود ها)

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

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

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

سلام

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

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

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

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

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

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

  1. اسکریپت خود من برای توییتر: RTLtweets (498 دانلود ها)
  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 برای دانلود میزارم اینجا

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

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

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

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

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

دسته‌ها
معرفی وردپرس

دو افزونه ی مفید برای DreamWeaver

بر اساس wakoopa که یک سایت منحصر به فرد در زمینه آمار نرم افزار های استفاده شده توسط کاربران سراسر دنیاست افرادی که از Dreamweaver محصول کمپانی عظیم Adobeاستفاده میکنند بسیار زیاد و تقریبن پر استفاده ترین نرم افزار برای طراحان وب همین Dreamweaver هست.البته اگه در ایران copyright بود و ما مجبور بودیم حدود ۴۰۰ هزار تومان برای خریدن این برنامه بپردازیم! قطعن طراحان ترجیح میدادن از notepad برای کارهاشون استفاده کنن!!

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

برای اینکار دو extension یا بسته ی الحاقی برای Dreamweaver برای شما معرفی میکنم که خیلی به شما برای طراحی و کد نویسی کمک خواهد کرد.

اولی ThemeDreamer for wordpress ساخته ی Virtusoft است که یک منو به منوهای insert در DW اضافه میکنه که تقریبن تمام نیازهای شما برای کدها رو برآورده میکنه، میتونید این extension رو از لینک زیر دریافت کنید.

theme dreamer wordpress (1203 دانلود ها)

extension بعدی tagstention است که به ما کمک بیشتری میکنه، حتما دیده اید وقتی دارین مثلا در css کد نویسی میکنید وقتی حرف b رو مینویسید یک صفحه باز میشه که لیست کدهایی که با b شروع میشن رو به صورت اتوماتیک نمایش میده اما برای وردپرس چطور؟ چه چیز بهتر از اینکه وقتی مینویسیم blo یک لیست باز شه که کد های وردپرس که با blo شروع میشن رو نمایش بده؟! مثلا bloginfo !! و حتی وقتی روی bloginfo کلیک میکنیم آرگومان های اون رو هم نمایش بده!

Tagstention (1042 دانلود ها)

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

بنابراین اگر شما هم سری آموزشهای طراحی سایت بر پایه وردپرس رو دنبال کرده اید و حالا دیگه حوصله ی کار با notepad یا نوشتن کدها رو ندارین لازم نیست با خونریزی سایت طراحی کنید و همین الان این دو extension رو روی Dreamweaver چهارصد دلاری خودتون (که احتمالن مثل من واسه اش ۱۰۰۰ تومان هم ندادین) نصب کنید و از طراحی لذت بیشتری ببرید.

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

آموزش طراحی قالب وردپرس #۱۶(جمع بندی-پایان)

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

لیست آموزشهای قالب وردپرس

امروز روز آخریه که طراحی میکنیم یعنی جمع بندی یک سری نکات است که من توی این مدت یادداشت کردم که بگم.

اول اینکه برای استفاده از نقل قول در نوشته ها میتونید روی علامت اون در قسمت ویرایش نوشته کلیک کنید و اون قسمت نوشته رو از بقیه متمایز کنید مثل زمان هایی که من کدها رو جدا میکنم.

ویرایش گر با کلیک شما بر روی این علامت نوشته ی انتخاب شده رو داخل تگ blockqute قرار میده و حتما میدونید برای استایل یک تگ در css چه باید کرد:

blockquote{

margin:8px;

}

نکته: سعی کنید در فایل css اول از تگ های عمومی مثل body و مثلن تگهای h و blockquote شروع کنید، یعنی الان این کد رو بالاتر از wrapper بنویسید.

یکم margin میدیم بهش تا از اطراف یک فاصله ای داشته باشه.

blockquote{

margin:8px;

padding:8px 25px 8px 25px;

}

میتونید در فایل rtl هم padding دوم و چهارم (چپ و راست) رو تغییر بدین با ندین!

همینطور میتونید رنگش رو عوض کنید و یک border دورش بکشید:

blockquote{

margin:8px;padding:8px 25px 8px 25px;

background:#999;border:1px #069 solid;

 

}

نکته ی کوچک دیگه اینه که میتونید button ها یا همون دکمه هاتون رو در تمام سایت به یک شکل در بیارین به ایسن صورت که به همه ی اونها یک کلاس اختصاص بدین مثل buttons و اونها رو به شکل مورد نظر تغییر بدین.

در مورد navigation در single.php مثلا شما میخواهید در دو طرف به جای علامتهایی که قبلا نوشتیم ۲ عکس قرار بدین مثل شکل زیر:

برای اینکار وارد single.php میشیم و کد زیر رو جایگزین کد نوشته شده در تگ navigation میکنیم:

<span class=”prev”><?php previous_post_link(‘ %link’) ?></span>

<span class=”next”><?php next_post_link(‘ %link ‘) ?></span>

<div class=”fixed”> </div>

در اینجا لینک قبلی و بعدی رو جداگانه در تگهای span قرار دادیم.

و در style.css کد زیر رو مینویسیم:

.fixed{

clear:both;

}

.navigation .prev a {

background:url(img/prev.gif) no-repeat;

padding-left:22px;

float:left;

height:18px;

line-height:16px;

}

.navigation .next a {

background:url(img/next.gif) no-repeat;

padding-right:22px;

float:right;

height:16px;

line-height:16px;

}

img یک فولدر در amoozesh است.

میتونید چند رنگ از این فلش ها رو از لینک زیر دانلود کنید:

navigation (815 دانلود ها)

fixed فقط به منظور clear:both ساخته شده و سود دیگری ندارد!

همونطور که میدونید یک سری از اینها سلیقه ای و یک سری نیمه واجبن! دیگه احتمالن خیلی راحت تر با این کدها بازی میکنید و من فقط راهنمایی میکنم.

یک ترفند هم بگم

مثلا شما یک منو در یک تم وردپرس میبینید که صفحات رو لیست میکنه(مثلا تم من) شما از اونجایی که تم رو دانلود کردید و همه ی فایلها رو دارین میتونین با استفاده از inspect elements اون قسمت و آی دی و غیره رو پیدا کنید و همچنین در فایل css تم قسمت های مربوط به منو رو در تم خودتون قرار بدین!

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

مثلا این منوی سایت من هست (تمی که در حال حاضر استفاده میکنم) و میتونید دانلود کنید و با یکسری تغییرات ازش استفاده کنید.

در مورد سایدبار و تعداد اون!

شما میتونید حتی در زیر سایت هم قسمتهایی مثل سایدبار درست کنید و از widget هم در اونها استفاده کنید.

برای تعداد ساید بار تا اونجایی که من میدونم محدودیتی نیست! مثلا من اگه بخوام میتونم دو سایدبار در کنار هم داشته باشم برای اینکار به صورت زیر عمل میکنیم:

اول وارد functions.php میشیم و عدد ۱ رو به ۲ تغییر میدیم و یا میتونیم مثل فایل زیر خودمون برای سایدبارها اسم بزاریم:

اگر اسمی برای سایدبارها انتخاب نکنیم وردپرس اتوماتیک براشون اسم قرار میده (شماره بندی میکنه) و نیازی هم نیست که کار خاصی بکنید فقط کاری رو که در sidebar.php انجام دادیم تکرار میکنیم و کد زیر رو به انتهای sidebar.php اضافه میکنیم:

<div id=”right-sidebar” class=”sidebar”>

<ul>

<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

<?php endif; ?>

</ul>

</div>

همونطور که میبینید من یک آی دی هم اضافه کردم که برای css به دردمون میخوره.

اگر function.txt رو که من نوشتم رو دانلود کردین لازمه که در sidebar.php 2 تغییر ایجاد کنید و همون نامهایی که در function هستند رو به سایدبار مربوطه به صورت زیر اضافه کنید:

<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘left sidebar’) ) : else : ?>

به همین راحتی!فقط مونده استایل کردن که باید خودتون بتونین انجام بدین یعنی مثلا width رو در sidebar. تعییر بدین و نصف کنید یا از این قبیل کار ها

مورد دیگه به داشبورد مربوط میشه و قسمت نمایش یا appearance که تم ها در اون قرار دارن اگه میخواهید عکس تمتون در این صفحه سفید نباشه و نمایش داده بشه میتونید با هر برنامه ای خواستید عکسی از صفحه ی اصلی سایت بگیرید و با ابعاد مناسب در فولدر آموزش به اسم screenshot قرار بدین مثل این


این هم از این،برای فارسی کردن فرم نظر دهی (برای کامپیوتر هایی که کیبورد فارسی ندارند) به سایت ashoob.net برین و آموزش موجود در اون رو بخونید و farsitype.js رو هم دانلود کنید و طبق آموزشهایی که قبلن گفته شده در هدر include کنید.(من قبلا فرم نظردهی رو با این اسکریپت سازگار کردم) و احتمالن مشکلی نخواهید داشت!

farsitype.js (593 دانلود ها)

و آخرین نکته ای که به ذهنم رسیده و میرسه اینه که بتونید از __ برای ترجمه ی قسمتهایی از توابع php موجود استفاده کنید.

مثلا برای نمایش فارسی تعداد نظرات در زیر هر پست میتونید به شکل زیر عمل کنید و کد زیر رو جایگزین خطی کنید که مربوط به نمایش لینک نظر دهی در postmetadata در فایلهایی مثل index.php بود:

<?php comments_popup_link(__(‘No comments’, ‘tenet’), __(‘one comment’, ‘tenet’), __(‘% comments’, ‘tenet’)); ?>

تابع __ مثل e_ عمل میکنه و کارش تقریبن همونه پس چیز خاصی نیست! با رفتن به languages و باز کردن فایل زبان میتونید با بارگذاری مجدد اضافه شدن این سه رشته یا نوشته رو ببینید.

امیدوارم این سری آموزش کمکی به شما کرده باشه، همونطور که به من کمک کرد تا دوستای خوبی مثل شما عزیزان رو پیدا کنم.

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

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

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

ممنون که منو همراهی کردین.

به امید دیدار

تی سی!

بای بای

 

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

آموزش طراحی قالب وردپرس #۱۵(فارسی سازی)

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

لیست آموزشهای قالب وردپرس

خوب، امروز سراغ فارسی کردن تمی میریم که خودمون درست کردیم!

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

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

آموزش طراحی قالب وردپرس #۱۴(امکان نظردهی)

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

لیست آموزشهای قالب وردپرس

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

امروز باید به صفحه ی پست ها یا همون single.php یک فرم نظر دهی اضافه کنیم که کاربران بتونن نظرشون رو راجع به مطلب نوشته شده بنویسن.

ما اول باید یک فایل با فرمت php در فولدر تم بسازیم به نام: comments.php

و کد موجود در فایل زیر رو در comments.php  کپی کنیم.

comments.txt (2276 دانلود ها)

این کد رو من یکم باهاش ور رفتم اما چون مال خیلی وقت پیشه و من اوج حافظه! یادم نیست که چه تغییراتی توش دادم و چه اشکالاتی داره یا نه! اما من از همین توی سایت خودم استفاده میکنم و شما هم میتونین از تم classic یا default که روی خود وردپرس هستند هم استفاده کنین.

حالا میمونه یک سری کد css که به فرم ما شکل درستی بده.

بعد از دانلود فایل زیر محتویاتش رو در style.css کپی کنید(بهتر است قبل از فوتر کپی کنید.)

comments-stylecheet.txt (1189 دانلود ها)

در ضمن این comment form با farsitype ، اسکریپت معروف کاوه احمدی هم سازگاره و لازم نیست توش تغییری ایجاد بشه بعدن میگم چه کاری با این اسکریپت میشه کرد!

بعد از ذخیره کردن فایل میریم سراغ single.php که این فرم رو باید در بر داشته باشه.

اگه همون طور که قبلا گفته بودم کد ها رو با رعایت فاصله و تمیز نوشته باشید احتمالا با پیدا کردن div/ مربوط به entry مشکلی نخواهید داشت اما اگه اینکار رو نکردین و خرچنگ و این حرفا از عکس زیر کمک بگیرین تا ببینین کجا باید کد زیر رو بنویسین:

<div class=”comments-template”>
<?php comments_template(); ?>
</div>

این تابع comments.php رو لود میکنه و میاره در زیر نوشته ی ما در single.php

بعد از ذخیره ی فایل میتونید تغییرات رو ببینید.

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

این هم از این!

بیشتر از ۹۰ درصد تم هایی که میبینید همین کارهایی که ما انجام دادن نه چیزی بیشتر از اون!

فقط باید با css خیلی بازی کنید و هرچی میتونین تغییر بدین توش و اصلا هم نگران نباشید که اتفاق بدی بیافته! کافیه یه بک آپ داشته باشید که اگه خیلی گند زدین از اون استفاده کنین!

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

در پست بعدی تم رو با فارسی سازگار خواهیم کرد.

در واقع کار اصلی رو یاد گرفتیم و مونده ترفند و تجربه!

مواظب باشید

بابای