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

اضافه کردن فیلد سفارشی به ادیتور محصول: ترفندی برای وردپرس

راسان وب — Mon, 25 Aug 2025 14:39:15 +0330

وقتی صحبت از مدیریت فروشگاه آنلاین می‌شود، هر جزئیات کوچک می‌تواند تجربه کاربری را بهبود دهد و فروش بیشتری برایتان به همراه بیاورد. یکی از این جزئیات مهم، اضافه کردن فیلد سفارشی به صفحه‌ی ویرایش محصول است.فرض کنید می‌خواهید اطلاعاتی مثل "تاریخ انقضا"، "گارانتی"، "ویژگی خاص" یا حتی "لینک ویدیو آموزشی" را مستقیماً در صفحه محصول نمایش دهید. برای این کار لازم نیست افزونه‌های سنگین نصب کنید؛ کافیست یک فیلد کوچک به ادیتور محصول اضافه کنید.چرا باید فیلد سفارشی اضافه کنیم؟انعطاف بیشتر: هر فروشگاه نیازهای خاص خود را دارد.بهبود تجربه کاربری: مشتری‌ها راحت‌تر به اطلاعات دسترسی پیدا می‌کنند.افزایش نرخ تبدیل: شفافیت بیشتر = اعتماد بیشتر = فروش بیشتر.مراحل اضافه کردن فیلد در ادیتور محصول (مثال برای وردپرس/ووکامرس)هوک مناسب پیدا کنید: در ووکامرس از هوک‌هایی مثل woocommerce_product_options_general_product_data استفاده می‌کنیم.کد اضافه کنید: در فایل functions.php یا پلاگین اختصاصی، کد زیر را قرار دهید:add_action('woocommerce_product_options_general_product_data', 'add_custom_warranty_field'); function add_custom_warranty_field() { woocommerce_wp_text_input(array( 'id' => '_warranty_period', 'label' => 'گارانتی (ماه)', 'description' => 'تعداد ماه‌های گارانتی محصول را وارد کنید', 'desc_tip' => true, 'type' => 'number', 'custom_attributes' => array( 'min' => '0', 'step' => '1' ) )); } // 2. ذخیره مقدار فیلد گارانتی هنگام ذخیره محصول add_action('woocommerce_process_product_meta', 'save_custom_warranty_field'); function save_custom_warranty_field($post_id) { $warranty = isset($_POST['_warranty_period']) ? sanitize_text_field($_POST['_warranty_period']) : ''; update_post_meta($post_id, '_warranty_period', $warranty); } // 3. نمایش گارانتی در صفحه محصول add_action('woocommerce_single_product_summary', 'display_custom_warranty', 7);در کد بالا ما نمایش گارانتی محصول رو اضافه کردیم و نتیجش شد عکس زیر:اضافه کردن آیتم گارانتی حالا با کد زیر هر جای سایت خواستین نمایش میدین:با همین ترفند ساده، بدون نیاز به افزونه‌های سنگین، می‌توانید فروشگاهتان را حرفه‌ای‌تر کنید و تجربه کاربری بهتری به مشتری‌ها بدهید.

سئوی لعنتی: وقتی گوگل دندوناشو نشون میده

راسان وب — Sat, 23 Aug 2025 01:36:18 +0330

همه فکر می‌کنن سئو یه چیز ساده‌ست: کلمه کلیدی، بک‌لینک، محتوا.ولی کسی نمی‌دونه وقتی میری عمیق توی سئو، انگار داری با موجودات ماورایی مذاکره می‌کنی… موجوداتی که اگه خوششون نیاد، سایتتو می‌بلعن.فصل اول: تحقیق کلمات کلیدی یا احضار ارواح؟اول کار رفتم تحقیق کلمات کلیدی.خواستم بنویسم: «خرید کفش ارزان».ولی ابزار سرچ بهم پیشنهاد داد: «قیمت روح دست دوم».گفتم: «عه، لابد باگ داره.»ولی هرچی سرچ می‌کردم، کلمات کلیدی عجیب‌تر می‌شدن:— «سئوکار جن‌گیر تهران»— «بهترین پلاگین برای احضار»— «بک‌لینک از جهنم رایگان»فصل دوم: بک‌لینک‌های ترسناکخب دیگه وقت بک‌لینک گرفتن بود. رفتم سراغ سایتای معتبر.یکی از سایتا گفت: «ما بک‌لینک نمی‌فروشیم.»ولی فرداش خودش برام ایمیل زد:«لینک شما رو گذاشتیم، فقط لطفاً نصف شب با آینه بازی نکن.»رفتم سایتو نگاه کردم، لینک من بود، ولی تو بخش «تقدیم به ارواح سرگردان»!فصل سوم: تولید محتوایی که تولیدم کردگفتم محتوای یونیک می‌نویسم، خودم نویسنده‌ام.شروع کردم: «۱۰ راه برای افزایش بازدید سایت…»هنوز خط دومو ننوشته بودم که کیبورد خودش تایپ کرد:«راه یازدهم: قرارداد با تاریکی.»منم گفتم: «خب بذار بمونه، شاید سئو دوس داشته باشه!»فصل چهارم: سئوی جهنمیسئو رو تست کردم.Yoast با اون چراغ سبزش گفت:— «تبریک! همه‌چی عالیه، شما نابغه‌ای!»یه لحظه غرور گرفتم. ولی هنوز دو دقیقه نگذشته بود که یه ایمیل از گوگل برام اومد:«دمت گرم! همینو بیاری بالا، ما خودمون سایت بقیه رو دی‌اکتیو می‌کنیم.»(کنار ایمیل یه ایموجی آتیش هم بود… نمی‌دونم چرا حس کردم بوی گوشت سوخته میاد.)همه‌چی عالی بود. رتبه یک گوگل، بازدید روزانه چند هزار تا، حتی مادربزرگم سرچ کرده بود «طرز درست کردن ترشی بادمجون»، اولین نتیجه سایت من بود!ولی خب… یه مشکل کوچولو داشت: هر کی وارد سایت می‌شد، فرداش دیگه تو واتساپ سین نمی‌کرد.نه آنلاین، نه استوری، هیچی.آخرین پیام یکی‌شون این بود:«اینجا اینترنتش ترکونده، سرعتش از فیبر نوری هم بیشتره… فقط یه کم گرمه. خیلی گرمه…»فصل پنجم: الگوریتم‌های خون‌آشامهمه می‌گن الگوریتم گوگل هوشمنده. ولی کسی نمی‌دونه این هوش از کجا میاد.پاندا؟ پنگوئن؟ نه عزیزم… اینا فقط اسم رمز بودن.اصل قضیه اینه که یه موجود زنده اون پشت نشسته. هر بار سایتت آپدیت میشه، اون یه ذره از روحتو می‌مکه. واسه همینم وقتی سئوت خوب میشه، خودت زرد و نحیف میشی.نتیجه‌گیری (که شاید آخرین نصیحتم باشه)بچه‌ها، سئو فقط کلمات کلیدی و بک‌لینک نیست. یه معامله‌ست. یا با گوگل معامله می‌کنی، یا با وجدانت.فقط یادت باشه: وقتی چراغ Yoast سبز شد، مطمئن شو این چراغ سبز به سمت موفقیته… نه به سمت دروازه‌ی جهنم.

از ایده تا صفحه وب: مقدمات طراحی سایت

راسان وب — Fri, 22 Aug 2025 00:03:26 +0330

خب بذار روراست بگم: این روزا هر کاری که می‌خوای بکنی، از یه مغازه کوچیک سر کوچه گرفته تا یه استارتاپ خفن و حتی کارای شخصی مثل معرفی نمونه‌کارا، همه‌چی یه جورایی به وبسایت گره خورده. یعنی دیگه داشتن یه سایت مثل داشتن کارت ویزیت یا حتی بهتر از اون شده. چون کارت ویزیت رو شاید کسی گم کنه، ولی سایت همیشه آنلاینه و هرکسی خواست می‌تونه پیدات کنه.اما خب سوال اصلی اینه:چجوری می‌شه یه سایت درست کرد؟ اصلاً از کجا باید شروع کرد؟ نکنه باید برنامه‌نویس حرفه‌ای باشی؟ یا لازم داره از اول HTML و CSS تا آخرین فریم‌ورک‌ها رو قورت بدی؟نگران نباش. این مقاله رو نوشتم که مقدمات طراحی سایت رو خیلی ساده و خودمونی برات باز کنم. اگه هیچ چیزی هم درباره طراحی سایت ندونی، با خوندنش یه دید درست و حسابی می‌گیری.اول از همه: طراحی سایت یعنی چی؟وقتی می‌گیم طراحی سایت، منظورمون فقط قشنگ کردن صفحه نیست. طراحی سایت ترکیبیه از دو بخش:Front-End (سمت کاربر): همون چیزایی که کاربر می‌بینه و باهاش کار می‌کنه. مثل رنگ‌ها، دکمه‌ها، متن‌ها، عکس‌ها و کلاً هر چیزی که جلوی چشمته.Back-End (سمت سرور): اون پشت قضیه که کاربر نمی‌بینه ولی همه‌چی اونجا مدیریت می‌شه. مثل ذخیره اطلاعات تو دیتابیس، ورود و خروج کاربرا، پردازش سفارشات تو فروشگاه آنلاین و...حالا اگه بخوای سایت درست کنی، می‌تونی یا فقط با بخش Front-End شروع کنی (مثلاً یه سایت استاتیک ساده بسازی) یا بری سراغ کامل‌تر کردنش و Back-End هم یاد بگیری.https://rassanweb.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/قبل از هر چیزی: هدف سایتت رو مشخص کنببین، مثل این می‌مونه که بخوای خونه بسازی. تا وقتی ندونی این خونه واسه کیه و چه استفاده‌ای داره، نمی‌تونی درست طراحی‌اش کنی.برای سایت هم همینه. باید اول بدونی:می‌خوای وبلاگ شخصی داشته باشی؟می‌خوای نمونه‌کارتو نشون بدی (Portfolio)؟می‌خوای فروشگاه آنلاین بزنی؟یا می‌خوای فقط یه صفحه معرفی باشه؟اینکه هدفت چی باشه، روی همه‌چیز تأثیر می‌ذاره: از انتخاب زبان برنامه‌نویسی گرفته تا نوع طراحی و حتی هاست و دامنه.زبان‌های پایه طراحی سایتیادگیری طراحی سایت مثل یادگیری نوشتن و خوندنه؛ باید حروف الفبا رو بلد باشی تا بعدش بتونی کتاب بنویسی. این الفبا توی طراحی سایت ایناس:HTML: اسکلت و ساختار سایت. بدون HTML، اصلاً چیزی به اسم سایت وجود نداره.CSS: رنگ و لعاب و ظاهر سایت. اینکه دکمه قرمز باشه یا متن وسط‌چین بشه، کار CSS ـه.JavaScript: مغز متفکر سمت کاربر. باعث می‌شه سایتت زنده باشه. مثلاً وقتی روی یه دکمه کلیک می‌کنی و یه منو باز می‌شه، کار جاوااسکریپته.ابزارای مورد نیاز برای شروعبرای طراحی سایت لازم نیست از روز اول بری سراغ ابزارای عجیب‌غریب. همین چندتا چیز پایه رو داشته باشی کافیه:یه ویرایشگر متن خوب: مثل VS Code (خیلی هم محبوبه).یه مرورگر درست و حسابی: مثل Google Chrome یا Firefox برای تست سایتت.یه عالمه صبر و حوصله: چون اول کار ممکنه همه‌چی گیج‌کننده باشه، ولی با تمرین جا می‌افته.مراحل قدم به قدم طراحی یه سایت سادهخب حالا بریم سراغ اصل مطلب. فرض کنیم می‌خوای یه سایت شخصی بسازی. مراحل کار می‌تونه اینطوری باشه:۱. طراحی روی کاغذاول روی یه برگه بکش که دوست داری سایتت چه شکلی باشه. مثلاً بالا لوگو، وسط یه متن معرفی، پایین شماره تماس. این کار خیلی ساده‌ست ولی دیدتو باز می‌کنه.۲. نوشتن کد HTMLیه فایل درست می‌کنی به اسم index.html و توش اسکلت اصلی سایتو می‌نویسی. مثل بخش هدر، محتوا و فوتر.۳. استایل دادن با CSSبعد یه فایل style.css می‌سازی و به سایتت رنگ و لعاب می‌دی. مثلاً بک‌گراند آبی، فونت خوشگل، دکمه‌های گرد و...۴. اضافه کردن جاوااسکریپتاگه بخوای سایتت فقط یه صفحه ثابت نباشه و کاربرا باهاش تعامل داشته باشن، باید جاوااسکریپت اضافه کنی. مثلاً یه منوی کشویی یا فرم تماس داینامیک.۵. تست روی مرورگرسایتتو باز می‌کنی و چک می‌کنی که همه‌چی درست باشه. اگه چیزی به هم ریخته، دوباره کدت رو ویرایش می‌کنی.نکات مهم در طراحی سایترسپانسیو بودن: یعنی سایتت روی موبایل، تبلت و لپ‌تاپ درست نمایش داده بشه. چون بیشتر کاربرا با گوشی میان تو سایت.سرعت بارگذاری: کسی حوصله نداره ۱۰ ثانیه صبر کنه تا سایتت باز شه. عکس‌ها رو بهینه کن و از کدهای اضافی پرهیز کن.کاربرپسندی (UI/UX): سایت باید ساده و قابل فهم باشه. کاربر بدون فکر کردن باید بتونه مسیرشو پیدا کنه.بعد از طراحی: هاست و دامنهخب سایتو ساختی، حالا چطوری بذاریش روی اینترنت؟ اینجوری:دامنه (Domain): همون اسم سایتت. مثلاً example.com.هاست (Host): جایی که فایل‌های سایتت ذخیره می‌شه.بعد از خرید هاست و دامنه، باید سایتتو آپلود کنی تا همه بتونن ببیننش.یادگیری بیشتر و آینده کاریواقعیت اینه که طراحی سایت فقط با HTML و CSS و JS تموم نمی‌شه. اگه بخوای حرفه‌ای بشی، باید چیزای دیگه‌ای هم یاد بگیری:فریم‌ورک‌ها: مثل React، Vue یا Angular برای Front-End.زبان‌های Back-End: مثل PHP، Python (Django/Flask)، یا Node.js.مدیریت دیتابیس: مثل MySQL یا MongoDB.و خب مهم‌تر از همه تمرین کردنه. چون طراحی سایت چیزی نیست که فقط با خوندن یاد بگیری؛ باید با دست خودت کلی پروژه بزنی.جمع‌بندیپس تا اینجای کار فهمیدیم که طراحی سایت مثل ساخت یه خونه‌ست:HTML می‌شه اسکلت.CSS می‌شه دکوراسیون و رنگ‌آمیزی.JavaScript می‌شه امکانات هوشمند.هاست و دامنه هم می‌شن زمین و آدرس خونه.اگه قدم‌به‌قدم جلو بری و عجله نکنی، خیلی زود می‌تونی اولین سایتتو بالا بیاری.

فارسی سازی اعداد با جاوا اسکریپت: تبدیل 123 به ۱۲۳ بدون دردسر!

راسان وب — Tue, 19 Aug 2025 17:10:39 +0330

حتماً برات پیش اومده که بخوای اعداد انگلیسی رو تو وبسایت یا اپلیکیشن خودت به اعداد فارسی تبدیل کنی. شاید اولش فکر کنی «آخه مگه کار سختیه؟» ولی وقتی تعدادشون زیاد می‌شه یا می‌خوای همه جا درست نمایش داده بشه، تازه دردسرش مشخص می‌شه!روش ساده و خودمونی: استفاده از replaceیکی از راحت‌ترین راه‌ها اینه که با یه تابع کوچیک، همه اعداد انگلیسی رو با فارسی جایگزین کنیم. مثلاً:function toPersianDigits(str) { return str.replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d]); } document.querySelectorAll('.persian-number').forEach(el => { el.textContent = toPersianDigits(el.textContent); });حالا فقط کافیه کلاس persian-number رو هر جای سایت که نیاز داری اعداد رو فارسی نمایش بدی بزاری. به همین راحتی کار در اومد.پس دفعه بعد که خواستی یه سایت یا اپ فارسی بسازی، بدون دردسر همه اعدادت فارسی و خوشگل می‌شن!برو حالشو ببر😉

جاوااسکریپت؛ عشق اول و آخر ما (حتی اگه بعضی وقتا اعصاب‌خوردکن باشه!)

راسان وب — Mon, 18 Aug 2025 01:29:38 +0330

خب رفیق، بذار همین اول کار یه اعتراف بکنم: من عاشق جاوااسکریپتم. ❤️آره همون زبونی که بعضیا می‌گن «بچه‌ی پرسر و صدا و شیطونِ دنیای برنامه‌نویسیه». ولی مگه می‌شه ازش دل کند؟چرا عاشقشم؟اول از همه، چون همه‌جا هست!از وب‌سایت گرفته تا موبایل اپلیکیشن، حتی توی سرور و اینترنت اشیا هم گیر میاد. یه جورایی مثل آهنگای قدیمیه: هرجا بری، یه جاشو شنیدی.بعدشم آزادی عملی که بهم می‌ده... می‌تونم خیلی راحت یه دکمه بسازم که وقتی روش کلیک می‌کنی، صفحه برقصه یا رنگاش مثل دیسکو عوض بشه. این قدرته دیگه!ولی بذار رک بگم...جاوااسکریپت یه جاهایی هم آدمو می‌ذاره سر کار.مثلاً وقتی با == و === بازی درمیاره، یا وقتی وسط کار یهو یه undefined می‌ندازه جلوت و بهت می‌گه: «برو حالا خودت درستش کن!» 😅ولی خب، عشق اگه بی‌دردسر باشه که عشق نیست!چرا ازش دل نمی‌کنم؟چون با همه‌ی این شیطنتاش، یه دنیا کتابخونه و فریم‌ورک داره که آدمو خوشحال می‌کنه. ری‌اکت، ویو، نود... هرکدومشون مثل بچه‌های باحال فامیلن که همیشه یه کار جدید بلدن.در کل، جاوااسکریپت همون عشقیه که گاهی اعصابتو خورد می‌کنه، ولی آخرش باز برمی‌گردی بغلش.چون تهش می‌دونی: بدون اون، دنیای وب این‌قدر زنده و هیجان‌انگیز نبود.

فرانت‌اند یا بک‌اند؛ کدوم جذاب‌تره؟

راسان وب — Sat, 16 Aug 2025 01:21:05 +0330

ببین، وقتی پای برنامه‌نویسی میاد وسط، خیلی زود به یه دو راهی می‌رسی:یا می‌ری سمت فرانت‌اند، جایی که کاربر هر روز باهاش سر و کار داره. یا می‌ری سمت بک‌اند، جایی که همه چیز پشت پرده می‌چرخه.فرانت ، بکفرانت‌اند؛ دنیای رنگ و لعابفرانت‌اند همون چیزیه که کاربر می‌بینه. وقتی یه سایت باز می‌کنی و با کلیک، اسکرول یا یه انیمیشن خوشگل حال می‌کنی، بدون که یه فرانت‌اندکار پشتش نشسته.اینجا خیلی چیزا مهمه: طراحی، تجربه کاربری (UX)، و این که سایت یا اپلیکیشن روون و جذاب باشه.از جذابیتاش اینه که نتیجه کارت رو سریع می‌بینی. یه خط کد می‌نویسی، ریفرش می‌کنی، بوم! تغییر جلوی چشمته. این حس واقعاً انگیزه می‌ده.بک‌اند؛ مغز پشت ماجرابک‌اند شاید به چشم نیاد، ولی قلب تپنده‌ی هر برنامه‌ست. اینجا با دیتابیس، سرور، امنیت و منطق برنامه سر و کار داری.مثلاً وقتی تو یه فروشگاه اینترنتی خرید می‌کنی، اینکه موجودی کم بشه، قیمت‌ها درست حساب شن و پرداخت امن باشه، همه کار بک‌اندیه.جذابیت بک‌اند کجاست؟ این که حس می‌کنی داری یه سیستم هوشمند می‌سازی. شاید جلوش چشمگیر نباشه، ولی وقتی همه‌چی درست کار می‌کنه، یه حال خاصی داره.حالا کدوم جذاب‌تره؟راستش بستگی به خودت داره.اگه از طراحی، رنگ و لعاب و تعامل مستقیم با کاربر خوشت میاد برو سمت فرانت‌اند.اگه عاشق منطق، حل مسئله، و کارای پشت پرده‌ای که سیستم رو زنده نگه می‌داره هستی بک‌اند دنیای توئه.خیلیا می‌گن: "بابا، فول‌استک شو دیگه! هم فرانت، هم بک." ولی خب برای شروع بهتره یکی رو انتخاب کنی که باحال‌تر به نظر میاد، بعد کم‌کم می‌تونی دومی رو هم یاد بگیری.جمع‌بندی رفیقونهفرانت‌اند مثل اینه که ظاهر خفن ماشین رو طراحی کنی؛ چراغای LED، رینگ اسپرت، رنگ براق.بک‌اند مثل موتوره؛ چیزی که ماشینو واقعاً حرکت می‌ده.هر دوش جذابه، فقط باید ببینی بیشتر حال می‌کنی ماشینو برق بندازی یا موتورش رو تیون کنی.