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

FitVids-for-WordPress

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

responsive-video

FitVids یک افزونه ی jQuery است که به شما اجازه می دهد تا ویدیوهای جایگزین شده ی خود را، واکنشگر کنید.
اگر می خواهید آن را در سایت وردپرس خود استفاده کنید، تنها کاری که باید انجام دهید این است که افزونه یFitVids for WordPress را نصب و فعال سازی کنید. بعد از فعال سازی، باید به نمایش » FitVids رفته و کلاس انتخاب کننده ی CSS را وارد کنید. وردپرس به آن مقاله به طور خودکار class .postاضافه می کند،

fitvids-for-wordpress

بنابراین شما می توانید به راحتی از آن استفاده کنید. تغییرات را ذخیره کنید و پیش نمایش سایت را اجرا کنید. شما باید اندازه ی صفحه ی نمایش مرورگر را دوباره با فیلم تنظیم کنید.

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

اگر نمی خواهید برای وردپرس، افزونه ی FitVids نصب کنید، می توانید افزونه ی FitVids jQuery را به صورت دستی اضافه کنید. اولین کاری که باید انجام دهید، دانلود و extract کردن افزونه ی FitVids jQuery در کامپیوترتان است. حالا باید پوشه ی استخراج شده ی FitVids.js-master را در پوشه js تم خود آپلود کنید.
شما باید با استفاده از یک سرویس گیرنده FTP مثل Filezilla به وب سایت خود متصل شوید و فولدر تم خود را باز کنید. این امکان وجود دارد که تم وردپرس شما پوشه ی js نداشته باشد. اگر این پوشه وجود نداشت، پس باید یکی ایجاد کنید و سپس پوشه ی FitVids.js-master را از کامپیوتر خود آپلود کنید.
در داخل پوشه ی js، باید یک فایل جدید بسازید و نام آن را بگذارید FitVids.js. این فایل را ویرایش کنید و کد زیر را در آن کپی کنید.

(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post").fitVids();
  });

  })(jQuery);

کد بالا به FitVid ها می گوید که به دنبال کلاس انتخاب کننده ی .post CSS بگردد. حالا که FitVid ها آماده شده اند، وقت آن است که جاوا اسکریپتها به درستی در تم وردپرس خود اضافه کنید. به سادگی، کد زیر را در فایلfunctions.php تم خود کپی کنید:

wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE);

wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE);

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

  اسلایدر رسپانسیو فارسی

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

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

330,847 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 4 سال عضو همیار وردپرس

    سلام .

    یه پلاگین میخوام که ویدئو های سایتمو درست مثل microsoft edge نمایش بده. یعنی وقتی microsoft edge اجرا میکنم و ویدئو ها تو صفحه اصلی نمایش داده میشن دقیقا به همون صورت و همون استایل .
    ممنون میشم راهنمایی کنید.
    مرسی

  2. با سلام
    یه افزونه میخام وقتی کاربر مبلغ رو پرداخت میکنه ، بعد از پرداخت به سایت برگردهو فیلم مورد نظر نمایش داده بشه و بتونه ببینه

    یعنی نمایش فیلم بعد از پرداخت

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

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

    • 6 سال عضو همیار وردپرس

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

    • سلام بهار خانم ممنون از پاسخگویی شما میشه بگید باید از چه تگی استفاده کرد؟ یک راهنمای کوچیک میخواستم ممنون

    • 6 سال عضو همیار وردپرس

      سلام
      این مطلب رو مشاهده کنید
      الگوی ریسپانسیو

    • سلام خیلی لطف کردید / ولی متاسفانه مشکلی را حل نکرد / منظور من رو متوجه نشدید / من میخوام وقتی عرض صفحه کم میشه نوشته محدود بشه / یعنی مثلا اگه در حالت عادی ۲۰۰ کارکتر نوشته دارم  ، وقتی عرض صفحه کم میشه بشه ۱۰۰ کارکتر

  4. سلام خسته نباشید هاست من جای زیادی نداره همش 500 مگه من اپلود فیلمم رو روی آپارات انجام میدم از کود اسکریپت آپارات برای نمایش فیلم در کنار صفحه ام استفاده میکنم بد نیست به بقیه بچه ها هم توصیه میکنم آپارات اصلا دوست نداشتم و ندارم ولی خب تنها جایی که اطلاعات ادم راحت و مجانی و خوب پخش میشه و ف نمیشه و …
    ببخشید سر شما رو درد اوردم سوالم این بود:
    *** چه طور می تونم لینک دانلود ویدیو رو از سایت آپارات روی پست هام بگذارم چیزی شبیه به سایت های خبری که پلیر شیک و قشنگ دارند من الان فقط لینک دانلود می گذارم لینک نمایش چی کار کنم

  5. میخاستم داخل سایتم فایل ویدئویی قرار بدم (قالب رمال) ولی اصلا با هیچ افزونه ای موفق نشدم در ضمن میخام فایل آپلود شده روی هاست خودم رو نمایش بذارم.

  6. انجام دادم ولی درست نشد

  7. سلام خدمت صالح عزیز
    داخل index.php کد the_content(”); رو قرار بدید مشکل حل میشه

  8. سلام
    بنده توی طراحی تازه کارم
    یک قالب طراحی کردم که وقتی روی لینک ادامه ی مطلب کلیک می کنم ، در صفحه ی نوشته فقط تصویر شاخص نمایش داده می شه و هیچ متنی توش وجود نداره ، در داخل کد single.php هم عبارت : را قرار دادم
    لطفا کمک کنید
    این هم آدرس صفحه ی اصلی:
    http://kabinetmohammadi.ir/
    این هم آدرس صفحه ی یکی از نوشته ها:

    http://kabinetmohammadi.ir/%D8%AA%D8%B9%D9%85%DB%8C%D8%B1-%D9%85%D8%A8%D9%84%D9%85%D8%A7%D9%86/

    لطفا کمکم کنید

  9. با سلام من یک قالب بسیار شیک و جذاب میخوام برای سایتم که بین سایت های اندروید هر اول رو از نظر ظاهر بزنه و اینکه تو تمام مرورگر ها و موبایل هم درست نمایش داده بشه هزینه طراحی آن را بفرمایید؟
    http://www.takandroid.com

مطالب زیر را حتما بخوانید

    پوسته فارسی شرکتی BizSphere

    BizSphere یک پوسته رایگان واکنش‌گرا (Responsive)  است که مناسب سایت‌های شرکتی و تجاری می‌باشد. دو قالب‌بندی برای صفحه اول به شما ارائه می‌دهد که...

    اسلایدر رسپانسیو فارسی

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

دوره‌های آموزشی