Profile

Cover photo
34,347 views
AboutPostsCollectionsPhotosVideos

Stream

Themeyab

Shared publicly  - 
 
هدیه این ماه تم‌یاب، قالب "آیگو"
تا انتهای دی‌ماه می‌توانید این قالب را به رایگان دریافت کنید.

http://tmyb.ir/nbsxz

#themeyab #تم_یاب #قالب_رایگان #قالب_سایت #قالب_وردپرس #قالب_استاتیک


 ·  Translate
1
1
Add a comment...

Themeyab

Shared publicly  - 
 
نکات طراحی رابط کاربری
فاصله صحیح بین المان‌ها

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

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

http://tmyb.ir/kl5AR


#تم_یاب #طراحی_قالب_سایت #قالب_سایت #رابط_کاربری #نکات_طراحی #themeyab #UI #UX

 ·  Translate
1
Add a comment...

Themeyab

Shared publicly  - 
 
نکات طراحی رابط کاربری
محدوده حساس لینک‌ها

تا حالا چندبار برای کلیک کردن روی لینک‌های خیلی کوچک مشکل داشته‌اید (مخصوصا اگر از لپ تاپ استفاده میکنید.) ؟
یکی از المان‌هایی که مطمئینا در همه صفحات اینترنتی وجود دارد لینک است. لینک ها نقش مهمی را در صفحات اینترنتی ایفا میکنند چون وظیفه اصلی ناوبری و پیمایش در سایت شما بر عهده آنهاست. جدا از محل قرارگیری لینک ها که در هر طراحی متفاوت است مورد مهم دیگری که وجود دارد دسترس پذیری و قابلیت لمس راحت آنهاست. همیشه سعی کنید محدوده حساس و کلیک پذیر لینک ها را به صورت باکسی با مقداری حاشیه ایجاد کنید تا کاربران راحت تر بتوانند بر روی لینک مورد نظرشان کلیک کنند.

در عکس هر ۲ روش نشان داده شده است و تکه کد مورد نیاز برای حل این مشکل هم ذکر شده. انتخاب با خود شماست.

a {
display: block;
padding: 10px;
}


http://tmyb.ir/kl5AR


#تم_یاب #طراحی_قالب_سایت #قالب_سایت #رابط_کاربری #نکات_طراحی #themeyab #UI #UX



 ·  Translate
1
Add a comment...

Themeyab

Shared publicly  - 
 
نکات طراحی رابط کاربری
استفاده از کنتراست برای جلب توجه

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

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

http://tmyb.ir/kl5AR

#تم_یاب #طراحی_قالب_سایت #قالب_سایت #رابط_کاربری #نکات_طراحی #themeyab #UI #UX




 ·  Translate
9
1
Add a comment...

Themeyab

Shared publicly  - 
 
چرا سایت شما به طراحی ریسپانسیو نیاز دارد؟
شما روی چه دیوایسی این متن را مطالعه می‌کنید؟ تبلت ، تلفن هوشمند ، کامپیوتر شخصی و یا حتی لپ تاپ ؟ امکان داره در حال حاضر شما از هریک از این دیوایس ها برای خواندن این پست استفاده کنید و نفر دیگر در حال استفاده از یکی دیگر از دستگاه های ذکر شده باشد. این همان دلیلی است که به خاطر آن ما باید مطمئین باشیم که سایتمان به خوبی در همه سایزهای صفحات نمایش باز می‌شود. در ۵ سال گذشته آمار استفاده از موبایل و تبلت برای گشت و گذار در وب به میزان زیادی افزایش یافته و این دلیل قانع کننده ای برای اهمیت یافتن طراحی ریسپانسیو می‌باشد.

طراحی ریسپانسیو چیست؟
طراحی سایت ریسپانسیو (RWD) که در فارسی به آن طراحی واکنشگرا نیز گفته می‌شود یک روش در طراحی سایت است که هدف آن ایجاد تجربه مطلوب در نمایش ، پیمایش و خواندن متون با کمترین میزان اسکرول و ریسایز کردن در دیوایس های مختلف است (از تلفن های هوشمند گرفته تا مانیتورهای بزرگ) .
به معنی ساده‌تر ، طراحی ریسپانسیو سایت شما را قادر می‌سازد که در انواع دیوایس ها با هر سایز صفحه نمایش به بهترین شکل و بدون هیچگونه مشکلی نمایش یابد.
مانند آب که خود را به شکل ظرفی که آن را در آن ریخته‌ایم میکند ، سایت ریسپانسیو هم خودش را هماهنگ با رزولیشن صفحه‌ای که در آن باز شده است می‌کند.
در ۲ ماه گذشته ۱۳ درصد از بازدیدکنندگان تم یاب از موبایل یا تبلت‌های خود وارد سایت ما شده اند که این آمار هر روزه در حال افزایش است. این بدین معناست که در صورتی که بازدید کنندگان تجربه خوبی را در نمایش این سایت در موبایل یا تبلتشان نداشته باشند در دفعات بعد دیگر به تم یاب سر نخواهند زد.

مزایای طراحی ریسپانسیو چیست؟
۱- بزرگترین نکته مثبت طراحی ریسپانسیو سایت شما این است که کاربرانی که با موبایل ، تبلت یا سایر دستگاه ها وارد سایت شما شده اند تجربه خوبی از گشت و گذار در سایت دارند. مهم نیست که سایت شما یک وبلاگ شخصی باشد ، یا سایت شرکت و یا حتی فروشگاه اینترنتی ؛ شما با داشتن یک قالب ریسپانسیو کاربران را نسبت به سایت خود وفادار خواهید کرد.

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

۳- همچنین با داشن قالب ریسپانسیو شما ترسی از آینده نخواهید داشت. شما مطمئین هستید که همه دستگاه هایی که در آینده نیز تولید خواهند شد باز هم به بهترین شکل سایت شما را نمایش خواهند داد.

۴- موتورهای جستجوی اینترنتی هم با توجه به افزایش تعداد کاربران موبایل و تبلت برای ارائه نتایج بهتر، رتبه سایت هایی که در موبایل به درستی نمایش داده می‌شوند را افزایش داده‌اند. به عنوان مثال اگر شما با موبایل یا تبلتتان در گوگل کلمه فروش قالب را جستجو کنید خواهید دید که اولین نتیجه گوگل سایت تم یاب است و در کنار توضیحات نوشته “Mobile-friendly” نقش بسته که نشان از پشتیبانی کامل تم یاب از موبایل و تبلت ها دارد.

http://tmyb.ir/CiqDU

#تم_یاب #ریسپانسیو #themeyab #mobilefriendly #theme #قالب #قالب_سایت
 ·  Translate
16
4
Add a comment...

Themeyab

Shared publicly  - 
 
شخصی سازی پیشخوان وردپرس
همه مدیران سایت‌های وردپرسی ساعت‌هایی از وقتشان را در پنل مدیریت سایت خود سپری می‌کنند. اما نکته‌ای که وجود دارد این است که برخلاف انتظار اکثر آنها خیلی ساده از صفحه اول پنل مدیریت سایت وردپرسی (یا همان پیشخوان) رد می‌شوند و معمولا این صفحه کاربرد زیادی برایشان ندارد. یکی از دلایل این اتفاق عدم وجود ابزارک‌های مفید و کاربردی در پیشخوان است.

شاید بارها پیش آمده باشد که از خودتون بپرسید آیا امکان شخص سازی داشبورد وردپرس وجود دارد یا خیر؟ امروز با استفاده از هک‌های وردپرس نحوه انجام این کار رو برای شما شرح خواهیم داد.

۱- غیرفعال کردن پیغام آپدیت وردپرس
برای غیرفعال کردن پیغام آپدیت وردپرس فایل functions.php موجود در فولدر قالب را باز کرده (اگر این فایل وجود نداشت اون رو بسازید) و کد زیر رو بهش اضافه کنید:

add_action('admin_menu','wphidenag');
function wphidenag() {
remove_action( 'admin_notices', 'update_nag', 3 );
}
از این به بعد دیگر هیچ پیغامی برای آپدیت داخل داشبورد نمایش داده نمی‌شود. اما یادتان باشد که همیشه نسخه وردپرس سایت را به روز نگه دارید.

۲- تغییر متن فوتر پیشخوان وردپرس
برای تغییر متن فوتر کافیه کد زیر را در فایل functions.php قالب وردپرس قرار دهید:
function remove_footer_admin () {
echo "تمام حقوق سایت نزد <a href='http://www.themeyab.com'>تم یاب</a> محفوظ است.";
}

add_filter('admin_footer_text', 'remove_footer_admin');

۳- حذف ابزارک های پیشفرض پیشخوان وردپرس
ساده‌ترین راه برای عدم نمایش ابزارک ها در صفحه پیشخوان ، استفاده از منوی «تنظیمات صفحه» است که در بالا سمت چپ صفحه قرار دارد.
اما راه دیگری نیز برای این کار وجود دارد که همان استفاده از فایل functions.php موجود در پوشه قالب است. با این روش می‌توانید به صورت دائم ابزارک‌هایی را از داشبورد پنل مدیریت حذف کنید. برای این کار کافی است تکه کد زیر را به این فایل اضافه کنید:
function example_remove_dashboard_widgets() {

global $wp_meta_boxes;

unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);

unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

۴- افزودن ابزارک اختصاصی به پیشخوان وردپرس
بعد از حذف ابزارک های اختصاصی اگر میخواهید ابزارک‌های دلخواه و اختصاصی شما در پیشخوان وردپرس نمایش داده شود باز به سراغ فایل functions.php بروید و ابزارک دلخواه خودتون رو بسازید.
function example_dashboard_widget_function() {
echo " پایگاه فروش و خرید قالب وب سایت | تم یاب";
}

function example_add_dashboard_widgets() {
wp_add_dashboard_widget('example_dashboard_widget', 'تم یاب', 'example_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );
اکنون اگر به پیشخوان مدیریت وردپرس مراجعه کنید خواهید دید که ابزارک تم یاب به سایت اضافه شده است.این دستور یک ابزارک با نام «تم یاب» و با پیام «پایگاه فروش و خرید قالب وب سایت | تم یاب» می‌سازد و به کاربر مورد نظر در پیشخوان وردپرس نمایش می دهد.

۵- غیرفعال کردن منوها
برای سفارسی سازی بیشتر پیشخوان وردپرس می‌توانید منو هایی که نیاز ندارید را از دید مشتری یا مدیر سایت پنهان کنید. برای این کار فایل functions.php رو باز کرده و تکه کد زیر رو به آن اضافه کنید.
function remove_menus()
{
global $menu;
global $current_user;
get_currentuserinfo();

if($current_user->user_login == 'clients-username')
{
$restricted = array(__('Posts'),
__('Media'),
__('Links'),
__('Pages'),
__('Comments'),
__('Appearance'),
__('Plugins'),
__('Users'),
__('Tools'),
__('Settings')
);
end ($menu);
while (prev($menu)){
$value = explode(' ',$menu[key($menu)][0]);
if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
}// end while

}// end if
}
add_action('admin_menu', 'remove_menus');

نام کاربری مورد نظرتون رو با clients-username جایگزین کنید و منو هایی که می خواید برای این کاربر در دسترس باشند را از کد بالا حذف کنید.
با تکه کد اضافه شده منوها از شکل سمت راست به شکل سمت چپ تغیر کرده اند.

۶- تغیر لوگو صفحه ورود
برای تغییر لوگو صفحه ورود وردپرس کد زیر رو به فایل functions.php اضافه کنید.

function custom_login_logo() {
echo 'h1 a { background: url('.get_bloginfo('template_directory').'/logo.png) 50% 50% no-repeat !important; }';
}
add_action('login_head', 'custom_login_logo');
تصویر لوگو مورد نظرتون رو در پوشه قالب خود آپلود کنید و نام اون را به جای logo.png قرار دهید.

#وردپرس #شخصی_سازی_وردپرس #ورد_پرس #تم_یاب #قالب_سایت #قالب_وردپرس #قالب_ورد_پرس #wordpress #themeyab #وردپرس_فارسی

http://tmyb.ir/FPA7A


 ·  Translate
همه مدیران سایت‌های وردپرسی ساعت‌هایی از وقتشان را در پنل مدیریت سایتشون سپری می‌کنند. اما نکته‌ای که وجود داره اینه که برخلاف انتظار خیلی از این افراد خیلی ساده از صفحه اول پنل مدیریت سایت وردپرسی (یا همان پیشخوان) رد می‌شوند و معمولا این صفحه کاربرد زیادی برایشان ندارد. یکی از دلایل این اتفاق عدم وجود ابزارک‌های مفید و کاربردی در پیشخوان است.
1
1
Add a comment...

Themeyab

Shared publicly  - 
 
نکات طراحی رابط کاربری
فاصله خط‌های متون از یکدیگر

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

در تصویر ، تکه کد یک خطی برای مقدار دهی به این خصوصیت ذکر شده است و شما می‌توانید نتیجه آن را نیز مشاهده کنید.


p {
line-height: 20px;
}



http://tmyb.ir/kl5AR


#تم_یاب #طراحی_قالب_سایت #قالب_سایت #رابط_کاربری #نکات_طراحی #themeyab #UI #UX

 ·  Translate
1
Add a comment...

Themeyab

Shared publicly  - 
 
نکات طراحی رابط کاربری
فضای خالی (به کاربران اجازه نفس کشیدن بدهید)
استفاده هوشمندانه از فضای سفید در طراحی وب سایت بسیار مهم است. استفاده از فضای سفید خالی بین متون و باکس ها علاوه بر اینکه باعث می‌شود حواس و چشم بازدیدکنندگان بر روی المان های خاص که برای شما ارزش بیشتری دارند متمرکز شود. همچنین باعث می‌شود خوانایی متون نیز بالا رود.

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

http://tmyb.ir/kl5AR

#تم_یاب #طراحی_قالب_سایت #قالب_سایت #رابط_کاربری #نکات_طراحی #themeyab #UI #UX
 ·  Translate
5
1
Add a comment...

Themeyab

Shared publicly  - 
 
تغییر رنگ نوار ناتیفیکیشن تلفن های اندروید متناسب با سایت شما
یکی از مشکلاتی که اغلبا طراحان وب سایت با آن مواجه هستند محدودیت های موجود در طراحی سایت برای دیوایس‌های موبایل یا تبلت است. گاهی طراحان مجبورند تعدادی از المان های اضافه‌تر که برای زیبایی بیشتر در نسخه دسکتاپ استفاده کرده‌اند را در نسخه موبایل و تبلت حذف کنند. این موضوع ممکن است باعث دلزدگی کاربران این دیوایس‌ها شود زیرا دیگر از آن شور و شوق و زیبایی نسخه دسکتاپ خبری نیست.

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

یکی از این روش‌ها این است که شما می‌توانید زمانی که کاربر سایت شما را در موبایلش باز کرد اگر تلفن همراه آن یک تلفن اندرویدی بود Notification Bar آن را به رنگ سایت خود تغییر رنگ دهید.
این قابلیت درحال حاضر تنها برای تلفن های هوشمند با سیستم عامل Android 5 به بالاتر و مرورگر گوگل کروم کار می‌کند. به عنوان مثال اگر تلفن همراه شما از اندروید ۵ بهره می‌برد سایت تم یاب را در مرورگر گوگل کروم باز کنید خواهید دید که رنگ محدوده ناتیفیکشن گوشیتان به رنگ آبی تم یاب تغییر می‌کند. رنگی که در حالت عادی مشکی + سفید است.
درعکسی که در انتهای مطلب آمده است تفاوت میان استفاده و عدم استفاده از این قابلیت را مشاهده می‌کنید.
برای این کار شما می‌توانید از متاتگ theme-color در قسمت <Head> قالب خود استفاده کنید. در اینجا می‌توانید کد مورد نیاز را مشاهده کنید. تنها کافی است کد هگزادسیمال رنگ مورد نظر را جایگزین کد رنگ فعلی کنید.

<html>
<head>
<meta name="theme-color" content="#1f90e0">
</head>

<body>...</body>
</html>

همانطور که اعلام شد در حال حاضر تنها تلفن های هوشمند اندروید ۵ و بالاتر با نرم افزار گوگل کروم از این قابلیت پشتیبانی می‌کنند اما شاید در آینده سایر سیستم عامل ها یا مرورگرها نیز این قابلیت را به لیست خود اضافه کنند.

http://tmyb.ir/Pzw7T


#themeyab #تم_یاب



 ·  Translate
1
Add a comment...

Themeyab

Shared publicly  - 
 
لیست قالب های ریسپانسیو تم یاب را از لینک زیر مشاهده نمایید

#قالب_سایت #تم_یاب #mobilefriendly #themeyab #خریدقالب #ریسپانسیو




 ·  Translate
1
Add a comment...
Themeyab's Collections
Story
Tagline
Themeyab.com
Introduction
پایگاه خرید و فروش تم فارسی وب سایت (وردپرس، فروشگاهی، ...)
Contact Information
Contact info
Phone
+9821-88702528
Email