كيفية التقاط لقطات شاشة من المتصفح وعرضها تلقائيًا في WordPress

الصور ولقطات الشاشة هي عنصر أساسي في أي مدونة WordPress. على وجه الخصوص ، تمكنك لقطات الشاشة من إبراز الجوانب الرئيسية للصفحات الأخرى. ومع ذلك ، قد يكون من الصعب التقاط لقطات شاشة مثالية للمتصفح وإضافتها إلى مشاركاتك. بينما يمكنك إنجاز المهمة اعتمادًا على نظام التشغيل الخاص بك (OS) ، فإن التقاط لقطات شاشة باستمرار يمثل تحديًا.

أدخل المكوّن الإضافي Browser Screenshots. يتيح لك ذلك التقاط لقطة شاشة لأي موقع ويب ، دون مغادرة محرر WordPress. إذا شعرت بوخز في أذنيك ، فمن المحتمل أن ترغب في مواصلة القراءة.

دعنا نتحقق من كيفية عملها!

اشترك في قناتنا على اليوتيوب

مقدمة إلى البرنامج المساعد لقطات شاشة المتصفح

يمكن القول إن لقطات شاشة المتصفح هي مكون إضافي متخصص يستحق مكانًا على موقع الويب الخاص بك. يمكّنك من التقاط لقطات شاشة ديناميكية للمتصفح لأي صفحة دون مغادرة محرر WordPress. ينطبق هذا على كل من المحررين الكلاسيكيين والمحررين ، اعتمادًا على خيارك المفضل. هذا على عكس الحلول الأصلية لنظام التشغيل ، والتي تتطلب منك فتح نوافذ متصفح جديدة وتحسين صورك بشكل أكبر ، خارج النظام الأساسي.

إذا كنت تستخدم المحرر الكلاسيكي ، فإن لقطات شاشة المتصفح تمكنك من استخدام رمز قصير مخصص لإنشاء اللقطات التي تريدها. يمكنك إضافة عدة لقطات شاشة داخل أي صفحة أو منشور ، وينطبق الشيء نفسه على محرر البلوك.

نظرًا لأن المكون الإضافي ينشئ لقطات شاشة ديناميكيًا ، فهو مثالي للمواقف التي لا تريد فيها استخدام لقطات قديمة للمحتوى الخاص بك. إذا كانت لديك صفحة أو منشور يتضمن رمزًا قصيرًا أو كتلة من لقطات شاشة المستعرض ، فسيشاهد الزوار لقطة شاشة في الوقت الفعلي. هذا اقتراح محير لأنواع معينة من المحتوى.

بغض النظر عن الطريقة التي تستخدمها ، يمكّنك المكون الإضافي أيضًا من تخصيص دقة لقطات شاشة المتصفح التي تم التقاطها. يمكنك أيضًا إضافة نص بديل ونص إلى صورك ، بالإضافة إلى فئات CSS المخصصة.

ومع ذلك ، من المهم أن نفهم أن هذا المكون الإضافي يأخذ فقط لقطات شاشة متصفح "في الجزء المرئي من الصفحة". هذا يعني أن المناطق التي تحتاج إلى التمرير إليها لن تظهر. سيعتمد حجم هذه المنطقة على المعلمات التي تقوم بتكوينها لكل لقطة شاشة من المتصفح ، وستتعلم كيفية القيام بذلك لاحقًا.

دلائل الميزات:

• استخدم الرموز القصيرة أو الكتل لأخذ لقطات مخصصة لأي موقع ويب موجود في نافذة المتصفح.
• أضف لقطات شاشة للمتصفح داخل المحتوى الخاص بك دون الحاجة إلى التقاطها أو تحميلها يدويًا.
• تخصيص دقة لقطات شاشة المتصفح الخاص بك.
• أضف فئات CSS مخصصة إلى الصور التي ينشئها المكون الإضافي.
• أضف روابط ونص بديل إلى صورك.

السعر: مجاني | معلومات اكثر

كيفية استخدام البرنامج الإضافي لـ Browser Screenshots (مقاربتان)

الآن ، أنت تعرف بالفعل كيفية عمل المكون الإضافي Browser Screenshot ، لذلك دعونا نناقش كيفية استخدامه. تعتبر الرموز القصيرة جزءًا أساسيًا من المكون الإضافي ، لذلك دعونا نلقي نظرة على هذا أولاً.

1. استخدم الرموز القصيرة لإنشاء لقطات شاشة للمتصفح الديناميكي

يمكّنك المكون الإضافي Browser Screenshots من استخدام الرمز المختصر المخصص التالي لإنشاء لقطات متصفح ديناميكية:

[browser-shot url="elegantthemes.com" width="600" height="400"]

يتضمن الرمز القصير معلمتين أساسيتين: العرض والارتفاع . تستخدم كلا المعلمتين قيم البكسل ، والدقة الافتراضية التي يستخدمها البرنامج المساعد لالتقاط اللقطات هي 600 × 400 . بالطبع ، سترغب أيضًا في إضافة عنوان URL المحدد الذي تريد التقاط لقطة شاشة له إلى الرمز القصير أيضًا.

بغض النظر عما إذا كنت تستخدم Block Editor أو Classic Editor ، فإن الرمز القصير سيعرض لقطة شاشة مشابهة لما يلي:

ومع ذلك ، تتيح لك لقطات شاشة المتصفح أيضًا تعيين العديد من المعلمات المخصصة. إلى جانب العرض والارتفاع ، يشمل ذلك ما يلي:

• Alt: تتيح لك هذه المعلمة تعيين نص بديل للشاشة.
• الرابط: يمكنك اختيار أي رابط بين نقاط الصورة نحو استخدام هذه المعلمة (والتي يمكن أن تختلف عن المكان الذي نشأت منه اللقطة).
• الهدف: تتيح لك هذه المعلمة التحكم في فتح روابط الصور في نافذة جديدة أم لا.

على سبيل المثال ، إليك ما سيبدو عليه الرمز المختصر الكامل بما في ذلك جميع المعلمات:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]

يمكنك أيضًا استخدام الرموز القصيرة لإضافة تسميات توضيحية يدويًا:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]Here's the caption[/browser-shot]

في معظم الحالات ، فإن أهم معلمتين ستستخدمهما هما العرض والارتفاع . لن يؤدي استخدام نفس القيم لجميع لقطات شاشة المتصفح التي تلتقطها غالبًا إلى الحصول على أفضل النتائج ، لذلك سترغب في تخصيص معلماتك لتناسب المحتوى.

2. استخدم الكتل لإضافة لقطات شاشة إلى موقع الويب الخاص بك

إذا كنت تستخدم Block Editor ، فإن المكوّن الإضافي Browser Screenshots سيمنحك الوصول إلى كتلة جديدة تسمى لقطات المستعرض :

سيؤدي تحديد الحظر إلى مطالبة المكون الإضافي بسؤالك عن موقع الويب الذي تريد استخدامه لإنشاء لقطة شاشة. في هذا المثال ، نستخدم الصفحة الرئيسية لأمازون بالولايات المتحدة:

بمجرد النقر فوق " العثور على الصورة" ، سيقوم المكون الإضافي "بأخذ" لقطة شاشة وعرضها داخل "محرر الكتلة":

شيء واحد يجب مراعاته هو أن المكون الإضافي لا يمكنه الوصول إلى الصفحات الخاصة أو تسجيل الدخول إليها نيابة عنك. بالنسبة لتلك الأنواع من لقطات شاشة المتصفح ، سيتعين عليك القيام بالعمل القذر بنفسك.

بالانتقال إلى يمين لقطة الشاشة هذه ، يمكنك رؤية علامة التبويب تفاصيل الحظر . يمكّنك هذا من تعديل جميع المعلمات التي ناقشناها سابقًا دون الحاجة إلى إضافة رموز مختصرة مخصصة.

يعد تعديل عرض لقطات شاشة متصفحك وارتفاعها أسهل بكثير باستخدام Block Editor. هذا لأن المحرر يمكّنك من التحقق من المعاينة عن طريق الضغط على زر تحديث الصورة أسفل معلمات الارتفاع والعرض:

إذا قارنت كلا المثالين ، يمكنك أن ترى كيف أن التغيير في الدقة يعدل المنطقة التي لقطات شاشة البرنامج المساعد لك. علاوة على ذلك ، يمكنك أيضًا إضافة روابط مخصصة إلى لقطات الشاشة الخاصة بك ، وتهيئة ما إذا كانت تفتح في علامة تبويب جديدة أم لا ، وتعيين فئات CSS مخصصة هنا.

استنتاج

إذا قمت بتضمين لقطات شاشة للمتصفح بانتظام في محتوى مدونتك ، يمكن أن يوفر لك المكوّن الإضافي Browser Screenshots الكثير من الوقت. إنه مكون إضافي مناسب إلى حد ما ، ولكن إذا كنت من بين الجمهور الذي ذكرناه ، فسوف يجعل تحرير المنشورات أسهل كثيرًا.

باستخدام لقطات شاشة المتصفح ، يمكنك إضافة لقطات شاشة لمتصفحك باستخدام رمز قصير بسيط أو محرر Block. بالنسبة للرموز القصيرة ، يشتمل المكون الإضافي على العديد من المعلمات التي تتيح لك تخصيص لقطات الشاشة ، مثل العرض والارتفاع وحتى البديل (للنص البديل).

هل لديك أي أسئلة حول كيفية استخدام المكوّن الإضافي Browser Screenshots؟ دعنا نتحدث عنها في قسم التعليقات أدناه!

الصورة المصغرة للمادة VectorMine / shutterstock.com