فیلم ها یکی از بهترین راه ها برای افزایش تعامل کاربر هستند. اخیراً یکی از کاربران ما از ما در مورد روشی برای ایجاد پوشش های دکمه اشتراک گذاری در فیلم های مشابه سایت محبوب UpWorthy سorthyال کرده است. در این مقاله ، ما به شما نشان خواهیم داد که چگونه دکمه های اشتراک را به عنوان همپوشانی در فیلم های YouTube در وردپرس اضافه کنید.
نمونه ای از شکل ظاهری آن:
افزودن دکمه های اشتراک به عنوان همپوشانی در ویدئوهای YouTube h4>
روش های مختلفی برای انجام این کار وجود دارد. در اکثر راه ها لازم است هر بار که ویدیویی را اضافه می کنید ، بیت هایی از کد HTML را جای گذاری کنید. به جای انجام این کار ، ما تصمیم گرفتیم یک کد کوتاه ایجاد کنیم که این اثر پوشش را خودکار کند.
نگران نباشید ، کد زیر را در یک افزونه اختصاصی سایت یا تم خود فایل Functions.php :
/// دکمه های همپوشانی اشتراک گذاری YouTube WPBeginner
تابع wpb_yt_buttons ($ atts) {
// شناسه ویدیو را از کد کوتاه دریافت کنید
عصاره (کد کوتاه_اتس (آرایه (
'video' => "
) ، $ atts)) ؛
// نمایش فیلم
$ string = ' '؛
// دکمه اشتراک گذاری فیس بوک را اضافه کنید
$ string. = ' '؛
// بستن محفظه ویدئو
$ string. = ''؛
// خروجی برگشتی
رشته $ را برگردانید ؛
}
// افزودن کد کوتاه
add_shortcode ('wpb-yt'، 'wpb_yt_buttons')؛
این کد یک کد کوتاه ایجاد می کند که به طور خودکار پیوندهای توییتر و اشتراک فیس بوک را به فیلم های شما اضافه می کند. این دکمه ها فقط زمانی قابل مشاهده هستند که کاربر ماوس خود را روی ویدیو بیاورد. همچنین می توانید از هر کانال رسانه اجتماعی دیگر نیز استفاده کنید.
برای استفاده از این کد کوتاه ، تنها کاری که باید انجام دهید این است که شناسه ویدیوی YouTube را به این صورت در کد کوتاه اضافه کنید:
[wpb-yt video = "qzOOy1tWBCg"]
می توانید شناسه ویدیوی YouTube را از رشته URL دریافت کنید. مانند این:
اکنون وقتی ویدیویی را اضافه می کنید ، می توانید ویدیوی YouTube و پیوندهای متنی ساده خود را برای به اشتراک گذاشتن ویدیو در Facebook یا Twitter مشاهده کنید. مشاهده خواهید کرد که این پیوندها به هیچ وجه حالت داده نشده اند.
بنابراین اجازه می دهد برای ایجاد دکمه ها این پیوندها را سبک کنید ، بنابراین کمی بهتر به نظر می رسد. ما همچنین این دکمه ها را پنهان کرده و فقط هنگامی که کاربر ماوس خود را بر روی ظرف ویدیو قرار می دهد ظاهر می شوند. برای انجام این کار CSS زیر را به تم کودک .
# اشتراک-فیلم-همپوشانی {
موقعیت: نسبی؛
راست: 40 پیکسل
بالا: -190px؛
نوع سبک-نوع: هیچ؛
نمایش: بلوک؛
تیرگی: 0؛
فیلتر: آلفا (کدورت = 0) ؛
-webkit-transfer: opacity .4s، top .25s؛
-moz-transfer: opacity .4s، top .25s؛
-o-transfer: opacity .4s، top .25s؛
انتقال: کدورت .4s ، بالا .25s ؛
z-index: 500؛
}
# اشتراک-ویدیو-همپوشانی: شناور {
تیرگی: 1؛
فیلتر: آلفا (کدورت = 100) ؛
}
.share-video-overlay li {
حاشیه: 5px 0px 5px 0px؛
}
#فیس بوک {
رنگ: #ffffff؛
background-color: # 3e5ea1؛
عرض: 70 پیکسل
بالشتک: 5px؛
}
.facebook a: link، .facebook a: active، .facebook a: بازدید شده {
رنگ: #fff؛
دکوراسیون متن: هیچ؛
}
#توییتر {
background-color: # 00a6d4؛
عرض: 70 پیکسل
بالشتک: 5px؛
}
.twitter a ، .twitter a: link ، .twitter a: active ، .twitter a: بازدید شده ، .twitter a: hover {
رنگ: #FFF؛
دکوراسیون متن: هیچ؛
}
این همه است. اکنون باید دکمه های اشتراک گذاری روی فیلم های YouTube خود را در وردپرس قرار دهید.
افزودن دکمه های اشتراک گذاری به عنوان همپوشانی برای لیست های پخش ویدیوی YouTube در وردپرس h4>
پس از انتشار این مقاله ، بسیاری از خوانندگان ما پرسیدند که چگونه می توان این کد را اصلاح کرد تا برای لیست های پخش YouTube و همچنین فیلم ها کار کند. اگر فیلم های YouTube و همچنین لیست پخش را در سایت وردپرس خود تعبیه کرده اید ، در عوض باید از این کد استفاده کنید.
/ *
* دکمه های همپوشانی سهم WPBeginner
* در فیلم ها و لیست های پخش YouTube
* /
تابع wpb_yt_buttons ($ atts) {
// شناسه های ویدیو و لیست پخش را از کد کوتاه دریافت کنید
عصاره (کد کوتاه_اتس (آرایه (
'video' => "،
'playlist' => "،
) ، $ atts)) ؛
// بررسی کنید که آیا شناسه لیست پخش با کد کوتاه ارائه شده است
اگر (! $ لیست پخش == ""):
// نمایش لیست پخش فیلم
$ string = ' '؛
// دکمه فیس بوک را اضافه کنید
$ string. = ' '؛
// بستن محفظه ویدئو
$ string. = ''؛
// در صورت عدم ارائه شناسه لیست پخش
دیگر:
// نمایش فیلم
$ string. = ' '؛
// دکمه فیس بوک را اضافه کنید
$ string. = ' '؛
// بستن محفظه ویدئو
$ string. = ''؛
endif
// خروجی برگشتی
رشته $ را برگردانید ؛
}
// افزودن کد کوتاه
add_shortcode ('wpb-yt'، 'wpb_yt_buttons')؛
با استفاده از کد بالا می توانید لیست پخش با دکمه های اشتراک روی هم اضافه کنید. برای نمایش لیست پخش خود ، باید شناسه ویدیو و شناسه لیست پخش را در کد کوتاه مانند این ارائه دهید:
[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]
با مراجعه به لیست پخش در YouTube و کپی کردن شناسه لیست از URL ، می توانید شناسه های ویدیو و لیست پخش خود را بدست آورید:
افزودن پیوند ارسال WordPress در همپوشانی دکمه اشتراک در ویدئوهای YouTube h4>
بعد از انتشار این مقاله ، برخی از کاربران ما درخواست کردند که دوست دارند دکمه های اشتراک پیوند پست وردپرس خود را به جای پیوند ویدیوی YouTube به اشتراک بگذارند. برای این کار باید لینک ویدیو را در دکمه های اشتراک با لینک ثابت پیوند وردپرس جایگزین کنید. از این کد در توابع.php یا افزونه اختصاصی سایت خود استفاده کنید:
/// دکمه های همپوشانی اشتراک گذاری WPBeginner در YouTube
تابع wpb_yt_button ($ atts) {
// شناسه ویدیو را از کد کوتاه دریافت کنید
عصاره (کد کوتاه_اتس (آرایه (
'video' => "
) ، $ atts)) ؛
// نمایش فیلم
$ string = ' '؛
// دریافت لینک ثابت لینک و رمزگذاری URL
$ permalink_encoded = urlencode (get_permalink ()) ؛
// دکمه اشتراک گذاری فیس بوک را اضافه کنید
$ string. = ''؛
// بستن محفظه ویدئو
$ string. = ''؛
// خروجی برگشتی
رشته $ را برگردانید ؛
}
// افزودن کد کوتاه
add_shortcode ('wpb-yt'، 'wpb_yt_buttons')؛
در صورت تمایل می توانید CSS یا کد کوتاه را برای رفع نیازهای خود اصلاح کنید. برای بهینه سازی بیشتر فیلم های خود ، می توانید عنوان فیلم های YouTube پاسخگو باشند. همچنین می توانید خاموش کردن فیلم های مرتبط که در انتهای ویدیو نشان داده می شوند. یا حتی تصاویر برجسته از تصاویر کوچک ویدیوی YouTube .
امیدواریم که این مقاله به شما کمک کند دکمه های اشتراک گذاری سفارشی را به عنوان همپوشانی روی فیلم های YouTube در وردپرس اضافه کنید. با گذاشتن یک نظر در زیر ، به ما اطلاع دهید که می خواهید کدام کانال های رسانه های اجتماعی را در مورد فیلم های خود اضافه کنید.
منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-add-share-buttons-as-overlay-youtube-videos-in-wordpress/.