آیا میدانید شما میتوانید به صورت "کاملا رایگان" سایت ، محصول خدمات و... خود را در پی سی وب معرفی کنید ؟

فرصت را از دست ندهید
+ پاسخ به موضوع
نمایش نتایج: از 1 به 2 از 2

موضوع: آموزش ساخت گالری تصاویر محصولات بدون افزونه

  1. P30web آواتار ها
    P30web
    مدیر کل سایت
    مدیر کل سایت
    Oct 2015
    وب پارسی
    8,084
    7673
    1,777
    5,213
    36

    آموزش ساخت گالری تصاویر محصولات بدون افزونه

    سلام

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

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

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

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

    نتیحه کارم شد این :


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



    -----



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

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

    کد HTML:
    /* Galery img right product */
    div#gallery-1:nth-of-type(1) {position: absolute;top: 2px;left: -30%;width: 25%;margin-top: 16px;}
    div#gallery-1:nth-of-type(1) br {clear: inherit !important;}
    div#gallery-1:nth-of-type(1) br:last-child {clear: both !important;}
    #gallery-1 .gallery-item {margin: 0px !important;float: none !important;}
    #gallery-1 img {float: right !important;width: 40px !important;height: 40px !important;margin-left: 4px;margin-bottom: 4px;}
    div#gallery-1:nth-of-type(1) dt {width: 100%;background: Red;}
    div#gallery-1:nth-of-type(1) dl:nth-of-type(1) img {width: 250px !important;height: 220px !important;margin-bottom: 8px;}
    با همین قدر کد تونستیم یک گالری خیلی پیشرفته رو بسازیم . کد های بالا مطئنا به تنهایی برایتان مفید نخواهد بود و در هر قالبی این کد ها میتونه متفاوت باشه ولی برای اون دسته از دوستانی که در اینده ممکن است بخواهند از این شیوه استفاده کنم ، این توضیحات رو لازم مدونم ارائه کنم :

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

    خوب امیدوارم لذت برده باشد .

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

    براتون بهترین ها رو از طرف تیم پی سی وب آرزومندم .
    حضرت امام علی (علیه السّلام) فرموده اند : آنکس که بیش از حد خود، از مردم تمنا کند سزاوار محرومیت و ناکامی است.


    #1 ارسال شده در تاريخ 09-25-2016 در ساعت 06:56 PM

  2. کاربر مقابل پست P30web عزیز را پسندیده است .


  3. vahid4251 آواتار ها
    vahid4251
    کاربر تازه وارد
    کاربر تازه وارد
    Nov 2017
    1
    10
    0
    0
    میشه آموزش کامل رو بزارید من هر چقدر کار کردم جواب نداد ممنون میشم یکم توضیحات کامل بدین
    #2 ارسال شده در تاريخ 11-14-2017 در ساعت 10:35 PM

+ پاسخ به موضوع

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

مجوز های ارسال و ویرایش

  • شما می توانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را دارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Designed With Cooperation

Of Creatively